@bathiran212/esm-patient-notes-app 2.0.0

package/src/notes/paginated-notes.component.tsx

@@ -0,0 +1,182 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+import {
+  DataTable,
+  type DataTableCell,
+  type DataTableSortState,
+  Table,
+  TableCell,
+  TableContainer,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableExpandedRow,
+} from '@carbon/react';
+import { orderBy } from 'lodash-es';
+import { formatDate, formatTime, parseDate, useLayoutType, usePagination } from '@openmrs/esm-framework';
+import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
+import type { PatientNote } from '../types';
+import styles from './notes-overview.scss';
+
+interface PaginatedNotes {
+  notes: Array<PatientNote>;
+  pageSize: number;
+  pageUrl?: string;
+  urlLabel?: string;
+}
+
+const PaginatedNotes: React.FC<PaginatedNotes> = ({ notes, pageSize, pageUrl, urlLabel }) => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const isTablet = layout === 'tablet';
+
+  const [sortParams, setSortParams] = useState({ key: '', order: 'none' });
+
+  const tableHeaders = [
+    {
+      key: 'encounterDate',
+      header: t('date', 'Date'),
+    },
+    {
+      key: 'diagnoses',
+      header: t('diagnoses', 'Diagnoses'),
+    },
+  ];
+
+  const sortDate = (myArray, order) =>
+    order === 'ASC'
+      ? orderBy(myArray, [(obj) => new Date(obj.encounterDate).getTime()], ['desc'])
+      : orderBy(myArray, [(obj) => new Date(obj.encounterDate).getTime()], ['asc']);
+
+  const { key, order } = sortParams;
+
+  const sortedData =
+    key === 'encounterDate'
+      ? sortDate(notes, order)
+      : order === 'DESC'
+        ? orderBy(notes, [key], ['desc'])
+        : orderBy(notes, [key], ['asc']);
+
+  function customSortRow(
+    cellA,
+    cellB,
+    {
+      sortDirection,
+      sortStates,
+    }: {
+      sortDirection: string;
+      sortStates: any;
+      locale: string;
+    },
+  ) {
+    const key = Object.keys(sortStates).find((k) => sortStates[k] === sortDirection);
+    setSortParams({ key: key ?? '', order: sortDirection });
+    return 0;
+  }
+
+  const { results: paginatedNotes, goTo, currentPage } = usePagination(sortedData, pageSize);
+  const tableRows = React.useMemo(
+    () =>
+      paginatedNotes?.map((note) => ({
+        ...note,
+        id: `${note.id}`,
+        encounterDate: formatDate(parseDate(note.encounterDate), { mode: 'wide' }),
+        diagnoses: note.diagnoses ? note.diagnoses : '--',
+      })),
+    [paginatedNotes],
+  );
+
+  return (
+    <>
+      <DataTable
+        rows={tableRows}
+        sortRow={customSortRow}
+        headers={tableHeaders}
+        isSortable
+        size={isTablet ? 'lg' : 'sm'}
+        useZebraStyles
+      >
+        {({
+          getExpandedRowProps,
+          getExpandHeaderProps,
+          getHeaderProps,
+          getRowProps,
+          getTableContainerProps,
+          getTableProps,
+          headers,
+          rows,
+        }) => (
+          <TableContainer {...getTableContainerProps()}>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
+                  {headers.map((header, i) => (
+                    <TableHeader
+                      key={i}
+                      className={classNames(styles.productiveHeading01, styles.text02)}
+                      {...getHeaderProps({
+                        header,
+                      })}
+                    >
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, i) => (
+                  <React.Fragment key={row.id}>
+                    <TableExpandRow {...getRowProps({ row })}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                      ))}
+                    </TableExpandRow>
+                    {row.isExpanded ? (
+                      <TableExpandedRow
+                        className={styles.expandedRow}
+                        colSpan={headers.length + 1}
+                        {...getExpandedRowProps({ row })}
+                      >
+                        <div className={styles.container} key={i}>
+                          {tableRows?.[i]?.encounterNote ? (
+                            <div className={styles.copy}>
+                              <span className={styles.content}>{tableRows?.[i]?.encounterNote}</span>
+                              <span className={styles.metadata}>
+                                {formatTime(new Date(tableRows?.[i]?.encounterNoteRecordedAt))} &middot;{' '}
+                                {tableRows?.[i]?.encounterProvider}, {tableRows?.[i]?.encounterProviderRole}
+                              </span>
+                            </div>
+                          ) : (
+                            <span className={styles.copy}>{t('noVisitNoteToDisplay', 'No visit note to display')}</span>
+                          )}
+                        </div>
+                      </TableExpandedRow>
+                    ) : (
+                      <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                    )}
+                  </React.Fragment>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      <PatientChartPagination
+        pageNumber={currentPage}
+        totalItems={notes.length}
+        currentItems={paginatedNotes.length}
+        pageSize={pageSize}
+        onPageNumberChange={({ page }) => goTo(page)}
+        dashboardLinkUrl={pageUrl}
+        dashboardLinkLabel={urlLabel}
+      />
+    </>
+  );
+};
+
+export default PaginatedNotes;

package/src/notes/visit-note-config-schema.ts

@@ -0,0 +1,38 @@
+import { Type } from '@openmrs/esm-framework';
+
+export default {
+  clinicianEncounterRole: {
+    _type: Type.UUID,
+    _default: '240b26f9-dd88-4172-823d-4a8bfeb7841f',
+    _description: 'Doctor or Nurse who is the primary provider for an encounter, and will sign the note',
+  },
+  visitDiagnosesConceptUuid: {
+    _type: Type.ConceptUuid,
+    _default: '159947AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    _description: 'The set of diagnoses that were either addressed or diagnosed during the current visit',
+  },
+  encounterNoteTextConceptUuid: {
+    _type: Type.ConceptUuid,
+    _default: '162169AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    _description: 'Free text note field intended to capture unstructured description of the patient encounter',
+  },
+  encounterTypeUuid: {
+    _type: Type.UUID,
+    _default: 'd7151f82-c1f3-4152-a605-2f9ea7414a79',
+    _description:
+      'Encounter where a full or abbreviated examination is done, usually leading to a presumptive or confirmed diagnosis, recorded by the examining clinician.',
+  },
+  formConceptUuid: {
+    _type: Type.UUID,
+    _default: 'c75f120a-04ec-11e3-8780-2b40bef9a44b',
+    _description: 'The UUID of the Visit Note form to be associated with visit note encounters',
+  },
+};
+
+export interface VisitNoteConfigObject {
+  clinicianEncounterRole: string;
+  encounterNoteTextConceptUuid: string;
+  encounterTypeUuid: string;
+  formConceptUuid: string;
+  visitDiagnosesConceptUuid: string;
+}

package/src/notes/visit-notes-form.scss

@@ -0,0 +1,219 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.heading {
+  @include type.type-style('heading-03');
+  margin-bottom: layout.$spacing-03;
+}
+
+.columnLabel {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+}
+
+.diagnosis {
+  padding: layout.$spacing-04;
+  border-top: 0.0625rem solid colors.$gray-20;
+}
+
+.diagnosis:first-of-type {
+  border-top: none;
+}
+
+.diagnosis:last-of-type {
+  border-bottom: none;
+}
+
+.diagnosisList {
+  background-color: white;
+  max-height: 13.5rem;
+  overflow-y: auto;
+  border: 1px solid colors.$gray-20;
+}
+
+.diagnosisList li:hover {
+  background-color: colors.$gray-20;
+}
+
+.diagnosesText {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-05;
+}
+
+.emptyResults {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+  min-height: layout.$spacing-05;
+}
+
+.imgUploadHelperText {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+}
+
+.imgThumbnailContainer {
+  height: 7rem;
+  width: 7rem;
+}
+
+.imgThumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.imgThumbnailGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 7rem);
+  gap: layout.$spacing-05;
+  margin-top: layout.$spacing-05;
+}
+
+.imgThumbnailItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.removeButton {
+  position: absolute;
+  top: layout.$spacing-02;
+  right: layout.$spacing-02;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  padding-block-start: 0;
+  --cds-layout-size-height-local: 0;
+}
+
+.closeIcon {
+  fill: white !important;
+}
+
+.button {
+  height: layout.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.spinner {
+  &:global(.cds--inline-loading) {
+    min-height: layout.$spacing-05;
+  }
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: white;
+}
+
+.desktop {
+  padding: 0;
+}
+
+.headerGridRow {
+  border-bottom: 0.0625rem solid colors.$gray-20;
+  margin: 0;
+}
+
+.dataGridRow {
+  display: grid;
+  grid-template-columns: 50% 10% 1fr;
+  margin: layout.$spacing-03 layout.$spacing-05;
+}
+
+.formContainer {
+  margin: layout.$spacing-05;
+  flex: 1;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.grid {
+  margin: 0;
+  padding: 0;
+}
+
+.row {
+  margin: layout.$spacing-03 0 layout.$spacing-08;
+}
+
+.skeleton {
+  margin-top: layout.$spacing-02;
+  height: layout.$spacing-07;
+}
+
+.errorMessage {
+  color: colors.$red-60;
+  margin-top: layout.$spacing-03;
+}
+
+.diagnoserrorOutline {
+  :global(.cds--search-input):focus {
+    outline: 2.5px solid colors.$red-60;
+  }
+
+  :global(.cds--search-magnifier) {
+    svg {
+      fill: colors.$red-60;
+    }
+  }
+}
+
+.errorMessage {
+  @include type.type-style('label-02');
+  color: colors.$red-60;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .form {
+    height: 100%;
+  }
+
+  .row {
+    display: flex;
+    gap: layout.$spacing-10;
+
+    :global(.cds--col-sm-1) {
+      flex-basis: 30%;
+      min-width: 8rem;
+      text-align: left;
+    }
+
+    :global(.cds--col-sm-3) {
+      flex-basis: 70%;
+    }
+  }
+
+  .diagnosis {
+    padding: layout.$spacing-05 layout.$spacing-04;
+  }
+
+  .skeleton {
+    height: layout.$spacing-08;
+  }
+}
+
+.errorNotification {
+  margin-top: layout.$spacing-02;
+}
+
+.tag {
+  margin-right: layout.$spacing-03;
+  margin-left: 0;
+}
+
+.uploadButton {
+  margin-top: layout.$spacing-05;
+}