(fix) various UI issues with transition queue entry form and queue ta…

…ble (#1005) * (fix) various UI issues with transition queue entry form and queue table * change 'Current value' to 'Current'
openmrs · Feb 29, 2024 · 5a8e5b2 · 5a8e5b2
1 parent ca14164
commit 5a8e5b2
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 25 deletions.
diff --git a/packages/esm-service-queues-app/src/active-visits/active-visits-table.scss b/packages/esm-service-queues-app/src/active-visits/active-visits-table.scss
@@ -90,6 +90,7 @@
     align-items: baseline;
     height: spacing.$spacing-07;
     margin-bottom: spacing.$spacing-02;
+    z-index: 1; // prevent dropdown from getting covered by table elements
   }
 }
 

diff --git a/packages/esm-service-queues-app/src/queue-table/queue-table-by-status.component.tsx b/packages/esm-service-queues-app/src/queue-table/queue-table-by-status.component.tsx
@@ -50,15 +50,8 @@ const QueueTableByStatus: React.FC<QueueTableByStatusProps> = ({
   const { queueEntries, isLoading } = useQueueEntries({ queue: selectedQueue.uuid });
   const allowedStatuses = selectedQueue.allowedStatuses;
 
-  const currentStatusUuid = selectedStatus?.uuid;
-
-  const currentStatusIndex = Math.max(0, allowedStatuses?.findIndex((s) => s.uuid == currentStatusUuid));
-
-  const queueEntriesForCurrentStatus = queueEntries?.filter(
-    (entry) => !currentStatusUuid || entry.status.uuid == currentStatusUuid,
-  );
-
-  const tableConfig = configByStatus?.get(currentStatusUuid) ?? defaultQueueTableConfig;
+  const currentStatusUuid = selectedStatus?.uuid ?? allowedStatuses?.[0]?.uuid;
+  const currentStatusIndex = allowedStatuses?.findIndex((s) => s.uuid == currentStatusUuid);
 
   const noStatuses = !allowedStatuses?.length;
   if (isLoading) {
@@ -74,6 +67,9 @@ const QueueTableByStatus: React.FC<QueueTableByStatusProps> = ({
     );
   }
 
+  const queueEntriesForCurrentStatus = queueEntries?.filter((entry) => entry.status.uuid == currentStatusUuid);
+  const tableConfig = configByStatus?.get(currentStatusUuid) ?? defaultQueueTableConfig;
+
   return (
     <div className={styles.container}>
       <div className={styles.headerContainer}>

diff --git a/packages/esm-service-queues-app/src/queue-table/queue-table.scss b/packages/esm-service-queues-app/src/queue-table/queue-table.scss
@@ -45,6 +45,7 @@
     align-items: baseline;
     height: spacing.$spacing-07;
     margin-bottom: spacing.$spacing-02;
+    z-index: 1; // prevent dropdown from getting covered by table elements
   }
 
   :global(.cds--table-toolbar) {
@@ -54,9 +55,6 @@
   }
 }
 
-.tableToolbaer {
-}
-
 .queueTable tr:last-of-type {
   td {
     border-bottom: none;

diff --git a/...service-queues-app/src/queue-table/transitions/transition-queue-entry-modal.component.tsx b/...service-queues-app/src/queue-table/transitions/transition-queue-entry-modal.component.tsx
@@ -42,8 +42,8 @@ const TransitionQueueEntryModal: React.FC<TransitionQueueEntryModalProps> = ({ q
     selectedPriority: queueEntry.priority.uuid,
     selectedStatus: queueEntry.status.uuid,
   });
-
   const { queues } = useQueues();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const selectedQueue = queues.find((q) => q.uuid == formState.selectedQueue);
 
@@ -74,6 +74,7 @@ const TransitionQueueEntryModal: React.FC<TransitionQueueEntryModalProps> = ({ q
 
   const submitForm = (e) => {
     e.preventDefault();
+    setIsSubmitting(true);
 
     transitionQueueEntry({
       queueEntryToTransition: queueEntry.uuid,
@@ -101,9 +102,14 @@ const TransitionQueueEntryModal: React.FC<TransitionQueueEntryModalProps> = ({ q
           kind: 'error',
           subtitle: error?.message,
         });
+      })
+      .finally(() => {
+        setIsSubmitting(false);
       });
   };
 
+  const selectedPriorityIndex = priorities.findIndex((p) => p.uuid == formState.selectedPriority);
+
   return (
     <div>
       <Form onSubmit={submitForm}>
@@ -121,10 +127,16 @@ const TransitionQueueEntryModal: React.FC<TransitionQueueEntryModalProps> = ({ q
                   invalidText="Required"
                   value={formState.selectedQueue}
                   onChange={(event) => setSelectedQueueUuid(event.target.value)}>
-                  {queues?.map((queue) => (
-                    <SelectItem key={queue.uuid} text={queue.display} value={queue.uuid}>
-                      {queue.display}
-                    </SelectItem>
+                  {queues?.map(({ uuid, display }) => (
+                    <SelectItem
+                      key={uuid}
+                      text={
+                        uuid == queueEntry.queue.uuid
+                          ? t('currentValueFormatted', '{{value}} (Current)', { value: display })
+                          : display
+                      }
+                      value={uuid}
+                    />
                   ))}
                 </Select>
               </section>
@@ -146,7 +158,16 @@ const TransitionQueueEntryModal: React.FC<TransitionQueueEntryModalProps> = ({ q
                       setSelectedStatusUuid(uuid);
                     }}>
                     {statuses?.map(({ uuid, display }) => (
-                      <RadioButton key={uuid} name={display} labelText={display} value={uuid} />
+                      <RadioButton
+                        key={uuid}
+                        name={display}
+                        labelText={
+                          uuid == queueEntry.status.uuid
+                            ? t('currentValueFormatted', '{{value}} (Current)', { value: display })
+                            : display
+                        }
+                        value={uuid}
+                      />
                     ))}
                   </RadioButtonGroup>
                 )}
@@ -165,13 +186,23 @@ const TransitionQueueEntryModal: React.FC<TransitionQueueEntryModalProps> = ({ q
                 ) : (
                   <ContentSwitcher
                     size="sm"
-                    selectedIndex={1}
+                    selectedIndex={selectedPriorityIndex}
                     onChange={(event) => {
                       setSelectedPriorityUuid(event.name as string);
                     }}>
-                    {priorities?.map(({ uuid, display }) => {
-                      return <Switch role="radio" name={uuid} text={display} key={uuid} value={uuid} />;
-                    })}
+                    {priorities?.map(({ uuid, display }) => (
+                      <Switch
+                        role="radio"
+                        name={uuid}
+                        text={
+                          uuid == queueEntry.priority.uuid
+                            ? t('currentValueFormatted', '{{value}} (Current)', { value: display })
+                            : display
+                        }
+                        key={uuid}
+                        value={uuid}
+                      />
+                    ))}
                   </ContentSwitcher>
                 )}
               </section>
@@ -184,7 +215,8 @@ const TransitionQueueEntryModal: React.FC<TransitionQueueEntryModalProps> = ({ q
           </Button>
           <Button
             disabled={
-              formState.selectedQueue == queueEntry.queue.uuid && formState.selectedStatus == queueEntry.status.uuid
+              isSubmitting ||
+              (formState.selectedQueue == queueEntry.queue.uuid && formState.selectedStatus == queueEntry.status.uuid)
             }
             type="submit">
             {t('transitionPatient', 'Transition patient')}

diff --git a/.../esm-service-queues-app/src/queue-table/transitions/transition-queue-entry-modal.test.tsx b/.../esm-service-queues-app/src/queue-table/transitions/transition-queue-entry-modal.test.tsx
@@ -28,11 +28,14 @@ describe('TransitionQueueEntryModal: ', () => {
     expect(screen.getByText(queueEntry.patient.display)).toBeInTheDocument();
 
     for (const status of allowedStatuses) {
-      expect(screen.getByRole('radio', { name: status.display })).toBeInTheDocument();
+      const expectedStatusDisplay =
+        queueEntry.status.uuid == status.uuid ? `${status.display} (Current)` : status.display;
+      expect(screen.getByRole('radio', { name: expectedStatusDisplay })).toBeInTheDocument();
     }
 
     for (const pri of allowedPriorities) {
-      expect(screen.getByRole('radio', { name: pri.display })).toBeInTheDocument();
+      const expectedPriorityDisplay = queueEntry.priority.uuid == pri.uuid ? `${pri.display} (Current)` : pri.display;
+      expect(screen.getByRole('radio', { name: expectedPriorityDisplay })).toBeInTheDocument();
     }
   });
 

diff --git a/packages/esm-service-queues-app/translations/en.json b/packages/esm-service-queues-app/translations/en.json
@@ -49,6 +49,7 @@
   "configureServices": "Please configure services to continue.",
   "configureStatus": "Please configure status to continue.",
   "contactDetails": "Contact Details",
+  "currentValueFormatted": "{{value}} (Current)",
   "currentVisit": "Current visit",
   "date": "Date",
   "date&Time": "Date & time",