Merge pull request #684 from Hexastack/683-refactor-translations-dial…

…ogs-edit-delete

refactor(frontend): update translation dialogs

frontend/src/components/translations/TranslationForm.tsx

@@ -0,0 +1,115 @@
+/*
+ * 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 { FormLabel, Grid, Typography } from "@mui/material";
+import { FC, Fragment } from "react";
+import { Controller, ControllerRenderProps, useForm } from "react-hook-form";
+
+import { ContentContainer, ContentItem } from "@/app-components/dialogs";
+import { Input } from "@/app-components/inputs/Input";
+import { useFind } from "@/hooks/crud/useFind";
+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 } from "@/types/language.types";
+import {
+  ITranslation,
+  ITranslationAttributes,
+  ITranslations,
+} from "@/types/translation.types";
+
+interface TranslationInputProps {
+  field: ControllerRenderProps<ITranslationAttributes>;
+  language: ILanguage;
+}
+
+const TranslationInput: React.FC<TranslationInputProps> = ({
+  field,
+  language: { isRTL, title },
+}) => (
+  <Input
+    dir={isRTL ? "rtl" : "ltr"}
+    label={
+      <Grid container dir="ltr">
+        <Grid>{title}</Grid>
+      </Grid>
+    }
+    minRows={3}
+    inputRef={field.ref}
+    multiline={true}
+    {...field}
+  />
+);
+
+export const TranslationForm: FC<ComponentFormProps<ITranslation>> = ({
+  data,
+  Wrapper = Fragment,
+  WrapperProps,
+  ...rest
+}) => {
+  const { t } = useTranslate();
+  const { toast } = useToast();
+  const { data: languages } = useFind(
+    { entity: EntityType.LANGUAGE },
+    {
+      hasCount: false,
+    },
+  );
+  const { mutate: updateTranslation } = useUpdate(EntityType.TRANSLATION, {
+    onError: (error: Error) => {
+      rest.onError?.();
+      toast.error(error.message || t("message.internal_server_error"));
+    },
+    onSuccess() {
+      rest.onSuccess?.();
+      toast.success(t("message.success_save"));
+    },
+  });
+  const { control, handleSubmit } = useForm<ITranslationAttributes>({
+    defaultValues: {
+      translations: data?.translations,
+    },
+  });
+  const onSubmitForm = (params: ITranslationAttributes) => {
+    if (data?.id) updateTranslation({ id: data.id, params });
+  };
+
+  return (
+    <Wrapper
+      open={!!WrapperProps?.open}
+      onSubmit={handleSubmit(onSubmitForm)}
+      {...WrapperProps}
+    >
+      <form onSubmit={handleSubmit(onSubmitForm)}>
+        <ContentItem>
+          <FormLabel>{t("label.original_text")}</FormLabel>
+          <Typography component="p">{data?.str}</Typography>
+        </ContentItem>
+        <ContentContainer>
+          {languages
+            .filter(({ isDefault }) => !isDefault)
+            .map((language) => (
+              <ContentItem key={language.code}>
+                <Controller
+                  name={`translations.${language.code as keyof ITranslations}`}
+                  control={control}
+                  render={({ field }) => (
+                    <TranslationInput field={field} language={language} />
+                  )}
+                />
+              </ContentItem>
+            ))}
+        </ContentContainer>
+      </form>
+    </Wrapper>
+  );
+};
+
+TranslationForm.displayName = TranslationForm.name;

frontend/src/components/translations/TranslationFormDialog.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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 { FC } from "react";
+
+import { FormDialog } from "@/app-components/dialogs";
+import { useTranslate } from "@/hooks/useTranslate";
+import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
+import { ITranslation } from "@/types/translation.types";
+
+import { TranslationForm } from "./TranslationForm";
+
+export const TranslationFormDialog: FC<
+  ComponentFormDialogProps<ITranslation>
+> = ({ payload, ...rest }) => {
+  const { t } = useTranslate();
+
+  return (
+    <TranslationForm
+      data={payload}
+      onSuccess={() => {
+        rest.onClose(true);
+      }}
+      Wrapper={FormDialog}
+      WrapperProps={{
+        title: t("title.update_translation"),
+        ...rest,
+      }}
+    />
+  );
+};