select-setting directive

app/assets/javascripts/controllers/admin/settings.js.erb

@@ -76,7 +76,6 @@ Application.Controllers.controller('SettingsController', ['$scope', '$rootScope'
     $scope.mainColorSetting = { name: 'main_color', value: settingsPromise.main_color };
     $scope.secondColorSetting = { name: 'secondary_color', value: settingsPromise.secondary_color };
     $scope.nameGenre = { name: 'name_genre', value: settingsPromise.name_genre };
-    $scope.machinesSortBy = { name: 'machines_sort_by', value: settingsPromise.machines_sort_by };
     $scope.cguFile = cguFile.custom_asset;
     $scope.cgvFile = cgvFile.custom_asset;
     $scope.customLogo = logoFile.custom_asset;

app/assets/javascripts/directives/settings/select-setting.js.erb

@@ -0,0 +1,50 @@
+Application.Directives.directive('selectSetting', ['Setting', 'growl', '_t',
+  function (Setting, growl, _t) {
+    return ({
+      restrict: 'E',
+      scope: {
+        name: '@',
+        label: '@',
+        settings: '=',
+        classes: '@',
+        required: '<',
+        option1: '<',
+        option2: '<',
+        option3: '<',
+        option4: '<',
+        option5: '<'
+      },
+      templateUrl: '<%= asset_path "admin/settings/select.html" %>',
+      link ($scope, element, attributes) {
+        // The setting
+        $scope.setting = {
+          name: $scope.name,
+          value: $scope.settings[$scope.name]
+        };
+
+        /**
+         * Callback to save the setting value to the database
+         * @param setting {{value:*, name:string}} note that the value will be stringified
+         */
+        $scope.save = function (setting) {
+          let { value } = setting;
+
+          Setting.update(
+            { name: setting.name },
+            { value },
+            function () {
+              growl.success(_t('app.admin.settings.customization_of_SETTING_successfully_saved', { SETTING: _t(`app.admin.settings.${setting.name}`) }));
+              $scope.settings[$scope.name] = value;
+            },
+            function (error) {
+              if (error.status === 304) return;
+
+              growl.error(_t('app.admin.settings.an_error_occurred_saving_the_setting'));
+              console.log(error);
+            }
+          );
+        };
+      }
+    });
+  }
+]);

app/assets/templates/admin/settings/general.html

@@ -324,20 +324,15 @@
         <div class="row">
             <div class="col-md-4">
                 <h3 class="m-l" translate>{{ 'app.admin.settings.machines_order' }}</h3>
-                <div class="form-group m-l">
+                <select-setting name="machines_sort_by"
-                    <label for="machinesSortBy" class="control-label m-r" translate>{{ 'app.admin.settings.display_machines_sorted_by' }}</label>
+                                settings="allSettings"
-                    <select id="machinesSortBy"
+                                classes="m-l"
-                            class="form-control"
+                                label="app.admin.settings.display_machines_sorted_by"
-                            ng-model="machinesSortBy.value">
+                                option-1="['default', 'app.admin.settings.sort_by.default']"
-                      <option value="default" translate>{{ 'app.admin.settings.sort_by.default' }}</option>
+                                option-2="['name', 'app.admin.settings.sort_by.name']"
-                      <option value="name" translate>{{ 'app.admin.settings.sort_by.name' }}</option>
+                                option-3="['created_at', 'app.admin.settings.sort_by.created_at']"
-                      <option value="created_at" translate>{{ 'app.admin.settings.sort_by.created_at' }}</option>
+                                option-4="['updated_at', 'app.admin.settings.sort_by.updated_at']">
-                      <option value="updated_at" translate>{{ 'app.admin.settings.sort_by.updated_at' }}</option>
+                </select-setting>
-                    </select>
-                    <button name="button" class="btn btn-warning m-t" ng-click="save(machinesSortBy)" translate>{{ 'app.shared.buttons.save' }}</button>
-                </div>
-                <div class="col-md-4">
-                </div>
             </div>
         </div>
     </div>
@@ -348,14 +343,13 @@
     <span class="font-sbold" translate>{{ 'app.admin.settings.account_creation' }}</span>
   </div>
   <div class="panel-body">
+    <div class="row">
       <h3 class="m-l" translate>{{ 'app.admin.settings.phone' }}</h3>
-    <p class="alert alert-warning m-t" translate>
+      <p class="alert alert-warning m-h-md" translate>
         {{ 'app.admin.settings.phone_required_info' }}
       </p>
-    <div class="row">
       <div class="col-md-10 col-md-offset-1">
-        <boolean-setting
+        <boolean-setting name="phone_required"
-            name="phone_required"
                          settings="allSettings"
                          label="app.admin.settings.phone_is_required"
                          yes-label="app.shared.buttons.yes"

app/assets/templates/admin/settings/select.html

@@ -0,0 +1,16 @@
+<form class="{{classes}}" name="setting-select-form">
+  <div class="form-group">
+      <label for="setting-{{setting.name}}" class="control-label m-r" translate>{{ label }}</label>
+      <select class="form-control"
+              id="setting-{{setting.name}}"
+              ng-model="setting.value"
+              ng-required="required">
+        <option ng-if="option1" ng-value="option1[0]" translate>{{ option1[1] }}</option>
+        <option ng-if="option2" ng-value="option2[0]" translate>{{ option2[1] }}</option>
+        <option ng-if="option2" ng-value="option3[0]" translate>{{ option3[1] }}</option>
+        <option ng-if="option4" ng-value="option4[0]" translate>{{ option4[1] }}</option>
+        <option ng-if="option5" ng-value="option5[0]" translate>{{ option5[1] }}</option>
+      </select>
+  </div>
+  <button name="button" class="btn btn-warning m-t" ng-click="save(setting)" ng-disabled="setting-select-form.$invalid" translate>{{ 'app.shared.buttons.save' }}</button>
+</form>