UI enhancement and adapt appointment module to match designs (openmrs#11)

* Update CI

* Complete deployment changes

Author: donaldkibet

.github/workflows/ci.yml

@@ -236,14 +236,15 @@ jobs:
           password: ${{ secrets.DEPLOYER_PASSWORD }}
           data: '{ "service":"${{ env.ESM_NAME }}","url":"https://donaldkibet.fra1.digitaloceanspaces.com/${{ env.ESM_NAME }}/${{ env.TIMESTAMP }}_${{ github.sha }}/${{ env.JS_NAME }}" }'
           customHeaders: '{ "Accept": "application/json", "Content-Type": "application/json" }'
+  
 
-  deploy_patient_list_app:
+  deploy_active_visits_app:
     runs-on: ubuntu-latest
 
     env:
-      DIR_NAME: "esm-patient-list-app"
-      ESM_NAME: "@openmrs/esm-patient-list-app"
-      JS_NAME: "openmrs-esm-patient-list-app.js"
+      DIR_NAME: "esm-active-visits-app"
+      ESM_NAME: "@openmrs/esm-active-visits-app"
+      JS_NAME: "openmrs-esm-active-visits-app.js"
 
     needs: build
 
@@ -261,7 +262,6 @@ jobs:
         run: |
           mkdir -p dist/${{ env.ESM_NAME }}/${{ env.TIMESTAMP }}_${{ github.sha }}
           mv packages/${{ env.DIR_NAME }}/dist/*.* dist/${{ env.ESM_NAME }}/${{ env.TIMESTAMP }}_${{ github.sha }}/
-      
       - name: Publish to Digital Ocean
         uses: jakejarvis/s3-sync-action@master
         with:
@@ -272,7 +272,6 @@ jobs:
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           AWS_S3_ENDPOINT: ${{ secrets.AWS_S3_ENDPOINT }}
           SOURCE_DIR: "dist"
-      
       - name: Update Importmap
         uses: fjogeleit/http-request-action@master
         with:
@@ -283,13 +282,13 @@ jobs:
           data: '{ "service":"${{ env.ESM_NAME }}","url":"https://donaldkibet.fra1.digitaloceanspaces.com/${{ env.ESM_NAME }}/${{ env.TIMESTAMP }}_${{ github.sha }}/${{ env.JS_NAME }}" }'
           customHeaders: '{ "Accept": "application/json", "Content-Type": "application/json" }'
 
-  deploy_patient_registration_app:
+  deploy_patient_search_app:
     runs-on: ubuntu-latest
 
     env:
-      DIR_NAME: "esm-patient-registration-app"
-      ESM_NAME: "@openmrs/esm-patient-registration-app"
-      JS_NAME: "openmrs-esm-patient-registration-app.js"
+      DIR_NAME: "esm-patient-search-app"
+      ESM_NAME: "@openmrs/esm-patient-search-app"
+      JS_NAME: "openmrs-esm-patient-search-app.js"
 
     needs: build
 
@@ -328,74 +327,94 @@ jobs:
           password: ${{ secrets.DEPLOYER_PASSWORD }}
           data: '{ "service":"${{ env.ESM_NAME }}","url":"https://donaldkibet.fra1.digitaloceanspaces.com/${{ env.ESM_NAME }}/${{ env.TIMESTAMP }}_${{ github.sha }}/${{ env.JS_NAME }}" }'
           customHeaders: '{ "Accept": "application/json", "Content-Type": "application/json" }'
-
-  pre_release:
+deploy_patient_list_app:
     runs-on: ubuntu-latest
 
+    env:
+      DIR_NAME: "esm-patient-list-app"
+      ESM_NAME: "@openmrs/esm-patient-list-app"
+      JS_NAME: "openmrs-esm-patient-list-app.js"
+
     needs: build
 
     if: ${{ github.event_name == 'push' }}
 
     steps:
-      - uses: actions/checkout@v3
-      - name: Setup Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: "16.15"
-          registry-url: "https://registry.npmjs.org"
-
-      - name: Cache dependencies
-        id: cache
-        uses: actions/cache@v3
+      - name: Download Artifacts
+        uses: actions/download-artifact@v2
+      
+      - name: Compute Timestamp
+        run: echo "TIMESTAMP=$(date +'%Y-%m-%d')" >> $GITHUB_ENV
+      
+      - name: Prepare Directory
+        shell: bash
+        run: |
+          mkdir -p dist/${{ env.ESM_NAME }}/${{ env.TIMESTAMP }}_${{ github.sha }}
+          mv packages/${{ env.DIR_NAME }}/dist/*.* dist/${{ env.ESM_NAME }}/${{ env.TIMESTAMP }}_${{ github.sha }}/
+      
+      - name: Publish to Digital Ocean
+        uses: jakejarvis/s3-sync-action@master
         with:
-          path: '**/node_modules'
-          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
-
-      - name: Install dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: yarn install --immutable
-
-      - run: yarn lerna version "$(node -e "console.log(require('semver').inc(require('./lerna.json').version, 'patch'))")-pre.${{ github.run_number }}" --no-git-tag-version --no-push --yes
-      - run: yarn turbo run build --color
-      - run: git config user.email "info@openmrs.org" && git config user.name "OpenMRS CI"
-      - run: git add . && git commit -m "Prerelease version" --no-verify
-      - run: yarn run ci:prepublish
+          args: --acl public-read --follow-symlinks --cache-control "max-age=31536000"
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
-      - name: Upload Artifacts
-        uses: actions/upload-artifact@v2
+          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_S3_ENDPOINT: ${{ secrets.AWS_S3_ENDPOINT }}
+          SOURCE_DIR: "dist"
+      
+      - name: Update Importmap
+        uses: fjogeleit/http-request-action@master
         with:
-          name: packages
-          path: |
-            packages/**/dist
+          url: http://${{ secrets.DEPLOYER_HOST }}/services?env=prod
+          method: "PATCH"
+          username: ${{ secrets.DEPLOYER_USERNAME }}
+          password: ${{ secrets.DEPLOYER_PASSWORD }}
+          data: '{ "service":"${{ env.ESM_NAME }}","url":"https://donaldkibet.fra1.digitaloceanspaces.com/${{ env.ESM_NAME }}/${{ env.TIMESTAMP }}_${{ github.sha }}/${{ env.JS_NAME }}" }'
+          customHeaders: '{ "Accept": "application/json", "Content-Type": "application/json" }'
 
-  release:
+  deploy_patient_registration_app:
     runs-on: ubuntu-latest
 
+    env:
+      DIR_NAME: "esm-patient-registration-app"
+      ESM_NAME: "@openmrs/esm-patient-registration-app"
+      JS_NAME: "openmrs-esm-patient-registration-app.js"
+
     needs: build
 
-    if: ${{ github.event_name == 'release' }}
+    if: ${{ github.event_name == 'push' }}
 
     steps:
-      - uses: actions/checkout@v3
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: "16.15"
-          registry-url: "https://registry.npmjs.org"
-
-      - name: Cache dependencies
-        id: cache
-        uses: actions/cache@v3
+      - name: Download Artifacts
+        uses: actions/download-artifact@v2
+      
+      - name: Compute Timestamp
+        run: echo "TIMESTAMP=$(date +'%Y-%m-%d')" >> $GITHUB_ENV
+      
+      - name: Prepare Directory
+        shell: bash
+        run: |
+          mkdir -p dist/${{ env.ESM_NAME }}/${{ env.TIMESTAMP }}_${{ github.sha }}
+          mv packages/${{ env.DIR_NAME }}/dist/*.* dist/${{ env.ESM_NAME }}/${{ env.TIMESTAMP }}_${{ github.sha }}/
+      
+      - name: Publish to Digital Ocean
+        uses: jakejarvis/s3-sync-action@master
         with:
-          path: '**/node_modules'
-          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
-
-      - name: Install dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: yarn install --immutable
-
-      - run: yarn turbo run build --color
-      - run: yarn run ci:publish
+          args: --acl public-read --follow-symlinks --cache-control "max-age=31536000"
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_S3_ENDPOINT: ${{ secrets.AWS_S3_ENDPOINT }}
+          SOURCE_DIR: "dist"
+      
+      - name: Update Importmap
+        uses: fjogeleit/http-request-action@master
+        with:
+          url: http://${{ secrets.DEPLOYER_HOST }}/services?env=prod
+          method: "PATCH"
+          username: ${{ secrets.DEPLOYER_USERNAME }}
+          password: ${{ secrets.DEPLOYER_PASSWORD }}
+          data: '{ "service":"${{ env.ESM_NAME }}","url":"https://donaldkibet.fra1.digitaloceanspaces.com/${{ env.ESM_NAME }}/${{ env.TIMESTAMP }}_${{ github.sha }}/${{ env.JS_NAME }}" }'
+          customHeaders: '{ "Accept": "application/json", "Content-Type": "application/json" }'

packages/esm-appointments-app/src/appointment-forms/appointments-form.component.tsx

@@ -84,8 +84,8 @@ const AppointmentForm: React.FC<AppointmentFormProps> = ({ appointment, patientU
   const { appointmentComments } = useConfig() as ConfigObject;
   const { appointmentStatuses } = useConfig() as ConfigObject;
   const { patient, isLoading } = usePatient(patientUuid ?? appointmentState.patientUuid);
-  const locations = useLocations();
   const session = useSession();
+  const locations = session?.sessionLocation ? [{ ...session?.sessionLocation }] : [];
   const { providers } = useProviders();
   const { services } = useServices();
   const [startDate, setStartDate] = useState(

packages/esm-appointments-app/src/appointments-calendar/appointments-calendar-list-view.component.tsx

@@ -4,6 +4,7 @@ import AppointmentsHeader from '../appointments-header/appointments-header.compo
 import CalendarHeader from './calendar-header.component';
 import MonthlyCalendarView from './monthly-calendar-view.component';
 import styles from './appointments-calendar-list-view.scss';
+import CommingSoon from '../empty-state/comming-soon.component';
 
 interface AppointmentsCalendarListViewProps {}
 type AppointmentsCalendarListView = 'daily' | 'weekly' | 'monthly';
@@ -15,6 +16,7 @@ const AppointmentsCalendarListView: React.FC<AppointmentsCalendarListViewProps>
       <AppointmentsHeader title={t('appointments', 'Appointments')} />
       <CalendarHeader onChangeView={setCalendarView} calendarView={calendarView} />
       {calendarView === 'monthly' && <MonthlyCalendarView type="monthly" events={events} />}
+      {calendarView !== 'monthly' && <CommingSoon />}
     </div>
   );
 };

packages/esm-appointments-app/src/appointments-metrics/appointments-metrics.component.tsx

@@ -50,13 +50,13 @@ const AppointmentsMetrics: React.FC = () => {
           }
           value={highestServiceLoad?.count ?? '--'}
           headerLabel={t('highestServiceVolume', 'High volume Service : {time}', { time: formattedStartDate })}
-          view="highVolume"
+          view=""
         />
         <MetricsCard
           label={t('providers', 'Providers')}
           value={totalProviders}
           headerLabel={t('providersAvailableToday', 'Providers available : {time}', { time: formattedStartDate })}
-          view="providers"
+          view=""
         />
       </div>
     </>

packages/esm-appointments-app/src/appointments-metrics/metrics-card.component.tsx

@@ -45,8 +45,8 @@ const MetricsCard: React.FC<MetricsCardProps> = ({ label, value, headerLabel, ch
         </div>
         {!isEmpty(count) && (
           <div className={styles.countGrid}>
-            <span>Arrived</span>
-            <span>Pending</span>
+            <span>{t('arrived', 'Arrived')}</span>
+            <span>{t('notArrived', 'Not arrived')}</span>
             <p style={{ color: '#319227' }}>{count.arrivedAppointments?.length}</p>
             <p style={{ color: '#da1e28' }}>{count.pendingAppointments?.length}</p>
           </div>

packages/esm-appointments-app/src/appointments-tabs/appointments-base-table.component.tsx

@@ -37,6 +37,8 @@ import CancelAppointment from '../appointment-forms/cancel-appointment.component
 import dayjs from 'dayjs';
 import isToday from 'dayjs/plugin/isToday';
 import utc from 'dayjs/plugin/utc';
+import AppointmentButton from './appointments-button.component';
+import { useServiceQueues } from '../hooks/useServiceQueus';
 dayjs.extend(utc);
 dayjs.extend(isToday);
 
@@ -45,13 +47,15 @@ interface AppointmentsBaseTableProps {
   isLoading: boolean;
   tableHeading: string;
   mutate?: () => void;
+  visits: Array<any>;
 }
 
 const AppointmentsBaseTable: React.FC<AppointmentsBaseTableProps> = ({
   appointments,
   isLoading,
   tableHeading,
   mutate,
+  visits,
 }) => {
   const { t } = useTranslation();
   const { results, goTo, currentPage } = usePagination(appointments, 10);
@@ -64,6 +68,7 @@ const AppointmentsBaseTable: React.FC<AppointmentsBaseTableProps> = ({
     );
   };
 
+  const { isLoading: isLoadingQueueEntries, queueEntries } = useServiceQueues();
   const headerData = [
     {
       header: t('patientName', 'Patient name'),
@@ -86,7 +91,11 @@ const AppointmentsBaseTable: React.FC<AppointmentsBaseTableProps> = ({
       key: 'actions',
     },
   ];
-
+  const patientQueueEntry = (patientUuid: string) => {
+    const queryEntries = queueEntries.find((entry) => entry.queueEntry.patient.uuid === patientUuid);
+    return ` ${queryEntries?.queueEntry?.status?.display ?? ''} ${queryEntries?.queueEntry?.queue?.display ?? ''}`;
+  };
+  const hasVisit = (patientUuid) => visits?.find((visit) => visit?.patient?.uuid === patientUuid)?.startDatetime;
   const rowData = results?.map((appointment, index) => ({
     id: `${index}`,
     patientName: {
@@ -103,7 +112,13 @@ const AppointmentsBaseTable: React.FC<AppointmentsBaseTableProps> = ({
     serviceType: appointment.serviceType,
     provider: appointment.provider,
     actions: (
-      <>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        {}
+        {hasVisit(appointment.patientUuid) ? (
+          patientQueueEntry(appointment.patientUuid)
+        ) : (
+          <AppointmentButton patientUuid={appointment.patientUuid} appointment={appointment} />
+        )}
         {(dayjs(appointment.dateTime).isAfter(dayjs()) || dayjs(appointment.dateTime).isToday()) && (
           <OverflowMenu size="sm" flipped>
             <OverflowMenuItem
@@ -126,7 +141,7 @@ const AppointmentsBaseTable: React.FC<AppointmentsBaseTableProps> = ({
             />
           </OverflowMenu>
         )}
-      </>
+      </div>
     ),
   }));
 
@@ -190,9 +205,7 @@ const AppointmentsBaseTable: React.FC<AppointmentsBaseTableProps> = ({
                   <React.Fragment key={row.id}>
                     <TableExpandRow {...getRowProps({ row })}>
                       {row.cells.map((cell) => (
-                        <TableCell className="cds--table-column-menu" key={cell.id}>
-                          {cell.value?.content ?? cell.value}
-                        </TableCell>
+                        <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
                       ))}
                     </TableExpandRow>
                     {row.isExpanded && (

packages/esm-appointments-app/src/appointments-tabs/appointments-button.component.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { launchOverlay } from '../hooks/useOverlay';
+import VisitForm from '../patient-queue/visit-form/visit-form.component';
+import { MappedAppointment } from '../types';
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
+import utc from 'dayjs/plugin/utc';
+dayjs.extend(utc);
+dayjs.extend(isToday);
+
+interface AppointmentButtonProps {
+  patientUuid: string;
+  appointment: MappedAppointment;
+}
+
+const AppointmentButton: React.FC<AppointmentButtonProps> = ({ appointment, patientUuid }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      {(dayjs(appointment.dateTime).isAfter(dayjs()) || dayjs(appointment.dateTime).isToday()) && (
+        <Button
+          size="sm"
+          kind="ghost"
+          onClick={() =>
+            launchOverlay(
+              t('patientSearch', 'Patient search'),
+              <VisitForm patientUuid={patientUuid} appointment={appointment} />,
+            )
+          }>
+          {t('checkedIn', 'CheckedIn')}
+        </Button>
+      )}
+    </>
+  );
+};
+
+export default AppointmentButton;