From 2bbb4f2048636923cc2f55719a3335e6c937659b Mon Sep 17 00:00:00 2001 From: Przemek Date: Thu, 7 Mar 2024 17:06:11 +0100 Subject: [PATCH 1/5] additional fields translations from admin --- .../organisms/MyProfileForm/MyProfileForm.tsx | 36 +++++++++++++++---- .../organisms/RegisterForm/RegisterForm.tsx | 16 +++++++-- src/hooks/useAdditionalFieldsTranslations.tsx | 23 ++++++++++++ 3 files changed, 66 insertions(+), 9 deletions(-) create mode 100644 src/hooks/useAdditionalFieldsTranslations.tsx diff --git a/src/components/organisms/MyProfileForm/MyProfileForm.tsx b/src/components/organisms/MyProfileForm/MyProfileForm.tsx index 9594bfad..55d15e18 100644 --- a/src/components/organisms/MyProfileForm/MyProfileForm.tsx +++ b/src/components/organisms/MyProfileForm/MyProfileForm.tsx @@ -11,6 +11,7 @@ import styled, { withTheme } from "styled-components"; import { Input, Button, Text, Checkbox, TextArea } from "../../../"; import { ExtendableStyledComponent } from "types/component"; +import useAdditionalFieldTranslations from "hooks/useAdditionalFieldsTranslations"; const StyledFormHeader = styled.div<{ mobile: boolean }>` h2, @@ -106,6 +107,7 @@ export const MyProfileForm: React.FC = ({ phone: "", }); const { t } = useTranslation(); + const getFieldTranslations = useAdditionalFieldTranslations(); const { updateProfile, fields, @@ -299,16 +301,30 @@ export const MyProfileForm: React.FC = ({ {fields && Array.isArray(fields.list) && fields.list - .filter( - (field: API.Metadata) => - field.type === "varchar" || field.type === "text" - ) + .filter((field: API.Metadata) => { + const r = + Array.isArray(field.extra) && + field.extra?.filter( + (item: Record) => + item.register + ); + + return field.type !== "boolean" && !r; + }) + // NOTE: this is old filtering im not sure we should have diffrent filter for register and edit form this is for consideration + // .filter( + // (field: API.Metadata) => + // field.type === "varchar" || field.type === "text" + // ) .map((field: API.Metadata, index: number) => field.type === "varchar" ? ( = ({ rows={10} key={`${field}${index}`} required={isAdditionalRequiredField(field)} - label={t(`AdditionalFields.${field.name}`)} + label={ + getFieldTranslations(field.extra) || + t(`AdditionalFields.${field.name}`) + } name={field.name} onChange={handleChange} onBlur={handleBlur} @@ -339,7 +358,10 @@ export const MyProfileForm: React.FC = ({ ` margin: 0; @@ -126,7 +127,7 @@ export const RegisterForm: React.FC = ({ }); const { t } = useTranslation(); const { register, fields, fetchFields } = useContext(EscolaLMSContext); - + const getFieldTranslations = useAdditionalFieldTranslations(); useEffect(() => { fetchFields({ class_type: "App\\Models\\User" }); }, []); @@ -339,6 +340,7 @@ export const RegisterForm: React.FC = ({ key={`${field}${index}`} required={isAdditionalRequiredField(field)} label={ + getFieldTranslations(field.extra) || fieldLabels[`AdditionalFields.${field.name}`] || t(`AdditionalFields.${field.name}`) } @@ -354,11 +356,21 @@ export const RegisterForm: React.FC = ({ {fields && fields.list && fields.list - .filter((field: API.Metadata) => field.type === "boolean") + .filter((field: API.Metadata) => { + const r = + Array.isArray(field.extra) && + field.extra?.filter( + (item: Record) => + item.register + ); + + return field.type === "boolean" && !r; + }) .map((field: API.Metadata, index: number) => ( { + const { i18n } = useTranslation(); + + const additionalFieldTranslations = useCallback( + (fieldMeta: API.Metadata) => { + const translations = fieldMeta[0].translations; + if (translations) { + return translations[i18n.language]; + } else { + return false; + } + }, + [i18n.language] + ); + + return additionalFieldTranslations; +}; + +export default useAdditionalFieldTranslations; From 41f6bf51139f7e15bb5fb5da498657784f524e85 Mon Sep 17 00:00:00 2001 From: Przemek Date: Thu, 7 Mar 2024 17:19:43 +0100 Subject: [PATCH 2/5] additional fields translations from admin --- .../organisms/MyProfileForm/MyProfileForm.tsx | 17 ++++++++------- .../organisms/RegisterForm/RegisterForm.tsx | 17 ++++----------- src/hooks/useAdditionalFieldsTranslations.tsx | 21 ++++++++++++++++--- 3 files changed, 31 insertions(+), 24 deletions(-) diff --git a/src/components/organisms/MyProfileForm/MyProfileForm.tsx b/src/components/organisms/MyProfileForm/MyProfileForm.tsx index 55d15e18..110f7588 100644 --- a/src/components/organisms/MyProfileForm/MyProfileForm.tsx +++ b/src/components/organisms/MyProfileForm/MyProfileForm.tsx @@ -107,7 +107,8 @@ export const MyProfileForm: React.FC = ({ phone: "", }); const { t } = useTranslation(); - const getFieldTranslations = useAdditionalFieldTranslations(); + const { getFieldTranslations, filterByKey } = + useAdditionalFieldTranslations(); const { updateProfile, fields, @@ -302,12 +303,7 @@ export const MyProfileForm: React.FC = ({ Array.isArray(fields.list) && fields.list .filter((field: API.Metadata) => { - const r = - Array.isArray(field.extra) && - field.extra?.filter( - (item: Record) => - item.register - ); + const r = filterByKey(field); return field.type !== "boolean" && !r; }) @@ -353,7 +349,12 @@ export const MyProfileForm: React.FC = ({ {fields && fields.list && fields.list - .filter((field: API.Metadata) => field.type === "boolean") + // .filter((field: API.Metadata) => field.type === "boolean") + .filter((field: API.Metadata) => { + const r = filterByKey(field); + + return field.type === "boolean" && !r; + }) .map((field: API.Metadata, index: number) => ( = ({ }); const { t } = useTranslation(); const { register, fields, fetchFields } = useContext(EscolaLMSContext); - const getFieldTranslations = useAdditionalFieldTranslations(); + const { getFieldTranslations, filterByKey } = + useAdditionalFieldTranslations(); useEffect(() => { fetchFields({ class_type: "App\\Models\\User" }); }, []); @@ -326,12 +327,7 @@ export const RegisterForm: React.FC = ({ Array.isArray(fields.list) && fields.list .filter((field: API.Metadata) => { - const r = - Array.isArray(field.extra) && - field.extra?.filter( - (item: Record) => - item.register - ); + const r = filterByKey(field); return field.type !== "boolean" && !r; }) @@ -357,12 +353,7 @@ export const RegisterForm: React.FC = ({ fields.list && fields.list .filter((field: API.Metadata) => { - const r = - Array.isArray(field.extra) && - field.extra?.filter( - (item: Record) => - item.register - ); + const r = filterByKey(field); return field.type === "boolean" && !r; }) diff --git a/src/hooks/useAdditionalFieldsTranslations.tsx b/src/hooks/useAdditionalFieldsTranslations.tsx index 63861808..ee354f22 100644 --- a/src/hooks/useAdditionalFieldsTranslations.tsx +++ b/src/hooks/useAdditionalFieldsTranslations.tsx @@ -2,7 +2,7 @@ import { API } from "@escolalms/sdk/lib"; import { useCallback } from "react"; import { useTranslation } from "react-i18next"; // assuming you are using react-i18next for translations -const useAdditionalFieldTranslations = () => { +const useAdditionalField = () => { const { i18n } = useTranslation(); const additionalFieldTranslations = useCallback( @@ -17,7 +17,22 @@ const useAdditionalFieldTranslations = () => { [i18n.language] ); - return additionalFieldTranslations; + const filter = useCallback( + (fieldMeta: API.Metadata, keyName: string = "register") => { + return ( + Array.isArray(fieldMeta.extra) && + fieldMeta.extra?.filter( + (item: Record) => item[keyName] + ) + ); + }, + [] + ); + + return { + getFieldTranslations: additionalFieldTranslations, + filterByKey: filter, + }; }; -export default useAdditionalFieldTranslations; +export default useAdditionalField; From 19ac94abfc2f51a7ce6eca63cabf2476ecb8526b Mon Sep 17 00:00:00 2001 From: Przemek Date: Fri, 8 Mar 2024 10:49:18 +0100 Subject: [PATCH 3/5] fix --- src/hooks/useAdditionalFieldsTranslations.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useAdditionalFieldsTranslations.tsx b/src/hooks/useAdditionalFieldsTranslations.tsx index ee354f22..76fe59f6 100644 --- a/src/hooks/useAdditionalFieldsTranslations.tsx +++ b/src/hooks/useAdditionalFieldsTranslations.tsx @@ -18,7 +18,7 @@ const useAdditionalField = () => { ); const filter = useCallback( - (fieldMeta: API.Metadata, keyName: string = "register") => { + (fieldMeta: API.Metadata, keyName = "register") => { return ( Array.isArray(fieldMeta.extra) && fieldMeta.extra?.filter( From 23a9fbd0d24fcba4e34b6603158277754af44eec Mon Sep 17 00:00:00 2001 From: Przemek Date: Fri, 8 Mar 2024 12:18:47 +0100 Subject: [PATCH 4/5] fixed --- .eslintrc.js | 3 + .../organisms/MyProfileForm/MyProfileForm.tsx | 120 +++++++++--------- .../organisms/RegisterForm/RegisterForm.tsx | 86 ++++++------- src/hooks/useAdditionalFieldsTranslations.tsx | 11 +- 4 files changed, 109 insertions(+), 111 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index ee02035f..ad3b53ed 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -7,4 +7,7 @@ module.exports = { "plugin:@typescript-eslint/recommended", "plugin:jsx-a11y/recommended", ], + rules: { + "@typescript-eslint/ban-ts-comment": "warn", + }, }; diff --git a/src/components/organisms/MyProfileForm/MyProfileForm.tsx b/src/components/organisms/MyProfileForm/MyProfileForm.tsx index 110f7588..0d015246 100644 --- a/src/components/organisms/MyProfileForm/MyProfileForm.tsx +++ b/src/components/organisms/MyProfileForm/MyProfileForm.tsx @@ -299,77 +299,73 @@ export const MyProfileForm: React.FC = ({ error={touched.phone && errors.phone} /> - {fields && - Array.isArray(fields.list) && - fields.list - .filter((field: API.Metadata) => { - const r = filterByKey(field); + {(fields.list || []) + .filter((field: API.Metadata) => { + const r = filterByKey(field); - return field.type !== "boolean" && !r; - }) - // NOTE: this is old filtering im not sure we should have diffrent filter for register and edit form this is for consideration - // .filter( - // (field: API.Metadata) => - // field.type === "varchar" || field.type === "text" - // ) - .map((field: API.Metadata, index: number) => - field.type === "varchar" ? ( - - ) : ( -