From dd17a1d45b16ea4c3e8bc8d4e5144eb0f61be86a Mon Sep 17 00:00:00 2001
From: Aditya Jindal <adityajindal2305@gmail.com>
Date: Tue, 4 Mar 2025 17:42:13 +0530
Subject: [PATCH] Status Filters and Search for valueset list (#10841)

---
 public/locale/en.json                         |   7 +-
 .../Questionnaire/QuestionnaireList.tsx       |   1 +
 src/components/ValueSet/ValueSetList.tsx      | 246 +++++++++++-------
 src/hooks/useFilters.tsx                      |   3 +
 4 files changed, 163 insertions(+), 94 deletions(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index 72f163c68d3..9c51648b7b9 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -709,6 +709,7 @@
   "create_template": "Create Template",
   "create_user": "Create User",
   "create_user_and_add_to_org": "Create a new user and add them to the organization.",
+  "create_valueset": "Create ValueSet",
   "created": "Created",
   "created_by": "Created By",
   "created_date": "Created Date",
@@ -1412,7 +1413,8 @@
   "make_facility_public": "Make this facility public",
   "make_facility_public_description": "When enabled, this facility will be visible to the public and can be discovered by anyone using the platform",
   "make_multiple_beds_label": "Do you want to make multiple beds?",
-  "manage_and_view_questionnaires": "Manage and view questionnaires",
+  "manage_and_view_questionnaires": "Manage and View Questionnaires",
+  "manage_and_view_valuesets": "Manage and View ValueSets",
   "manage_bed_presets": "Manage Presets of Bed",
   "manage_facility_users": "Manage encounters",
   "manage_my_schedule": "Manage my schedule",
@@ -2107,6 +2109,7 @@
   "search_user": "Search User",
   "search_user_description": "Search for a user and assign a role to add them to the patient.",
   "search_users": "Search users...",
+  "search_valuesets": "Search ValueSets",
   "searching": "Searching...",
   "see_attachments": "See Attachments",
   "see_details": "See Details",
@@ -2502,7 +2505,7 @@
   "valid_year_of_birth": "Please enter a valid year of birth (YYYY)",
   "value": "Value",
   "value_set": "Value Set",
-  "valuesets": "Valuesets",
+  "valuesets": "ValueSets",
   "vehicle_preference": "Vehicle preference",
   "vendor_name": "Vendor Name",
   "ventilator_interface": "Respiratory Support Type",
diff --git a/src/components/Questionnaire/QuestionnaireList.tsx b/src/components/Questionnaire/QuestionnaireList.tsx
index dd3f9cab1b6..e6d7531224f 100644
--- a/src/components/Questionnaire/QuestionnaireList.tsx
+++ b/src/components/Questionnaire/QuestionnaireList.tsx
@@ -23,6 +23,7 @@ import questionnaireApi from "@/types/questionnaire/questionnaireApi";
 export function QuestionnaireList() {
   const { qParams, updateQuery, Pagination, resultsPerPage } = useFilters({
     limit: 15,
+    disableCache: true,
   });
 
   const navigate = useNavigate();
diff --git a/src/components/ValueSet/ValueSetList.tsx b/src/components/ValueSet/ValueSetList.tsx
index 360d50e619c..8edeea02175 100644
--- a/src/components/ValueSet/ValueSetList.tsx
+++ b/src/components/ValueSet/ValueSetList.tsx
@@ -1,10 +1,19 @@
 import { useQuery } from "@tanstack/react-query";
-import { PlusIcon } from "lucide-react";
-import { Link, useNavigate } from "raviger";
+import {
+  ArchiveIcon,
+  FileCheckIcon,
+  HelpCircle,
+  NotepadTextDashedIcon,
+  Pencil,
+  PlusIcon,
+  Search,
+} from "lucide-react";
+import { Link } from "raviger";
 import { useTranslation } from "react-i18next";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import {
   Table,
   TableBody,
@@ -13,6 +22,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import Loading from "@/components/Common/Loading";
 
@@ -23,9 +33,9 @@ import valuesetApi from "@/types/valueset/valuesetApi";
 
 export function ValueSetList() {
   const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { qParams, Pagination, resultsPerPage } = useFilters({
+  const { qParams, updateQuery, Pagination, resultsPerPage } = useFilters({
     limit: 15,
+    disableCache: true,
   });
   const { data: response, isLoading } = useQuery({
     queryKey: ["valuesets", qParams],
@@ -33,106 +43,158 @@ export function ValueSetList() {
       queryParams: {
         limit: resultsPerPage,
         offset: ((qParams.page ?? 1) - 1) * resultsPerPage,
+        name: qParams.name,
+        status: qParams.status || "active",
       },
     }),
   });
 
-  if (isLoading) {
-    return <Loading />;
-  }
-
   const valuesets = response?.results || [];
 
   return (
     <div className="container mx-auto px-4 py-6">
-      <div className="mb-6 flex items-center justify-between">
-        <div>
+      <div className="mb-4 ">
+        <div className="mb-2">
           <h1 className="text-2xl font-bold">{t("valuesets")}</h1>
+          <p className="text-gray-600">{t("manage_and_view_valuesets")}</p>
         </div>
-        <Button asChild>
-          <Link href="/admin/valuesets/create">
-            <PlusIcon className="mr-2 size-4" />
-            {t("create_new")}
-          </Link>
-        </Button>
-      </div>
 
-      <div className="overflow-hidden rounded-lg bg-white shadow">
-        <Table className="min-w-full divide-y divide-gray-200">
-          <TableHeader className="bg-gray-50">
-            <TableRow>
-              <TableHead className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
-                {t("name")}
-              </TableHead>
-              <TableHead className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
-                {t("slug")}
-              </TableHead>
-              <TableHead className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
-                {t("status")}
-              </TableHead>
-              <TableHead className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
-                {t("description")}
-              </TableHead>
-              <TableHead className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
-                {t("system")}
-              </TableHead>
-              <TableHead className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
-                {t("actions")}
-              </TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody className="divide-y divide-gray-200 bg-white">
-            {valuesets.map((valueset) => (
-              <TableRow key={valueset.id} className="hover:bg-gray-50">
-                <TableCell className="whitespace-nowrap px-6 py-4">
-                  <div className="text-sm font-medium text-gray-900">
-                    {valueset.name}
-                  </div>
-                </TableCell>
-                <TableCell className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
-                  {valueset.slug}
-                </TableCell>
-                <TableCell className="whitespace-nowrap px-6 py-4">
-                  <Badge
-                    className={
-                      {
-                        active:
-                          "bg-green-100 text-green-800 hover:bg-green-200",
-                        draft:
-                          "bg-yellow-100 text-yellow-800 hover:bg-yellow-200",
-                        retired: "bg-red-100 text-red-800 hover:bg-red-200",
-                        unknown: "bg-gray-100 text-gray-800 hover:bg-gray-200",
-                      }[valueset.status]
-                    }
-                  >
-                    {t(valueset.status)}
-                  </Badge>
-                </TableCell>
-                <TableCell className="px-6 py-4 truncate text-sm text-gray-900 break-words whitespace-normal">
-                  {valueset.description}
-                </TableCell>
-                <TableCell className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
-                  {valueset.is_system_defined ? t("yes") : t("no")}
-                </TableCell>
-                <TableCell className="whitespace-nowrap px-6 py-4 text-sm">
-                  {!valueset.is_system_defined && (
-                    <Button
-                      variant="primary"
-                      size="sm"
-                      onClick={() =>
-                        navigate(`/admin/valuesets/${valueset.slug}/edit`)
-                      }
-                    >
-                      {t("edit")}
-                    </Button>
-                  )}
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+        <div className="flex flex-col md:flex-row items-center justify-between mt-8 gap-2">
+          <div className="flex lg:flex-row flex-col items-center gap-4">
+            <Tabs
+              defaultValue="active"
+              value={qParams.status || "active"}
+              onValueChange={(value) => updateQuery({ status: value })}
+              className="w-full"
+            >
+              <TabsList>
+                <TabsTrigger value="active">
+                  <FileCheckIcon className="w-4 h-4 mr-2 " />
+                  {t("active")}
+                </TabsTrigger>
+                <TabsTrigger value="draft">
+                  <NotepadTextDashedIcon className="w-4 h-4 mr-2" />
+                  {t("draft")}
+                </TabsTrigger>
+                <TabsTrigger value="retired">
+                  <ArchiveIcon className="w-4 h-4 mr-2" />
+                  {t("retired")}
+                </TabsTrigger>
+                <TabsTrigger value="unknown">
+                  <HelpCircle className="w-4 h-4 mr-2 " />
+                  {t("unknown")}
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+            <div className="relative md:min-w-80 w-full">
+              <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500" />
+              <Input
+                placeholder={t("search_valuesets")}
+                className="pl-10"
+                value={qParams.name || ""}
+                onChange={(e) => updateQuery({ name: e.target.value })}
+              />
+            </div>
+          </div>
+          <Button>
+            <Link
+              href="/admin/valuesets/create"
+              className="flex items-center gap-2"
+            >
+              <PlusIcon className="w-4 h-4" />
+              {t("create_valueset")}
+            </Link>
+          </Button>
+        </div>
       </div>
-      <Pagination totalCount={response?.count ?? 0} />
+
+      {isLoading ? (
+        <Loading />
+      ) : (
+        <>
+          <div className="overflow-hidden rounded-lg bg-white shadow">
+            <Table className="min-w-full divide-y divide-gray-200">
+              <TableHeader className="bg-gray-50">
+                <TableRow>
+                  <TableHead className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+                    {t("name")}
+                  </TableHead>
+                  <TableHead className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+                    {t("slug")}
+                  </TableHead>
+                  <TableHead className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+                    {t("status")}
+                  </TableHead>
+                  <TableHead className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+                    {t("description")}
+                  </TableHead>
+                  <TableHead className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+                    {t("system")}
+                  </TableHead>
+                  <TableHead className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+                    {t("actions")}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody className="divide-y divide-gray-200 bg-white">
+                {valuesets.map((valueset) => (
+                  <TableRow key={valueset.id} className="hover:bg-gray-50">
+                    <TableCell className="whitespace-nowrap px-6 py-4">
+                      <div className="text-sm font-medium text-gray-900">
+                        {valueset.name}
+                      </div>
+                    </TableCell>
+                    <TableCell className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
+                      {valueset.slug}
+                    </TableCell>
+                    <TableCell className="whitespace-nowrap px-6 py-4">
+                      <Badge
+                        className={
+                          {
+                            active:
+                              "bg-green-100 text-green-800 hover:bg-green-200",
+                            draft:
+                              "bg-yellow-100 text-yellow-800 hover:bg-yellow-200",
+                            retired: "bg-red-100 text-red-800 hover:bg-red-200",
+                            unknown:
+                              "bg-gray-100 text-gray-800 hover:bg-gray-200",
+                          }[valueset.status]
+                        }
+                      >
+                        {t(valueset.status)}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="px-6 py-4 truncate text-sm text-gray-900 break-words whitespace-normal">
+                      {valueset.description}
+                    </TableCell>
+                    <TableCell className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
+                      {valueset.is_system_defined ? t("yes") : t("no")}
+                    </TableCell>
+                    <TableCell className="whitespace-nowrap px-6 py-4 text-sm">
+                      {!valueset.is_system_defined && (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="font-semibold shadow-gray-300 text-gray-950 border-gray-400"
+                        >
+                          <Link
+                            href={`/admin/valuesets/${valueset.slug}/edit`}
+                            className="flex items-center gap-2"
+                          >
+                            <Pencil className="w-4 h-4 mr-0" />
+                            {t("edit")}
+                          </Link>
+                        </Button>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          <Pagination totalCount={response?.count ?? 0} />
+        </>
+      )}
     </div>
   );
 }
diff --git a/src/hooks/useFilters.tsx b/src/hooks/useFilters.tsx
index a0c10a7a24e..2dba60cbfc9 100644
--- a/src/hooks/useFilters.tsx
+++ b/src/hooks/useFilters.tsx
@@ -26,9 +26,11 @@ interface FilterBadgeProps {
 export default function useFilters({
   limit = 14,
   cacheBlacklist = [],
+  disableCache = false,
 }: {
   limit?: number;
   cacheBlacklist?: string[];
+  disableCache?: boolean;
 }) {
   const { t } = useTranslation();
   const hasPagination = limit > 0;
@@ -40,6 +42,7 @@ export default function useFilters({
   }>({ value: false });
 
   const updateCache = (query: QueryParam) => {
+    if (disableCache) return;
     const blacklist = FILTERS_CACHE_BLACKLIST.concat(cacheBlacklist);
     FiltersCache.set(query, blacklist);
   };