Merge branch 'issues/6503/displayCNSon4k' of https://github.com/i0am0…

…arunava/care_fe into issues/6503/displayCNSon4k
i0am0arunava · Nov 9, 2024 · b867242 · b867242
2 parents 93b9cc0 + 087867b
commit b867242
Show file tree

Hide file tree

Showing 11 changed files with 98 additions and 38 deletions.
diff --git a/.gitignore b/.gitignore
@@ -62,3 +62,4 @@ cypress/fixtures/token.json
 # Care Apps
 /apps/*
 src/pluginMap.ts
+/apps_backup/*
diff --git a/cypress/e2e/facility_spec/FacilityLocation.cy.ts b/cypress/e2e/facility_spec/FacilityLocation.cy.ts
@@ -1,10 +1,11 @@
+import { v4 as uuidv4 } from "uuid";
+
 import { AssetPage } from "../../pageobject/Asset/AssetCreation";
-import { UserCreationPage } from "../../pageobject/Users/UserCreation";
-import FacilityPage from "../../pageobject/Facility/FacilityCreation";
-import FacilityLocation from "../../pageobject/Facility/FacilityLocation";
 import { AssetPagination } from "../../pageobject/Asset/AssetPagination";
+import FacilityPage from "../../pageobject/Facility/FacilityCreation";
 import FacilityHome from "../../pageobject/Facility/FacilityHome";
-import { v4 as uuidv4 } from "uuid";
+import FacilityLocation from "../../pageobject/Facility/FacilityLocation";
+import { UserCreationPage } from "../../pageobject/Users/UserCreation";
 
 describe("Location Management Section", () => {
   const assetPage = new AssetPage();

diff --git a/cypress/e2e/users_spec/UsersProfile.cy.ts b/cypress/e2e/users_spec/UsersProfile.cy.ts
@@ -1,6 +1,6 @@
 import LoginPage from "../../pageobject/Login/LoginPage";
-import UserProfilePage from "../../pageobject/Users/UserProfilePage";
 import ManageUserPage from "../../pageobject/Users/ManageUserPage";
+import UserProfilePage from "../../pageobject/Users/UserProfilePage";
 
 describe("Manage User Profile", () => {
   const loginPage = new LoginPage();

diff --git a/cypress/pageobject/Patient/PatientPredefined.ts b/cypress/pageobject/Patient/PatientPredefined.ts
@@ -1,11 +1,10 @@
 // PatientPredefined.js
-
-import { PatientPage } from "../../pageobject/Patient/PatientCreation";
 import FacilityPage from "../../pageobject/Facility/FacilityCreation";
+import { PatientPage } from "../../pageobject/Patient/PatientCreation";
 import PatientMedicalHistory from "../../pageobject/Patient/PatientMedicalHistory";
 import {
-  generatePhoneNumber,
   generateEmergencyPhoneNumber,
+  generatePhoneNumber,
 } from "../utils/constants";
 
 class PatientPredefined {

diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
@@ -2,9 +2,18 @@
   "compilerOptions": {
     "baseUrl": "./",
     "target": "es5",
-    "lib": ["es5", "dom", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020"],
+    "lib": [
+      "es5",
+      "dom",
+      "es2015",
+      "es2016",
+      "es2017",
+      "es2018",
+      "es2019",
+      "es2020"
+    ],
     "typeRoots": ["./support"],
     "resolveJsonModule": true
   },
-  "include": ["**/*.cy.ts", "support/commands.ts","**/*.ts"],
-}
+  "include": ["**/*.cy.ts", "support/commands.ts", "**/*.ts"]
+}
diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
     "prepare": "husky",
     "lint": "eslint ./src",
     "lint-fix": "eslint ./src --fix",
-    "format": "prettier ./src --write",
+    "format": "prettier ./src ./cypress --write",
     "sort-locales": "node ./scripts/sort-locales.js"
   },
   "dependencies": {
@@ -166,12 +166,12 @@
       "eslint --fix",
       "git update-index --again"
     ],
-    "src/Locale/*.json": [
+    "public/locale/*.json": [
       "npm run sort-locales"
     ]
   },
   "engines": {
     "node": ">=22.11.0"
   },
   "packageManager": "[email protected]"
-}
+}
diff --git a/plugins/treeShakeCareIcons.ts b/plugins/treeShakeCareIcons.ts
@@ -1,7 +1,7 @@
-import { Plugin } from "vite";
 import * as fs from "fs";
-import * as path from "path";
 import { globSync } from "glob";
+import * as path from "path";
+import { Plugin } from "vite";
 
 /**
  * Interface defining options for the treeShakeUniconPathsPlugin.
@@ -48,7 +48,7 @@ export function treeShakeCareIcons(
   }
   // Finds all used icon names within the project's source files (`.tsx` or `.res` extensions).
   function getAllUsedIconNames() {
-    const files = globSync(path.resolve(rootDir, "src/**/*.{tsx,res}"));
+    const files = globSync(path.resolve(rootDir, "{apps,src}/**/*.{tsx,res}"));
     const usedIconsArray: string[] = [];
 
     files.forEach((file) => {

diff --git a/scripts/setup-care-apps.js b/scripts/setup-care-apps.js
@@ -53,6 +53,36 @@ const installApp = (app) => {
   );
 };
 
+const backupDir = path.join(__dirname, "..", "apps_backup");
+
+// Create backup directory if needed
+if (!fs.existsSync(backupDir)) {
+  fs.mkdirSync(backupDir);
+}
+
+try {
+  fs.readdirSync(appsDir, { withFileTypes: true })
+    .filter((dirent) => dirent.isDirectory())
+    .map((dirent) => dirent.name)
+    .filter(
+      (dir) =>
+        !appsConfig.map((app) => app.package.split("/")[1]).includes(dir),
+    )
+    .forEach((unusedApp) => {
+      const appPath = path.join(appsDir, unusedApp);
+      const backupPath = path.join(backupDir, `${unusedApp}_${Date.now()}`);
+      console.log(`Backing up '${unusedApp}' to ${backupPath}`);
+      fs.cpSync(appPath, backupPath, { recursive: true });
+      console.log(
+        `Removing existing app '${unusedApp}' as it is not configured.`,
+      );
+      fs.rmSync(appPath, { recursive: true, force: true });
+    });
+} catch (error) {
+  console.error("Error during cleanup:", error);
+  process.exit(1);
+}
+
 // Clone or pull care apps
 appsConfig.forEach((app) => {
   const appDir = path.join(appsDir, app.package.split("/")[1]);

diff --git a/scripts/sort-locales.js b/scripts/sort-locales.js
@@ -1,7 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const fs = require("fs");
 
-const file = "src/Locale/en.json";
+const file = "public/locale/en.json";
 
 const data = JSON.parse(fs.readFileSync(file, "utf8"));
 

diff --git a/src/components/Common/UserAutocompleteFormField.tsx b/src/components/Common/UserAutocompleteFormField.tsx
@@ -19,6 +19,8 @@ import {
   mergeQueryOptions,
 } from "@/Utils/utils";
 
+import { Avatar } from "./Avatar";
+
 type BaseProps = FormFieldBaseProps<UserBareMinimum> & {
   placeholder?: string;
   userType?: UserRole;
@@ -67,6 +69,16 @@ export default function UserAutocomplete(props: UserSearchProps) {
     }
   }, [loading, field.required, data?.results, props.noResultsError]);
 
+  const getAvatar = (option: UserBareMinimum) => {
+    return (
+      <Avatar
+        className="h-11 w-11 rounded-full"
+        name={formatName(option)}
+        imageUrl={option.read_profile_picture_url}
+      />
+    );
+  };
+
   return (
     <FormField field={field}>
       <Autocomplete
@@ -83,6 +95,7 @@ export default function UserAutocomplete(props: UserSearchProps) {
         )}
         optionLabel={formatName}
         optionIcon={userOnlineDot}
+        optionImage={getAvatar}
         optionDescription={(option) =>
           `${option.user_type} - ${option.username}`
         }

diff --git a/src/components/Form/FormFields/Autocomplete.tsx b/src/components/Form/FormFields/Autocomplete.tsx
@@ -5,7 +5,7 @@ import {
   ComboboxOption,
   ComboboxOptions,
 } from "@headlessui/react";
-import { useEffect, useState } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -29,6 +29,7 @@ type AutocompleteFormFieldProps<T, V> = FormFieldBaseProps<V> & {
   optionValue?: OptionCallback<T, V>;
   optionDescription?: OptionCallback<T, string>;
   optionIcon?: OptionCallback<T, React.ReactNode>;
+  optionImage?: OptionCallback<T, ReactNode | undefined>;
   optionDisabled?: OptionCallback<T, boolean>;
   minQueryLength?: number;
   onQuery?: (query: string) => void;
@@ -55,6 +56,7 @@ const AutocompleteFormField = <T, V>(
         placeholder={props.placeholder}
         optionLabel={props.optionLabel}
         optionIcon={props.optionIcon}
+        optionImage={props.optionImage}
         optionValue={props.optionValue}
         optionDescription={props.optionDescription}
         optionDisabled={props.optionDisabled}
@@ -79,6 +81,7 @@ type AutocompleteProps<T, V = T> = {
   placeholder?: string;
   optionLabel: OptionCallback<T, string>;
   optionIcon?: OptionCallback<T, React.ReactNode>;
+  optionImage?: OptionCallback<T, ReactNode | undefined>;
   optionValue?: OptionCallback<T, V>;
   optionDescription?: OptionCallback<T, React.ReactNode>;
   optionDisabled?: OptionCallback<T, boolean>;
@@ -89,7 +92,6 @@ type AutocompleteProps<T, V = T> = {
   isLoading?: boolean;
   allowRawInput?: boolean;
   error?: string;
-  avatar?: boolean;
 } & (
   | {
       required?: false;
@@ -124,6 +126,7 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
       description,
       search: label.toLowerCase(),
       icon: props.optionIcon?.(option),
+      image: props.optionImage?.(option),
       value: props.optionValue ? props.optionValue(option) : option,
       disabled: props.optionDisabled?.(option),
     };
@@ -143,6 +146,7 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
         description: undefined,
         search: query.toLowerCase(),
         icon: <CareIcon icon="l-plus" />,
+        image: undefined,
         value: query,
         disabled: undefined,
       },
@@ -241,25 +245,28 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
                     disabled={option.disabled}
                   >
                     {({ focus }) => (
-                      <div className="flex flex-col">
-                        <div className="flex justify-between">
-                          <span>{option.label}</span>
-                          <span>{option.icon}</span>
-                        </div>
-                        {option.description && (
-                          <div
-                            className={classNames(
-                              "text-sm font-normal",
-                              option.disabled
-                                ? "text-secondary-700"
-                                : focus
-                                  ? "text-primary-200"
-                                  : "text-secondary-700",
-                            )}
-                          >
-                            {option.description}
+                      <div className="flex flex-row gap-2">
+                        {option?.image}
+                        <div className="flex flex-grow flex-col">
+                          <div className="flex justify-between">
+                            <span>{option.label}</span>
+                            <span>{option.icon}</span>
                           </div>
-                        )}
+                          {option.description && (
+                            <div
+                              className={classNames(
+                                "text-sm font-normal",
+                                option.disabled
+                                  ? "text-secondary-700"
+                                  : focus
+                                    ? "text-primary-200"
+                                    : "text-secondary-700",
+                              )}
+                            >
+                              {option.description}
+                            </div>
+                          )}
+                        </div>
                       </div>
                     )}
                   </ComboboxOption>