From d21f0210e5c0cf9e2bd817f056c9c5ae99e53e58 Mon Sep 17 00:00:00 2001
From: aXenDeveloper <axendeveloper@gmail.com>
Date: Mon, 19 Feb 2024 15:03:13 +0100
Subject: [PATCH] feat(frontend): Connect plugins show API to download dialog
 lang in AdminCP

---
 .../langs/table/actions/download/content.tsx  | 71 ++++++++++++-------
 .../table/actions/download/hooks/query-api.ts | 22 ++++++
 .../download/hooks/use-download-lang-admin.ts | 10 ++-
 frontend/langs/en/admin.json                  |  3 +
 frontend/langs/pl/admin.json                  |  3 +
 5 files changed, 83 insertions(+), 26 deletions(-)
 create mode 100644 frontend/admin/core/views/core/langs/table/actions/download/hooks/query-api.ts

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
index 5f57f69cd..d8ee9692a 100644
--- 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
new file mode 100644
index 000000000..d1f8b54e3
--- /dev/null
+++ 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
index 27ac19569..00c28b802 100644
--- 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
index 1e27e560b..16470d503 100644
--- 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
index d24c00e3c..ced167916 100644
--- 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"
           }
         }