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:
parent
00fb384ba5
commit
18aba05f25
@ -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>
|
||||
);
|
||||
|
@ -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";
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
@ -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:
|
||||
|
Loading…
x
Reference in New Issue
Block a user