Merge pull request #2740 from appirio-tech/hotfix/horizontal-layout-for-questions

[Hotfix] [PROD] - horizontal layout for questions

Author: RishiRajSahu

src/projects/detail/components/FileListContainer.jsx

@@ -42,6 +42,7 @@ class FileListContainer extends Component {
       canManageAttachments,
       removeAttachment,
       updateAttachment,
+      additionalClass,
     } = this.props
 
     files.forEach(file => {
@@ -55,7 +56,7 @@ class FileListContainer extends Component {
     })
 
     return (
-      <div>
+      <div className={additionalClass}>
         <FileList files={files} onDelete={removeAttachment} onSave={updateAttachment} canModify={canManageAttachments}/>
         <AddFiles successHandler={this.processUploadedFiles} storePath={attachmentsStorePath} category={category} />
       </div>
@@ -77,6 +78,11 @@ FileListContainer.propTypes = {
   addAttachment: PropTypes.func.isRequired,
   updateAttachment: PropTypes.func.isRequired,
   removeAttachment: PropTypes.func.isRequired,
+  additionalClass: PropTypes.string
+}
+
+FileListContainer.defaultProps = {
+  additionalClass: '',
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(FileListContainer)

src/projects/detail/components/SpecQuestionList/SpecQuestionList.jsx

@@ -1,36 +1,66 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
+import _ from 'lodash'
 require('./SpecQuestionList.scss')
 
-const SpecQuestionList = ({ children }) => {
+const SpecQuestionList = ({ children, layout, additionalClass }) => {
+  const directionClass = _.get(layout, 'direction', '')
+
   return (
-    <div className="spec-question-list">
+    <div className={'spec-question-list ' + directionClass + ' ' + additionalClass}>
       { children }
     </div>
   )
 }
 
 SpecQuestionList.propTypes = {
-  children: PropTypes.any.isRequired
+  children: PropTypes.any.isRequired,
+  /**
+   * Layout of questions
+   */
+  layout: PropTypes.object,
+
+  /**
+   * additional class
+   */
+  additionalClass: PropTypes.string
+}
+
+SpecQuestionList.defaultProps = {
+  additionalClass: ''
 }
 
-const SpecQuestionListItem = ({icon, title, description, children, required, hideDescription}) => (
-  <div className="spec-question-list-item">
+const SpecQuestionListItem = ({icon, title, type, additionalClass, description, children, required, hideDescription}) => {
+  let shouldShowTitle = true
+  let shouldShowRequire = false
+  if (additionalClass.includes('spacing-gray-input') && (type === 'textinput')) {
+    shouldShowTitle = false
+    shouldShowRequire = true
+  }
+  return (<div className={'spec-question-list-item ' + additionalClass }>
     {icon && <div className="icon-col">{icon}</div>}
     <div className="content-col">
-      <h5>{title}{required ? <span>*</span> : null}</h5>
+      {shouldShowTitle && (<h5>{title}{required ? <span>*</span> : null}</h5>)}
       {children && <div className="child-component">{children}</div>}
       {!hideDescription && <p className={cn({bigger: !icon})}>{description}</p>}
+      {shouldShowRequire &&
+      <div className="require-desc">{required ? 'Required' : 'Optional'}</div>}
     </div>
-  </div>
-)
+  </div>)
+}
 
 SpecQuestionListItem.propTypes = {
   icon: PropTypes.any,
   title: PropTypes.any.isRequired,
   description: PropTypes.any,
-  children: PropTypes.any
+  children: PropTypes.any,
+  type: PropTypes.string,
+  additionalClass: PropTypes.string
+}
+
+SpecQuestionListItem.defaultProps = {
+  additionalClass: '',
 }
 
 SpecQuestionList.Item = SpecQuestionListItem

src/projects/detail/components/SpecQuestionList/SpecQuestionList.scss

@@ -2,6 +2,13 @@
 
 :global {
   .spec-question-list {
+    &.horizontal {
+      display: flex;
+      flex-direction: row;
+    }
+    &.horizontal.codes .spec-question-list-item {
+      margin-right: 10px;
+    }
   }
 
   .spec-question-list-item {
@@ -12,6 +19,56 @@
       margin-top: 9 * $base-unit;
     }
 
+    .require-desc {
+      @include roboto;
+      font-size: 12px;
+      line-height: 20px;
+      color: #808080;
+      font-style: italic;
+    }
+
+    .spacing-gray-input {
+      width: 100px;
+
+      input {
+        background-color: #fafafb;
+        border: none;
+        border-bottom: 1px solid #959596;
+        color: #404041;
+        margin: 0;
+
+        @include placeholder {
+          @include roboto;
+          color: $tc-gray-30;
+          text-transform: none;
+          font-style: italic;
+          font-size: $base-unit*3;
+          line-height: $base-unit*4;
+        }
+        &:focus {
+          background: $tc-dark-blue-10 !important;
+          border: none;
+          border-bottom: 1px solid $tc-dark-blue-70;
+          box-shadow: none;
+          color: $tc-gray-80;
+        }
+        &:hover {
+          border: none;
+          border-bottom: 1px solid $tc-dark-blue-70;
+          box-shadow: none;
+        }
+        &:disabled {
+          background: $tc-gray-neutral-light;
+          border-bottom: 1px solid $tc-gray-40;
+          color: $tc-gray-30;
+        }
+        &.error{
+          border: 1px solid $tc-red-70!important;
+          background: $tc-gray-neutral-light!important;
+        }
+      }
+    }
+
     .icon-col {
       padding-top: 3px;
       padding-right: 10px;

src/projects/detail/components/SpecQuestions.jsx

@@ -30,7 +30,7 @@ const getIcon = icon => {
 }
 
 // { isRequired, represents the overall questions section's compulsion, is also available}
-const SpecQuestions = ({questions, project, dirtyProject, resetFeatures, showFeaturesDialog, showHidden }) => {
+const SpecQuestions = ({questions, layout, additionalClass, project, dirtyProject, resetFeatures, showFeaturesDialog, showHidden }) => {
 
   const renderQ = (q, index) => {
     // let child = null
@@ -71,6 +71,9 @@ const SpecQuestions = ({questions, project, dirtyProject, resetFeatures, showFea
       })
     }
 
+    let additionalItemClass = ''
+    const spacing = _.get(q, 'spacing', '')
+
     let ChildElem = ''
     switch (q.type) {
     case 'see-attached-textbox':
@@ -83,7 +86,11 @@ const SpecQuestions = ({questions, project, dirtyProject, resetFeatures, showFea
       break
     case 'textinput':
       ChildElem = TCFormFields.TextInput
-      elemProps.wrapperClass = 'row'
+      elemProps.wrapperClass = 'row ' + spacing
+      if (spacing.includes('spacing-gray-input')) {
+        elemProps.placeholder = q.title
+      }
+      additionalItemClass = spacing
       // child = <TCFormFields.TextInput name={q.fieldName} label={q.label} value={value} wrapperClass="row" />
       break
     case 'numberinput':
@@ -167,8 +174,10 @@ const SpecQuestions = ({questions, project, dirtyProject, resetFeatures, showFea
     }
     return (
       <SpecQuestionList.Item
+        additionalClass = {additionalItemClass}
         key={index}
         title={q.title}
+        type={q.type}
         icon={getIcon(q.icon)}
         description={q.description}
         required={q.required || (q.validations && q.validations.indexOf('isRequired') !== -1)}
@@ -180,7 +189,7 @@ const SpecQuestions = ({questions, project, dirtyProject, resetFeatures, showFea
   }
 
   return (
-    <SpecQuestionList>
+    <SpecQuestionList layout={layout} additionalClass={additionalClass}>
       {questions.filter((question) => showHidden || !question.hidden).map(renderQ)}
     </SpecQuestionList>
   )
@@ -212,6 +221,19 @@ SpecQuestions.propTypes = {
    * If true, then `hidden` property of questions will be ignored and hidden questions will be rendered
    */
   showHidden: PropTypes.bool,
+  /**
+   * Layout of questions
+   */
+  layout: PropTypes.object,
+
+  /**
+   * additional class
+   */
+  additionalClass: PropTypes.string
+}
+
+SpecQuestions.defaultProps = {
+  additionalClass: '',
 }
 
 export default SpecQuestions

src/projects/detail/components/SpecScreens.jsx

@@ -58,6 +58,7 @@ class SpecScreens extends Component {
     const { screens } = this.state
     const { appDefinition } = (this.props.dirtyProject || this.props.project).details
     const numberScreensSelected = parseInt(_.last(_.get(appDefinition, 'numberScreens', '0').split('-')))
+    const { additionalClass } = this.props
 
     const renderCurrentScreen = (screen, index) => {
       return (
@@ -87,7 +88,7 @@ class SpecScreens extends Component {
     }
 
     return (
-      <div>
+      <div className={additionalClass}>
         {screens.map(renderCurrentScreen)}
         {/*renderNewScreen(screens.length + 1)*/}
         <div className="edit-screen-footer">
@@ -122,6 +123,11 @@ SpecScreens.propTypes = {
   questions: PropTypes.arrayOf(PropTypes.object).isRequired,
   project: PropTypes.object.isRequired,
   dirtyProject: PropTypes.object.isRequired,
+  additionalClass: PropTypes.string
+}
+
+SpecScreens.defaultProps = {
+  additionalClass: '',
 }
 
 export default hoc(SpecScreens)

src/projects/detail/components/SpecSection.jsx

@@ -117,6 +117,14 @@ const SpecSection = props => {
 
   const renderChild = props => {
     const {type} = props
+
+    let additionalClass = ''
+    const spacing = _.get(props.layout, 'spacing', '')
+
+    if (spacing) {
+      additionalClass += spacing
+    }
+
     switch(type) {
     case 'tabs': {
       const tabs = _.get(props, 'tabs')
@@ -126,17 +134,19 @@ const SpecSection = props => {
         </Tab>
       )
       return (
-        <Tabs defaultActiveKey={1}>
+        <Tabs additionalClass={additionalClass} defaultActiveKey={1}>
           {tabs.map(renderTab)}
         </Tabs>
       )
     }
     case 'questions':
       return (
         <SpecQuestions
+          additionalClass={additionalClass}
           showFeaturesDialog={showFeaturesDialog}
           resetFeatures={resetFeatures}
           questions={props.questions}
+          layout={props.layout}
           project={project}
           dirtyProject={dirtyProject}
           isRequired={props.required}
@@ -145,7 +155,7 @@ const SpecSection = props => {
       )
     case 'notes':
       return (
-        <div>
+        <div className={additionalClass}>
           <div className="textarea-title">
             {props.description}
           </div>
@@ -170,6 +180,7 @@ const SpecSection = props => {
       category = 'product' === category ? `${category}#${projectLatest.id}` : category
       return (
         <FileListContainer
+          additionalClass={additionalClass}
           project={projectLatest}
           files={files}
           category={category}
@@ -185,6 +196,7 @@ const SpecSection = props => {
       const screens = _.get(project, props.fieldName, [])
       return (
         <SpecScreens
+          additionalClass={additionalClass}
           name={props.fieldName}
           screens={screens}
           questions={props.questions}
@@ -199,7 +211,7 @@ const SpecSection = props => {
       const refCode = _.get(project, refCodeFieldName, '')
       const queryParamRefCode = qs.parse(window.location.search).refCode
       return (
-        <div className="project-name-section">
+        <div className={'project-name-section ' + additionalClass}>
           <div className="editable-project-name">
             <TCFormFields.TextInput
               name="name"
@@ -241,7 +253,7 @@ const SpecSection = props => {
       const costCentreFieldName = 'details.costCentre'
       const costCentre = _.get(project, costCentreFieldName, '')
       return (
-        <div className="project-name-section">
+        <div className={'project-name-section ' + additionalClass}>
           <div className="editable-project-name">
             <TCFormFields.TextInput
               name="name"