rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-01-18 07:52:23 +01:00
Code Issues Releases Activity

(ui) stylized form-switch

Browse Source
This commit is contained in:
Sylvain 2022-04-27 15:36:36 +02:00
parent 03ed350e69
commit 6955a4bba1
7 changed files with 60 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/frontend/src/javascript/components/form/form-multi-select.tsx
View File

@ -57,7 +57,7 @@ export const FormMultiSelect = <TFieldValues extends FieldValues, TContext exten
return (
<AbstractFormItem id={id} formState={formState} label={label}
className={`form-multi-select ${className}`} tooltip={tooltip}
className={`form-multi-select ${className || ''}`} tooltip={tooltip}
disabled={disabled} readOnly={readOnly}
rules={rules} error={error} warning={warning}>
<Controller name={id as FieldPath<TFieldValues>}

2
app/frontend/src/javascript/components/form/form-select.tsx
View File

@ -37,7 +37,7 @@ export const FormSelect = <TFieldValues extends FieldValues, TContext extends ob
return (
<AbstractFormItem id={id} label={label} tooltip={tooltip}
className={`form-select ${className}`} formState={formState}
className={`form-select ${className || ''}`} formState={formState}
error={error} warning={warning} rules={rules}
disabled={disabled} readOnly={readOnly}>
<Controller name={id as FieldPath<TFieldValues>}

26
app/frontend/src/javascript/components/form/form-switch.tsx
View File

@ -8,22 +8,42 @@ import { AbstractFormItem, AbstractFormItemProps } from './abstract-form-item';
interface FormSwitchProps<TFieldValues, TContext extends object> extends FormControlledComponent<TFieldValues, TContext>, AbstractFormItemProps<TFieldValues> {
defaultValue?: boolean,
onChange?: (value: boolean) => void,
}
/**
* This component is a wrapper for react-switch, to use with react-hook-form.
*/
export const FormSwitch = <TFieldValues, TContext extends object>({ id, label, tooltip, className, error, rules, disabled, control, defaultValue, formState, readOnly, warning }: FormSwitchProps<TFieldValues, TContext>) => {
export const FormSwitch = <TFieldValues, TContext extends object>({ id, label, tooltip, className, error, rules, disabled, control, defaultValue, formState, readOnly, warning, onChange }: FormSwitchProps<TFieldValues, TContext>) => {
/**
* The following callback will trigger the onChange callback, if it was passed to this component,
* when the selected option changes.
*/
const onChangeCb = (newValue: boolean): void => {
if (typeof onChange === 'function') {
onChange(newValue);
}
};
return (
<AbstractFormItem id={id} formState={formState} label={label}
className={`form-switch ${className}`} tooltip={tooltip}
className={`form-switch ${className || ''}`} tooltip={tooltip}
disabled={disabled} readOnly={readOnly}
rules={rules} error={error} warning={warning}>
<Controller name={id as FieldPath<TFieldValues>}
control={control}
defaultValue={defaultValue as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>}
render={({ field: { onChange, value, ref } }) =>
<Switch onChange={onChange} checked={value as boolean} ref={ref} disabled={disabled} readOnly={readOnly} />
<Switch onChange={val => {
onChange(val);
onChangeCb(val);
}}
checked={value as boolean}
height={19}
width={40}
ref={ref}
disabled={disabled}
readOnly={readOnly} />
} />
</AbstractFormItem>
);

12
app/frontend/src/javascript/components/user/user-profile-form.tsx
View File

@ -9,8 +9,8 @@ import { useTranslation } from 'react-i18next';
import { Avatar } from './avatar';
import { GenderInput } from './gender-input';
import { ChangePassword } from './change-password';
import Switch from 'react-switch';
import { PasswordInput } from './password-input';
import { FormSwitch } from '../form/form-switch';
declare const Application: IApplication;
@ -106,10 +106,12 @@ export const UserProfileForm: React.FC<UserProfileFormProps> = ({ action, size,
</div>
<div className="organization-data">
<h4>{t('app.shared.user_profile_form.organization_data')}</h4>
<label className="organization-toggle">
<p>{t('app.shared.user_profile_form.declare_organization')}</p>
<Switch checked={isOrganization} onChange={setIsOrganization} />
</label>
<FormSwitch control={control}
id="invoicing_profile_attributes.organization"
label={t('app.shared.user_profile_form.declare_organization')}
tooltip={t('app.shared.user_profile_form.declare_organization_help')}
defaultValue={user.invoicing_profile.organization !== null}
onChange={setIsOrganization} />
{isOrganization && <div className="organization-fields">
<FormInput id="invoicing_profile_attributes.organization_attributes.id"
register={register}

2
app/frontend/src/stylesheets/modules/form/form-item.scss
View File

@ -16,7 +16,7 @@
.item-tooltip {
position: relative;
cursor: pointer;
cursor: help;
.trigger i { display: block; }
.content {

25
app/frontend/src/stylesheets/modules/form/form-switch.scss
View File

@ -1,3 +1,28 @@
.form-switch {
position: relative;
.form-item-header {
position: absolute;
top: 16px;
left: 16px;
padding-top: 2px;
width: fit-content;
.item-tooltip {
margin-left: 12px;
position: unset;
.content {
right: unset;
left: 0;
}
}
}
.form-item-field {
display: flex;
flex-direction: row-reverse;
background-color: white;
padding: 16px;
}
}

3
config/locales/app.shared.en.yml
View File

@ -38,7 +38,8 @@ en:
personal_data: "Personal"
account_data: "Account"
organization_data: "Organization"
declare_organization: "I am an organization"
declare_organization: "I declare to be an organization"
declare_organization_help: "If you declare to be an organization, your invoices will be issued in the name of the organization."
pseudonym: "Nickname"
first_name: "First name"
surname: "Surname"