(chore) : add queue empty states (#100)

* add privilegs

* fix : add queue empty states

* ffic : fix  build error

Author: jabahum

packages/esm-patient-queues-app/src/active-visit-patient-reception/active-visits-reception-table.component.tsx

@@ -39,6 +39,7 @@ import StatusIcon from '../queue-entry-table-components/status-icon.component';
 import { SearchTypes } from '../types';
 import { usePatientQueuesList } from './active-visits-reception.resource';
 import styles from './active-visits-reception.scss';
+import EmptyState from '../utils/empty-state/empty-state.component';
 
 type FilterProps = {
   rowIds: Array<string>;
@@ -347,7 +348,6 @@ function ActiveVisitsReceptionTable() {
         <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
           <span className={styles.heading}>{`Checked In Patients`}</span>
         </div>
-        {/* <UserHasAccess privilege={PRIVILEGE_CHECKIN}> */}
         <div className={styles.headerButtons}>
           <ExtensionSlot
             name="patient-search-button-slot"
@@ -376,8 +376,8 @@ function ActiveVisitsReceptionTable() {
             headerTitle={overlayHeader}
           />
         )}
-        {/* </UserHasAccess> */}
       </div>
+      <EmptyState msg="No patient queue items to display" helper="" />
     </div>
   );
 }

packages/esm-patient-queues-app/src/active-visits/active-visits-table.component.tsx

@@ -62,6 +62,7 @@ import styles from './active-visits-table.scss';
 import EditActionsMenu from './edit-action-menu.components';
 import { usePatientQueuesList } from './patient-queues.resource';
 import PickPatientActionMenu from '../queue-entry-table-components/pick-patient-queue-entry-menu.component';
+import EmptyState from '../utils/empty-state/empty-state.component';
 
 type FilterProps = {
   rowIds: Array<string>;
@@ -385,70 +386,6 @@ const ActiveVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) => {
     );
   }
 
-  return (
-    <div className={styles.container}>
-      {useQueueTableTabs === false ? (
-        <>
-          <div className={styles.headerContainer}>
-            <UserHasAccess privilege={PRIVILEGE_CHECKIN}>
-              <div className={styles.headerButtons}>
-                <ExtensionSlot
-                  name="patient-search-button-slot"
-                  state={{
-                    buttonText: t('checkIn', 'Check In'),
-                    overlayHeader: t('checkIn', 'Check In'),
-                    buttonProps: {
-                      kind: 'secondary',
-                      renderIcon: (props) => <Add size={16} {...props} />,
-                      size: 'sm',
-                    },
-                    selectPatientAction: (selectedPatientUuid) => {
-                      setShowOverlay(true);
-                      setView(SearchTypes.SCHEDULED_VISITS);
-                      setViewState({ selectedPatientUuid });
-                      setOverlayTitle(t('checkIn', 'Check In'));
-                    },
-                  }}
-                />
-              </div>
-            </UserHasAccess>
-          </div>
-        </>
-      ) : null}
-      <div className={styles.tileContainer}>
-        <Tile className={styles.tile}>
-          <p className={styles.content}>{t('noPatientsToDisplay', 'No patients to display')}</p>
-          <UserHasAccess privilege={PRIVILEGE_CHECKIN}>
-            <ExtensionSlot
-              name="patient-search-button-slot"
-              state={{
-                buttonText: t('checkIn', 'Check In'),
-                overlayHeader: t('checkIn', 'Check In'),
-                buttonProps: {
-                  kind: 'ghost',
-                  renderIcon: (props) => <Add size={16} {...props} />,
-                  size: 'sm',
-                },
-                selectPatientAction: (selectedPatientUuid) => {
-                  setShowOverlay(true);
-                  setView(SearchTypes.SCHEDULED_VISITS);
-                  setViewState({ selectedPatientUuid });
-                  setOverlayTitle(t('checkIn', 'Check In'));
-                },
-              }}
-            />
-          </UserHasAccess>
-        </Tile>
-      </div>
-      {showOverlay && (
-        <PatientSearch
-          view={view}
-          closePanel={() => setShowOverlay(false)}
-          viewState={viewState}
-          headerTitle={overlayHeader}
-        />
-      )}
-    </div>
-  );
+  return <EmptyState msg="No queue items to display" helper="" />;
 };
 export default ActiveVisitsTable;

packages/esm-patient-queues-app/src/active-visits/change-status-dialog.component.tsx

@@ -187,8 +187,25 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
             //  endvisit
             endVisitStatus;
 
-            // view patient summary
-            navigate({ to: `\${openmrsSpaBase}/patient/${currentEntry.patientUuid}/chart` });
+            // pick and route
+            const status = 'Picked';
+            updateQueueEntry(status, provider, currentEntry?.id, priorityComment, 'comment').then(
+              () => {
+                // view patient summary
+                navigate({ to: `\${openmrsSpaBase}/patient/${currentEntry.patientUuid}/chart` });
+
+                closeModal();
+                mutate();
+              },
+              (error) => {
+                showNotification({
+                  title: t('queueEntryUpdateFailed', 'Error updating queue entry status'),
+                  kind: 'error',
+                  critical: true,
+                  description: error?.message,
+                });
+              },
+            );
 
             closeModal();
             mutate();
@@ -213,6 +230,7 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
       closeModal,
       mutate,
       endVisitStatus,
