Merge remote-tracking branch 'origin/feature/admin-editor-language-select-tab'

Author: MU-Software

apps/pyconkr-admin/src/components/layouts/admin_editor.tsx

@@ -6,11 +6,13 @@ import {
   ButtonProps,
   CircularProgress,
   Stack,
+  Tab,
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableRow,
+  Tabs,
   Typography,
 } from "@mui/material";
 import Form, { IChangeEvent } from "@rjsf/core";
@@ -88,6 +90,11 @@ const ReadOnlyValueField: React.FC<{
   return value as string;
 };
 
+type InnerAdminEditorStateType = {
+  tab: number;
+  formData: Record<string, string> | undefined;
+};
+
 const InnerAdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> =
   ErrorBoundary.with(
     { fallback: Common.Components.ErrorFallback },
@@ -110,9 +117,11 @@ const InnerAdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> =
           RJSFSchema,
           { [k in string]: unknown }
         > | null>(null);
-        const [formDataState, setFormDataState] = React.useState<
-          Record<string, string> | undefined
-        >(undefined);
+        const [editorState, setEditorState] =
+          React.useState<InnerAdminEditorStateType>({
+            tab: 0,
+            formData: undefined,
+          });
         const backendAdminClient =
           Common.Hooks.BackendAdminAPI.useBackendAdminClient();
         const { data: schemaInfo } =
@@ -122,6 +131,13 @@ const InnerAdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> =
             resource
           );
 
+        const setTab = (_: React.SyntheticEvent, selectedTab: number) =>
+          setEditorState((ps) => ({ ...ps, tab: selectedTab }));
+        const setFormDataState = (formData?: Record<string, string>) =>
+          setEditorState((ps) => ({ ...ps, formData }));
+        const selectedLanguage = editorState.tab === 0 ? "ko" : "en";
+        const notSelectedLanguage = editorState.tab === 0 ? "en" : "ko";
+
         const createMutation = Common.Hooks.BackendAdminAPI.useCreateMutation<
           Record<string, string>
         >(backendAdminClient, app, resource);
@@ -195,16 +211,40 @@ const InnerAdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> =
         const goToCreateNew = () => navigate(`/${app}/${resource}/create`);
 
         const writableSchema =
-          Common.Utils.filterWritablePropertiesInJsonSchema(schemaInfo.schema);
+          Common.Utils.filterPropertiesByLanguageInJsonSchema(
+            Common.Utils.filterWritablePropertiesInJsonSchema(
+              schemaInfo.schema
+            ),
+            schemaInfo.translation_fields,
+            selectedLanguage
+          );
         const readOnlySchema =
-          Common.Utils.filterReadOnlyPropertiesInJsonSchema(schemaInfo.schema);
+          Common.Utils.filterPropertiesByLanguageInJsonSchema(
+            Common.Utils.filterReadOnlyPropertiesInJsonSchema(
+              schemaInfo.schema
+            ),
+            schemaInfo.translation_fields,
+            selectedLanguage
+          );
         const uiSchema: UiSchema = schemaInfo.ui_schema;
         const disabled =
           createMutation.isPending ||
           modifyMutation.isPending ||
           deleteMutation.isPending;
         const title = `${app.toUpperCase()} > ${resource.toUpperCase()} > ${id ? "편집: " + id : "새 객체 추가"}`;
 
+        const notSelectedLangFields = schemaInfo.translation_fields.map(
+          (f) => `${f}_${notSelectedLanguage}`
+        );
+        const languageFilteredFormData = editorState.formData
+          ? Object.entries(editorState.formData)
+              .filter(([k]) => !notSelectedLangFields.includes(k))
+              .reduce(
+                (acc, [k, v]) => ({ ...acc, [k]: v }),
+                {} as Record<string, string>
+              )
+          : undefined;
+
         const handleCtrlSAction: (
           this: GlobalEventHandlers,
           ev: KeyboardEvent
@@ -225,56 +265,75 @@ const InnerAdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> =
           };
         }, []);
 
