feat(frontend): Connect plugins show API to download dialog lang in A…

…dminCP
VitNode · Feb 19, 2024 · d21f021 · d21f021
1 parent adbb29a
commit d21f021
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 26 deletions.
diff --git a/frontend/admin/core/views/core/langs/table/actions/download/content.tsx b/frontend/admin/core/views/core/langs/table/actions/download/content.tsx
@@ -1,4 +1,5 @@
 import { useTranslations } from "next-intl";
+import { Check } from "lucide-react";
 
 import {
   DialogDescription,
@@ -28,12 +29,23 @@ import {
   Command,
   CommandEmpty,
   CommandGroup,
-  CommandInput
+  CommandInput,
+  CommandItem
 } from "@/components/ui/command";
+import { Loader } from "@/components/loader/loader";
 
 export const ContentDownloadActionsTableLangsCoreAdmin = () => {
   const t = useTranslations("admin.core.langs.actions.download");
-  const { form, onSubmit } = useDownloadLangAdmin();
+  const { form, onSubmit, query } = useDownloadLangAdmin();
+  const { data } = query;
+
+  if (query.isLoading || !data) {
+    return <Loader />;
+  }
+
+  const {
+    admin__core_plugins__show: { edges }
+  } = data;
 
   return (
     <>
@@ -85,34 +97,40 @@ export const ContentDownloadActionsTableLangsCoreAdmin = () => {
                             !field.value && "text-muted-foreground"
                           )}
                         >
-                          Test
+                          {t("selected", { count: field.value.length })}
                         </Button>
                       </FormControl>
                     </PopoverTrigger>
-                    <PopoverContent className="w-full p-0">
+                    <PopoverContent className="p-0 w-80">
                       <Command>
-                        <CommandInput placeholder="Search language..." />
-                        <CommandEmpty>No language found.</CommandEmpty>
+                        <CommandInput placeholder={t("search")} />
+                        <CommandEmpty>{t("empty")}</CommandEmpty>
                         <CommandGroup>
-                          {/* {languages.map(language => (
-                          <CommandItem
-                            value={language.label}
-                            key={language.value}
-                            onSelect={() => {
-                              form.setValue("language", language.value);
-                            }}
-                          >
-                            <Check
-                              className={cn(
-                                "mr-2 h-4 w-4",
-                                language.value === field.value
-                                  ? "opacity-100"
-                                  : "opacity-0"
-                              )}
-                            />
-                            {language.label}
-                          </CommandItem>
-                        ))} */}
+                          {edges.map(item => (
+                            <CommandItem
+                              value={item.code}
+                              key={item.id}
+                              onSelect={value => {
+                                const values = field.value;
+
+                                field.onChange(
+                                  values.includes(value)
+                                    ? values.filter(el => el !== value)
+                                    : [...values, item.code]
+                                );
+                              }}
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 size-4",
+                                  field.value.includes(item.code)
+                                    ? "opacity-100"
+                                    : "opacity-0"
+                                )}
+                              />
+                              {item.name} - {item.version}
+                            </CommandItem>
+                          ))}
                         </CommandGroup>
                       </Command>
                     </PopoverContent>
@@ -128,6 +146,9 @@ export const ContentDownloadActionsTableLangsCoreAdmin = () => {
               type="submit"
               onClick={form.handleSubmit(onSubmit)}
               loading={form.formState.isSubmitting}
+              disabled={
+                !form.watch("all") && form.watch("plugins").length === 0
+              }
             >
               {t("submit")}
             </Button>

diff --git a/frontend/admin/core/views/core/langs/table/actions/download/hooks/query-api.ts b/frontend/admin/core/views/core/langs/table/actions/download/hooks/query-api.ts
@@ -0,0 +1,22 @@
+"use server";
+
+import { fetcher } from "@/graphql/fetcher";
+import {
+  Admin__Core_Plugins__Show,
+  type Admin__Core_Plugins__ShowQuery,
+  type Admin__Core_Plugins__ShowQueryVariables
+} from "@/graphql/hooks";
+
+export const queryApi = async (
+  variables: Admin__Core_Plugins__ShowQueryVariables
+) => {
+  const { data } = await fetcher<
+    Admin__Core_Plugins__ShowQuery,
+    Admin__Core_Plugins__ShowQueryVariables
+  >({
+    query: Admin__Core_Plugins__Show,
+    variables
+  });
+
+  return data;
+};
diff --git a/frontend/admin/core/views/core/langs/table/actions/download/hooks/use-download-lang-admin.ts b/frontend/admin/core/views/core/langs/table/actions/download/hooks/use-download-lang-admin.ts
@@ -1,8 +1,16 @@
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
 
+import { queryApi } from "./query-api";
+
 export const useDownloadLangAdmin = () => {
+  const query = useQuery({
+    queryKey: ["Admin__Core_Plugins__Show"],
+    queryFn: async () => await queryApi({})
+  });
+
   const formSchema = z.object({
     all: z.boolean(),
     plugins: z.array(z.string())
@@ -21,5 +29,5 @@ export const useDownloadLangAdmin = () => {
     console.log(values);
   };
 
-  return { form, onSubmit };
+  return { form, onSubmit, query };
 };
diff --git a/frontend/langs/en/admin.json b/frontend/langs/en/admin.json
@@ -187,6 +187,9 @@
               "desc": "Download language for all plugins."
             },
             "plugins": "Plugins",
+            "search": "Search by name...",
+            "empty": "No plugins found.",
+            "selected": "{count, plural, =0 {No plugins} =1 {1 plugin} other {# plugins}} selected",
             "submit": "Download"
           }
         }

diff --git a/frontend/langs/pl/admin.json b/frontend/langs/pl/admin.json
@@ -187,6 +187,9 @@
               "desc": "Pobierz językl dla wszystkich pluginów."
             },
             "plugins": "Plugins",
+            "search": "Szukaj po nazwie...",
+            "empty": "Nie znaleziono pliginów.",
+            "selected": "{count, plural, =0 {Nie wybrano pluginów} =1 {1 plugin wybrany} few {# pluginy wybrane} other {# pluginów wybrano}}",
             "submit": "Pobierz"
           }
         }