@palladium-ethiopia/esm-clinical-workflow-app 5.4.2-pre.20 → 5.4.2-pre.26

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

@@ -0,0 +1,453 @@
+@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: 1px solid colors.$gray-20;
+}
+
+.diagnosis:first-of-type {
+  border-top: none;
+}
+
+.diagnosis:last-of-type {
+  border-bottom: none;
+}
+
+.diagnosisList {
+  background-color: colors.$white;
+  max-height: layout.rem(320px); 
+  overflow-y: auto;
+  border: 1px solid colors.$gray-20;
+  display: flex;
+  flex-direction: column;
+}
+
+.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: layout.$spacing-12;
+  width: layout.$spacing-12;
+}
+
+.imgThumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.imgThumbnailGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, layout.$spacing-12);
+  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;
+  --cds-layout-size-height-local: 0;
+}
+
+.closeIcon {
+  fill: colors.$white !important;
+}
+
+.button {
+  height: layout.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.spinner {
+  min-height: layout.$spacing-05;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: colors.$white;
+}
+
+.desktop {
+  padding: 0;
+}
+
+.headerGridRow {
+  border-bottom: 1px 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 {
+  @include type.type-style('label-02');
+  color: colors.$red-60;
+  margin-top: layout.$spacing-03;
+}
+
+.diagnoserrorOutline {
+  max-width: layout.rem(320px); 
+
+  :global(.cds--search-input):focus {
+    outline: 2px solid colors.$red-60; 
+  }
+
+  :global(.cds--search-magnifier) {
+    svg {
+      fill: 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: layout.$spacing-11;
+      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 {
+  max-width: layout.rem(320px);
+  margin-right: layout.$spacing-03;
+  margin-left: 0;
+
+  :global(.cds--tag__label) {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.tagContent {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-01;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.tagIcon {
+  flex-shrink: 0;
+}
+
+.confirmedIcon {
+  color: colors.$green-60;
+}
+
+.presumedIcon {
+  color: colors.$orange-60;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .tag {
+    max-width: layout.$spacing-10;
+  }
+}
+
+.uploadButton {
+  margin-top: layout.$spacing-05;
+}
+
+.diagnosisListItem {
+  position: relative;
+  margin-bottom: layout.$spacing-02;
+  height: auto;
+}
+
+.diagnosisRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: layout.$spacing-03;
+  background-color: colors.$white;
+  border: 1px solid colors.$gray-20;
+  border-radius: 2px;
+  transition: all 0.1s ease;
+  cursor: pointer;
+  min-height: layout.$spacing-08; 
+
+  &:hover {
+    background-color: colors.$gray-10;
+    border-color: colors.$gray-30;
+  }
+}
+
+.diagnosisInfo {
+  flex: 1;
+  margin-right: layout.$spacing-03;
+}
+
+.diagnosisName {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-100;
+}
+
+.addButton {
+  min-width: layout.$spacing-07;
+  flex-shrink: 0;
+  padding: layout.$spacing-02 layout.$spacing-03;
+  height: layout.$spacing-07; 
+}
+
+.certaintyDropdown {
+  position: relative; 
+  z-index: 10;
+  margin-top: layout.$spacing-02;
+  background: colors.$white;
+  border: 1px solid colors.$gray-20;
+  border-radius: 2px;
+  box-shadow: none;
+  overflow: hidden;
+}
+
+.dropdownHeader {
+  padding: layout.$spacing-03;
+  border-bottom: 1px solid colors.$gray-20;
+  background: colors.$gray-10;
+}
+
+.dropdownTitle {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-100;
+  margin-bottom: layout.$spacing-01;
+}
+
+.diagnosisPreview {
+  color: colors.$blue-60;
+  font-weight: 600;
+}
+
+.dropdownSubtitle {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+  margin: 0;
+}
+
+.certaintyOptions {
+  padding: layout.$spacing-02;
+  display: flex;
+  gap: layout.$spacing-01;
+}
+
+.certaintyOption {
+  flex: 1;
+  padding: layout.$spacing-02;
+  text-align: center;
+  background: colors.$white;
+  border: 1px solid colors.$gray-20;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: all 0.1s ease;
+  outline: none;
+  min-height: layout.$spacing-07;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0;
+
+  &:hover {
+    border-color: colors.$blue-60;
+    background: colors.$gray-10;
+  }
+
+  &:focus {
+    outline: 2px solid colors.$blue-60;
+    outline-offset: -2px;
+  }
+}
+
+.optionContent {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-01;
+  justify-content: center;
+}
+
+.optionIcon {
+  width: layout.$spacing-04;
+  height: layout.$spacing-04;
+}
+
+.optionText {
+  text-align: center;
+}
+
+.optionTitle {
+  @include type.type-style('label-01');
+  color: colors.$gray-100;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.confirmedOption {
+  border-color: colors.$green-30;
+  background: colors.$green-10;
+
+  &:hover {
+    border-color: colors.$green-60;
+    background: colors.$green-20;
+  }
+
+  .optionIcon {
+    color: colors.$green-60;
+  }
+
+  .optionTitle {
+    color: colors.$green-70;
+  }
+}
+
+.presumedOption {
+  border-color: colors.$yellow-20;
+  background: colors.$yellow-10;
+
+  &:hover {
+    border-color: colors.$yellow-30;
+    background: colors.$yellow-20;
+  }
+
+  .optionIcon {
+    color: colors.$yellow-40;
+  }
+
+  .optionTitle {
+    color: colors.$yellow-70;
+  }
+}
+
+.optionDescription {
+  display: none;
+}
+
+.dropdownFooter {
+  padding: layout.$spacing-02 layout.$spacing-03;
+  border-top: 1px solid colors.$gray-20;
+  text-align: right;
+  background: colors.$gray-10;
+}
+
+// Responsive styles
+:global(.omrs-breakpoint-lt-desktop) {
+  .certaintyDropdown {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90%;
+    max-width: layout.rem(320px);
+    max-height: 70vh;
+    overflow-y: auto;
+    margin-top: 0;
+  }
+
+  .diagnosisRow {
+    padding: layout.$spacing-03;
+    min-height: layout.$spacing-09; 
+  }
+
+  .certaintyOption {
+    padding: layout.$spacing-03;
+    min-height: layout.$spacing-09;
+  }
+}

package/src/patient-notes/visit-notes.resource.ts

@@ -0,0 +1,113 @@
+import useSWR from 'swr';
+import useSWRInfinite from 'swr/infinite';
+import { openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import { type VisitNoteConfig } from '../config-schema';
+import type {
+  Concept,
+  DiagnosisPayload,
+  EncountersFetchResponse,
+  PatientNote,
+  RESTPatientNote,
+  VisitNotePayload,
+} from './types';
+
+interface UseVisitNotes {
+  visitNotes: Array<PatientNote> | null;
+  error: Error;
+  isLoading: boolean;
+  isValidating?: boolean;
+  mutateVisitNotes: () => void;
+}
+
+export function useVisitNotes(patientUuid: string): UseVisitNotes {
+  const {
+    visitNoteConfig: { encounterNoteTextConceptUuid, visitDiagnosesConceptUuid },
+  } = useConfig<VisitNoteConfig>();
+
+  const customRepresentation =
+    'custom:(uuid,display,encounterDatetime,patient,obs,' +
+    'encounterProviders:(uuid,display,' +
+    'encounterRole:(uuid,display),' +
+    'provider:(uuid,person:(uuid,display))),' +
+    'diagnoses';
+  const encountersApiUrl = `${restBaseUrl}/encounter?patient=${patientUuid}&obs=${visitDiagnosesConceptUuid}&v=${customRepresentation}`;
+
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: EncountersFetchResponse }, Error>(
+    encountersApiUrl,
+    openmrsFetch,
+  );
+
+  const mapNoteProperties = (note: RESTPatientNote, index: number): PatientNote => ({
+    id: `${index}`,
+    diagnoses: note.diagnoses
+      .filter((diagnosis) => !diagnosis.voided)
+      .map((diagnosisData) => diagnosisData.display)
+      .filter((val) => val)
+      .join(', '),
+    encounterDate: note.encounterDatetime,
+    encounterNote: note.obs.find((observation) => observation.concept.uuid === encounterNoteTextConceptUuid)?.value,
+    encounterNoteRecordedAt: note.obs.find((observation) => observation.concept.uuid === encounterNoteTextConceptUuid)
+      ?.obsDatetime,
+    encounterProvider: note?.encounterProviders[0]?.provider?.person?.display,
+    encounterProviderRole: note?.encounterProviders[0]?.encounterRole?.display,
+  });
+
+  const formattedVisitNotes = data?.data?.results
+    ?.map(mapNoteProperties)
+    ?.sort((noteA, noteB) => new Date(noteB.encounterDate).getTime() - new Date(noteA.encounterDate).getTime());
+
+  return {
+    visitNotes: data ? formattedVisitNotes : null,
+    error,
+    isLoading,
+    isValidating,
+    mutateVisitNotes: mutate,
+  };
+}
+
+export function fetchDiagnosisConceptsByName(searchTerm: string, diagnosisConceptClass: string) {
+  const customRepresentation = 'custom:(uuid,display)';
+  const url = `${restBaseUrl}/concept?name=${searchTerm}&searchType=fuzzy&class=${diagnosisConceptClass}&v=${customRepresentation}`;
+
+  return openmrsFetch<Array<Concept>>(url).then(({ data }) => Promise.resolve(data['results']));
+}
+
+export function saveVisitNote(abortController: AbortController, payload: VisitNotePayload) {
+  return openmrsFetch(`${restBaseUrl}/encounter`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: payload,
+    signal: abortController.signal,
+  });
+}
+
+export function updateVisitNote(abortController: AbortController, encounterUuid: string, payload: VisitNotePayload) {
+  return openmrsFetch(`${restBaseUrl}/encounter/${encounterUuid}`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: payload,
+    signal: abortController.signal,
+  });
+}
+
+export function savePatientDiagnosis(abortController: AbortController, payload: DiagnosisPayload) {
+  return openmrsFetch(`${restBaseUrl}/patientdiagnoses`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: payload,
+    signal: abortController.signal,
+  });
+}
+
+export function deletePatientDiagnosis(abortController: AbortController, diagnosisUuid: string) {
+  return openmrsFetch(`${restBaseUrl}/patientdiagnoses/${diagnosisUuid}`, {
+    method: 'DELETE',
+    signal: abortController.signal,
+  });
+}

package/src/routes.json

@@ -59,6 +59,18 @@
       "slot": "patient-scoreboard-slot",
       "online": true,
       "offline": false
+    },
+    {
+      "name": "past-visits-detail-overview-shadow",
+      "slot": "patient-chart-encounters-dashboard-slot",
+      "component": "pastVisitsDetailOverviewShadow",
+      "order": 0,
+      "meta": {
+        "title": "Visits",
+        "view": "visits"
+      },
+      "online": true,
+      "offline": true
     }
   ],
   "workspaces": [
@@ -88,6 +100,11 @@
       "name": "clinical-workflow-patient-form-entry-workspace",
       "component": "@openmrs/esm-patient-forms-app#exportedPatientFormEntryWorkspace",
       "window": "clinical-workflow-window"
+    },
+    {
+      "name": "visit-notes-form-shadow-workspace",
+      "component": "visitNotesFormWorkspace",
+      "window": "visit-note-shadow"
     }
   ],
   "workspaceWindows2": [
@@ -96,6 +113,12 @@
       "group": "clinical-workflow-group",
       "width": "wider",
       "canMaximize": true
+    },
+    {
+      "name": "visit-note-shadow",
+      "group": "patient-chart",
+      "icon": "visitNoteActionButton",
+      "order": 3
     }
   ],
   "workspaceGroups2": [