Merge pull request #10 from Hexastack/fix/translations-display

Fix/translations display

api/src/config/index.ts

@@ -134,7 +134,7 @@ export const config: Config = {
   },
   chatbot: {
     lang: {
-      default: 'fr',
+      default: 'en',
       available: ['en', 'fr', 'ar', 'tn'],
     },
     messages: {

api/src/setting/seeds/setting.seed-model.ts

@@ -7,6 +7,8 @@
  * 3. SaaS Restriction: This software, or any derivative of it, may not be used to offer a competing product or service (SaaS) without prior written consent from Hexastack. Offering the software as a service or using it in a commercial cloud environment without express permission is strictly prohibited.
  */
 
+import { config } from '@/config';
+
 import { SettingCreateDto } from '../dto/setting.dto';
 import { SettingType } from '../schemas/types';
 
@@ -80,7 +82,7 @@ export const settingModels: SettingCreateDto[] = [
   {
     group: 'nlp_settings',
     label: 'default_lang',
-    value: '',
+    value: config.chatbot.lang.default,
     options: [], // NOTE : will be set onBeforeCreate from config
     type: SettingType.select,
     weight: 5,

frontend/src/components/translations/EditTranslationDialog.tsx

@@ -8,7 +8,7 @@
  */
 
 import { Dialog, DialogActions, DialogContent } from "@mui/material";
-import { useEffect, FC } from "react";
+import { useEffect, FC, useMemo } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
@@ -22,14 +22,14 @@ import { useSetting } from "@/hooks/useSetting";
 import { useToast } from "@/hooks/useToast";
 import { EntityType } from "@/services/types";
 import {
-  ITranslationFull,
   ITranslationAttributes,
   ITranslations,
+  ITranslation,
 } from "@/types/translation.types";
 
 import TranslationInput from "./TranslationInput";
 
-export type EditTranslationDialogProps = DialogControlProps<ITranslationFull>;
+export type EditTranslationDialogProps = DialogControlProps<ITranslation>;
 export const EditTranslationDialog: FC<EditTranslationDialogProps> = ({
   open,
   data,
@@ -39,6 +39,7 @@ export const EditTranslationDialog: FC<EditTranslationDialogProps> = ({
   const { t } = useTranslation();
   const { toast } = useToast();
   const availableLanguages = useSetting("nlp_settings", "languages");
+  const defaultLanguage = useSetting("nlp_settings", "default_lang");
   const { mutateAsync: updateTranslation } = useUpdate(EntityType.TRANSLATION, {
     onError: () => {
       toast.error(t("message.internal_server_error"));
@@ -48,16 +49,29 @@ export const EditTranslationDialog: FC<EditTranslationDialogProps> = ({
       toast.success(t("message.success_save"));
     },
   });
+  const defaultValues: ITranslation | undefined = useMemo(
+    () =>
+      data
+        ? {
+            ...data,
+            translations: {
+              ...data?.translations,
+              [defaultLanguage]: data?.str,
+            },
+          }
+        : undefined,
+    [defaultLanguage, data],
+  );
   const { reset, control, handleSubmit } = useForm<ITranslationAttributes>({
-    defaultValues: data,
+    defaultValues,
   });
   const onSubmitForm = async (params: ITranslationAttributes) => {
     if (data?.id) updateTranslation({ id: data.id, params });
   };
 
   useEffect(() => {
-    if (open) reset(data);
+    if (open) reset(defaultValues);
-  }, [open, reset, data]);
+  }, [open, reset, defaultValues]);
 
   return (
     <Dialog open={open} fullWidth onClose={closeDialog} {...rest}>

frontend/src/components/translations/index.tsx

@@ -30,7 +30,7 @@ import { useToast } from "@/hooks/useToast";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType } from "@/services/types";
 import { PermissionAction } from "@/types/permission.types";
-import { ITranslation, ITranslationFull } from "@/types/translation.types";
+import { ITranslation } from "@/types/translation.types";
 import { getDateTimeFormatter } from "@/utils/date";
 
 import { EditTranslationDialog } from "./EditTranslationDialog";
@@ -39,7 +39,7 @@ export const Translations = () => {
   const { t } = useTranslation();
   const { toast } = useToast();
   const availableLanguages = useSetting("nlp_settings", "languages");
-  const editDialogCtl = useDialog<ITranslationFull>(false);
+  const editDialogCtl = useDialog<ITranslation>(false);
   const deleteDialogCtl = useDialog<string>(false);
   const { onSearch, searchPayload } = useSearch<ITranslation>({
     $iLike: ["str"],
@@ -69,7 +69,7 @@ export const Translations = () => {
         toast.success(t("message.success_translation_refresh"));
       },
     });
-  const actionColumns = useActionColumns<ITranslationFull>(
+  const actionColumns = useActionColumns<ITranslation>(
     EntityType.TRANSLATION,
     [
       {
@@ -85,9 +85,8 @@ export const Translations = () => {
     ],
     t("label.operations"),
   );
-  const columns: GridColDef<ITranslationFull>[] = [
+  const columns: GridColDef<ITranslation>[] = [
     { flex: 1, field: "str", headerName: t("label.str") },
-
     {
       maxWidth: 300,
       field: "translations",

frontend/src/types/translation.types.ts

@@ -27,6 +27,3 @@ export interface ITranslationStub extends IBaseSchema {
 
 export interface ITranslation extends ITranslationStub, IFormat<Format.BASIC> {}
 
-export interface ITranslationFull
-  extends ITranslationStub,
-    IFormat<Format.FULL> {}