linted profile-custom-fields

app/frontend/src/javascript/components/profile-custom-fields/profile-custom-fields-list.tsx

@@ -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} />
+                    <input className="edit-field-label-input"
-                    <span className="buttons pull-right">
+                      type="text" value={profileCustomFieldToEdit.label}
-                      <button className="btn btn-success save-profile-custom-field-label m-r-xs" onClick={saveProfileCustomFieldLabel}>
+                      onChange={onChangeProfileCustomFieldLabel} />
+                    <span className="buttons">
+                      <FabButton className="save-field-label" onClick={saveProfileCustomFieldLabel}>
                         <i className="fa fa-check"></i>
-                      </button>
+                      </FabButton>
-                      <button className="btn btn-default delete-profile-custom-field-label m-r-xs" onClick={cancelEditProfileCustomFieldLabel}>
+                      <FabButton className="cancel-field-edition" onClick={cancelEditProfileCustomFieldLabel}>
                         <i className="fa fa-ban"></i>
-                      </button>
+                      </FabButton>
                     </span>
                   </div>
                 )}
               </td>
-              <td>
+              <td className="activated">
-                <label htmlFor="profile-custom-field-actived" className="control-label m-r">{t('app.admin.settings.account.organization_profile_custom_field.actived')}</label>
+                <label htmlFor="profile-custom-field-actived">
-                <Switch checked={field.actived} id="profile-custom-field-actived" onChange={handleSwitchChanged(field, 'actived')} className="v-middle"></Switch>
+                  {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>
+              <td className="required">
-                <label htmlFor="profile-custom-field-required" className="control-label m-r">{t('app.admin.settings.account.organization_profile_custom_field.required')}</label>
+                <label htmlFor="profile-custom-field-required">
-                <Switch checked={field.required} disabled={!field.actived} id="profile-custom-field-required" onChange={handleSwitchChanged(field, 'required')} className="v-middle"></Switch>
+                  {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>
           );

app/frontend/src/stylesheets/application.scss

@@ -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";

app/frontend/src/stylesheets/modules/profile-custom-fields/profile-custom-fields-list.scss

@@ -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;
+  }
+}

config/locales/app.admin.en.yml

@@ -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:
+        profile_custom_fields_list:
-            required: "Confirmation required"
+          field_successfully_updated: "The organization field has been updated."
-            actived: "Activate the field"
+          unable_to_update: "Impossible to modify the field : "
-          organization_profile_custom_field_successfully_updated: "The organization field has been updated."
+          required: "Confirmation required"
-          organization_profile_custom_field_unable_to_update: "Impossible to modify the field : "
+          actived: "Activate the field"
         home:
           show_upcoming_events: "Show upcoming events"
           upcoming_events: