CM-749: add task date created

src/components/TaskFilter.js

@@ -4,11 +4,11 @@ import { Grid } from '@material-ui/core';
 import { withTheme, withStyles } from '@material-ui/core/styles';
 import _debounce from 'lodash/debounce';
 import {
-  TextInput, PublishedComponent, formatMessage, decodeId,
+  TextInput, PublishedComponent, formatMessage, decodeId, toISODateTime,
 } from '@openimis/fe-core';
 import { defaultFilterStyles } from '../utils/styles';
 import {
-  CONTAINS_LOOKUP, DEFAULT_DEBOUNCE_TIME, EMPTY_STRING,
+  CONTAINS_LOOKUP, DEFAULT_DEBOUNCE_TIME, EMPTY_STRING, MODULE_NAME,
 } from '../constants';
 
 function TaskFilter({
@@ -44,7 +44,7 @@ function TaskFilter({
     <Grid container className={classes.form}>
       <Grid item xs={3} className={classes.item}>
         <TextInput
-          module="tasksManagement"
+          module={MODULE_NAME}
           label="task.source"
           value={filterTextFieldValue('source')}
           onChange={onChangeStringFilter('source', CONTAINS_LOOKUP)}
@@ -53,15 +53,15 @@ function TaskFilter({
       </Grid>
       <Grid item xs={3} className={classes.item}>
         <TextInput
-          module="tasksManagement"
+          module={MODULE_NAME}
           label="task.type"
           value={filterTextFieldValue('type')}
           onChange={onChangeStringFilter('businessEvent', CONTAINS_LOOKUP)}
         />
       </Grid>
       <Grid item xs={3} className={classes.item}>
         <TextInput
-          module="tasksManagement"
+          module={MODULE_NAME}
           label="task.entity"
           value={filterTextFieldValue('entity')}
           onChange={onChangeStringFilter('entityString', CONTAINS_LOOKUP)}
@@ -70,7 +70,7 @@ function TaskFilter({
       <Grid item xs={3} className={classes.item}>
         <PublishedComponent
           pubRef="tasksManagement.taskGroupPicker"
-          module="tasksManagement"
+          module={MODULE_NAME}
           value={filterValue('taskGroupId')}
           onChange={(value) => onChangeFilters([
             {
@@ -84,9 +84,9 @@ function TaskFilter({
       <Grid item xs={3} className={classes.item}>
         <PublishedComponent
           pubRef="tasksManagement.taskStatusPicker"
-          module="tasksManagement"
+          module={MODULE_NAME}
           withLabel
-          nullLabel={formatMessage(intl, 'tasksManagement', 'any')}
+          nullLabel={formatMessage(intl, MODULE_NAME, 'any')}
           withNull
           value={filterValue('status')}
           onChange={(value) => onChangeFilters([
@@ -98,6 +98,36 @@ function TaskFilter({
           ])}
         />
       </Grid>
+      <Grid item xs={2} className={classes.item}>
+        <PublishedComponent
+          pubRef="core.DatePicker"
+          module={MODULE_NAME}
+          label={formatMessage(intl, MODULE_NAME, 'task.dateCreated.after')}
+          value={filterValue('dateCreated_Gte')}
+          onChange={(v) => onChangeFilters([
+            {
+              id: 'dateCreated_Gte',
+              value: v,
+              filter: `dateCreated_Gte: "${toISODateTime(v)}"`,
+            },
+          ])}
+        />
+      </Grid>
+      <Grid item xs={2} className={classes.item}>
+        <PublishedComponent
+          pubRef="core.DatePicker"
+          module={MODULE_NAME}
+          label={formatMessage(intl, MODULE_NAME, 'task.dateCreated.before')}
+          value={filterValue('dateCreated_Lte')}
+          onChange={(v) => onChangeFilters([
+            {
+              id: 'dateCreated_Lte',
+              value: v,
+              filter: `dateCreated_Lte: "${toISODateTime(v)}"`,
+            },
+          ])}
+        />
+      </Grid>
     </Grid>
   );
 }

src/components/TaskSearcher.js

@@ -22,7 +22,11 @@ function TaskSearcher({
   const history = useHistory();
   const modulesManager = useModulesManager();
   const dispatch = useDispatch();
-  const { formatMessage, formatMessageWithValues } = useTranslations('tasksManagement', modulesManager);
+  const {
+    formatMessage,
+    formatMessageWithValues,
+    formatDateTimeFromISO,
+  } = useTranslations('tasksManagement', modulesManager);
 
   const fetchingTasks = useSelector((state) => state?.tasksManagement?.fetchingTasks);
   const fetchedTasks = useSelector((state) => state?.tasksManagement?.fetchedTasks);
@@ -52,6 +56,7 @@ function TaskSearcher({
       'task.type',
       'task.entity',
       'task.assignee',
+      'task.dateCreated',
       'task.status',
     ];
     if (rights.includes(RIGHT_TASKS_MANAGEMENT_SEARCH)) {
@@ -65,6 +70,7 @@ function TaskSearcher({
     ['type', true],
     ['entity', true],
     ['assignee', true],
+    ['date_created', true],
     ['status', true],
   ];
 
@@ -73,6 +79,7 @@ function TaskSearcher({
     (task) => trimBusinessEvent(task.businessEvent),
     (task) => task.entityString,
     (task) => task?.taskGroup?.code,
+    (task) => formatDateTimeFromISO(task?.dateCreated),
     (task) => task.status,
     (task) => (
       <Tooltip title={formatMessage('viewDetailsButton.tooltip')}>

src/constants.js

@@ -1,4 +1,5 @@
 export const TASKS_MANAGEMENT_MAIN_MENU_CONTRIBUTION_KEY = 'tasksManagement.MainMenu';
+export const MODULE_NAME = 'tasksManagement';
 
 export const DEFAULT_DEBOUNCE_TIME = 500;
 export const DEFAULT_PAGE_SIZE = 10;

src/translations/en.json

@@ -9,6 +9,9 @@
   "tasksManagement.task.source": "Source",
   "tasksManagement.task.type": "Type",
   "tasksManagement.task.entity": "Entity",
+  "tasksManagement.task.dateCreated": "Date Created",
+  "tasksManagement.task.dateCreated.after": "Date Created From",
+  "tasksManagement.task.dateCreated.before": "Date Created To",
   "tasksManagement.task.assignee": "Task Group",
   "tasksManagement.task.businessStatus": "Business Status",
   "tasksManagement.task.status": "Status",