Calendar visit types are long - totals not showing

openmrs · Mar 12, 2024 · ae81294 · ae81294
1 parent 38a56ac
commit ae81294
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 44 deletions.
diff --git a/packages/esm-appointments-app/src/calendar/monthly/monthly-view-workload.scss b/packages/esm-appointments-app/src/calendar/monthly/monthly-view-workload.scss
@@ -112,13 +112,20 @@
   border: 1px solid grey;
 }
 
-.smallDesktop {
+.smallDesktopEmpty {
   height: 100px;
 }
 
-.largeDesktop {
+.largeDesktopEmpty {
   height: 150px;
 }
+.smallDesktop {
+  height: auto;
+}
+
+.largeDesktop {
+  height: auto;
+}
 
 .red {
   background-color: colors.$red-70;

diff --git a/packages/esm-appointments-app/src/calendar/monthly/monthly-workload-view.component.tsx b/packages/esm-appointments-app/src/calendar/monthly/monthly-workload-view.component.tsx
@@ -26,56 +26,68 @@ const MonthlyWorkloadView: React.FC<MonthlyWorkloadViewProps> = ({ dateTime, eve
   const onClick = (serviceUuid) => {
     navigate({ to: `${spaHomePage}/appointments/${dayjs(dateTime).format('YYYY-MM-DD')}/${serviceUuid}` });
   };
-
-  return (
-    <div
-      onClick={() => {
-        onClick('');
-      }}
-      className={classNames(
-        styles[isSameMonth(dateTime, dayjs(selectedDate)) ? 'monthly-cell' : 'monthly-cell-disabled'],
-        {
-          [styles.greyBackground]: currentData?.services,
-          [styles.smallDesktop]: layout === 'small-desktop',
-          [styles.largeDesktop]: layout !== 'small-desktop',
-        },
-      )}>
-      {isSameMonth(dateTime, dayjs(selectedDate)) && (
-        <p>
-          <b className={styles.calendarDate}>{dateTime.format('D')}</b>
-          {currentData?.services && (
-            <div className={styles.currentData}>
-              {currentData.services.map(({ serviceName, serviceUuid, count }, i) => (
+  if (!currentData) {
+    return (
+      <div
+        className={classNames(
+          styles[isSameMonth(dateTime, dayjs(selectedDate)) ? 'monthly-cell' : 'monthly-cell-disabled'],
+          {
+            [styles.greyBackground]: currentData?.services,
+            [styles.smallDesktopEmpty]: layout === 'small-desktop',
+            [styles.largeDesktopEmpty]: layout !== 'small-desktop',
+          },
+        )}>
+        {isSameMonth(dateTime, dayjs(selectedDate)) && <b className={styles.calendarDate}>{dateTime.format('D')}</b>}
+      </div>
+    );
+  } else {
+    return (
+      <div
+        className={classNames(
+          styles[isSameMonth(dateTime, dayjs(selectedDate)) ? 'monthly-cell' : 'monthly-cell-disabled'],
+          {
+            [styles.greyBackground]: currentData?.services,
+            [styles.smallDesktop]: layout === 'small-desktop',
+            [styles.largeDesktop]: layout !== 'small-desktop',
+          },
+        )}>
+        {isSameMonth(dateTime, dayjs(selectedDate)) && (
+          <p>
+            <b className={styles.calendarDate}>{dateTime.format('D')}</b>
+            {currentData?.services && (
+              <div className={styles.currentData}>
+                {currentData.services.map(({ serviceName, serviceUuid, count }, i) => (
+                  <div
+                    key={`${serviceUuid}-${count}-${i}`}
+                    role="button"
+                    tabIndex={0}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onClick(serviceUuid);
+                    }}
+                    className={styles.serviceArea}>
+                    <span>{serviceName}</span>
+                    <span>{count}</span>
+                  </div>
+                ))}
                 <div
-                  key={`${serviceUuid}-${count}-${i}`}
                   role="button"
                   tabIndex={0}
                   onClick={(e) => {
                     e.stopPropagation();
-                    onClick(serviceUuid);
+                    onClick('');
                   }}
-                  className={styles.serviceArea}>
-                  <span>{serviceName}</span>
-                  <span>{count}</span>
+                  className={classNames(styles.serviceArea, styles.green)}>
+                  <span>{t('total', 'Total')}</span>
+                  <span>{currentData?.services.reduce((sum, { count = 0 }) => sum + count, 0)}</span>
                 </div>
-              ))}
-              <div
-                role="button"
-                tabIndex={0}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onClick('');
-                }}
-                className={classNames(styles.serviceArea, styles.green)}>
-                <span>{t('total', 'Total')}</span>
-                <span>{currentData?.services.reduce((sum, { count = 0 }) => sum + count, 0)}</span>
               </div>
-            </div>
-          )}
-        </p>
-      )}
-    </div>
-  );
+            )}
+          </p>
+        )}
+      </div>
+    );
+  }
 };
 
 export default MonthlyWorkloadView;