@kenyaemr/esm-patient-clinical-view-app 5.4.2-pre.2128 → 5.4.2-pre.2135

package/src/other-relationships/other-relationships.component.tsx

@@ -1,229 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  DataTable,
-  DataTableSkeleton,
-  Layer,
-  Pagination,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Tile,
-  Button,
-} from '@carbon/react';
-import { Add, Edit, TrashCan } from '@carbon/react/icons';
-import { EmptyDataIllustration, ErrorState, CardHeader, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
-import {
-  ConfigurableLink,
-  isDesktop,
-  launchWorkspace,
-  useConfig,
-  useLayoutType,
-  usePagination,
-} from '@openmrs/esm-framework';
-import type { ConfigObject } from '../config-schema';
-import styles from './other-relationships.scss';
-import { usePatientRelationships } from '../family-partner-history/relationships.resource';
-import ConceptObservations from '../family-partner-history/concept-obs.component';
-import { deleteRelationship } from '../relationships/relationship.resources';
-
-interface OtherRelationshipsProps {
-  patientUuid: string;
-}
-
-export const OtherRelationships: React.FC<OtherRelationshipsProps> = ({ patientUuid }) => {
-  const { t } = useTranslation();
-  const config = useConfig<ConfigObject>();
-  const layout = useLayoutType();
-  const { concepts } = config;
-  const [pageSize, setPageSize] = useState(10);
-  const familyRelationships = useMemo(
-    () => config.relationshipTypesList.filter((rl) => rl.category.some((c) => c === 'family')),
-    [config],
-  );
-  const { relationships, error, isLoading, isValidating } = usePatientRelationships(patientUuid);
-  const familyRelationshipTypeUUIDs = new Set(familyRelationships.map((type) => type.uuid));
-  const nonFamilyRelationships = relationships.filter((r) => !familyRelationshipTypeUUIDs.has(r.relationshipTypeUUID));
-
-  const headerTitle = t('otherRelationships', 'Other Relationships');
-  const { results, totalPages, currentPage, goTo } = usePagination(nonFamilyRelationships, pageSize);
-  const { pageSizes } = usePaginationInfo(pageSize, totalPages, currentPage, results.length);
-
-  const handleEditRelationship = (relationShipUuid: string) => {
-    launchWorkspace('relationship-update-form', {
-      relationShipUuid,
-    });
-  };
-
-  const headers = [
-    {
-      header: t('name', 'Name'),
-      key: 'name',
-    },
-    {
-      header: t('relation', 'Relation'),
-      key: 'relation',
-    },
-    {
-      header: t('age', 'Age'),
-      key: 'age',
-    },
-    {
-      header: t('alive', 'Alive'),
-      key: 'alive',
-    },
-    {
-      header: t('causeOfDeath', 'Cause of Death'),
-      key: 'causeOfDeath',
-    },
-    {
-      header: t('chronicDisease', 'Chronic Disease'),
-      key: 'chronicDisease',
-    },
-    { header: t('actions', 'Actions'), key: 'actions' },
-  ];
-
-  const handleAddHistory = () => {
-    launchWorkspace('other-relationship-form', {
-      workspaceTitle: 'Other Relationship Form',
-      patientUuid,
-    });
-  };
-
-  const tableRows =
-    results?.map((relation) => {
-      const patientUuid = relation.patientUuid;
-
-      return {
-        id: `${relation.uuid}`,
-        name: (
-          <ConfigurableLink
-            style={{ textDecoration: 'none' }}
-            to={window.getOpenmrsSpaBase() + `patient/${relation.relativeUuid}/chart/Patient Summary`}>
-            {relation.name}
-          </ConfigurableLink>
-        ),
-        relation: relation?.relationshipType,
-        age: relation?.relativeAge ?? '--',
-        alive: relation?.dead ? t('dead', 'Dead') : t('alive', 'Alive'),
-        causeOfDeath: (
-          <ConceptObservations patientUuid={patientUuid} conceptUuid={concepts.probableCauseOfDeathConceptUuid} />
-        ),
-        patientUuid: relation,
-        chronicDisease: <ConceptObservations patientUuid={patientUuid} conceptUuid={concepts.problemListConceptUuid} />,
-        actions: (
-          <>
-            <Button
-              renderIcon={Edit}
-              hasIconOnly
-              kind="ghost"
-              iconDescription="Edit"
-              onClick={() => handleEditRelationship(relation.uuid)}
-            />
-            <Button
-              renderIcon={TrashCan}
-              hasIconOnly
-              kind="ghost"
-              iconDescription="Delete"
-              onClick={() => deleteRelationship(relation.uuid)}
-            />
-          </>
-        ),
-      };
-    }) ?? [];
-
-  if (isLoading || isValidating) {
-    return (
-      <DataTableSkeleton
-        headers={headers}
-        aria-label="patient bills table"
-        showToolbar={false}
-        showHeader={false}
-        rowCount={3}
-        zebra
-        columnCount={3}
-        className={styles.dataTableSkeleton}
-      />
-    );
-  }
-
-  if (error) {
-    return <ErrorState headerTitle={headerTitle} error={error} />;
-  }
-
-  if (nonFamilyRelationships.length === 0) {
-    return (
-      <Layer>
-        <Tile className={styles.tile}>
-          <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
-            <h4>{headerTitle}</h4>
-          </div>
-          <EmptyDataIllustration />
-          <p className={styles.content}>There is no other relationships data to display for this patient.</p>
-          <Button onClick={handleAddHistory} renderIcon={Add} kind="ghost">
-            {t('addRelationship', 'Add relationship')}
-          </Button>
-        </Tile>
-      </Layer>
-    );
-  }
-
-  return (
-    <div className={styles.widgetContainer}>
-      <CardHeader title={headerTitle}>
-        {isLoading && <DataTableSkeleton rowCount={5} />}{' '}
-        <Button onClick={handleAddHistory} renderIcon={Add} kind="ghost">
-          {t('add', 'Add')}
-        </Button>
-      </CardHeader>
-      <DataTable
-        useZebraStyles
-        size="sm"
-        rows={tableRows ?? []}
-        headers={headers}
-        render={({ rows, headers, getHeaderProps, getTableProps, getTableContainerProps }) => (
-          <TableContainer {...getTableContainerProps()}>
-            <Table {...getTableProps()}>
-              <TableHead>
-                <TableRow>
-                  {headers.map((header) => (
-                    <TableHeader
-                      {...getHeaderProps({
-                        header,
-                        isSortable: header.isSortable,
-                      })}>
-                      {header.header?.content ?? header.header}
-                    </TableHeader>
-                  ))}
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {rows.map((row) => (
-                  <TableRow key={row.id}>
-                    {row.cells.map((cell) => (
-                      <TableCell key={cell.id}>{cell.value}</TableCell>
-                    ))}
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        )}
-      />
-      <Pagination
-        page={currentPage}
-        pageSize={pageSize}
-        pageSizes={pageSizes}
-        totalItems={relationships.length}
-        onChange={({ page, pageSize }) => {
-          goTo(page);
-          setPageSize(pageSize);
-        }}
-      />
-    </div>
-  );
-};

package/src/other-relationships/other-relationships.scss

@@ -1,125 +0,0 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/colors';
-@use '@carbon/layout';
-@import '~@openmrs/esm-styleguide/src/vars';
-
-.heading {
-  @include type.type-style('heading-compact-01');
-  margin: spacing.$spacing-05 0 spacing.$spacing-05;
-}
-
-.warningContainer {
-  background-color: $carbon--red-50;
-  padding: spacing.$spacing-04;
-  margin: spacing.$spacing-03 0 spacing.$spacing-03;
-  display: flex;
-  justify-content: space-between;
-  .warning {
-    @include type.type-style('heading-compact-01');
-    color: $ui-05;
-  }
-}
-
-.datePickerInput span,
-.datePickerInput div,
-.datePickerInput input,
-.datePickerInput {
-  min-width: 100%;
-}
-
-.form {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
-}
-
-.grid {
-  margin: layout.$spacing-05 layout.$spacing-05;
-  padding: layout.$spacing-05 0 0 0;
-}
-
-.button {
-  display: flex;
-  align-content: flex-start;
-  align-items: baseline;
-  min-width: 50%;
-}
-
-.buttonSet {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
-.textbox {
-  margin-bottom: spacing.$spacing-08;
-}
-
-.sectionHeader {
-  @include type.type-style('heading-02');
-  margin-top: spacing.$spacing-05;
-}
-
-:global(.omrs-breakpoint-lt-desktop) {
-  .form {
-    height: var(--tablet-workspace-window-height);
-  }
-
-  .buttonSet {
-    padding: spacing.$spacing-06 spacing.$spacing-05;
-    background-color: $ui-02;
-    justify-content: flex-end;
-    gap: spacing.$spacing-05;
-    padding: 0;
-    margin-top: auto;
-    display: flex;
-    justify-content: end;
-  }
-}
-
-.widgetContainer {
-  background-color: colors.$white-0;
-  border: 1px solid colors.$gray-20;
-  margin-bottom: 1rem;
-}
-
-.widgetContainer :global(.cds--data-table) thead th button span {
-  height: unset !important;
-}
-
-.tile {
-  text-align: center;
-}
-
-.emptyStateContainer {
-  margin: 2rem 0;
-}
-
-.content {
-  @include type.type-style('heading-compact-01');
-  color: colors.$gray-70;
-  margin-top: layout.$layout-05;
-  margin-bottom: layout.$spacing-03;
-}
-
-.desktopHeading,
-.tabletHeading {
-  text-align: left;
-  text-transform: capitalize;
-
-  h4 {
-    @include type.type-style('heading-compact-02');
-    color: colors.$gray-70;
-
-    &:after {
-      content: '';
-      display: block;
-      width: 2rem;
-      padding-top: 3px;
-      border-bottom: 0.375rem solid;
-      @include brand-03(border-bottom-color);
-    }
-  }
-}

package/src/other-relationships/other-relationships.workspace.tsx

@@ -1,155 +0,0 @@
-import { Button, ButtonSet, Column, ComboBox, DatePicker, DatePickerInput, Form, Stack, TextArea } from '@carbon/react';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useConfig, useSession } from '@openmrs/esm-framework';
-import React, { useMemo } from 'react';
-import { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { z } from 'zod';
-import { ConfigObject } from '../config-schema';
-import { useMappedRelationshipTypes } from '../family-partner-history/relationships.resource';
-import PatientSearchCreate from '../relationships/forms/patient-search-create-form';
-import { relationshipFormSchema, saveRelationship } from '../relationships/relationship.resources';
-import { uppercaseText } from '../utils/expression-helper';
-import styles from './other-relationships.scss';
-
-const schema = relationshipFormSchema
-  .refine(
-    (data) => {
-      return !(data.mode === 'search' && !data.personB);
-    },
-    { message: 'Required', path: ['personB'] },
-  )
-  .refine(
-    (data) => {
-      return !(data.mode === 'create' && !data.personBInfo);
-    },
-    { path: ['personBInfo'], message: 'Please provide patient information' },
-  );
-type FormData = z.infer<typeof schema>;
-
-type OtherRelationshipsFormProps = {
-  closeWorkspace: () => void;
-  patientUuid: string;
-};
-
-export const OtherRelationshipsForm: React.FC<OtherRelationshipsFormProps> = ({ closeWorkspace, patientUuid }) => {
-  const { t } = useTranslation();
-  const { data: mappedRelationshipTypes } = useMappedRelationshipTypes();
-  const config = useConfig<ConfigObject>();
-  const familyRelationships = useMemo(
-    () => config.relationshipTypesList.filter((rl) => rl.category.some((c) => c === 'family')),
-    [config],
-  );
-  const familyRelationshipTypesUUIDs = new Set(familyRelationships.map((r) => r.uuid));
-  const otherRelationshipTypes = mappedRelationshipTypes.filter((type) => !familyRelationshipTypesUUIDs.has(type.uuid));
-  const session = useSession();
-  const relationshipTypes = otherRelationshipTypes.map((relationship) => ({
-    id: relationship.uuid,
-    text: relationship.display,
-  }));
-
-  const form = useForm<FormData>({
-    mode: 'all',
-    defaultValues: {
-      personA: patientUuid,
-      mode: 'search',
-    },
-    resolver: zodResolver(schema),
-  });
-
-  const { control, handleSubmit } = form;
-
-  const onSubmit: SubmitHandler<FormData> = async (data) => {
-    try {
-      await saveRelationship(data, config, session, []);
-      closeWorkspace();
-    } catch (error) {}
-  };
-
-  return (
-    <FormProvider {...form}>
-      <Form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
-        <Stack gap={5} className={styles.grid}>
-          <PatientSearchCreate />
-          <span className={styles.sectionHeader}>{t('relationship', 'Relationship')}</span>
-          <Column>
-            <Controller
-              control={form.control}
-              name="startDate"
-              render={({ field }) => (
-                <DatePicker
-                  className={styles.datePickerInput}
-                  dateFormat="d/m/Y"
-                  id="startDate"
-                  datePickerType="single"
-                  {...field}
-                  ref={undefined}
-                  invalid={form.formState.errors[field.name]?.message}
-                  invalidText={form.formState.errors[field.name]?.message}>
-                  <DatePickerInput
-                    invalid={form.formState.errors[field.name]?.message}
-                    invalidText={form.formState.errors[field.name]?.message}
-                    placeholder="mm/dd/yyyy"
-                    labelText={t('startDate', 'Start Date')}
-                    size="xl"
-                  />
-                </DatePicker>
-              )}
-            />
-          </Column>
-          <Column>
-            <Controller
-              control={form.control}
-              name="endDate"
-              render={({ field }) => (
-                <DatePicker
-                  className={styles.datePickerInput}
-                  dateFormat="d/m/Y"
-                  id="endDate"
-                  datePickerType="single"
-                  {...field}
-                  ref={undefined}
-                  invalid={form.formState.errors[field.name]?.message}
-                  invalidText={form.formState.errors[field.name]?.message}>
-                  <DatePickerInput
-                    invalid={form.formState.errors[field.name]?.message}
-                    invalidText={form.formState.errors[field.name]?.message}
-                    placeholder="mm/dd/yyyy"
-                    labelText={t('endDate', 'End Date')}
-                    size="xl"
-                  />
-                </DatePicker>
-              )}
-            />
-          </Column>
-          <Column>
-            <Controller
-              name="relationshipType"
-              control={control}
-              render={({ field, fieldState }) => (
-                <ComboBox
-                  id="relationship_name"
-                  titleText={t('relationship', 'Relationship')}
-                  placeholder="Select Relationship"
-                  items={relationshipTypes}
-                  itemToString={(item) => (item ? uppercaseText(item.text) : '')}
-                  onChange={(e) => field.onChange(e.selectedItem?.id)}
-                  invalid={!!fieldState.error}
-                  invalidText={fieldState.error?.message}
-                />
-              )}
-            />
-          </Column>
-        </Stack>
-        <ButtonSet className={styles.buttonSet}>
-          <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
-            {t('discard', 'Discard')}
-          </Button>
-          <Button className={styles.button} kind="primary" type="submit" disabled={form.formState.isSubmitting}>
-            {t('save', 'Save')}
-          </Button>
-        </ButtonSet>
-      </Form>
-    </FormProvider>
-  );
-};