hotfix: fix group details page, improve worker picker (#89)

openimis · Oct 31, 2024 · 7d66d1a · 7d66d1a
1 parent d7ed8f1
commit 7d66d1a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 36 deletions.
diff --git a/src/pages/GroupDetailsPage.js b/src/pages/GroupDetailsPage.js
@@ -42,6 +42,7 @@ function GroupDetailsPage({ match }) {
   const groupUuid = match?.params?.group_uuid;
   const { formatMessage, formatMessageWithValues } = useTranslations(MODULE_NAME, modulesManager);
   const [reset, setReset] = useState(0);
+  const [isGroupSaving, setIsGroupSaving] = useState(false);
 
   const titleParams = (group) => ({
     name: group?.name ?? EMPTY_STRING,
@@ -82,6 +83,7 @@ function GroupDetailsPage({ match }) {
   const canSave = () => !!(edited?.name && edited?.workers?.length);
 
   const onSave = () => {
+    setIsGroupSaving(true);
     try {
       if (groupUuid) {
         dispatch(updateGroup(economicUnit, edited, 'Update Group'));
@@ -94,6 +96,8 @@ function GroupDetailsPage({ match }) {
           detail: error,
         }),
       );
+    } finally {
+      setIsGroupSaving(false);
     }
   };
 
@@ -134,7 +138,7 @@ function GroupDetailsPage({ match }) {
         edited={edited}
         back={() => history.goBack()}
         Panels={[GroupMasterPanel]}
-        isSaving={submittingMutation}
+        isSaving={isGroupSaving}
         formatMessage={formatMessage}
         rights={rights}
         onEditedChanged={setEdited}

diff --git a/src/pickers/WorkerMultiplePicker.js b/src/pickers/WorkerMultiplePicker.js
@@ -22,13 +22,12 @@ import {
   WORKER_IMPORT_GROUP_OF_WORKERS,
   WORKER_IMPORT_PREVIOUS_DAY,
   WORKER_IMPORT_PREVIOUS_WORKERS,
-  WORKER_THRESHOLD,
 } from '../constants';
 import { getYesterdaysDate } from '../utils/utils';
 import { fetchAllAvailableWorkers } from '../actions';
 
 function WorkerMultiplePicker({
-  readOnly, value, onChange, required, filterSelectedOptions,
+  readOnly, value, onChange, required,
 }) {
   const modulesManager = useModulesManager();
   const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
@@ -38,7 +37,6 @@ function WorkerMultiplePicker({
   const [previousDayWorkers, setPreviousDayWorkers] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
-  const [searchString, setSearchString] = useState('');
   const isDisabled = readOnly || isLoading;
   const [configurationDialogOpen, setConfigurationDialogOpen] = useState(false);
   const [importPlan, setImportPlan] = useState(undefined);
@@ -74,27 +72,6 @@ function WorkerMultiplePicker({
     loadData();
   }, [dispatch, economicUnitCode, yesterday]);
 
-  const filterOptionsBySearchString = (options) => {
-    const splitByWhitespaceRegex = /\s+/;
-    const filterableSearchString = searchString.toLowerCase().trim();
-    const searchTerms = filterableSearchString.split(splitByWhitespaceRegex);
-
-    return options.filter((option) => {
-      const chfId = option?.chfId?.toLowerCase() || '';
-      const lastName = option?.lastName?.toLowerCase() || '';
-      const otherNames = option?.otherNames?.toLowerCase() || '';
-
-      return searchTerms.every((term) => chfId.includes(term) || lastName.includes(term) || otherNames.includes(term));
-    });
-  };
-
-  const filterOptions = (options) => {
-    if (searchString.length < WORKER_THRESHOLD || isLoading) {
-      return [];
-    }
-    return filterOptionsBySearchString(options);
-  };
-
   const handleImportDialogOpen = () => {
     setConfigurationDialogOpen((prevState) => !prevState);
   };
@@ -151,15 +128,7 @@ function WorkerMultiplePicker({
         onChange={onChange}
         value={value}
         getOptionSelected={(option, value) => option.uuid === value.uuid}
-        filterOptions={filterOptions}
-        noOptionsText={
-          searchString.length < WORKER_THRESHOLD
-            ? formatMessage('workerVoucher.WorkerMultiplePicker.underThreshold')
-            : formatMessage('workerVoucher.WorkerMultiplePicker.noOptions')
-        }
-        filterSelectedOptions={filterSelectedOptions}
-        onInputChange={(_, newInputValue) => setSearchString(newInputValue)}
-        setCurrentString={setSearchString}
+        noOptionsText={formatMessage('workerVoucher.WorkerMultiplePicker.noOptions')}
         disableCloseOnSelect
         getOptionLabel={({ chfId, lastName, otherNames }) => `${chfId} ${lastName} ${otherNames}`}
         renderOption={(option, { selected }) => (
@@ -196,7 +165,6 @@ function WorkerMultiplePicker({
               style={{
                 zIndex: 1300,
                 maxHeight: dropdownMaxHeight,
-                overflowY: 'auto',
               }}
             />
           );

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -98,7 +98,7 @@
   "workerVoucher.acquire.confirmation": "I confirm the voucher acquirement, acknowledging that I have read and agree to the terms and policies.",
   "workerVoucher.assign.confirmation": "I confirm the voucher assignment, acknowledging that I have read and agree to the terms and policies.",
   "workerVoucher.vouchers.required": "You need to fill out all required fields to continue",
-  "workerVoucher.WorkerMultiplePicker.placeholder": "Search for Worker",
+  "workerVoucher.WorkerMultiplePicker.placeholder": "Search by IDNP, Worker First Name or Last Name",
   "workerVoucher.WorkerMultiplePicker.underThreshold": "Enter at least 3 characters: IDNP, Worker First Name or Last Name",
   "workerVoucher.WorkerMultiplePicker.noOptions": "No results",
   "workerVoucher.WorkerDateRangePicker.selectDate": "Select Date",