+      currentEntry?.id,
       currentEntry.patientUuid,
     ],
   );
@@ -234,10 +252,10 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
                 &nbsp;
                 {t('years', 'Years')}
               </h5>
-
+              <br></br>
+              <hr />
               <br></br>
               <h4 className={styles.section}> Currently Serving :</h4>
-
               <h5 className={styles.section}>
                 {queueEntry.name} &nbsp; · &nbsp;{queueEntry.patientSex} &nbsp; · &nbsp;{queueEntry.patientAge}&nbsp;
                 {t('years', 'Years')}

packages/esm-patient-queues-app/src/utils/empty-state/empty-state.component.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Layer, Tile } from '@carbon/react';
+import styles from './empty-state.scss';
+
+type EmptyStateProps = {
+  msg: string;
+  helper: string;
+};
+
+const EmptyState: React.FC<EmptyStateProps> = ({ msg, helper }: EmptyStateProps) => {
+  return (
+    <Layer className={styles.layer}>
+      <Tile className={styles.tile}>
+        <svg width={64} height={64} viewBox="0 0 64 64">
+          <title>Empty data illustration</title>
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M38.133 13.186H21.947c-.768.001-1.39.623-1.39 1.391V50.55l-.186.057-3.97 1.216a.743.743 0 01-.927-.493L3.664 12.751a.742.742 0 01.492-.926l6.118-1.874 17.738-5.43 6.119-1.873a.741.741 0 01.926.492L38.076 13l.057.186z"
+              fill="#F4F4F4"
+            />
+            <path
+              d="M41.664 13L38.026 1.117A1.576 1.576 0 0036.056.07l-8.601 2.633-17.737 5.43-8.603 2.634a1.578 1.578 0 00-1.046 1.97l12.436 40.616a1.58 1.58 0 001.969 1.046l5.897-1.805.185-.057v-.194l-.185.057-5.952 1.822a1.393 1.393 0 01-1.737-.923L.247 12.682a1.39 1.39 0 01.923-1.738L9.772 8.31 27.51 2.881 36.112.247a1.393 1.393 0 011.737.923L41.47 13l.057.186h.193l-.057-.185z"
+              fill="#8D8D8D"
+            />
+            <path
+              d="M11.378 11.855a.836.836 0 01-.798-.59L9.385 7.361a.835.835 0 01.554-1.042l16.318-4.996a.836.836 0 011.042.554l1.195 3.902a.836.836 0 01-.554 1.043l-16.318 4.995a.831.831 0 01-.244.037z"
+              fill="#C6C6C6"
+            />
+            <circle fill="#C6C6C6" cx={17.636} cy={2.314} r={1.855} />
+            <circle fill="#FFF" fillRule="nonzero" cx={17.636} cy={2.314} r={1.175} />
+            <path
+              d="M55.893 53.995H24.544a.79.79 0 01-.788-.789V15.644a.79.79 0 01.788-.788h31.349a.79.79 0 01.788.788v37.562a.79.79 0 01-.788.789z"
+              fill="#F4F4F4"
+            />
+            <path
+              d="M41.47 13H21.948a1.579 1.579 0 00-1.576 1.577V52.4l.185-.057V14.577c.001-.768.623-1.39 1.391-1.39h19.581L41.471 13zm17.02 0H21.947a1.579 1.579 0 00-1.576 1.577v42.478c0 .87.706 1.576 1.576 1.577H58.49a1.579 1.579 0 001.576-1.577V14.577a1.579 1.579 0 00-1.576-1.576zm1.39 44.055c0 .768-.622 1.39-1.39 1.392H21.947c-.768-.001-1.39-.624-1.39-1.392V14.577c0-.768.622-1.39 1.39-1.39H58.49c.768 0 1.39.622 1.39 1.39v42.478z"
+              fill="#8D8D8D"
+            />
+            <path
+              d="M48.751 17.082H31.686a.836.836 0 01-.835-.835v-4.081c0-.46.374-.834.835-.835H48.75c.461 0 .834.374.835.835v4.08c0 .462-.374.835-.835.836z"
+              fill="#C6C6C6"
+            />
+            <circle fill="#C6C6C6" cx={40.218} cy={9.755} r={1.855} />
+            <circle fill="#FFF" fillRule="nonzero" cx={40.218} cy={9.755} r={1.13} />
+          </g>
+        </svg>
+        <p className={styles.content}>{msg}</p>
+        <p className={styles.explainer}>{helper}</p>
+      </Tile>
+    </Layer>
+  );
+};
+
+export default EmptyState;

packages/esm-patient-queues-app/src/utils/empty-state/empty-state.scss

@@ -0,0 +1,62 @@
+@use '@carbon/styles/scss/colors';
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/type";
+
+.desktopHeading {
+  h4 {
+    @include type.type-style("heading-compact-02");
+    color: colors.$gray-70;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style("heading-03");
+    color: colors.$gray-70;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: spacing.$spacing-05;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.heading:after {
+  content: "";
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.tile {
+  padding: 2rem;
+}
+
+.layer {
+  margin: 1rem 0;
+  text-align: center;
+  border: 1px solid colors.$gray-20;
+}
+
+.content {
+  @include type.type-style("heading-compact-02");
+  color: colors.$gray-70;
+  margin-top: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.explainer {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+}