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

linted profile-custom-fields

This commit is contained in:
Sylvain 2022-06-21 14:10:51 +02:00
parent 00fb384ba5
commit 18aba05f25
4 changed files with 92 additions and 22 deletions

View File

@ -7,6 +7,7 @@ import { Loader } from '../base/loader';
import { IApplication } from '../../models/application';
import { ProfileCustomField } from '../../models/profile-custom-field';
import ProfileCustomFieldAPI from '../../api/profile-custom-field';
import { FabButton } from '../base/fab-button';
declare const Application: IApplication;
@ -31,6 +32,9 @@ export const ProfileCustomFieldsList: React.FC<ProfileCustomFieldsListProps> = (
});
}, []);
/**
* Save the new state of the given custom field to the API
*/
const saveProfileCustomField = (profileCustomField: ProfileCustomField) => {
ProfileCustomFieldAPI.update(profileCustomField).then(data => {
const newFields = profileCustomFields.map(f => {
@ -43,9 +47,9 @@ export const ProfileCustomFieldsList: React.FC<ProfileCustomFieldsListProps> = (
if (profileCustomFieldToEdit) {
setProfileCustomFieldToEdit(null);
}
onSuccess(t('app.admin.settings.account.organization_profile_custom_field_successfully_updated'));
onSuccess(t('app.admin.settings.account.profile_custom_fields_list.field_successfully_updated'));
}).catch(err => {
onError(t('app.admin.settings.account.organization_profile_custom_field_unable_to_update') + err);
onError(t('app.admin.settings.account.profile_custom_fields_list.unable_to_update') + err);
});
};
@ -63,12 +67,19 @@ export const ProfileCustomFieldsList: React.FC<ProfileCustomFieldsListProps> = (
};
};
/**
* Callback triggered when the user clicks on the 'edit field' button.
* Opens the edition form for the given custom field
*/
const editProfileCustomFieldLabel = (profileCustomField: ProfileCustomField) => {
return () => {
setProfileCustomFieldToEdit(_.clone(profileCustomField));
};
};
/**
* Callback triggered when the input "label" is changed: updates the according state
*/
const onChangeProfileCustomFieldLabel = (e: BaseSyntheticEvent) => {
const { value } = e.target;
setProfileCustomFieldToEdit({
@ -77,16 +88,22 @@ export const ProfileCustomFieldsList: React.FC<ProfileCustomFieldsListProps> = (
});
};
/**
* Save the currently edited custom field
*/
const saveProfileCustomFieldLabel = () => {
saveProfileCustomField(profileCustomFieldToEdit);
};
/**
* Closes the edition form for the currently edited custom field
*/
const cancelEditProfileCustomFieldLabel = () => {
setProfileCustomFieldToEdit(null);
};
return (
<table className="table profile-custom-fields-list">
<table className="profile-custom-fields-list">
<thead>
<tr>
<th style={{ width: '50%' }}></th>
@ -101,31 +118,44 @@ export const ProfileCustomFieldsList: React.FC<ProfileCustomFieldsListProps> = (
<td>
{profileCustomFieldToEdit?.id !== field.id && field.label}
{profileCustomFieldToEdit?.id !== field.id && (
<button className="btn btn-default edit-profile-custom-field-label m-r-xs pull-right" onClick={editProfileCustomFieldLabel(field)}>
<FabButton className="edit-field-button" onClick={editProfileCustomFieldLabel(field)}>
<i className="fa fa-edit"></i>
</button>
</FabButton>
)}
{profileCustomFieldToEdit?.id === field.id && (
<div>
<input className="profile-custom-field-label-input" style={{ width: '80%', height: '38px' }} type="text" value={profileCustomFieldToEdit.label} onChange={onChangeProfileCustomFieldLabel} />
<span className="buttons pull-right">
<button className="btn btn-success save-profile-custom-field-label m-r-xs" onClick={saveProfileCustomFieldLabel}>
<input className="edit-field-label-input"
type="text" value={profileCustomFieldToEdit.label}
onChange={onChangeProfileCustomFieldLabel} />
<span className="buttons">
<FabButton className="save-field-label" onClick={saveProfileCustomFieldLabel}>
<i className="fa fa-check"></i>
</button>
<button className="btn btn-default delete-profile-custom-field-label m-r-xs" onClick={cancelEditProfileCustomFieldLabel}>
</FabButton>
<FabButton className="cancel-field-edition" onClick={cancelEditProfileCustomFieldLabel}>
<i className="fa fa-ban"></i>
</button>
</FabButton>
</span>
</div>
)}
</td>
<td>
<label htmlFor="profile-custom-field-actived" className="control-label m-r">{t('app.admin.settings.account.organization_profile_custom_field.actived')}</label>
<Switch checked={field.actived} id="profile-custom-field-actived" onChange={handleSwitchChanged(field, 'actived')} className="v-middle"></Switch>
<td className="activated">
<label htmlFor="profile-custom-field-actived">
{t('app.admin.settings.account.profile_custom_fields_list.actived')}
</label>
<Switch checked={field.actived}
id="profile-custom-field-actived"
onChange={handleSwitchChanged(field, 'actived')}
className="switch"></Switch>
</td>
<td>
<label htmlFor="profile-custom-field-required" className="control-label m-r">{t('app.admin.settings.account.organization_profile_custom_field.required')}</label>
<Switch checked={field.required} disabled={!field.actived} id="profile-custom-field-required" onChange={handleSwitchChanged(field, 'required')} className="v-middle"></Switch>
<td className="required">
<label htmlFor="profile-custom-field-required">
{t('app.admin.settings.account.profile_custom_fields_list.required')}
</label>
<Switch checked={field.required}
disabled={!field.actived}
id="profile-custom-field-required"
onChange={handleSwitchChanged(field, 'required')}
className="switch"></Switch>
</td>
</tr>
);

View File

@ -75,6 +75,7 @@
@import "modules/pricing/spaces/spaces-pricing";
@import "modules/profile-completion/completion-header-info";
@import "modules/profile-completion/profile-form-option";
@import "modules/profile-custom-fields/profile-custom-fields-list";
@import "modules/select-gateway-modal";
@import "modules/settings/boolean-setting";
@import "modules/settings/check-list-setting";

View File

@ -0,0 +1,39 @@
.profile-custom-fields-list {
width: 100%;
margin-bottom: 20px;
.edit-field-button {
margin-right: 5px;
float: right;
}
.edit-field-label-input {
width: 80%;
height: 38px;
}
.buttons {
float: right;
.save-field-label {
color: #ffffff;
background-color: #5cb85c;
border-color: #4cae4c;
margin-right: 5px;
}
.cancel-field-edition {
margin-right: 5px;
}
}
td.activated > label,
td.required > label {
margin-right: 15px;
}
td.activated > .switch,
td.required > .switch {
vertical-align: middle;
}
}

View File

@ -1566,11 +1566,11 @@ en:
organization: "Organization"
organization_profile_custom_fields_info: "You can display additional fields for users who declare themselves to be an organization. You can also choose to make them mandatory at account creation."
organization_profile_custom_fields_alert: "Attention: the activated fields will be automatically displayed on the issued invoices. Once configured, please do not modify them."
organization_profile_custom_field:
required: "Confirmation required"
actived: "Activate the field"
organization_profile_custom_field_successfully_updated: "The organization field has been updated."
organization_profile_custom_field_unable_to_update: "Impossible to modify the field : "
profile_custom_fields_list:
field_successfully_updated: "The organization field has been updated."
unable_to_update: "Impossible to modify the field : "
required: "Confirmation required"
actived: "Activate the field"
home:
show_upcoming_events: "Show upcoming events"
upcoming_events: