boolean-setting directive + eslint on .js.erb + refactored book_overlapping_slots using the new directive

.eslintrc

@@ -7,7 +7,8 @@
     "Application": true,
     "angular": true,
     "Fablab": true,
-    "moment": true,
-  }
+    "moment": true
+  },
+  "plugins": ["lint-erb"]
 }
 

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

@@ -54,6 +54,9 @@ Application.Controllers.controller('SettingsController', ['$scope', '$rootScope'
     // full history of privacy policy drafts
     $scope.privacyDraftsHistory = [];
 
+    // all settings as retrieved from database
+    $scope.allSettings = settingsPromise;
+
     // various configurable settings
     $scope.twitterSetting = { name: 'twitter_name', value: settingsPromise.twitter_name };
     $scope.linkName = { name: 'link_name', value: settingsPromise.link_name };

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

@@ -0,0 +1,40 @@
+Application.Directives.directive('booleanSetting', ['Setting', 'growl', '_t',
+  function (Setting, growl, _t) {
+    return ({
+      restrict: 'E',
+      scope: {
+        name: '@',
+        label: '@',
+        settings: '='
+      },
+      templateUrl: '<%= asset_path "admin/settings/boolean.html" %>',
+      link ($scope, element, attributes) {
+        // The setting
+        $scope.setting = {
+          name: $scope.name,
+          value: ($scope.settings[$scope.name] === 'true')
+        };
+
+        /**
+         * 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) {
+          const { value } = setting;
+
+          Setting.update(
+            { name: setting.name },
+            { value: value.toString() },
+            function () { growl.success(_t('app.admin.settings.customization_of_SETTING_successfully_saved', { SETTING: _t(`app.admin.settings.${setting.name}`) })); },
+            function (error) {
+              if (error.status === 304) return;
+
+              growl.error(_t('app.admin.settings.an_error_occurred_saving_the_setting'));
+              console.log(error);
+            }
+          );
+        };
+      }
+    });
+  }
+]);

app/assets/javascripts/router.js.erb

@@ -1010,7 +1010,7 @@ angular.module('application.router', ['ui.router'])
           settingsPromise: ['Setting', function (Setting) {
             return Setting.query({
               names: `['twitter_name', 'about_title', 'about_body', 'tracking_id',\
-                       'privacy_body', 'privacy_dpo', 'about_contacts', \
+                       'privacy_body', 'privacy_dpo', 'about_contacts', 'book_overlapping_slots', \
                        'home_blogpost', 'machine_explications_alert', 'training_explications_alert', \
                        'training_information_message', 'subscription_explications_alert', 'event_explications_alert', \
                        'space_explications_alert', 'booking_window_start', 'booking_window_end', \

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

@@ -0,0 +1,12 @@
+<div class="form-group m-l">
+  <label for="setting-{{setting.name}}" class="control-label m-r" translate>{{ label }}</label>
+  <input bs-switch
+         ng-model="setting.value"
+         id="setting-{{setting.name}}"
+         type="checkbox"
+         class="form-control"
+         switch-on-text="{{ 'app.admin.settings.enabled' | translate }}"
+         switch-off-text="{{ 'app.admin.settings.disabled' | translate }}"
+         switch-animate="true"/>
+  <button name="button" class="btn btn-warning m-l" ng-click="save(setting)" translate>{{ 'app.shared.buttons.save' }}</button>
+</div>

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

@@ -108,18 +108,7 @@
             </div>
             <div class="row">
                 <h3 class="m-l m-t-lg" translate>{{ 'app.admin.settings.book_overlapping_slots_info' }}</h3>
-                <div class="form-group m-l">
-                    <label for="bookOverlappingSlots" class="control-label m-r" translate>{{ 'app.admin.settings.allow_booking' }}</label>
-                    <input bs-switch
-                           ng-model="bookOverlappingSlots.value"
-                           id="bookOverlappingSlots"
-                           type="checkbox"
-                           class="form-control"
-                           switch-on-text="{{ 'app.admin.settings.enabled' | translate }}"
-                           switch-off-text="{{ 'app.admin.settings.disabled' | translate }}"
-                           switch-animate="true"/>
-                    <button name="button" class="btn btn-warning m-l" ng-click="save(bookOverlappingSlots)" translate>{{ 'app.shared.buttons.save' }}</button>
-                </div>
+                <boolean-setting name="book_overlapping_slots" settings="allSettings" label="app.admin.settings.allow_booking"></boolean-setting>
             </div>
         </div>
     </div>

package.json

@@ -20,6 +20,7 @@
     "eslint": "~6.8.0",
     "eslint-config-standard": "~14.1.1",
     "eslint-plugin-import": "~2.20.1",
+    "eslint-plugin-lint-erb": "https://github.com/sleede/eslint-plugin-lint-erb",
     "eslint-plugin-node": "~11.0.0",
     "eslint-plugin-promise": "~4.2.1",
     "eslint-plugin-standard": "~4.0.1"

yarn.lock

@@ -553,6 +553,10 @@ eslint-plugin-import@~2.20.1:
     read-pkg-up "^2.0.0"
     resolve "^1.12.0"
 
+"eslint-plugin-lint-erb@https://github.com/sleede/eslint-plugin-lint-erb":
+  version "0.2.2"
+  resolved "https://github.com/sleede/eslint-plugin-lint-erb#c163046088f7e988d131b0ca857a47feb925c10f"
+
 eslint-plugin-node@~11.0.0:
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-node/-/eslint-plugin-node-11.0.0.tgz#365944bb0804c5d1d501182a9bc41a0ffefed726"