text-setting directive

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

@@ -80,7 +80,6 @@ Application.Controllers.controller('SettingsController', ['$scope', '$rootScope'
     $scope.fablabName = { name: 'fablab_name', value: settingsPromise.fablab_name };
     $scope.nameGenre = { name: 'name_genre', value: settingsPromise.name_genre };
     $scope.machinesSortBy = { name: 'machines_sort_by', value: settingsPromise.machines_sort_by };
-    $scope.trackingId = { name: 'tracking_id', value: settingsPromise.tracking_id }
     $scope.cguFile = cguFile.custom_asset;
     $scope.cgvFile = cgvFile.custom_asset;
     $scope.customLogo = logoFile.custom_asset;

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

@@ -0,0 +1,47 @@
+Application.Directives.directive('textSetting', ['Setting', 'growl', '_t',
+  function (Setting, growl, _t) {
+    return ({
+      restrict: 'E',
+      scope: {
+        name: '@',
+        label: '@',
+        settings: '=',
+        classes: '@',
+        faIcon: '@',
+        placeholder: '@',
+        required: '<'
+      },
+      templateUrl: '<%= asset_path "admin/settings/text.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/privacy.html

@@ -75,15 +75,11 @@
     <p class="alert alert-warning m-t" ng-bind-html="'app.admin.settings.privacy.tracking_id_info_html' | translate"></p>
     <div class="row">
       <div class="col-md-4 col-md-offset-1">
-        <label for="tracking_id" translate>{{ 'app.admin.settings.privacy.tracking_id' }}</label>
+        <text-setting name="tracking_id"
-        <input ng-model="trackingId.value"
+                      settings="allSettings"
-               id="tracking_id"
+                      label="app.admin.settings.privacy.tracking_id"
-               type="text"
+                      placeholder="UA-000000-2">
-               class="form-control"
+        </text-setting>
-               placeholder="UA-000000-2"
-               />
-
-        <button name="button" class="btn btn-warning m-t" ng-click="save(trackingId)" translate>{{ 'app.shared.buttons.save' }}</button>
       </div>
     </div>
 

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

@@ -0,0 +1,17 @@
+<form class="{{classes}}" name="setting-text-form">
+  <label for="setting-{{setting.name}}" class="control-label m-r" translate>{{ label }}</label>
+  <div ng-class="{'form-group': faIcon}">
+      <div ng-class="{'input-group': faIcon}">
+          <div class="input-group-addon" ng-if="faIcon">
+              <i class="fa {{faIcon}}"></i>
+          </div>
+          <input type="text"
+                 class="form-control"
+                 id="setting-{{setting.name}}"
+                 placeholder="{{placeholder}}"
+                 ng-model="setting.value"
+                 ng-required="required">
+      </div>
+  </div>
+  <button name="button" class="btn btn-warning m-t" ng-click="save(setting)" ng-disabled="setting-text-form.$invalid" translate>{{ 'app.shared.buttons.save' }}</button>
+</form>