-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
008f64a
commit 6e69717
Showing
7 changed files
with
497 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| import React from 'react'; | ||
| import { injectIntl } from 'react-intl'; | ||
| import { Grid } from '@material-ui/core'; | ||
| import { withTheme, withStyles } from '@material-ui/core/styles'; | ||
| import _debounce from 'lodash/debounce'; | ||
| import { | ||
| TextInput, PublishedComponent, formatMessage, decodeId, toISODateTime, | ||
| } from '@openimis/fe-core'; | ||
| import { defaultFilterStyles } from '../utils/styles'; | ||
| import { | ||
| CONTAINS_LOOKUP, DEFAULT_DEBOUNCE_TIME, EMPTY_STRING, MODULE_NAME, | ||
| } from '../constants'; | ||
|
|
||
| function TaskHistoryFilter({ | ||
| intl, classes, filters, onChangeFilters, | ||
| }) { | ||
| const debouncedOnChangeFilters = _debounce(onChangeFilters, DEFAULT_DEBOUNCE_TIME); | ||
|
|
||
| const filterValue = (filterName) => filters?.[filterName]?.value; | ||
|
|
||
| const filterTextFieldValue = (filterName) => filters?.[filterName]?.value ?? EMPTY_STRING; | ||
|
|
||
| const onChangeStringFilter = (filterName, lookup = null) => (value) => { | ||
| if (lookup) { | ||
| debouncedOnChangeFilters([ | ||
| { | ||
| id: filterName, | ||
| value, | ||
| filter: `${filterName}_${lookup}: "${value}"`, | ||
| }, | ||
| ]); | ||
| } else { | ||
| onChangeFilters([ | ||
| { | ||
| id: filterName, | ||
| value, | ||
| filter: `${filterName}: "${value}"`, | ||
| }, | ||
| ]); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Grid container className={classes.form}> | ||
| <Grid item xs={3} className={classes.item}> | ||
| <PublishedComponent | ||
| pubRef="tasksManagement.taskSourcesPicker" | ||
| module={MODULE_NAME} | ||
| withLabel | ||
| nullLabel={formatMessage(intl, MODULE_NAME, 'any')} | ||
| withNull | ||
| value={filterValue('source')} | ||
| onChange={(value) => onChangeFilters([ | ||
| { | ||
| id: 'source', | ||
| value, | ||
| filter: value ? `source: "${value}"` : EMPTY_STRING, | ||
| }, | ||
| ])} | ||
| /> | ||
| </Grid> | ||
| <Grid item xs={3} className={classes.item}> | ||
| <PublishedComponent | ||
| pubRef="tasksManagement.taskTypesPicker" | ||
| module={MODULE_NAME} | ||
| withLabel | ||
| nullLabel={formatMessage(intl, MODULE_NAME, 'any')} | ||
| withNull | ||
| value={filterValue('businessEvent')} | ||
| onChange={onChangeStringFilter('businessEvent', CONTAINS_LOOKUP)} | ||
| /> | ||
| </Grid> | ||
| <Grid item xs={3} className={classes.item}> | ||
| <TextInput | ||
| module={MODULE_NAME} | ||
| label="task.entity" | ||
| value={filterTextFieldValue('entityString')} | ||
| onChange={onChangeStringFilter('entityString', CONTAINS_LOOKUP)} | ||
| /> | ||
| </Grid> | ||
| <Grid item xs={3} className={classes.item}> | ||
| <PublishedComponent | ||
| pubRef="tasksManagement.taskGroupPicker" | ||
| module={MODULE_NAME} | ||
| value={filterValue('taskGroupId')} | ||
| onChange={(value) => onChangeFilters([ | ||
| { | ||
| id: 'taskGroupId', | ||
| value, | ||
| filter: value?.id ? `taskGroupId: "${decodeId(value.id)}"` : '', | ||
| }, | ||
| ])} | ||
| /> | ||
| </Grid> | ||
| <Grid item xs={3} className={classes.item}> | ||
| <PublishedComponent | ||
| pubRef="tasksManagement.taskStatusPicker" | ||
| module={MODULE_NAME} | ||
| withLabel | ||
| nullLabel={formatMessage(intl, MODULE_NAME, 'any')} | ||
| withNull | ||
| value={filterValue('status')} | ||
| onChange={(value) => onChangeFilters([ | ||
| { | ||
| id: 'status', | ||
| value, | ||
| filter: value ? `status: ${value}` : EMPTY_STRING, | ||
| }, | ||
| ])} | ||
| /> | ||
| </Grid> | ||
| <Grid item xs={3} 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={3} 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> | ||
| ); | ||
| } | ||
|
|
||
| export default injectIntl(withTheme(withStyles(defaultFilterStyles)(TaskHistoryFilter))); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| import React from 'react'; | ||
| import { useDispatch, useSelector } from 'react-redux'; | ||
| import { | ||
| Searcher, | ||
| useHistory, | ||
| historyPush, | ||
| useModulesManager, | ||
| useTranslations, | ||
| } from '@openimis/fe-core'; | ||
| import { | ||
| RIGHT_TASKS_MANAGEMENT_SEARCH, DEFAULT_PAGE_SIZE, ROWS_PER_PAGE_OPTIONS, TASK_STATUS, TASK_ROUTE, | ||
| } from '../constants'; | ||
| import { fetchTaskHistory } from '../actions'; | ||
| import trimBusinessEvent from '../utils/trimBusinessEvent'; | ||
| import TaskHistoryFilter from './TaskHistoryFilter'; | ||
|
|
||
| function TaskHistorySearcher({ | ||
| rights, showFilters = true, taskId, | ||
| }) { | ||
| const history = useHistory(); | ||
| const modulesManager = useModulesManager(); | ||
| const dispatch = useDispatch(); | ||
| const { | ||
| formatMessageWithValues, | ||
| formatDateTimeFromISO, | ||
| } = useTranslations('tasksManagement', modulesManager); | ||
|
|
||
| const fetchingTaskHistory = useSelector((state) => state?.tasksManagement?.fetchingTaskHistory); | ||
| const fetchedTaskHistory = useSelector((state) => state?.tasksManagement?.fetchedTaskHistory); | ||
| const errorTaskHistory = useSelector((state) => state?.tasksManagement?.errorTaskHistory); | ||
| const taskHistory = useSelector((state) => state?.tasksManagement?.taskHistory); | ||
| const taskHistoryPageInfo = useSelector((state) => state?.tasksManagement?.taskHistoryPageInfo); | ||
| const taskHistoryTotalCount = useSelector((state) => state?.tasksManagement?.taskHistoryTotalCount); | ||
|
|
||
| const openTask = (task, newTab = false) => historyPush( | ||
| modulesManager, | ||
| history, | ||
| TASK_ROUTE, | ||
| [task?.id], | ||
| newTab, | ||
| ); | ||
|
|
||
| const onDoubleClick = (task) => openTask(task); | ||
| const fetch = (params) => dispatch(fetchTaskHistory(modulesManager, params)); | ||
|
|
||
| const rowIdentifier = (task) => task.id; | ||
|
|
||
| const isRowDisabled = (_, task) => task.status !== TASK_STATUS.ACCEPTED; | ||
|
|
||
| const headers = () => { | ||
| const headers = [ | ||
| 'task.source', | ||
| 'task.type', | ||
| 'task.entity', | ||
| 'task.assignee', | ||
| 'task.version', | ||
| 'task.dateUpdated', | ||
| 'task.status', | ||
| ]; | ||
| if (rights.includes(RIGHT_TASKS_MANAGEMENT_SEARCH)) { | ||
| headers.push('emptyLabel'); | ||
| } | ||
| return headers; | ||
| }; | ||
|
|
||
| const sorts = () => [ | ||
| ['source', true], | ||
| ['type', false], | ||
| ['businessStatus', true], | ||
| ['taskGroup', true], | ||
| ['version', true], | ||
| ['dateUpdated', true], | ||
| ['status', true], | ||
| ]; | ||
|
|
||
| const itemFormatters = () => [ | ||
| (taskHistory) => taskHistory.source, | ||
| (taskHistory) => trimBusinessEvent(taskHistory.businessEvent), | ||
| (taskHistory) => taskHistory.businessStatus, | ||
| (taskHistory) => taskHistory?.taskGroup?.code, | ||
| (taskHistory) => taskHistory.version, | ||
| (taskHistory) => formatDateTimeFromISO(taskHistory?.dateUpdated), | ||
| (taskHistory) => taskHistory.status, | ||
| ]; | ||
|
|
||
| const defaultFilters = () => { | ||
| const filters = { | ||
| isDeleted: { | ||
| value: false, | ||
| filter: 'isDeleted: false', | ||
| }, | ||
| }; | ||
| if (taskId !== null && taskId !== undefined) { | ||
| filters.taskId = { | ||
| value: taskId, | ||
| filter: `id: "${taskId}"`, | ||
| }; | ||
| } | ||
| return filters; | ||
| }; | ||
|
|
||
| const taskFilter = (props) => ( | ||
| <TaskHistoryFilter | ||
| intl={props.intl} | ||
| classes={props.classes} | ||
| filters={props.filters} | ||
| onChangeFilters={props.onChangeFilters} | ||
| /> | ||
| ); | ||
|
|
||
| return ( | ||
| <Searcher | ||
| module="tasksManagement" | ||
| FilterPane={showFilters && taskFilter} | ||
| fetch={fetch} | ||
| items={taskHistory} | ||
| itemsPageInfo={taskHistoryPageInfo} | ||
| fetchingItems={fetchingTaskHistory} | ||
| fetchedItems={fetchedTaskHistory} | ||
| errorItems={errorTaskHistory} | ||
| tableTitle={formatMessageWithValues('taskHistory.searcherResultsTitle', { | ||
| taskHistoryTotalCount, | ||
| })} | ||
| headers={headers} | ||
| itemFormatters={itemFormatters} | ||
| sorts={sorts} | ||
| rowsPerPageOptions={ROWS_PER_PAGE_OPTIONS} | ||
| defaultPageSize={DEFAULT_PAGE_SIZE} | ||
| defaultOrderBy="-version" | ||
| rowIdentifier={rowIdentifier} | ||
| onDoubleClick={onDoubleClick} | ||
| defaultFilters={defaultFilters()} | ||
| rowDisabled={isRowDisabled} | ||
| rights={rights} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export default TaskHistorySearcher; |
Oops, something went wrong.