From f60b59aa54d33a9a2ed98987ab5db4ae235c6102 Mon Sep 17 00:00:00 2001 From: yassinedorbozgithub Date: Tue, 17 Dec 2024 16:07:06 +0100 Subject: [PATCH] feat(frontend): add an nlpSample import component --- frontend/public/locales/en/translation.json | 4 +- frontend/public/locales/fr/translation.json | 2 + .../components/nlp/components/NlpSample.tsx | 53 ++++++++++++++--- frontend/src/hooks/crud/useImport.tsx | 59 +++++++++++++++++++ frontend/src/services/api.class.ts | 14 +++++ 5 files changed, 123 insertions(+), 9 deletions(-) create mode 100644 frontend/src/hooks/crud/useImport.tsx diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json index 780bb87c..f58ac28d 100644 --- a/frontend/public/locales/en/translation.json +++ b/frontend/public/locales/en/translation.json @@ -81,7 +81,9 @@ "subtitle_is_required": "Subtitle is required", "category_is_required": "Flow is required", "attachment_is_required": "Attachment is required", - "success_import": "Content has been successfuly imported!", + "success_import": "Content has been successfully imported!", + "import_failed": "Import failed", + "import_duplicated_data": "Data already exists", "attachment_not_synced": "- Pending Sync. -", "success_translation_refresh": "Translations has been successfully refreshed!", "message_tag_is_required": "You need to specify a message tag.", diff --git a/frontend/public/locales/fr/translation.json b/frontend/public/locales/fr/translation.json index efc23e5e..dc318301 100644 --- a/frontend/public/locales/fr/translation.json +++ b/frontend/public/locales/fr/translation.json @@ -83,6 +83,8 @@ "category_is_required": "La catégorie est requise", "attachment_is_required": "L'attachement est obligatoire", "success_import": "Le contenu a été importé avec succès!", + "import_failed": "Échec de l'importation", + "import_duplicated_data": "Les données existent déjà", "attachment_not_synced": "- En attente de Sync. -", "success_translation_refresh": "Les traductions ont été actualisées avec succès!", "message_tag_is_required": "Vous devez spécifier le tag de message.", diff --git a/frontend/src/components/nlp/components/NlpSample.tsx b/frontend/src/components/nlp/components/NlpSample.tsx index 564c6c28..a5851905 100644 --- a/frontend/src/components/nlp/components/NlpSample.tsx +++ b/frontend/src/components/nlp/components/NlpSample.tsx @@ -15,13 +15,14 @@ import { Button, ButtonGroup, Chip, + CircularProgress, Grid, IconButton, MenuItem, Stack, } from "@mui/material"; import { GridColDef, GridRowSelectionModel } from "@mui/x-data-grid"; -import { useState } from "react"; +import { ChangeEvent, useState } from "react"; import { DeleteDialog } from "@/app-components/dialogs"; import { ChipEntity } from "@/app-components/displays/ChipEntity"; @@ -38,6 +39,7 @@ import { useDelete } from "@/hooks/crud/useDelete"; import { useDeleteMany } from "@/hooks/crud/useDeleteMany"; import { useFind } from "@/hooks/crud/useFind"; import { useGetFromCache } from "@/hooks/crud/useGet"; +import { useImport } from "@/hooks/crud/useImport"; import { useConfig } from "@/hooks/useConfig"; import { getDisplayDialogs, useDialog } from "@/hooks/useDialog"; import { useHasPermission } from "@/hooks/useHasPermission"; @@ -104,6 +106,20 @@ export default function NlpSample() { }, }, ); + const { mutateAsync: importDataset, isLoading } = useImport( + EntityType.NLP_SAMPLE, + { + onError: () => { + toast.error(t("message.import_failed")); + }, + onSuccess: (data) => { + if (data.length) toast.success(t("message.success_import")); + else { + toast.error(t("message.import_duplicated_data")); + } + }, + }, + ); const [selectedNlpSamples, setSelectedNlpSamples] = useState([]); const { dataGridProps } = useFind( { entity: EntityType.NLP_SAMPLE, format: Format.FULL }, @@ -259,6 +275,15 @@ export default function NlpSample() { const handleSelectionChange = (selection: GridRowSelectionModel) => { setSelectedNlpSamples(selection as string[]); }; + const handleImportChange = async (event: ChangeEvent) => { + if (event.target.files?.length) { + const file = event.target.files.item(0); + + if (file) { + await importDataset(file); + } + } + }; return ( @@ -343,13 +368,25 @@ export default function NlpSample() { EntityType.NLP_SAMPLE_ENTITY, PermissionAction.CREATE, ) ? ( - + <> + + + ) : null} {hasPermission(EntityType.NLP_SAMPLE, PermissionAction.READ) && hasPermission( diff --git a/frontend/src/hooks/crud/useImport.tsx b/frontend/src/hooks/crud/useImport.tsx new file mode 100644 index 00000000..4444362a --- /dev/null +++ b/frontend/src/hooks/crud/useImport.tsx @@ -0,0 +1,59 @@ +/* + * Copyright © 2024 Hexastack. All rights reserved. + * + * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: + * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. + * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). + */ + +import { useMutation, useQueryClient } from "react-query"; + +import { QueryType, TMutationOptions } from "@/services/types"; +import { IBaseSchema, IDynamicProps, TType } from "@/types/base.types"; + +import { useEntityApiClient } from "../useApiClient"; + +import { isSameEntity, useNormalizeAndCache } from "./helpers"; + +export const useImport = < + TEntity extends IDynamicProps["entity"], + TAttr extends File = File, + TBasic extends IBaseSchema = TType["basic"], +>( + entity: TEntity, + options: Omit< + TMutationOptions, + "mutationFn" | "mutationKey" + > = {}, +) => { + const api = useEntityApiClient(entity); + const queryClient = useQueryClient(); + const normalizeAndCache = useNormalizeAndCache( + entity, + ); + const { invalidate = true, ...rest } = options; + + return useMutation({ + mutationFn: async (variables) => { + const data = await api.import(variables); + const { result, entities } = normalizeAndCache(data); + + // Invalidate current entity count and collection + if (invalidate) { + queryClient.invalidateQueries({ + predicate: ({ queryKey }) => { + const [qType, qEntity] = queryKey; + + return ( + (qType === QueryType.count || qType === QueryType.collection) && + isSameEntity(qEntity, entity) + ); + }, + }); + } + + return result.map((id) => entities[entity][id]); + }, + ...rest, + }); +}; diff --git a/frontend/src/services/api.class.ts b/frontend/src/services/api.class.ts index a29e824e..b6370c4b 100644 --- a/frontend/src/services/api.class.ts +++ b/frontend/src/services/api.class.ts @@ -269,6 +269,20 @@ export class EntityApiClient extends ApiClient { return data; } + async import(file: File) { + const { _csrf } = await this.getCsrf(); + const formData = new FormData(); + + formData.append("file", file); + + const { data } = await this.request.post, FormData>( + `${ROUTES[this.type]}/import?_csrf=${_csrf}`, + formData, + ); + + return data; + } + async upload(file: File) { const { _csrf } = await this.getCsrf(); const formData = new FormData();