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

(ui) improved limitation add/edit/destroy

Browse Source
This commit is contained in:
Sylvain 2023-03-10 15:06:18 +01:00
parent 6abea03182
commit 2b3b123a02
6 changed files with 45 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/frontend/src/javascript/components/base/edit-destroy-buttons.tsx
View File

@ -12,6 +12,7 @@ interface EditDestroyButtonsProps {
itemId: number,
itemType: string,
apiDestroy: (itemId: number) => Promise<void>,
confirmationTitle?: string,
confirmationMessage?: string|ReactNode,
className?: string,
iconSize?: number,
@ -23,7 +24,7 @@ interface EditDestroyButtonsProps {
* Destroy : shows a modal dialog to ask the user for confirmation about the deletion of the provided item.
* Edit : triggers the provided function.
*/
export const EditDestroyButtons: React.FC<EditDestroyButtonsProps> = ({ onDeleteSuccess, onError, onEdit, itemId, itemType, apiDestroy, confirmationMessage, className, iconSize = 20, showEditButton = true }) => {
export const EditDestroyButtons: React.FC<EditDestroyButtonsProps> = ({ onDeleteSuccess, onError, onEdit, itemId, itemType, apiDestroy, confirmationTitle, confirmationMessage, className, iconSize = 20, showEditButton = true }) => {
const { t } = useTranslation('admin');
const [deletionModal, setDeletionModal] = useState<boolean>(false);
@ -58,7 +59,7 @@ export const EditDestroyButtons: React.FC<EditDestroyButtonsProps> = ({ onDelete
<Trash size={iconSize} weight="fill" />
</FabButton>
</div>
<FabModal title={t('app.admin.edit_destroy_buttons.delete_item', { TYPE: itemType })}
<FabModal title={confirmationTitle || t('app.admin.edit_destroy_buttons.delete_item', { TYPE: itemType })}
isOpen={deletionModal}
toggleModal={toggleDeletionModal}
closeButton={true}

16
app/frontend/src/javascript/components/plans/plan-limit-form.tsx
View File

@ -53,6 +53,13 @@ export const PlanLimitForm = <TContext extends object> ({ register, control, for
setIsOpen(!isOpen);
};
/**
* Triggered when the user clicks on 'add a limitation'
*/
const onAddLimitation = (): void => {
setEdited(null);
toggleModal();
};
/**
* Triggered when a new limit was added or an existing limit was modified
*/
@ -141,7 +148,7 @@ export const PlanLimitForm = <TContext extends object> ({ register, control, for
<header>
<p>{t('app.admin.plan_limit_form.all_limitations')}</p>
<div className="grpBtn">
<FabButton onClick={toggleModal} className="is-main">
<FabButton onClick={onAddLimitation} className="is-main">
{t('app.admin.plan_limit_form.new_usage_limitation')}
</FabButton>
</div>
@ -185,6 +192,8 @@ export const PlanLimitForm = <TContext extends object> ({ register, control, for
onEdit={onEditLimitation(limitation, index)}
itemId={limitation.id}
itemType={t('app.admin.plan_limit_form.limitation')}
confirmationTitle={t('app.admin.plan_limit_form.confirmation_title')}
confirmationMessage={t('app.admin.plan_limit_form.confirmation_message')}
apiDestroy={PlanLimitationAPI.destroy} />
</div>
</div>
@ -218,6 +227,8 @@ export const PlanLimitForm = <TContext extends object> ({ register, control, for
onEdit={onEditLimitation(limitation, index)}
itemId={limitation.id}
itemType={t('app.admin.plan_limit_form.limitation')}
confirmationTitle={t('app.admin.plan_limit_form.confirmation_title')}
confirmationMessage={t('app.admin.plan_limit_form.confirmation_message')}
apiDestroy={PlanLimitationAPI.destroy} />
</div>
</div>
@ -232,7 +243,8 @@ export const PlanLimitForm = <TContext extends object> ({ register, control, for
categories={categories}
toggleModal={toggleModal}
onSuccess={onLimitationSuccess}
limitation={edited?.limitation} />
limitation={edited?.limitation}
existingLimitations={fields} />
</div>
);
};

33
app/frontend/src/javascript/components/plans/plan-limit-modal.tsx
View File

@ -19,12 +19,13 @@ interface PlanLimitModalProps {
machines: Array<Machine>
categories: Array<MachineCategory>,
limitation?: PlanLimitation,
existingLimitations: Array<PlanLimitation>;
}
/**
* Form to manage subscriptions limitations of use
*/
export const PlanLimitModal: React.FC<PlanLimitModalProps> = ({ isOpen, toggleModal, machines, categories, onSuccess, limitation }) => {
export const PlanLimitModal: React.FC<PlanLimitModalProps> = ({ isOpen, toggleModal, machines, categories, onSuccess, limitation, existingLimitations = [] }) => {
const { t } = useTranslation('admin');
const { register, control, formState, setValue, handleSubmit, reset } = useForm<PlanLimitation>({ defaultValues: limitation || { limitable_type: 'MachineCategory' } });
@ -54,7 +55,7 @@ export const PlanLimitModal: React.FC<PlanLimitModalProps> = ({ isOpen, toggleMo
}
return handleSubmit((data: PlanLimitation) => {
onSuccess({ ...data, _modified: true });
reset({});
reset({ limitable_type: 'MachineCategory', limitable_id: null, limit: null });
toggleModal();
})(event);
};
@ -63,13 +64,17 @@ export const PlanLimitModal: React.FC<PlanLimitModalProps> = ({ isOpen, toggleMo
*/
const buildOptions = (): Array<SelectOption<number>> => {
if (limitType === 'MachineCategory') {
return categories.map(cat => {
return { value: cat.id, label: cat.name };
});
return categories
.filter(c => limitation || !existingLimitations.filter(l => l.limitable_type === 'MachineCategory').map(l => l.limitable_id).includes(c.id))
.map(cat => {
return { value: cat.id, label: cat.name };
});
} else {
return machines.map(machine => {
return { value: machine.id, label: machine.name };
});
return machines
.filter(m => limitation || !existingLimitations.filter(l => l.limitable_type === 'Machine').map(l => l.limitable_id).includes(m.id))
.map(machine => {
return { value: machine.id, label: machine.name };
});
}
};
@ -78,23 +83,27 @@ export const PlanLimitModal: React.FC<PlanLimitModalProps> = ({ isOpen, toggleMo
width={ModalSize.large}
isOpen={isOpen}
toggleModal={toggleModal}
onClose={() => reset({ limitable_type: 'MachineCategory' })}
closeButton>
<form className='plan-limit-modal' onSubmit={onSubmit}>
<p className='subtitle'>{t('app.admin.plan_limit_modal.limit_reservations')}</p>
<div className="grp">
<button onClick={evt => toggleLimitType(evt, 'MachineCategory')}
className={limitType === 'MachineCategory' ? 'is-active' : ''}>
{t('app.admin.plan_limit_modal.by_categories')}
className={limitType === 'MachineCategory' ? 'is-active' : ''}
disabled={!!limitation}>
{t('app.admin.plan_limit_modal.by_categories')}
</button>
<button onClick={evt => toggleLimitType(evt, 'Machine')}
className={limitType === 'Machine' ? 'is-active' : ''}>
{t('app.admin.plan_limit_modal.by_machine')}
className={limitType === 'Machine' ? 'is-active' : ''}
disabled={!!limitation}>
{t('app.admin.plan_limit_modal.by_machine')}
</button>
</div>
<FabAlert level='info'>{t('app.admin.plan_limit_modal.machine_info')}</FabAlert>
<FormInput register={register} id="id" type="hidden" />
<FormInput register={register} id="limitable_type" type="hidden" />
<FormSelect options={buildOptions()}
disabled={!!limitation}
control={control}
id="limitable_id"
rules={{ required: true }}

2
config/locales/app.admin.en.yml
View File

@ -210,6 +210,8 @@ en:
saved_limitations: "Saved limitations"
cancel: "Cancel this limitation"
limitation: "Limitation"
confirmation_title: "Delete the limitation"
confirmation_message: "Are you sure you want to delete this limitation? This will take effect immediately and cannot be undone."
plan_limit_modal:
title: "Manage limitation of use"
limit_reservations: "Limit reservations"

2
package.json
View File

@ -161,7 +161,7 @@
"react-cool-onclickoutside": "^1.7.0",
"react-custom-events": "^1.1.1",
"react-dom": "^17.0.2",
"react-hook-form": "^7.31.3",
"react-hook-form": "~7.31.3",
"react-i18next": "^11.15.6",
"react-modal": "^3.16.1",
"react-select": "^5.3.2",

8
yarn.lock
View File

@ -9062,10 +9062,10 @@ react-dom@^17.0.2:
object-assign "^4.1.1"
scheduler "^0.20.2"
react-hook-form@^7.31.3:
version "7.43.5"
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.43.5.tgz#b320405594f1506d8d57b954383166d4ff563778"
integrity sha512-YcaXhuFHoOPipu5pC7ckxrLrialiOcU91pKu8P+isAcXZyMgByUK9PkI9j5fENO4+6XU5PwWXRGMIFlk9u9UBQ==
react-hook-form@~7.31.3:
version "7.31.3"
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.31.3.tgz#b61bafb9a7435f91695351a7a9f714d8c4df0121"
integrity sha512-NVZdCWViIWXXXlQ3jxVQH0NuNfwPf8A/0KvuCxrM9qxtP1qYosfR2ZudarziFrVOC7eTUbWbm1T4OyYCwv9oSQ==
react-i18next@^11.15.6:
version "11.15.6"