use shadcn form in AssetCreate with other shadcn components | add dir…

…ty state to prevent unnecessary network requests
ohcnetwork · Dec 23, 2024 · 5387f60 · 5387f60
1 parent 10c119f
commit 5387f60
Show file tree

Hide file tree

Showing 10 changed files with 1,698 additions and 708 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "@googlemaps/typescript-guards": "^2.0.3",
     "@headlessui/react": "^2.2.0",
     "@hello-pangea/dnd": "^17.0.0",
+    "@hookform/resolvers": "^3.9.1",
     "@pnotify/core": "^5.2.0",
     "@pnotify/mobile": "^5.2.0",
     "@radix-ui/react-dialog": "^1.1.4",
@@ -64,7 +65,9 @@
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-tooltip": "^1.1.6",
     "@sentry/browser": "^8.45.1",
@@ -80,6 +83,7 @@
     "cmdk": "^1.0.4",
     "cross-env": "^7.0.3",
     "cypress": "^13.17.0",
+    "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
     "echarts": "^5.5.1",
     "echarts-for-react": "^3.0.2",
@@ -88,13 +92,16 @@
     "i18next": "^23.16.4",
     "i18next-browser-languagedetector": "^8.0.2",
     "i18next-http-backend": "^3.0.1",
+    "lucide-react": "^0.469.0",
     "postcss-loader": "^8.1.1",
     "qrcode.react": "^4.1.0",
     "raviger": "^4.1.2",
     "react": "18.3.1",
     "react-copy-to-clipboard": "^5.1.0",
+    "react-day-picker": "^9.4.4",
     "react-dom": "18.3.1",
     "react-google-recaptcha": "^3.1.0",
+    "react-hook-form": "^7.54.2",
     "react-i18next": "^15.1.3",
     "react-infinite-scroll-component": "^6.1.0",
     "react-pdf": "^9.2.1",
@@ -152,7 +159,7 @@
     "vite-plugin-checker": "^0.8.0",
     "vite-plugin-pwa": "^0.20.5",
     "vite-plugin-static-copy": "^2.0.0",
-    "zod": "^3.23.8"
+    "zod": "^3.24.1"
   },
   "browserslist": {
     "production": [

diff --git a/src/components/Common/LocationSelect.tsx b/src/components/Common/LocationSelect.tsx
@@ -1,5 +1,10 @@
-import AutocompleteFormField from "@/components/Form/FormFields/Autocomplete";
-import AutocompleteMultiSelectFormField from "@/components/Form/FormFields/AutocompleteMultiselect";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 import routes from "@/Utils/request/api";
 import useTanStackQueryInstead from "@/Utils/request/useQuery";
@@ -22,7 +27,7 @@ interface LocationSelectProps {
 }
 
 export const LocationSelect = (props: LocationSelectProps) => {
-  const { data, loading, refetch } = useTanStackQueryInstead(
+  const { data, loading } = useTanStackQueryInstead(
     routes.listFacilityAssetLocation,
     {
       query: {
@@ -41,36 +46,37 @@ export const LocationSelect = (props: LocationSelectProps) => {
     props = { ...props, disabled: true };
   }
 
-  return props.multiple ? (
-    <AutocompleteMultiSelectFormField
-      name={props.name}
-      disabled={props.disabled}
-      value={props.selected as unknown as string[]}
-      options={data?.results ?? []}
-      onChange={({ value }) => props.setSelected(value)}
-      onQuery={(search_text) => refetch({ query: { search_text } })}
-      placeholder="Search by location name"
-      optionLabel={(option) => option.name}
-      optionValue={(option) => option.id}
-      error={props.errors}
-      className={props.className}
-      errorClassName={props.errorClassName}
-    />
-  ) : (
-    <AutocompleteFormField
-      name={props.name}
-      disabled={props.disabled}
-      value={props.selected as string}
-      options={data?.results ?? []}
-      onChange={({ value }) => props.setSelected(value)}
-      onQuery={(search_text) => refetch({ query: { search_text } })}
-      isLoading={loading}
-      placeholder="Search by location name"
-      optionLabel={(option) => option.name}
-      optionValue={(option) => option.id}
-      error={props.errors}
-      className={props.className}
-      errorClassName={props.errorClassName}
-    />
+  const handleSelectChange = (value: string) => {
+    props.setSelected(value);
+  };
+  console.log("Selected", props.selected);
+  return (
+    <div className={props.className}>
+      <Select
+        disabled={props.disabled || loading}
+        onValueChange={handleSelectChange}
+        value={props.selected as string}
+      >
+        <SelectTrigger className={props.errorClassName}>
+          <SelectValue placeholder="Search by location name">
+            {data?.results?.find((option) => option.id === props.selected)
+              ?.name || "Search by location name"}
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          {data?.results?.length ? (
+            data.results.map((option: { id: string; name: string }) => (
+              <SelectItem key={option.id} value={option.id}>
+                {option.name}
+              </SelectItem>
+            ))
+          ) : (
+            <SelectItem disabled value="No options available">
+              {loading ? "Loading..." : "No options available"}
+            </SelectItem>
+          )}
+        </SelectContent>
+      </Select>
+    </div>
   );
 };