@plusscommunities/pluss-maintenance-web-a 1.1.23 → 1.1.24

package/src/components/JobList.js

@@ -6,10 +6,17 @@ import { Link } from 'react-router-dom';
 import FontAwesome from 'react-fontawesome';
 import moment from 'moment';
 import _ from 'lodash';
-import { jobsLoaded, removeJob } from '../actions';
+import { jobsLoaded, removeJob, jobStatusesUpdate } from '../actions';
 import { PlussCore } from '../feature.config';
 import { maintenanceActions } from '../apis';
-import StatusTypes from '../maintenanceStatus.json';
+import {
+  STATUS_NOT_ACTIONED,
+  STATUS_COMPLETED,
+  STATUS_IMCOMPLETE,
+  jobPriorityOptions,
+  getDefaultPriority,
+  getJobPriority,
+} from '../helper';
 import { Colours } from '@plusscommunities/pluss-core-web';
 import { values } from '../values.config';
 
@@ -24,6 +31,7 @@ class JobList extends Component {
       sortDesc: true,
       selectedTimeFilter: Analytics.getAnalyticsFilterOptions()[1],
       assignees: [],
+      requesters: [],
     };
 
     this.exportColumns = [
@@ -32,6 +40,7 @@ class JobList extends Component {
       { label: `${values.textEntityName} No.`, key: 'jobId' },
       { label: values.textJobType, key: 'type' },
       { label: 'Status', key: 'status' },
+      { label: 'Priority', key: 'priority' },
       { label: 'Title', key: 'title' },
       { label: 'Address', key: 'room' },
       { label: 'Description', key: 'description' },
@@ -51,15 +60,33 @@ class JobList extends Component {
   }
 
   componentDidMount() {
+    this.props.jobStatusesUpdate(this.props.auth.site);
     this.getJobs();
     this.getAssignees();
   }
 
+  setRequesters = (jobs) => {
+    const requesters = _.orderBy(
+      _.uniqBy(
+        jobs.map((j) => ({
+          id: j.userID,
+          displayName: j.userName,
+          profilePic: j.userProfilePic,
+        })),
+        'id',
+      ),
+      'displayName',
+      'asc',
+    );
+    this.setState({ requesters });
+  };
+
   getJobs = async () => {
     const { auth } = this.props;
     try {
       const res = await maintenanceActions.getJobsRecursive(auth.site);
       if (!_.isEmpty(res) && res[0].site === auth.site) {
+        this.setRequesters(res);
         this.props.jobsLoaded(res);
       }
     } catch (error) {
@@ -117,6 +144,13 @@ class JobList extends Component {
     this.closeFilter();
   };
 
+  selectPriorityFilter = (filter) => {
+    this.setState({
+      selectedPriorityFilter: filter,
+    });
+    this.closeFilter();
+  };
+
   selectStatusFilter = (filter) => {
     this.setState({
       selectedStatusFilter: filter,
@@ -207,6 +241,32 @@ class JobList extends Component {
     this.closeFilter();
   };
 
+  onSelectRequester = (user) => {
+    this.setState({
+      selectedRequester: user,
+    });
+  };
+
+  removeRequesterFilter = () => {
+    this.setState({
+      selectedRequesterFilter: null,
+      selectedRequesterFilterText: null,
+    });
+  };
+
+  saveRequesterFilter = () => {
+    if (!this.state.selectedRequester) {
+      this.removeRequesterFilter();
+    } else {
+      this.setState({
+        selectedRequesterFilter: this.state.selectedRequester.id,
+        selectedRequesterFilterText: this.state.selectedRequester.displayName,
+        selectedRequester: null,
+      });
+    }
+    this.closeFilter();
+  };
+
   onHandleSearchChange = (event) => {
     const thisSearchTime = moment().valueOf();
     this.setState({ search: event.target.value, lastSearch: thisSearchTime });
@@ -238,14 +298,26 @@ class JobList extends Component {
       });
     }
 
+    // filter by priority
+    if (this.state.selectedPriorityFilter) {
+      const defaultPriority = getDefaultPriority().name;
+      source = _.filter(source, (r) => {
+        return (
+          r.priority === this.state.selectedPriorityFilter || (this.state.selectedPriorityFilter === defaultPriority && _.isNil(r.priority))
+        );
+      });
+    }
+
     // filter by status
     if (this.state.selectedStatusFilter) {
+      const { statusTypes } = this.props;
+      const defaultStatus = statusTypes.find((s) => s.category === STATUS_NOT_ACTIONED);
       source = _.filter(source, (r) => {
-        const status = r.status && StatusTypes[r.status] ? r.status : 'Unassigned';
-        if (this.state.selectedStatusFilter === 'incomplete') {
-          return status !== 'Completed';
+        const status = statusTypes.find((s) => s.text === r.status) || defaultStatus;
+        if (this.state.selectedStatusFilter === STATUS_IMCOMPLETE) {
+          return status.category !== STATUS_COMPLETED;
         }
-        return status === this.state.selectedStatusFilter;
+        return status.text === this.state.selectedStatusFilter;
       });
     }
 
@@ -255,6 +327,12 @@ class JobList extends Component {
       });
     }
 
+    if (this.state.selectedRequesterFilter) {
+      source = _.filter(source, (r) => {
+        return r.userID === this.state.selectedRequesterFilter;
+      });
+    }
+
     if (!_.isEmpty(this.state.searchTerm)) {
       source = _.filter(source, (r) => {
         if (r.jobId && r.jobId === this.state.searchTerm) {
@@ -319,6 +397,7 @@ class JobList extends Component {
 
   getExportSource = () => {
     const customColumns = [];
+    const defaultPriority = getDefaultPriority().name;
     const source = this.getSource().map((r) => {
       const history = r.history || [];
       const progressEntry = _.find(history, (e) => {
@@ -353,7 +432,8 @@ class JobList extends Component {
         notes += note.Note;
       });
       const customFieldValues = this.getCustomFields(r, customColumns);
-      return { ...r, ...customFieldValues, notes, progressTime, completedTime, progressDuration, completedDuration };
+      const priority = r.priority || defaultPriority;
+      return { ...r, ...customFieldValues, notes, progressTime, completedTime, progressDuration, completedDuration, priority };
     });
 
     // Compose revised columns list with custom fields
@@ -397,19 +477,37 @@ class JobList extends Component {
         </Components.Popup>
       );
     }
+    if (this.state.filterOpen === 'priority') {
+      return (
+        <Components.Popup title="Select Priority" maxWidth={600} minWidth={400} hasPadding onClose={this.closeFilter}>
+          {jobPriorityOptions.map((p) => {
+            return (
+              <Components.Tag
+                key={p.name}
+                onClick={() => {
+                  this.selectPriorityFilter(p.name);
+                }}
+                text={p.name}
+                className="marginRight-10"
+              />
+            );
+          })}
+        </Components.Popup>
+      );
+    }
     if (this.state.filterOpen === 'status') {
+      const { statusTypes } = this.props;
       return (
         <Components.Popup title="Select Status" maxWidth={600} minWidth={400} hasPadding onClose={this.closeFilter}>
-          {['incomplete', ...Object.keys(StatusTypes)].map((sKey) => {
-            const text = sKey === 'incomplete' ? 'All Incomplete' : StatusTypes[sKey].text;
+          {[STATUS_IMCOMPLETE, ...statusTypes.map((s) => s.text)].map((status) => {
             return (
               <Components.Tag
-                key={sKey}
+                key={status}
                 onClick={() => {
-                  this.selectStatusFilter(sKey);
+                  this.selectStatusFilter(status);
                 }}
-                text={text}
-                className="marginRight-10"
+                text={status}
+                className="marginRight-10 marginBottom-10"
               />
             );
           })}
@@ -515,15 +613,92 @@ class JobList extends Component {
         </Components.Popup>
       );
     }
+    if (this.state.filterOpen === 'requester') {
+      let userContent = null;
+      if (this.state.selectedRequester) {
+        userContent = (
+          <div>
+            <Components.UserListing
+              key={this.state.selectedRequester.id}
+              user={this.state.selectedRequester}
+              rightContent={
+                <Components.SVGIcon
+                  className="removeIcon"
+                  icon="close"
+                  onClick={() => {
+                    this.onSelectRequester();
+                  }}
+                  colour={Colours.COLOUR_DUSK}
+                />
+              }
+            />
+          </div>
+        );
+      } else {
+        userContent = (
+          <div>
+            <Components.GenericInput
+              id="requesterSearch"
+              type="text"
+              // label="Search"
+              placeholder="Search name"
+              value={this.state.requesterSearch}
+              onChange={(e) => this.onHandleChange(e)}
+              alwaysShowLabel
+            />
+            {_.sortBy(this.state.requesters, (u) => u.displayName.toUpperCase())
+              .filter((u) => {
+                if (_.isEmpty(this.state.requesterSearch)) return true;
+                return u.displayName.toUpperCase().indexOf(this.state.requesterSearch.toUpperCase()) > -1;
+              })
+              .map((user) => {
+                return (
+                  <Components.UserListing
+                    key={user.id}
+                    user={user}
+                    onClick={() => {
+                      this.onSelectRequester(user);
+                    }}
+                  />
+                );
+              })}
+          </div>
+        );
+      }
+      return (
+        <Components.Popup
+          title="Select User"
+          maxWidth={600}
+          minWidth={400}
+          hasPadding
+          onClose={this.closeFilter}
+          buttons={[
+            {
+              type: 'primaryAction',
+              onClick: this.saveRequesterFilter,
+              text: 'Select',
+              isActive: true,
+            },
+          ]}
+        >
+          {userContent}
+        </Components.Popup>
+      );
+    }
     return null;
   }
 
   renderRequests() {
+    const { statusTypes } = this.props;
+    const defaultStatus = statusTypes.find((s) => s.category === STATUS_NOT_ACTIONED);
+
     return this.getSource().map((ev, index) => {
       if (!ev) {
         return null;
       }
-      const status = ev.status && StatusTypes[ev.status] ? StatusTypes[ev.status] : StatusTypes['Unassigned'];
+      const status = (ev.status && statusTypes.find((s) => s.text === ev.status)) || defaultStatus;
+      const priority = getJobPriority(ev.priority);
+
       return (
         <tr key={index}>
           <td>{ev.jobId}</td>
@@ -535,6 +710,16 @@ class JobList extends Component {
           <td>{ev.type}</td>
           <td>{moment.utc(ev.createdTime).local().format('D MMM YY')}</td>
           <td>{ev.room}</td>
+          <td>
+            {ev.userName ? (
+              <Components.UserListing
+                user={{ id: ev.userID, displayName: ev.userName, profilePic: ev.userProfilePic }}
+                textClass="fontSize-13"
+              />
+            ) : (
+              'Unknown'
+            )}
+          </td>
           <td>{ev.Assignee ? <Components.UserListing user={ev.Assignee} textClass="fontSize-13" /> : 'Unassigned'}</td>
           {/* <td>
         <div style={{ textAlign: 'center' }}>{ev.commentCount}</div>
@@ -548,10 +733,25 @@ class JobList extends Component {
                 paddingTop: 2,
                 paddingBottom: 2,
                 color: '#fff',
-                backgroundColor: status.color,
+                backgroundColor: status ? status.color : undefined,
+              }}
+            >
+              {status ? status.text : ''}
+            </div>
+          </td>
+          <td>
+            <div
+              style={{
+                textAlign: 'center',
+                borderRadius: 4,
+                width: 100,
+                paddingTop: 2,
+                paddingBottom: 2,
+                color: '#fff',
+                backgroundColor: priority.color,
               }}
             >
-              {status.text}
+              {priority.name}
             </div>
           </td>
           <td className="table-options">
@@ -654,6 +854,15 @@ class JobList extends Component {
             >
               Address{this.renderSort('room')}
             </th>
+            <th
+              className={`${this.sortIsActive('userName')}`}
+              style={{ cursor: 'pointer', width: 150 }}
+              onClick={() => {
+                this.sortByCol('userName');
+              }}
+            >
+              Submitted By{this.renderSort('userName')}
+            </th>
             <th
               className={`${this.sortIsActive('assigned')}`}
               style={{ cursor: 'pointer', width: 150 }}
@@ -665,6 +874,7 @@ class JobList extends Component {
             </th>
             {/* <th style={{ width: 30 }}>Comments</th> */}
             <th style={{ width: 120 }}>Status</th>
+            <th style={{ width: 120 }}>Priority</th>
             <th style={{ width: 50 }} />
           </tr>
         </thead>
@@ -692,6 +902,15 @@ class JobList extends Component {
         text="Status"
       />
     );
+    let priorityFilter = (
+      <Components.Tag
+        className="marginRight-10"
+        onClick={() => {
+          this.openFilter('priority');
+        }}
+        text="Priority"
+      />
+    );
     let timeFilter = (
       <Components.Tag
         className="marginRight-10"
@@ -710,6 +929,15 @@ class JobList extends Component {
         text="Assigned To"
       />
     );
+    let requesterFilter = (
+      <Components.Tag
+        className="marginRight-10"
+        onClick={() => {
+          this.openFilter('requester');
+        }}
+        text="Submitted By"
+      />
+    );
 
     if (this.state.selectedTypeFilter) {
       typeFilter = (
@@ -727,6 +955,24 @@ class JobList extends Component {
         />
       );
     }
+
+    if (this.state.selectedPriorityFilter) {
+      priorityFilter = (
+        <Components.Tag
+          className="marginRight-10"
+          onClick={() => {
+            this.openFilter('priority');
+          }}
+          rightIcon="close"
+          rightClick={(e) => {
+            e.stopPropagation();
+            this.selectPriorityFilter();
+          }}
+          text={this.state.selectedPriorityFilter}
+        />
+      );
+    }
+
     if (this.state.selectedStatusFilter) {
       statusFilter = (
         <Components.Tag
@@ -739,7 +985,7 @@ class JobList extends Component {
             e.stopPropagation();
             this.selectStatusFilter();
           }}
-          text={this.state.selectedStatusFilter === 'incomplete' ? 'All Incomplete' : StatusTypes[this.state.selectedStatusFilter].text}
+          text={this.state.selectedStatusFilter}
         />
       );
     }
@@ -775,6 +1021,22 @@ class JobList extends Component {
         />
       );
     }
+    if (this.state.selectedRequesterFilter) {
+      requesterFilter = (
+        <Components.Tag
+          className="marginRight-10"
+          onClick={() => {
+            this.openFilter('requester');
+          }}
+          rightIcon="close"
+          rightClick={(e) => {
+            e.stopPropagation();
+            this.removeRequesterFilter();
+          }}
+          text={this.state.selectedRequesterFilterText}
+        />
+      );
+    }
     return (
       <div>
         <div className="marginTop-20 flex flex-between flex-center">
@@ -784,8 +1046,10 @@ class JobList extends Component {
             </Components.Text>
             {typeFilter}
             {statusFilter}
+            {priorityFilter}
             {timeFilter}
             {userFilter}
+            {requesterFilter}
           </div>
           <Components.Button
             inline
@@ -837,7 +1101,8 @@ const mapStateToProps = (state) => {
     jobs: state[values.reducerKey].jobs,
     auth,
     strings: (state.strings && state.strings.config) || {},
+    statusTypes: state[values.reducerKey].jobstatuses,
   };
 };
 
-export default connect(mapStateToProps, { jobsLoaded, removeJob })(withRouter(JobList));
+export default connect(mapStateToProps, { jobsLoaded, removeJob, jobStatusesUpdate })(withRouter(JobList));

package/src/helper/index.js

@@ -0,0 +1,26 @@
+import jobStatusOptions from '../maintenanceStatus.json';
+import jobPriorityOptions from '../maintenancePriority.json';
+
+const STATUS_IMCOMPLETE = 'All Incomplete';
+const STATUS_NOT_ACTIONED = 'Not Actioned';
+const STATUS_IN_PROGRESS = 'In Progress';
+const STATUS_COMPLETED = 'Completed';
+
+const getDefaultPriority = () => jobPriorityOptions.find((p) => p.default);
+
+const getJobPriority = (priority) => {
+  let priorityOption = null;
+  if (priority) priorityOption = jobPriorityOptions.find((p) => p.name === priority);
+  return priorityOption || getDefaultPriority();
+};
+
+export {
+  STATUS_IMCOMPLETE,
+  STATUS_NOT_ACTIONED,
+  STATUS_IN_PROGRESS,
+  STATUS_COMPLETED,
+  jobStatusOptions,
+  jobPriorityOptions,
+  getDefaultPriority,
+  getJobPriority,
+};

package/src/maintenancePriority.json

@@ -0,0 +1,5 @@
+[
+  { "name": "Low", "color": "green", "default": true },
+  { "name": "Medium", "color": "orange" },
+  { "name": "High", "color": "red" }
+]

package/src/maintenanceStatus.json

@@ -1,17 +1,20 @@
-{
-  "Unassigned": {
+[
+  {
     "text": "Open",
     "order": 0,
-    "color": "#d5dde4"
+    "color": "#d5dde4",
+    "category": "Not Actioned"
   },
-  "In Progress": {
+  {
     "text": "In Progress",
     "order": 1,
-    "color": "#82d6e5"
+    "color": "#82d6e5",
+    "category": "In Progress"
   },
-  "Completed": {
+  {
     "text": "Completed",
     "order": 2,
-    "color": "#58dba4"
+    "color": "#58dba4",
+    "category": "Completed"
   }
-}
+]

package/src/reducers/MaintenanceReducer.js

@@ -1,20 +1,13 @@
 import _ from 'lodash';
-
-import {
-  JOBS_LOADED,
-  JOBS_REMOVED,
-  JOBS_LOADING,
-  JOBS_TYPES_LOADED,
-  // JOBS_TYPES_REMOVED,
-  // JOBS_PURGE,
-  // TICKETS_LOADED,
-} from '../actions/types';
+import { JOBS_LOADED, JOBS_REMOVED, JOBS_LOADING, JOBS_TYPES_LOADED, JOBS_STATUSES_LOADED, JOBS_HIDE_SEEN } from '../actions/types';
+import { jobStatusOptions } from '../helper';
 
 const INITIAL_STATE = {
   jobs: [],
   jobtypes: [],
+  jobstatuses: jobStatusOptions,
   loading: false,
-  // tickets: [],
+  hideSeen: false,
 };
 
 export default (state = INITIAL_STATE, action) => {
@@ -41,33 +34,15 @@ export default (state = INITIAL_STATE, action) => {
       }
       return state;
     case JOBS_TYPES_LOADED:
-      const resultSub = _.unionWith(action.payload, state.jobtypes, (v1, v2) => {
+      const jobtypes = _.unionWith(action.payload, state.jobtypes, (v1, v2) => {
         return v1 != null && v2 != null && v1.id === v2.id;
       });
-      return {
-        ...state,
-        jobtypes: resultSub,
-      };
-    // case JOBS_TYPES_REMOVED:
-    //   const indexSub = _.findIndex(state.jobtypes, (event) => {
-    //     return event != null && event.id === action.payload;
-    //   });
-    //   if (indexSub > -1) {
-    //     const newEventsSub = [...state.jobtypes];
-    //     newEventsSub.splice(indexSub, 1);
-    //     return { ...state, jobtypes: newEventsSub };
-    //   }
-    //   return state;
-    // case TICKETS_LOADED:
-    //   const ticketResult = _.unionWith(action.payload, state.tickets, (v1, v2) => {
-    //     return v1 != null && v2 != null && v1.Id === v2.Id;
-    //   });
-    //   return {
-    //     ...state,
-    //     tickets: ticketResult,
-    //   };
-    // case JOBS_PURGE:
-    //   return INITIAL_STATE;
+      return { ...state, jobtypes };
+    case JOBS_STATUSES_LOADED:
+      const jobstatuses = _.orderBy(action.payload, 'order', 'asc');
+      return { ...state, jobstatuses };
+    case JOBS_HIDE_SEEN:
+      return { ...state, hideSeen: action.payload };
     default:
       return state;
   }