rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-02-26 20:54:21 +01:00
Code Issues Releases Activity

(feat) machines custom banner frontend and frontend test

Browse Source
This commit is contained in:
Karen 2023-01-25 11:24:41 +01:00 committed by Sylvain
parent 7357ece87f
commit 0d508839e5
3 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/frontend/src/javascript/components/editorial-block/editorial-block-form.tsx
View File

@ -1,11 +1,11 @@
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Control, FormState, UseFormRegister } from 'react-hook-form';
import { FieldValues } from 'react-hook-form/dist/types/fields';
import { Control, FormState, UseFormRegister, UseFormGetValues } from 'react-hook-form';
import { FormSwitch } from '../form/form-switch';
import { FormRichText } from '../form/form-rich-text';
import { FormInput } from '../form/form-input';
import { SettingName, SettingValue } from '../../models/setting';
export type EditorialKeys = 'active_text_block' | 'text_block' | 'active_cta' | 'cta_label' | 'cta_url';
interface EditorialBlockFormProps {
@ -13,7 +13,8 @@ interface EditorialBlockFormProps {
control: Control<Record<SettingName, SettingValue>>,
formState: FormState<Record<SettingName, SettingValue>>,
info?: string
keys: Record<EditorialKeys, SettingName>
keys: Record<EditorialKeys, SettingName>,
getValues?: UseFormGetValues<FieldValues>,
}
// regular expression to validate the input fields
@ -22,7 +23,7 @@ const urlRegex = /^(https?:\/\/)([^.]+)\.(.{2,30})(\/.*)*\/?$/;
/**
* Allows to create a formatted text and optional cta button in a form block, to be included in a resource form managed by react-hook-form.
*/
export const EditorialBlockForm: React.FC<EditorialBlockFormProps> = ({ register, control, formState, info, keys }) => {
export const EditorialBlockForm = <TFieldValues extends FieldValues>({ register, control, formState, info, keys, getValues }: EditorialBlockFormProps<TFieldValues>) => {
const { t } = useTranslation('admin');
const [isActiveTextBlock, setIsActiveTextBlock] = useState<boolean>(false);
@ -71,6 +72,7 @@ export const EditorialBlockForm: React.FC<EditorialBlockFormProps> = ({ register
<FormInput id={keys.cta_label}
register={register}
formState={formState}
getValues={getValues}
rules={{ required: { value: isActiveCta, message: t('app.admin.editorial_block_form.label_is_required') } }}
maxLength={40}
label={t('app.admin.editorial_block_form.cta_label')} />

3
app/frontend/src/javascript/components/machines/machines-settings.tsx
View File

@ -24,7 +24,7 @@ interface MachinesSettingsProps {
*/
export const MachinesSettings: React.FC<MachinesSettingsProps> = ({ onError, onSuccess, beforeSubmit }) => {
const { t } = useTranslation('admin');
const { register, control, formState, handleSubmit, reset } = useForm<Record<SettingName, SettingValue>>();
const { register, control, formState, handleSubmit, reset, getValues } = useForm<Record<SettingName, SettingValue>>();
/** Link Machines Banner Setting Names to generic keys expected by the Editorial Form */
const bannerKeys: Record<EditorialKeys, SettingName> = {
@ -63,6 +63,7 @@ export const MachinesSettings: React.FC<MachinesSettingsProps> = ({ onError, onS
<EditorialBlockForm register={register}
control={control}
formState={formState}
getValues={getValues}
keys={bannerKeys}
info={t('app.admin.machines_settings.generic_text_block_info')} />
</div>

9
app/frontend/src/javascript/models/setting.ts
View File

@ -243,9 +243,12 @@ export const trainingSettings = [
'trainings_invalidation_rule_period'
] as const;
export const bannersSettings = [
export const machineBannerSettings = [
'machines_banner_active',
'machines_banner_text',
'machines_banner_button'
'machines_banner_cta_active',
'machines_banner_cta_label',
'machines_banner_cta_url'
] as const;
export const allSettings = [
@ -275,7 +278,7 @@ export const allSettings = [
...displaySettings,
...storeSettings,
...trainingSettings,
...bannersSettings
...machineBannerSettings
] as const;
export type SettingName = typeof allSettings[number];