Merge branch 'develop' into cypress-tests-replace-cy.wait-with-cy.int…

…ercept
ohcnetwork · Dec 18, 2024 · 31282ab · 31282ab
2 parents a984390 + a01321b
commit 31282ab
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 78 deletions.
diff --git a/public/locale/en.json b/public/locale/en.json
@@ -549,6 +549,7 @@
   "contribute_github": "Contribute on Github",
   "copied_to_clipboard": "Copied to clipboard",
   "copilot_thinking": "Copilot is thinking...",
+  "copy_phone_number": "Copy Phone Number",
   "could_not_autofill": "We could not autofill any fields from what you said",
   "countries_travelled": "Countries travelled",
   "covid_19_cat_gov": "Covid_19 Clinical Category as per Govt. of Kerala guideline (A/B/C)",

diff --git a/src/Utils/utils.ts b/src/Utils/utils.ts
@@ -3,6 +3,7 @@ import { PatientModel } from "@/components/Patient/models";
 import { AREACODES, IN_LANDLINE_AREA_CODES } from "@/common/constants";
 import phoneCodesJson from "@/common/static/countryPhoneAndFlags.json";
 
+import * as Notification from "@/Utils/Notifications";
 import dayjs from "@/Utils/dayjs";
 
 interface ApacheParams {
@@ -561,3 +562,12 @@ export function omitBy<T extends Record<string, unknown>>(
     Object.entries(obj).filter(([_, value]) => !predicate(value)),
   ) as Partial<T>;
 }
+
+export const copyToClipboard = async (content: string) => {
+  try {
+    await navigator.clipboard.writeText(content);
+    Notification.Success({ msg: "Copied to clipboard" });
+  } catch (err) {
+    Notification.Error({ msg: "Copying is not allowed" });
+  }
+};
diff --git a/src/components/Facility/DoctorVideoSlideover.tsx b/src/components/Facility/DoctorVideoSlideover.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
 import SlideOver from "@/CAREUI/interactive/SlideOver";
@@ -17,6 +18,7 @@ import routes from "@/Utils/request/api";
 import useTanStackQueryInstead from "@/Utils/request/useQuery";
 import {
   classNames,
+  copyToClipboard,
   formatName,
   isUserOnline,
   relativeTime,
@@ -238,6 +240,9 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
     }
   }
 
