@kenyaemr/esm-active-visits-app 7.0.2-pre.65

package/src/active-visits-widget/active-visits.scss

@@ -0,0 +1,191 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '../root.scss';
+
+.container {
+  margin: 0rem 1rem;
+}
+
+.activeVisitsContainer {
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  width: 100%;
+  margin: 0 auto;
+  max-width: 95vw;
+  padding-bottom: 0;
+}
+
+.activeVisitsDetailHeaderContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: spacing.$spacing-04 0 spacing.$spacing-04 spacing.$spacing-05;
+  background-color: $ui-02;
+}
+
+.activeVisitsTable {
+  tbody tr[data-parent-row] {
+    // Don't show a bottom border on the last row so we don't end up with a double border from the activeVisitContainer
+    &:nth-last-of-type(2) > td {
+      border-bottom: none;
+    }
+  }
+}
+
+.backgroundDataFetchingIndicator {
+  align-items: center;
+  display: flex;
+  flex: 1 1 0%;
+  justify-content: center;
+}
+
+.tableContainer section {
+  position: relative;
+}
+
+.tableContainer a {
+  text-decoration: none;
+}
+
+.pagination {
+  overflow: hidden;
+
+  &:global(.cds--pagination) {
+    border-top: 1px solid $ui-03;
+  }
+}
+
+.hiddenRow {
+  display: none;
+}
+
+.emptyRow {
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.visitSummaryContainer {
+  width: 100%;
+  max-width: 768px;
+  margin: 1rem auto;
+}
+
+.expandedActiveVisitRow {
+  td {
+    padding: 0 2rem;
+
+    > div {
+      max-height: max-content !important;
+    }
+  }
+
+  th[colspan] td[colspan] > div:first-child {
+    padding: 0 1rem;
+  }
+
+  &:last-of-type th[colspan]:last-child {
+    border-bottom: none;
+  }
+}
+
+.action {
+  margin-bottom: spacing.$spacing-03;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 2rem;
+      padding-top: 3px;
+      border-bottom: 0.375rem solid;
+      @include brand-03(border-bottom-color);
+    }
+  }
+}
+
+.tile {
+  text-align: center;
+}
+
+.filterEmptyState {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: spacing.$spacing-05;
+  margin: spacing.$spacing-11;
+  text-align: center;
+}
+
+.filterEmptyStateTile {
+  margin: auto;
+}
+
+.filterEmptyStateContent {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 0.5rem;
+}
+
+.filterEmptyStateHelper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .activeVisitsContainer {
+    .activeVisitsDetailHeaderContainer {
+      padding: spacing.$spacing-04 spacing.$spacing-05 spacing.$spacing-04 0;
+    }
+    .desktopHeading,
+    .tabletHeading {
+      h4 {
+        text-align: right;
+      }
+    }
+    div[role='search'] {
+      & :first-child {
+        svg {
+          left: unset;
+          right: spacing.$spacing-03;
+        }
+      }
+      & :last-child {
+        right: unset;
+        left: 0;
+      }
+    }
+    .tableContainer {
+      th > div {
+        text-align: right;
+      }
+      td {
+        text-align: right;
+        .serviceColor {
+          margin-right: 0;
+          margin-left: spacing.$spacing-03;
+        }
+        button {
+          text-align: right;
+        }
+      }
+    }
+  }
+}

