@kenyaemr/esm-patient-registration-app 4.3.0

package/src/patient-registration/patient-registration.resource.tsx

@@ -0,0 +1,296 @@
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import useSWRImmutable from 'swr/immutable';
+import { FetchResponse, openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import { Patient, Relationship, PatientIdentifier, Encounter } from './patient-registration-types';
+
+export const uuidIdentifier = '05a29f94-c0ed-11e2-94be-8c13b969e334';
+export const uuidTelephoneNumber = '14d4f066-15f5-102d-96e4-000c29c2a5d7';
+
+function dataURItoFile(dataURI: string) {
+  const byteString = atob(dataURI.split(',')[1]);
+  const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+  // write the bytes of the string to a typed array
+  const buffer = new Uint8Array(byteString.length);
+
+  for (let i = 0; i < byteString.length; i++) {
+    buffer[i] = byteString.charCodeAt(i);
+  }
+
+  const blob = new Blob([buffer], { type: mimeString });
+  return new File([blob], 'patient-photo.png');
+}
+
+export function savePatient(patient: Patient | null, updatePatientUuid?: string) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`/ws/rest/v1/patient/${updatePatientUuid || ''}`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: patient,
+    signal: abortController.signal,
+  });
+}
+
+export function saveEncounter(encounter: Encounter) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`/ws/rest/v1/encounter`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: encounter,
+    signal: abortController.signal,
+  });
+}
+
+export function generateIdentifier(source: string) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`/ws/rest/v1/idgen/identifiersource/${source}/identifier`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: {},
+    signal: abortController.signal,
+  });
+}
+
+export function deletePersonName(nameUuid: string, personUuid: string) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`/ws/rest/v1/person/${personUuid}/name/${nameUuid}`, {
+    method: 'DELETE',
+    signal: abortController.signal,
+  });
+}
+
+export function saveRelationship(relationship: Relationship) {
+  const abortController = new AbortController();
+
+  return openmrsFetch('/ws/rest/v1/relationship', {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: relationship,
+    signal: abortController.signal,
+  });
+}
+
+export function updateRelationship(relationshipUuid, relationship: { relationshipType: string }) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`/ws/rest/v1/relationship/${relationshipUuid}`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: { relationshipType: relationship.relationshipType },
+    signal: abortController.signal,
+  });
+}
+
+export function deleteRelationship(relationshipUuid) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`/ws/rest/v1/relationship/${relationshipUuid}`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'DELETE',
+    signal: abortController.signal,
+  });
+}
+
+export async function savePatientPhoto(
+  patientUuid: string,
+  content: string,
+  url: string,
+  date: string,
+  conceptUuid: string,
+) {
+  const abortController = new AbortController();
+
+  const formData = new FormData();
+  formData.append('patient', patientUuid);
+  formData.append('file', dataURItoFile(content));
+  formData.append(
+    'json',
+    JSON.stringify({
+      person: patientUuid,
+      concept: conceptUuid,
+      groupMembers: [],
+      obsDatetime: date,
+    }),
+  );
+
+  return openmrsFetch(url, {
+    method: 'POST',
+    signal: abortController.signal,
+    body: formData,
+  });
+}
+
+interface ObsFetchResponse {
+  results: Array<PhotoObs>;
+}
+
+interface PhotoObs {
+  display: string;
+  obsDatetime: string;
+  uuid: string;
+  value: {
+    display: string;
+    links: {
+      rel: string;
+      uri: string;
+    };
+  };
+}
+
+interface UsePatientPhotoResult {
+  data: { dateTime: string; imageSrc: string } | null;
+  isError: Error;
+  isLoading: boolean;
+}
+
+export function usePatientPhoto(patientUuid: string): UsePatientPhotoResult {
+  const {
+    concepts: { patientPhotoUuid },
+  } = useConfig();
+  const url = `/ws/rest/v1/obs?patient=${patientUuid}&concept=${patientPhotoUuid}&v=full`;
+
+  const { data, error, isLoading } = useSWR<{ data: ObsFetchResponse }, Error>(patientUuid ? url : null, openmrsFetch);
+
+  const item = data?.data?.results[0];
+
+  return {
+    data: item
+      ? {
+          dateTime: item?.obsDatetime,
+          imageSrc: item?.value?.links?.uri,
+        }
+      : null,
+    isError: error,
+    isLoading,
+  };
+}
+
+export async function fetchPerson(query: string) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`/ws/rest/v1/person?q=${query}`, {
+    signal: abortController.signal,
+  });
+}
+
+export async function addPatientIdentifier(patientUuid: string, patientIdentifier: PatientIdentifier) {
+  const abortController = new AbortController();
+  return openmrsFetch(`/ws/rest/v1/patient/${patientUuid}/identifier/`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: patientIdentifier,
+  });
+}
+
+export async function updatePatientIdentifier(patientUuid: string, identifierUuid: string, identifier: string) {
+  const abortController = new AbortController();
+  return openmrsFetch(`/ws/rest/v1/patient/${patientUuid}/identifier/${identifierUuid}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: { identifier },
+  });
+}
+
+export async function deletePatientIdentifier(patientUuid: string, patientIdentifierUuid: string) {
+  const abortController = new AbortController();
+  return openmrsFetch(`/ws/rest/v1/patient/${patientUuid}/identifier/${patientIdentifierUuid}?purge`, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+  });
+}
+
+export function useAddressHierarchy(
+  searchString,
+  separator,
+): {
+  addresses: Array<string>;
+  isLoading: boolean;
+  error: Error;
+} {
+  const { data, error, isLoading } = useSWRImmutable<
+    FetchResponse<
+      Array<{
+        address: string;
+      }>
+    >,
+    Error
+  >(
+    searchString
+      ? `/module/addresshierarchy/ajax/getPossibleFullAddresses.form?separator=${separator}&searchString=${searchString}`
+      : null,
+    openmrsFetch,
+  );
+
+  const results = useMemo(
+    () => ({
+      addresses: data?.data?.map((address) => address.address) ?? [],
+      error,
+      isLoading,
+    }),
+    [data?.data, error, isLoading],
+  );
+  return results;
+}
+
+export function useAdressHierarchyWithParentSearch(
+  addressField,
+  parentid,
+  query,
+): {
+  error: Error;
+  isLoading: boolean;
+  addresses: Array<{
+    uuid: string;
+    name: string;
+  }>;
+} {
+  const { data, error, isLoading } = useSWRImmutable<
+    FetchResponse<
+      Array<{
+        uuid: string;
+        name: string;
+      }>
+    >
+  >(
+    query
+      ? `/module/addresshierarchy/ajax/getPossibleAddressHierarchyEntriesWithParents.form?addressField=${addressField}&limit=20&searchString=${query}&parentUuid=${parentid}`
+      : null,
+    openmrsFetch,
+  );
+
+  const results = useMemo(
+    () => ({
+      error: error,
+      isLoading,
+      addresses: data?.data ?? [],
+    }),
+    [data?.data, error, isLoading],
+  );
+
+  return results;
+}

package/src/patient-registration/patient-registration.scss

@@ -0,0 +1,94 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.title {
+  color: var(--omrs-color-brand-teal);
+}
+
+.submit {
+  width: 250px;
+}
+
+.submit:hover {
+  cursor: pointer;
+}
+
+.cancelButton {
+  width: 11.688rem;
+}
+
+.submitButton {
+  margin-bottom: spacing.$spacing-05;
+  width: 11.688rem;
+  display: block;
+}
+
+.infoGrid {
+  width: 100%;
+  padding-left: spacing.$spacing-07;
+  margin-bottom: 40vh;
+  margin-top: spacing.$spacing-05;
+  max-width: 50rem;
+}
+
+.label01 {
+  @include type.type-style('label-01');
+  margin-top: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-05;
+  color: $ui-04;
+}
+
+.productiveHeading02 {
+  @include type.type-style('heading-compact-02');
+  color: $ui-04;
+  cursor: pointer;
+}
+
+.space05 {
+  margin: spacing.$spacing-05 0 spacing.$spacing-05 0;
+}
+
+.formContainer {
+  display: flex;
+  width: 100%;
+}
+
+.stickyColumn {
+  position: sticky;
+  margin-top: spacing.$spacing-05;
+  // 3rem for the nav height and 1rem for top margin
+  top: 4rem;
+}
+
+.touchTarget a:active {
+  color: $color-gray-100;
+}
+
+.linkName {
+  color: $color-gray-70;
+  line-height: 1.38;
+  font-size: spacing.$spacing-05;
+  font-weight: 600;
+
+  &:active {
+    text-decoration: none;
+    color: $color-gray-100;
+  }
+
+  &:hover {
+    text-decoration: none;
+    color: $color-gray-100;
+    cursor: pointer;
+  }
+}
+
+.main {
+  background-color: white;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .infoGrid {
+    max-width: unset;
+  }
+}