From 37b63dd028a2b33d5429948da330a8dd62ac4f95 Mon Sep 17 00:00:00 2001 From: olewandowski1 Date: Tue, 5 Dec 2023 13:33:48 +0100 Subject: [PATCH] OM-91: adjust worker picker to enable fetching previous workers --- .../AcquirementSpecificWorkerForm.js | 2 +- src/components/AssignmentVoucherForm.js | 2 +- src/pickers/WorkerMultiplePicker.js | 71 +++++++++++-------- src/translations/en.json | 2 +- 4 files changed, 43 insertions(+), 34 deletions(-) diff --git a/src/components/AcquirementSpecificWorkerForm.js b/src/components/AcquirementSpecificWorkerForm.js index 9ca0842..96fe48f 100644 --- a/src/components/AcquirementSpecificWorkerForm.js +++ b/src/components/AcquirementSpecificWorkerForm.js @@ -19,7 +19,7 @@ function AcquirementSpecificWorkerForm({ classes={classes} value={edited?.workers ?? []} onChange={(workers) => onEditedChange({ ...edited, workers })} - previousWorkers + previousWorkersCheckbox /> diff --git a/src/components/AssignmentVoucherForm.js b/src/components/AssignmentVoucherForm.js index 50fc55d..2d0082d 100644 --- a/src/components/AssignmentVoucherForm.js +++ b/src/components/AssignmentVoucherForm.js @@ -19,7 +19,7 @@ function AssignmentVoucherForm({ classes={classes} value={edited?.workers ?? []} onChange={(workers) => onEditedChange({ ...edited, workers })} - previousWorkers + previousWorkersCheckbox /> diff --git a/src/pickers/WorkerMultiplePicker.js b/src/pickers/WorkerMultiplePicker.js index 4673466..24ccdf5 100644 --- a/src/pickers/WorkerMultiplePicker.js +++ b/src/pickers/WorkerMultiplePicker.js @@ -1,11 +1,11 @@ -import React, { useState } from 'react'; +import React, { useState, useMemo } from 'react'; import { Checkbox, FormControlLabel } from '@material-ui/core'; import { useGraphqlQuery, useTranslations, Autocomplete, useModulesManager, parseData, } from '@openimis/fe-core'; -import { MODULE_NAME, WORKER_THRESHOLD } from '../constants'; +import { MODULE_NAME, USER_ECONOMIC_UNIT_STORAGE_KEY, WORKER_THRESHOLD } from '../constants'; function WorkerMultiplePicker({ readOnly, @@ -14,39 +14,48 @@ function WorkerMultiplePicker({ required, multiple = true, filterSelectedOptions, - previousWorkers, + previousWorkersCheckbox, }) { const modulesManager = useModulesManager(); const { formatMessage } = useTranslations(MODULE_NAME, modulesManager); const [previousWorkersChecked, setPreviousWorkersChecked] = useState(false); const [searchString, setSearchString] = useState(''); + const storedUserEconomicUnit = localStorage.getItem(USER_ECONOMIC_UNIT_STORAGE_KEY); + const userEconomicUnit = JSON.parse(storedUserEconomicUnit); - // TODO: Add possibility to fetch only workers employer was working with - after BE implementation - const { isLoading, data: allWorkers, error } = useGraphqlQuery( + const { + isLoading, + data, + error, + } = useGraphqlQuery( ` - { - insurees { - edges { - node { - id - uuid - chfId - lastName - otherNames - dob - } - } + query WorkerMultiplePicker($economicUnitCode: String!, $fetchPreviousWorkers: Boolean!) { + allInsurees: insurees @skip(if: $fetchPreviousWorkers) { + edges { + node ${modulesManager.getProjection('insuree.InsureePicker.projection')} + } + } + previousInsurees: previousWorkers(economicUnitCode: $economicUnitCode) @include(if: $fetchPreviousWorkers) { + edges { + node ${modulesManager.getProjection('insuree.InsureePicker.projection')} } - } + } + } `, - { }, - { skip: previousWorkersChecked }, + { + economicUnitCode: userEconomicUnit?.code || '', + fetchPreviousWorkers: previousWorkersChecked, + }, ); - const workers = parseData(allWorkers?.insurees); + const workers = useMemo(() => { + const currentWorkersData = previousWorkersChecked ? data?.previousInsurees : data?.allInsurees; - const filtersOptions = (options) => { - if (!searchString || searchString.length < WORKER_THRESHOLD) { + return parseData(currentWorkersData); + }, [previousWorkersChecked, data]); + + const filterOptions = (options) => { + if (!searchString || (!previousWorkersChecked && searchString.length < WORKER_THRESHOLD)) { return []; } @@ -67,16 +76,18 @@ function WorkerMultiplePicker({ label={formatMessage('workerVoucher.workers')} readOnly={readOnly} placeholder={formatMessage('workerVoucher.WorkerMultiplePicker.placeholder')} - noOptionsText={searchString.length < WORKER_THRESHOLD - ? formatMessage('workerVoucher.WorkerMultiplePicker.underThreshold') - : formatMessage('workerVoucher.WorkerMultiplePicker.noOptions')} - filterOptions={filtersOptions} + noOptionsText={ + (!previousWorkersChecked && searchString.length < WORKER_THRESHOLD) + ? formatMessage('workerVoucher.WorkerMultiplePicker.underThreshold') + : formatMessage('workerVoucher.WorkerMultiplePicker.noOptions') + } + filterOptions={filterOptions} getOptionLabel={({ chfId, lastName, otherNames }) => `${chfId} ${lastName} ${otherNames}`} filterSelectedOptions={filterSelectedOptions} onInputChange={() => {}} setCurrentString={setSearchString} /> - {previousWorkers && ( + {previousWorkersCheckbox && ( - )} + )} label={formatMessage('workerVoucher.WorkerMultiplePicker.checkbox.label')} /> )} diff --git a/src/translations/en.json b/src/translations/en.json index c1c91f5..cb8bda0 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -44,7 +44,7 @@ "workerVoucher.vouchers.required": "You need to fill out all required fields to continue", "workerVoucher.WorkerMultiplePicker.placeholder": "Search for Worker", "workerVoucher.WorkerMultiplePicker.underThreshold": "Enter at least 3 characters of National ID", - "workerVoucher.WorkerMultiplePicker.noOptions": "Worker not found", + "workerVoucher.WorkerMultiplePicker.noOptions": "No results", "workerVoucher.WorkerMultiplePicker.checkbox.label": "Show only workers I've previously worked with", "workerVoucher.WorkerDateRangePicker.startDate": "Start Date", "workerVoucher.WorkerDateRangePicker.endDate": "End Date",