+  const { t } = useTranslation();
+  const [copied, setCopied] = useState(false);
+
   return (
     <div
       className={classNames(
@@ -293,18 +298,22 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
               <a
                 role="button"
                 href="#"
-                onClick={async (e) => {
+                onClick={(e) => {
                   e.stopPropagation();
-                  await navigator.clipboard.writeText(
-                    user?.alt_phone_number || "",
-                  );
+                  copyToClipboard(user?.alt_phone_number || "");
+                  setCopied(true);
+                  setTimeout(() => setCopied(false), 2500);
                 }}
               >
                 <span className="tooltip" id="copy-phoneicon">
                   <span className="tooltip-text tooltip-top">
-                    Copy Phone number
+                    {t("copy_phone_number")}
                   </span>
-                  <CareIcon icon="l-clipboard" className="h-5 w-5" />
+                  <CareIcon
+                    icon={copied ? "l-check" : "l-clipboard"}
+                    id="copy-icon"
+                    className="h-5 w-5"
+                  />
                 </span>
               </a>
               <span>{user.alt_phone_number}</span>

diff --git a/src/components/Resource/ResourceBoard.tsx b/src/components/Resource/ResourceBoard.tsx
@@ -93,7 +93,11 @@ export default function BoardView() {
             currentTab={boardFilter !== ACTIVE ? 1 : 0}
           />
           <div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
-            <Button variant={"primary"} onClick={onListViewBtnClick}>
+            <Button
+              variant={"primary"}
+              onClick={onListViewBtnClick}
+              className="h-10.8 px-4 py-2"
+            >
               <CareIcon icon="l-list-ul" className="mr-2" />
               {t("list_view")}
             </Button>

diff --git a/src/components/Resource/ResourceList.tsx b/src/components/Resource/ResourceList.tsx
@@ -9,7 +9,7 @@ import { Button } from "@/components/ui/button";
 
 import { ExportButton } from "@/components/Common/Export";
 import Loading from "@/components/Common/Loading";
-import Page from "@/components/Common/Page";
+import PageTitle from "@/components/Common/PageTitle";
 import { ResourceModel } from "@/components/Facility/models";
 import SearchInput from "@/components/Form/SearchInput";
 import BadgesList from "@/components/Resource/ResourceBadges";
@@ -194,45 +194,55 @@ export default function ListView() {
   };
 
   return (
-    <Page
-      title={t("resource")}
-      hideBack
-      componentRight={
-        <ExportButton
-          action={async () => {
-            const { data } = await request(routes.downloadResourceRequests, {
-              query: { ...appliedFilters, csv: true },
-            });
-            return data ?? null;
-          }}
-          filenamePrefix="resource_requests"
-        />
-      }
-      breadcrumbs={false}
-      options={
-        <>
-          <div className="md:px-4"></div>
-          <div className="mt-2 flex w-full flex-col items-center justify-between gap-2 pt-2 xl:flex-row">
-            <SearchInput
-              name="title"
-              value={qParams.title}
-              onChange={(e) => updateQuery({ [e.name]: e.value })}
-              placeholder={t("search_resource")}
-            />
-          </div>
+    <div className="flex-col px-2 pb-2">
+      <div className="flex w-full flex-col items-center justify-between lg:flex-row">
+        <div className="w-1/3 lg:w-1/4">
+          <PageTitle
+            title={t("resource")}
+            hideBack
+            className="mx-3 md:mx-5"
+            componentRight={
+              <ExportButton
+                action={async () => {
+                  const { data } = await request(
+                    routes.downloadResourceRequests,
+                    {
+                      query: { ...appliedFilters, csv: true },
+                    },
+                  );
+                  return data ?? null;
+                }}
+                filenamePrefix="resource_requests"
+              />
+            }
+            breadcrumbs={false}
+          />
+        </div>
+
+        <div className="flex w-full flex-col items-center justify-between gap-2 pt-2 xl:flex-row">
+          <SearchInput
+            name="title"
+            value={qParams.title}
+            onChange={(e) => updateQuery({ [e.name]: e.value })}
+            placeholder={t("search_resource")}
+            className="w-full md:w-60"
+          />
 
-          <div className="mt-2 flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4">
-            <Button variant={"primary"} onClick={onBoardViewBtnClick}>
-              <CareIcon icon="l-list-ul" className="rotate-90 mr-2" />
+          <div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
+            <Button
+              variant={"primary"}
+              onClick={onBoardViewBtnClick}
+              className="h-10.8 px-4 py-2"
+            >
+              <CareIcon icon="l-list-ul" className="mr-2" />
               {t("board_view")}
             </Button>
             <AdvancedFilterButton
               onClick={() => advancedFilter.setShow(true)}
             />
           </div>
-        </>
-      }
-    >
+        </div>
+      </div>
       <BadgesList {...{ appliedFilters, FilterBadges }} />
 
       <div className="px-1">
@@ -282,6 +292,6 @@ export default function ListView() {
         showResourceStatus={true}
         key={window.location.search}
       />
-    </Page>
+    </div>
   );
 }
diff --git a/src/components/Shifting/ShiftingBoard.tsx b/src/components/Shifting/ShiftingBoard.tsx
@@ -124,7 +124,11 @@ export default function BoardView() {
           />
 
           <div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
-            <Button variant={"primary"} onClick={onListViewBtnClick}>
+            <Button
+              variant={"primary"}
+              onClick={onListViewBtnClick}
+              className="h-10.8 px-4 py-2"
+            >
               <CareIcon icon="l-list-ul" className="mr-2" />
               {t("list_view")}
             </Button>

diff --git a/src/components/Shifting/ShiftingList.tsx b/src/components/Shifting/ShiftingList.tsx
@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
 
 import { ExportButton } from "@/components/Common/Export";
 import Loading from "@/components/Common/Loading";
-import Page from "@/components/Common/Page";
+import PageTitle from "@/components/Common/PageTitle";
 import SearchInput from "@/components/Form/SearchInput";
 import BadgesList from "@/components/Shifting/ShiftingBadges";
 import { formatFilter } from "@/components/Shifting/ShiftingCommons";
@@ -49,46 +49,52 @@ export default function ListView() {
   });
 
   return (
-    <Page
-      title={t("shifting")}
-      hideBack
-      componentRight={
-        <ExportButton
-          action={async () => {
-            const { data } = await request(routes.downloadShiftRequests, {
-              query: { ...formatFilter(qParams), csv: true },
-            });
-            return data ?? null;
-          }}
-          filenamePrefix="shift_requests"
-        />
-      }
-      breadcrumbs={false}
-      options={
-        <>
-          <div className="md:px-4"></div>
+    <div className="flex-col px-2 pb-2">
+      <div className="flex w-full flex-col items-center justify-between lg:flex-row">
+        <div className="w-1/3 lg:w-1/4">
+          <PageTitle
+            title={t("shifting")}
+            className="mx-3 md:mx-5"
+            hideBack
+            componentRight={
+              <ExportButton
+                action={async () => {
+                  const { data } = await request(routes.downloadShiftRequests, {
+                    query: { ...formatFilter(qParams), csv: true },
+                  });
+                  return data ?? null;
+                }}
+                filenamePrefix="shift_requests"
+              />
+            }
+            breadcrumbs={false}
+          />
+        </div>
+        <div className="flex w-full flex-col items-center justify-between gap-2 pt-2 xl:flex-row">
+          <SearchInput
+            name="patient_name"
+            value={qParams.patient_name}
+            onChange={(e) => updateQuery({ [e.name]: e.value })}
+            placeholder={t("search_patient")}
+            className="w-full md:w-60"
+          />
 
-          <div className="mt-2 flex w-full flex-col items-center justify-between gap-2 pt-2 xl:flex-row">
-            <SearchInput
-              name="patient_name"
-              value={qParams.patient_name}
-              onChange={(e) => updateQuery({ [e.name]: e.value })}
-              placeholder={t("search_patient")}
-            />
-          </div>
-
-          <div className="mt-2 flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4">
-            <Button variant={"primary"} onClick={onBoardViewBtnClick}>
-              <CareIcon icon="l-list-ul" className="rotate-90 mr-2" />
+          <div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
+            <Button
+              variant={"primary"}
+              onClick={onBoardViewBtnClick}
+              className="h-10.8 px-4 py-2"
+            >
+              <CareIcon icon="l-list-ul" className="mr-2" />
               {t("board_view")}
             </Button>
             <AdvancedFilterButton
               onClick={() => advancedFilter.setShow(true)}
             />
           </div>
-        </>
-      }
-    >
+        </div>
+      </div>
+
       <BadgesList {...{ qParams, FilterBadges }} />
 
       <div>
@@ -121,6 +127,6 @@ export default function ListView() {
         {...advancedFilter}
         key={window.location.search}
       />
-    </Page>
+    </div>
   );
 }