package/src/active-visits-widget/active-visits.test.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { useConfig } from '@openmrs/esm-framework';
+import { useActiveVisits } from './active-visits.resource';
+import ActiveVisitsTable from './active-visits.component';
+
+const mockUseActiveVisits = useActiveVisits as jest.Mock;
+
+jest.mock('./active-visits.resource', () => ({
+  ...jest.requireActual('./active-visits.resource'),
+  useActiveVisits: jest.fn(),
+}));
+
+const mockUseConfig = useConfig as jest.Mock;
+
+describe('ActiveVisitsTable', () => {
+  beforeEach(() => mockUseActiveVisits.mockReset());
+
+  it('renders data table with active visits', () => {
+    mockUseActiveVisits.mockImplementation(() => ({
+      activeVisits: [{ id: '1', name: 'John Doe', visitType: 'Checkup', patientUuid: 'uuid1' }],
+      isLoading: false,
+      isValidating: false,
+      error: null,
+    }));
+    render(<ActiveVisitsTable />);
+
+    expect(screen.getByText('Visit Time')).toBeInTheDocument();
+    expect(screen.getByText('ID Number')).toBeInTheDocument();
+    const expectedColumnHeaders = [/Visit Time/, /ID Number/, /Name/, /Gender/, /Age/, /Visit Type/];
+    expectedColumnHeaders.forEach((header) => {
+      expect(screen.getByRole('columnheader', { name: new RegExp(header, 'i') })).toBeInTheDocument();
+    });
+
+    const patientNameLink = screen.getByText('John Doe');
+    expect(patientNameLink).toBeInTheDocument();
+    expect(patientNameLink.tagName).toBe('A');
+  });
+
+  it('filters active visits based on search input', async () => {
+    const user = userEvent.setup();
+
+    mockUseActiveVisits.mockImplementation(() => ({
+      activeVisits: [
+        { id: '1', name: 'John Doe', visitType: 'Checkup', patientUuid: 'uuid1' },
+        { id: '2', name: 'Some One', visitType: 'Checkup', patientUuid: 'uuid2' },
+      ],
+      isLoading: false,
+      isValidating: false,
+      error: null,
+    }));
+
+    render(<ActiveVisitsTable />);
+
+    const searchInput = screen.getByPlaceholderText('Filter table');
+    await user.type(searchInput, 'John');
+
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.queryByText('Some One')).toBeNull();
+  });
+
+  it('displays empty state when there are no active visits', () => {
+    mockUseActiveVisits.mockImplementation(() => ({
+      activeVisits: [],
+      isLoading: false,
+      isValidating: false,
+      error: null,
+    }));
+
+    render(<ActiveVisitsTable />);
+
+    expect(screen.getByText('There are no active visits to display for this location.')).toBeInTheDocument();
+  });
+
+  it('should not display the table when the data is loading', () => {
+    mockUseActiveVisits.mockImplementation(() => ({
+      activeVisits: undefined,
+      isLoading: true,
+      isValidating: false,
+      error: null,
+    }));
+
+    render(<ActiveVisitsTable />);
+
+    const expectedColumnHeaders = [/Visit Time/, /ID Number/, /Name/, /Gender/, /Age/, /Visit Type/];
+    expectedColumnHeaders.forEach((header) => {
+      expect(screen.queryByRole('columnheader', { name: new RegExp(header, 'i') })).not.toBeInTheDocument();
+    });
+  });
+
+  it('should display the error state when there is error', () => {
+    mockUseActiveVisits.mockImplementation(() => ({
+      activeVisits: undefined,
+      isLoading: false,
+      isValidating: false,
+      error: 'Error in fetching data',
+    }));
+
+    render(<ActiveVisitsTable />);
+
+    expect(screen.getByText(/Error State/i)).toBeInTheDocument();
+    expect(screen.queryByRole('table')).not.toBeInTheDocument();
+  });
+
+  it('should display the pagination when pagination is true', () => {
+    mockUseActiveVisits.mockImplementation(() => ({
+      activeVisits: [
+        { id: '1', name: 'John Doe', visitType: 'Checkup' },
+        { id: '2', name: 'Some One', visitType: 'Checkup' },
+      ],
+      isLoading: false,
+      isValidating: false,
+      error: null,
+    }));
+
+    render(<ActiveVisitsTable />);
+  });
+});

package/src/active-visits-widget/empty-data-illustration.component.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+export const EmptyDataIllustration = ({ width = '64', height = '64' }) => {
+  return (
+    <svg width={width} height={height} viewBox="0 0 64 64">
+      <title>Empty data illustration</title>
+      <g fill="none" fillRule="evenodd">
+        <path
+          d="M38.133 13.186H21.947c-.768.001-1.39.623-1.39 1.391V50.55l-.186.057-3.97 1.216a.743.743 0 01-.927-.493L3.664 12.751a.742.742 0 01.492-.926l6.118-1.874 17.738-5.43 6.119-1.873a.741.741 0 01.926.492L38.076 13l.057.186z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.664 13L38.026 1.117A1.576 1.576 0 0036.056.07l-8.601 2.633-17.737 5.43-8.603 2.634a1.578 1.578 0 00-1.046 1.97l12.436 40.616a1.58 1.58 0 001.969 1.046l5.897-1.805.185-.057v-.194l-.185.057-5.952 1.822a1.393 1.393 0 01-1.737-.923L.247 12.682a1.39 1.39 0 01.923-1.738L9.772 8.31 27.51 2.881 36.112.247a1.393 1.393 0 011.737.923L41.47 13l.057.186h.193l-.057-.185z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M11.378 11.855a.836.836 0 01-.798-.59L9.385 7.361a.835.835 0 01.554-1.042l16.318-4.996a.836.836 0 011.042.554l1.195 3.902a.836.836 0 01-.554 1.043l-16.318 4.995a.831.831 0 01-.244.037z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={17.636} cy={2.314} r={1.855} />
+        <circle fill="#FFF" fillRule="nonzero" cx={17.636} cy={2.314} r={1.175} />
+        <path
+          d="M55.893 53.995H24.544a.79.79 0 01-.788-.789V15.644a.79.79 0 01.788-.788h31.349a.79.79 0 01.788.788v37.562a.79.79 0 01-.788.789z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.47 13H21.948a1.579 1.579 0 00-1.576 1.577V52.4l.185-.057V14.577c.001-.768.623-1.39 1.391-1.39h19.581L41.471 13zm17.02 0H21.947a1.579 1.579 0 00-1.576 1.577v42.478c0 .87.706 1.576 1.576 1.577H58.49a1.579 1.579 0 001.576-1.577V14.577a1.579 1.579 0 00-1.576-1.576zm1.39 44.055c0 .768-.622 1.39-1.39 1.392H21.947c-.768-.001-1.39-.624-1.39-1.392V14.577c0-.768.622-1.39 1.39-1.39H58.49c.768 0 1.39.622 1.39 1.39v42.478z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M48.751 17.082H31.686a.836.836 0 01-.835-.835v-4.081c0-.46.374-.834.835-.835H48.75c.461 0 .834.374.835.835v4.08c0 .462-.374.835-.835.836z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={40.218} cy={9.755} r={1.855} />
+        <circle fill="#FFF" fillRule="nonzero" cx={40.218} cy={9.755} r={1.13} />
+      </g>
+    </svg>
+  );
+};

