Skip to content

Commit

Permalink
Merge pull request #336 from EscolaLMS/feature/additional-fields-tran…
Browse files Browse the repository at this point in the history 
…slations-admin

additional fields translations from admin
  • Loading branch information
@victazzz
victazzz authored Mar 8, 2024
2 parents b18119d + 25bc631 commit f7f70db
Show file tree
Hide file tree
Showing 4 changed files with 153 additions and 91 deletions.
3 changes: 3 additions & 0 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,7 @@ module.exports = {
"plugin:@typescript-eslint/recommended",
"plugin:jsx-a11y/recommended",
],
rules: {
"@typescript-eslint/ban-ts-comment": "warn",
},
};
109 changes: 64 additions & 45 deletions src/components/organisms/MyProfileForm/MyProfileForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -106,6 +107,8 @@ export const MyProfileForm: React.FC<Props> = ({
phone: "",
});
const { t } = useTranslation();
const { getFieldTranslations, filterByKey } =
useAdditionalFieldTranslations();
const {
updateProfile,
fields,
Expand Down Expand Up @@ -296,57 +299,73 @@ export const MyProfileForm: React.FC<Props> = ({
error={touched.phone && errors.phone}
/>

{fields &&
Array.isArray(fields.list) &&
fields.list
.filter(
(field: API.Metadata) =>
field.type === "varchar" || field.type === "text"
)
.map((field: API.Metadata, index: number) =>
field.type === "varchar" ? (
<Input
key={`${field}${index}`}
required={isAdditionalRequiredField(field)}
label={t(`AdditionalFields.${field.name}`)}
type="text"
name={field.name}
onChange={handleChange}
onBlur={handleBlur}
value={String(values[field.name]) || ""}
error={errors[field.name] && touched[field.name]}
/>
) : (
<TextArea
rows={10}
key={`${field}${index}`}
required={isAdditionalRequiredField(field)}
label={t(`AdditionalFields.${field.name}`)}
name={field.name}
onChange={handleChange}
onBlur={handleBlur}
value={String(values[field.name]) || ""}
error={errors[field.name] && touched[field.name]}
/>
)
)}
{(fields.list || [])
.filter((field: API.Metadata) => {
const r = filterByKey(field);

{fields &&
fields.list &&
fields.list
.filter((field: API.Metadata) => field.type === "boolean")
.map((field: API.Metadata, index: number) => (
<Checkbox
checked={!!values[field.name]}
key={`${field.id}${index}`}
label={t(`AdditionalFields.${field.name}`)}
id={field.name + Date.now()}
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" ? (
<Input
key={`${field}${index}`}
required={isAdditionalRequiredField(field)}
label={
getFieldTranslations(field) ||
t(`AdditionalFields.${field.name}`)
}
type="text"
name={field.name}
onChange={handleChange}
onBlur={handleBlur}
value={String(values[field.name]) || ""}
error={errors[field.name] && touched[field.name]}
/>
) : (
<TextArea
rows={10}
key={`${field}${index}`}
required={isAdditionalRequiredField(field)}
label={
getFieldTranslations(field) ||
t(`AdditionalFields.${field.name}`)
}
name={field.name}
onChange={handleChange}
onBlur={handleBlur}
value={String(values[field.name]) || ""}
error={errors[field.name] && touched[field.name]}
/>
))}
)
)}

{(fields.list || [])
// .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) => (
<Checkbox
checked={!!values[field.name]}
key={`${field.id}${index}`}
label={
getFieldTranslations(field) ||
t(`AdditionalFields.${field.name}`)
}
id={field.name + Date.now()}
name={field.name}
onChange={handleChange}
onBlur={handleBlur}
required={isAdditionalRequiredField(field)}
/>
))}

<Button
mode="secondary"
Expand Down
91 changes: 45 additions & 46 deletions src/components/organisms/RegisterForm/RegisterForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { Input, Button, Title, Link, Text, Checkbox } from "../../../";
import { getStylesBasedOnTheme } from "../../../utils/utils";
import { ExtendableStyledComponent } from "types/component";
import { API } from "@escolalms/sdk/lib";
import useAdditionalFieldTranslations from "../../../hooks/useAdditionalFieldsTranslations";

const StyledDiv = styled.div<{ mobile: boolean }>`
margin: 0;
Expand Down Expand Up @@ -126,7 +127,8 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
});
const { t } = useTranslation();
const { register, fields, fetchFields } = useContext(EscolaLMSContext);

const { getFieldTranslations, filterByKey } =
useAdditionalFieldTranslations();
useEffect(() => {
fetchFields({ class_type: "App\\Models\\User" });
}, []);
Expand Down Expand Up @@ -321,53 +323,50 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
error={touched.phone && errors.phone}
/>

{fields &&
Array.isArray(fields.list) &&
fields.list
.filter((field: API.Metadata) => {
const r =
Array.isArray(field.extra) &&
field.extra?.filter(
(item: Record<string, string | number | boolean>) =>
item.register
);
{(fields.list || [])
.filter((field: API.Metadata) => {
const r = filterByKey(field);

return field.type !== "boolean" && !r;
})
.map((field: API.Metadata, index: number) => (
<Input
key={`${field}${index}`}
required={isAdditionalRequiredField(field)}
label={
getFieldTranslations(field) ||
fieldLabels[`AdditionalFields.${field.name}`] ||
t(`AdditionalFields.${field.name}`)
}
type="text"
name={field.name}
onChange={handleChange}
onBlur={handleBlur}
value={String(values[field.name]) || ""}
error={errors[field.name] && touched[field.name]}
/>
))}

return field.type !== "boolean" && !r;
})
.map((field: API.Metadata, index: number) => (
<Input
key={`${field}${index}`}
required={isAdditionalRequiredField(field)}
label={
fieldLabels[`AdditionalFields.${field.name}`] ||
t(`AdditionalFields.${field.name}`)
}
type="text"
name={field.name}
onChange={handleChange}
onBlur={handleBlur}
value={String(values[field.name]) || ""}
error={errors[field.name] && touched[field.name]}
/>
))}
{(fields.list || [])
.filter((field: API.Metadata) => {
const r = filterByKey(field);

{fields &&
fields.list &&
fields.list
.filter((field: API.Metadata) => field.type === "boolean")
.map((field: API.Metadata, index: number) => (
<Checkbox
key={`${field.id}${index}`}
label={
fieldLabels[`AdditionalFields.${field.name}`] ||
t(`AdditionalFields.${field.name}`)
}
id={field.name + Date.now()}
name={field.name}
onChange={handleChange}
onBlur={handleBlur}
/>
))}
return field.type === "boolean" && !r;
})
.map((field: API.Metadata, index: number) => (
<Checkbox
key={`${field.id}${index}`}
label={
getFieldTranslations(field) ||
fieldLabels[`AdditionalFields.${field.name}`] ||
t(`AdditionalFields.${field.name}`)
}
id={field.name + Date.now()}
name={field.name}
onChange={handleChange}
onBlur={handleBlur}
/>
))}

<Button mode="primary" type="submit" loading={isSubmitting} block>
{t<string>("Login.Signup")}
Expand Down
41 changes: 41 additions & 0 deletions src/hooks/useAdditionalFieldsTranslations.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { API } from "@escolalms/sdk/lib";
import { useCallback } from "react";
import { useTranslation } from "react-i18next"; // assuming you are using react-i18next for translations

const useAdditionalField = () => {
const { i18n } = useTranslation();

const additionalFieldTranslations = useCallback(
(fieldMeta: API.Metadata) => {
//@ts-ignore

Check warning on line 10 in src/hooks/useAdditionalFieldsTranslations.tsx

View workflow job for this annotation

GitHub Actions / eslint (20.x) 

Do not use "@ts-ignore" because it alters compilation errors

Check warning on line 10 in src/hooks/useAdditionalFieldsTranslations.tsx

View workflow job for this annotation

GitHub Actions / build 

Do not use "@ts-ignore" because it alters compilation errors
const translations = fieldMeta?.extra?.[0]?.translations;
if (translations && typeof translations === "object") {
return translations[i18n.language];
} else {
return false;
}
},
[i18n.language]
);

const filter = useCallback(
(fieldMeta: API.Metadata, keyName = "register") => {
return (
Array.isArray(fieldMeta.extra) &&
fieldMeta.extra.filter(
(item: Record<string, string | number | boolean> | null) => {
return item && item[keyName];
}
)
);
},
[]
);

return {
getFieldTranslations: additionalFieldTranslations,
filterByKey: filter,
};
};

export default useAdditionalField;

0 comments on commit f7f70db

Please sign in to comment.