without moment

Author: samsep

components/StepRow/StepRow.scss

@@ -24,7 +24,14 @@
     width       : 162px;
   }
 
-  button[type="submit"] {
-    margin-left: 15px;
+  .endsAt, .startsAt {
+    width       : 135px;
+    margin-left : 20px;
+  }
+
+  button{
+   &.addButton {
+     margin-left: 15px;
+   }
   }
 }

components/StepRow/StepRowExamples.cjsx

@@ -28,11 +28,19 @@ component = ->
     <div className="StepRowExample">
       <h1>Example with state edit</h1>
 
-      <StepRow formKey="abc" projectId="abc" stepId="abc" />
+      <StepRow formKey="abc" projectId="abc" stepId="abc" permissions="['UPDATE']"/>
 
       <h1> Example with no data or state</h1>
 
-      <StepRow projectId="def" formKey="new" isNew={true} />
+      <StepRow projectId="def" formKey="new" isNew={true} permissions="['UPDATE']"/>
+
+      <h1>Disabled with Data</h1>
+
+      <StepRow formKey="abc" projectId="abc" stepId="abc" permissions="['READ']"/>
+
+      <h1>Disabled Without Data</h1>
+
+      <StepRow projectId="def" formKey="new" isNew={true} permissions="['READ']"/>
     </div>
   </Provider>
 

components/StepRow/StepRowView.cjsx

@@ -5,6 +5,7 @@ require 'react-datetime/css/react-datetime.css'
 require 'react-select/dist/react-select.css'
 
 React      = require 'react'
+moment     = require 'moment'
 PropTypes  = React.PropTypes
 DateTime   = require 'react-datetime'
 Select     = require 'react-select'
@@ -50,6 +51,7 @@ StepRow = ({
   loader = <loader />
   showPicker = null
   typeLabel = find(types, (t) -> t.value == stepType.value)?.label
+  statusLabel = find(statuses, (s) -> s.value == status.value)?.label
 
   submitClassNames = classNames
     'icon'  : true
@@ -59,48 +61,86 @@ StepRow = ({
     'checkmark' : !isNew
 
   if isNew
-    StepType = <Select
-      {...stepType}
-      className   = "types"
-      options     = {types}
-      clearable   = false
-      placeholder = "Step Type"
-      onBlur      = { (event) ->
-        status.onBlur(status.value) }
-    />
+    if permissions.indexOf('UPDATE') > -1
+      StepType = <Select
+        {...stepType}
+        className   = "types"
+        options     = {types}
+        clearable   = false
+        placeholder = "Step Type"
+        onBlur      = { (event) ->
+          status.onBlur(status.value) }
+      />
+
+      Status = <Select
+        {...status}
+        className   = "statuses"
+        options     = {statuses}
+        clearable   = false
+        placeholder = "Status"
+        onBlur      = { (event) ->
+          status.onBlur(status.value) }
+      />
+    else
+      StepType = <Select className="types" placeholder="Type disabled" disabled />
+
+      Status = <Select className="status" placeholder="Status disabled" disabled />
   else
     StepType = <p className="types">{typeLabel}</p>
 
+    Status = <p className="status">{statusLabel}</p>
+
   <form className="StepRow flex middle" onSubmit={handleSubmit}>
     {# loader }
     {
-      if true
-        <input type="text" className="name" {...name} />
+      if permissions.indexOf('UPDATE') > -1
+        <div className="flex middle">
+          <input type="text" className="name" {...name} />
+
+          <DateTime className="DateTime" {...startsAt} />
+
+          <DateTime className="DateTime" {...details.submissionsDueBy} />
+
+          <DateTime className="DateTime" {...endsAt} />
+        </div>
+      else
+        if isNew
+          <div className="flex middle">
+            <input type="text" className="name" disabled=true placeholder="Name edit disabled" />
+
+            <input type="text" className="DateTime" disabled=true placeholder="Date edit disabled"/>
+
+            <input type="text" className="DateTime" disabled=true placeholder="Date edit disabled"/>
+
+            <input type="text" className="DateTime" disabled=true placeholder="Date edit disabled"/>
+          </div>
+        else
+          debugger
+          <div className="flex middle">
+            <input type="text" className="name" disabled=true {...name} />
 
-        <DateTime className="DateTime" {...startsAt} />
+            <p className="startsAt">{startsAt.value}</p>
 
-        <DateTime className="DateTime" {...details.submissionsDueBy} />
+            <p className="dueBy">{details.submissionsDueBy.value}</p>
 
-        <DateTime className="DateTime" {...endsAt} />
+            <p className="endsAt">{endsAt.value}</p>
+          </div>
     }
 
     {StepType}
 
-    <Select
-      {...status}
-      className   = "statuses"
-      options     = {statuses}
-      clearable   = false
-      placeholder = "Status"
-      onBlur      = { (event) ->
-        status.onBlur(status.value) }
-    />
+    {Status}
 
     {
       if dirty || isNew
-        <button className="clean" type="submit">
-          <div className={submitClassNames} />
-        </button>
+        if permissions.indexOf('UPDATE') > -1
+          <button className="clean addButton" type="submit">
+            <div className={submitClassNames} />
+          </button>
+        else
+          <button className="clean addButton" disabled=true>
+            <div className={submitClassNames} />
+          </button>
     }
   </form>