package/src/config-schema.ts

@@ -0,0 +1,57 @@
+import { Type } from '@openmrs/esm-framework';
+
+export interface SectionDefinition {
+  activeVisits: {
+    pageSize: Number;
+    pageSizes: Array<Number>;
+    identifiers: Array<IdentifiersDefinition>;
+  };
+}
+
+export interface IdentifiersDefinition {
+  id: Number;
+  header: {
+    key: string;
+    default: string;
+  };
+  identifierName: string;
+}
+
+export const configSchema = {
+  activeVisits: {
+    pageSize: {
+      _type: Type.Number,
+      _description: 'Count of active visits to be shown in a single page.',
+      _default: 10,
+    },
+    pageSizes: {
+      _type: Type.Array,
+      _description: 'Customizable page sizes that user can choose',
+      _default: [10, 20, 50],
+    },
+    identifiers: {
+      _type: Type.Array,
+      _description: 'Customizable list of identifiers to display on active visits table',
+      _elements: {
+        header: {
+          key: {
+            _type: Type.String,
+            _default: null,
+            _description: 'Key to be used for translation purposes.',
+          },
+          default: {
+            _type: Type.String,
+            _default: null,
+            _description: 'Default text to be displayed if no translation is found.',
+          },
+        },
+        identifierName: {
+          _type: Type.String,
+          _default: null,
+          _description: 'Name of the desired identifier to filter data returned from the visit resource.',
+        },
+      },
+      _default: null,
+    },
+  },
+};

package/src/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '@carbon/react';
+declare module '*.css';
+declare module '*.scss';
+declare type SideNavProps = {};

package/src/index.ts

@@ -0,0 +1,21 @@
+import { defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import activeVisitsComponent from './active-visits-widget/active-visits.component';
+import visitDetailComponent from './visits-summary/visit-detail.component';
+
+const moduleName = '@kenyaemr/esm-active-visits-app';
+
+const options = {
+  featureName: 'active-visits',
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}
+
+export const activeVisits = getSyncLifecycle(activeVisitsComponent, options);
+
+export const visitDetail = getSyncLifecycle(visitDetailComponent, options);

package/src/root.scss

@@ -0,0 +1,30 @@
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.productiveHeading01 {
+  @include type.type-style('heading-compact-01');
+}
+
+.productiveHeading02 {
+  @include type.type-style('heading-compact-02');
+}
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}
+
+.caption01 {
+  @include type.type-style('legal-01');
+}
+
+.bodyShort02 {
+  @include type.type-style('body-compact-02');
+}
+
+.text02 {
+  color: $text-02;
+}
+
+.text01 {
+  color: $ui-05;
+}

package/src/routes.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "webservices.rest": "^2.2.0"
+  },
+  "extensions": [
+    {
+      "name": "active-visits-widget",
+      "slot": "homepage-widgets-slot",
+      "component": "activeVisits",
+      "order": 0
+    },
+    {
+      "name": "visit-summary-widget",
+      "slot": "visit-summary-slot",
+      "component": "visitDetail"
+    }
+  ],
+  "pages": []
+}

package/src/types/index.ts

@@ -0,0 +1,28 @@
+export interface SearchedPatient {
+  patientId: number;
+  uuid: string;
+  identifiers: Array<Identifier>;
+  person: {
+    age: number;
+    birthdate: string;
+    display: string;
+    gender: string;
+  };
+  display: string;
+}
+
+export interface Identifier {
+  display: string;
+  uuid: string;
+  identifier: string;
+  identifierType: {
+    uuid: string;
+    display: string;
+  };
+  location: {
+    uuid: string;
+    display: string;
+  };
+  preferred: boolean;
+  voided: boolean;
+}