-        if (formDataState === undefined) return <CircularProgress />;
+        if (editorState.formData === undefined) return <CircularProgress />;
 
         return (
           <Box sx={{ flexGrow: 1, width: "100%", minHeight: "100%" }}>
             <Typography variant="h5">{title}</Typography>
-            {id && (
-              <>
-                <Table>
-                  <TableHead>
-                    <TableRow>
-                      <TableCell>필드</TableCell>
-                      <TableCell>값</TableCell>
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {Object.keys(readOnlySchema.properties || {}).map((key) => (
-                      <TableRow key={key}>
-                        <TableCell>{key}</TableCell>
-                        <TableCell>
-                          <ReadOnlyValueField
-                            name={key}
-                            value={formDataState?.[key]}
-                            uiSchema={uiSchema}
-                          />
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-                <br />
-              </>
-            )}
-            <MuiForm
-              ref={formRef}
-              schema={writableSchema}
-              uiSchema={{
-                ...uiSchema,
-                "ui:submitButtonOptions": { norender: true },
-              }}
-              validator={customizeValidator({ AjvClass: AjvDraft04 })}
-              formData={formDataState}
-              liveValidate
-              focusOnFirstError
-              formContext={{ readonlyAsDisabled: true }}
-              onChange={({ formData }) => setFormDataState(formData)}
-              onSubmit={onSubmitFunc}
-              disabled={disabled}
-              showErrorList={false}
-              fields={{ file: FileField }}
-            />
+            <Stack
+              direction="row"
+              spacing={2}
+              sx={{ width: "100%", height: "100%", maxWidth: "100%" }}
+            >
+              <Tabs
+                orientation="vertical"
+                value={editorState.tab}
+                onChange={setTab}
+                scrollButtons={false}
+              >
+                <Tab wrapped label="한국어" />
+                <Tab wrapped label="영어" />
+              </Tabs>
+              <Box sx={{ flexGrow: 1 }}>
+                {id && (
+                  <>
+                    <Table>
+                      <TableHead>
+                        <TableRow>
+                          <TableCell>필드</TableCell>
+                          <TableCell>값</TableCell>
+                        </TableRow>
+                      </TableHead>
+                      <TableBody>
+                        {Object.keys(readOnlySchema.properties || {}).map(
+                          (key) => (
+                            <TableRow key={key}>
+                              <TableCell>{key}</TableCell>
+                              <TableCell>
+                                <ReadOnlyValueField
+                                  name={key}
+                                  value={languageFilteredFormData?.[key]}
+                                  uiSchema={uiSchema}
+                                />
+                              </TableCell>
+                            </TableRow>
+                          )
+                        )}
+                      </TableBody>
+                    </Table>
+                    <br />
+                  </>
+                )}
+                <MuiForm
+                  ref={formRef}
+                  schema={writableSchema}
+                  uiSchema={{
+                    ...uiSchema,
+                    "ui:submitButtonOptions": { norender: true },
+                  }}
+                  validator={customizeValidator({ AjvClass: AjvDraft04 })}
+                  formData={languageFilteredFormData}
+                  liveValidate
+                  focusOnFirstError
+                  formContext={{ readonlyAsDisabled: true }}
+                  onChange={({ formData }) => setFormDataState(formData)}
+                  onSubmit={onSubmitFunc}
+                  disabled={disabled}
+                  showErrorList={false}
+                  fields={{ file: FileField }}
+                />
+              </Box>
+            </Stack>
             {children}
             <Stack
               direction="row"

packages/common/src/schemas/backendAdminAPI.ts

@@ -15,7 +15,7 @@ namespace BackendAdminAPISchemas {
   export type AdminSchemaDefinition = {
     schema: RJSFSchema;
     ui_schema: UiSchema;
-    translation_fields: { [key: string]: string };
+    translation_fields: string[];
   };
 
   export type UserSchema = {

packages/common/src/utils/index.ts

@@ -11,6 +11,7 @@ import {
   isFormValid as _isFormValid,
 } from "./form";
 import {
+  filterPropertiesByLanguageInJsonSchema as _filterPropertiesByLanguageInJsonSchema,
   filterReadOnlyPropertiesInJsonSchema as _filterReadOnlyPropertiesInJsonSchema,
   filterWritablePropertiesInJsonSchema as _filterWritablePropertiesInJsonSchema,
 } from "./json_schema";
@@ -28,6 +29,8 @@ namespace Utils {
     _filterWritablePropertiesInJsonSchema;
   export const filterReadOnlyPropertiesInJsonSchema =
     _filterReadOnlyPropertiesInJsonSchema;
+  export const filterPropertiesByLanguageInJsonSchema =
+    _filterPropertiesByLanguageInJsonSchema;
 }
 
 export default Utils;

packages/common/src/utils/json_schema.ts

@@ -40,3 +40,36 @@ export const filterReadOnlyPropertiesInJsonSchema = (schema: JSONSchema7) => {
 
   return readOnlySchema;
 };
+
+type SupportedLanguage = "ko" | "en";
+
+export const filterPropertiesByLanguageInJsonSchema = (
+  schema: JSONSchema7,
+  translation_fields: string[] = [],
+  language: SupportedLanguage
+) => {
+  const filteredSchema: JSONSchema7 = { ...schema };
+  if (translation_fields.length === 0) return filteredSchema;
+
+  const notSelectedLanguage = language === "ko" ? "en" : "ko";
+  const notSelectedLangFields = translation_fields.map(
+    (f) => `${f}_${notSelectedLanguage}`
+  );
+  if (filteredSchema.properties) {
+    filteredSchema.properties = Object.entries(filteredSchema.properties)
+      .filter(([key]) => !notSelectedLangFields.includes(key))
+      .reduce(
+        (acc, [propKey, propDef]) => ({
+          ...acc,
+          [propKey]: filterPropertiesByLanguageInJsonSchema(
+            propDef as JSONSchema7,
+            translation_fields,
+            language
+          ),
+        }),
+        {} as JSONSchema7["properties"]
+      );
+  }
+
+  return filteredSchema;
+};