Merge pull request #690 from Hexastack/689-refactor-languages-dialogs…

…-add-edit-delete

refactor(frontend): update language dialogs

frontend/public/locales/en/translation.json

@@ -198,6 +198,8 @@
     "import": "Bulk Import",
     "media_library": "Media Library",
     "languages": "Languages",
+    "new_language": "Add Language",
+    "edit_language": "Edit Language",
     "translations": "Translations",
     "update_translation": "Update Translation",
     "broadcast": "Broadcast",

frontend/public/locales/fr/translation.json

@@ -198,6 +198,8 @@
     "import": "Importation en masse",
     "media_library": "Bibliothéque Media",
     "languages": "Langues",
+    "new_language": "Nouvelle langue",
+    "edit_language": "Modifier la langue",
     "translations": "Traductions",
     "update_translation": "Mettre à jour la traduction",
     "broadcast": "Diffusion",

frontend/src/components/languages/LanguageForm.tsx

@@ -0,0 +1,127 @@
+/*
+ * Copyright © 2025 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 { FormControlLabel, Switch } from "@mui/material";
+import { FC, Fragment, useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+
+import { ContentContainer, ContentItem } from "@/app-components/dialogs/";
+import { Input } from "@/app-components/inputs/Input";
+import { useCreate } from "@/hooks/crud/useCreate";
+import { useUpdate } from "@/hooks/crud/useUpdate";
+import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
+import { EntityType } from "@/services/types";
+import { ComponentFormProps } from "@/types/common/dialogs.types";
+import { ILanguage, ILanguageAttributes } from "@/types/language.types";
+
+export const LanguageForm: FC<ComponentFormProps<ILanguage>> = ({
+  data,
+  Wrapper = Fragment,
+  WrapperProps,
+  ...rest
+}) => {
+  const { t } = useTranslate();
+  const { toast } = useToast();
+  const options = {
+    onError: () => {
+      rest.onError?.();
+      toast.error(t("message.internal_server_error"));
+    },
+    onSuccess() {
+      rest.onSuccess?.();
+      toast.success(t("message.success_save"));
+    },
+  };
+  const { mutate: createLanguage } = useCreate(EntityType.LANGUAGE, options);
+  const { mutate: updateLanguage } = useUpdate(EntityType.LANGUAGE, options);
+  const {
+    reset,
+    register,
+    formState: { errors },
+    handleSubmit,
+    control,
+  } = useForm<ILanguageAttributes>({
+    defaultValues: {
+      title: data?.title || "",
+      code: data?.code || "",
+      isRTL: data?.isRTL || false,
+    },
+  });
+  const validationRules = {
+    title: {
+      required: t("message.title_is_required"),
+    },
+    code: {
+      required: t("message.code_is_required"),
+    },
+  };
+  const onSubmitForm = (params: ILanguageAttributes) => {
+    if (data) {
+      updateLanguage({ id: data.id, params });
+    } else {
+      createLanguage(params);
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        title: data.title,
+        code: data.code,
+        isRTL: data.isRTL,
+      });
+    } else {
+      reset();
+    }
+  }, [data, reset]);
+
+  return (
+    <Wrapper
+      open={!!WrapperProps?.open}
+      onSubmit={handleSubmit(onSubmitForm)}
+      {...WrapperProps}
+    >
+      <form onSubmit={handleSubmit(onSubmitForm)}>
+        <ContentContainer>
+          <ContentItem>
+            <Input
+              label={t("label.title")}
+              error={!!errors.title}
+              {...register("title", validationRules.title)}
+              multiline={true}
+              autoFocus
+              helperText={errors.title ? errors.title.message : null}
+            />
+          </ContentItem>
+          <ContentItem>
+            <Input
+              label={t("label.code")}
+              error={!!errors.code}
+              {...register("code", validationRules.code)}
+              multiline={true}
+              helperText={errors.code ? errors.code.message : null}
+            />
+          </ContentItem>
+          <ContentItem>
+            <Controller
+              name="isRTL"
+              control={control}
+              render={({ field }) => (
+                <FormControlLabel
+                  control={<Switch {...field} checked={field.value} />}
+                  label={t("label.is_rtl")}
+                />
+              )}
+            />
+          </ContentItem>
+        </ContentContainer>
+      </form>
+    </Wrapper>
+  );
+};

frontend/src/components/languages/LanguageFormDialog.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright © 2025 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 { GenericFormDialog } from "@/app-components/dialogs";
+import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
+import { ILanguage } from "@/types/language.types";
+
+import { LanguageForm } from "./LanguageForm";
+
+export const LanguageFormDialog = <T extends ILanguage = ILanguage>(
+  props: ComponentFormDialogProps<T>,
+) => (
+  <GenericFormDialog<T>
+    Form={LanguageForm}
+    addText="title.new_language"
+    editText="title.edit_language"
+    {...props}
+  />
+);