From 1ad072071157956f87503c8cc7f7ea3e59196f25 Mon Sep 17 00:00:00 2001
From: Sylvain <sylvain@sbx.pm>
Date: Wed, 20 May 2020 16:35:07 +0200
Subject: [PATCH] number-setting directive + refactored admin/settings to use
 new directive

---
 .../controllers/admin/settings.js.erb         |  25 -----
 .../directives/settings/number-setting.js.erb |  53 +++++++++
 .../templates/admin/settings/number.html      |  15 +++
 .../admin/settings/reservations.html          | 103 +++++++-----------
 4 files changed, 108 insertions(+), 88 deletions(-)
 create mode 100644 app/assets/javascripts/directives/settings/number-setting.js.erb
 create mode 100644 app/assets/templates/admin/settings/number.html

diff --git a/app/assets/javascripts/controllers/admin/settings.js.erb b/app/assets/javascripts/controllers/admin/settings.js.erb
index 00bdab3e9..3f7fc53a4 100644
--- a/app/assets/javascripts/controllers/admin/settings.js.erb
+++ b/app/assets/javascripts/controllers/admin/settings.js.erb
@@ -88,31 +88,6 @@ Application.Controllers.controller('SettingsController', ['$scope', '$rootScope'
     $scope.customFavicon = faviconFile.custom_asset;
     $scope.profileImage = profileImageFile.custom_asset;
 
-    $scope.moveDelay = {
-      name: 'booking_move_delay',
-      value: parseInt(settingsPromise.booking_move_delay, 10)
-    };
-
-    $scope.cancelDelay = {
-      name: 'booking_cancel_delay',
-      value: parseInt(settingsPromise.booking_cancel_delay, 10)
-    };
-
-    $scope.reminderDelay = {
-      name: 'reminder_delay',
-      value: parseInt(settingsPromise.reminder_delay, 10)
-    };
-
-    $scope.visibilityYearly = {
-      name: 'visibility_yearly',
-      value: parseInt(settingsPromise.visibility_yearly, 10)
-    };
-
-    $scope.visibilityOthers = {
-      name: 'visibility_others',
-      value: parseInt(settingsPromise.visibility_others, 10)
-    };
-
     // By default, we display the currently published privacy policy
     $scope.privacyPolicy = {
       version: null,
diff --git a/app/assets/javascripts/directives/settings/number-setting.js.erb b/app/assets/javascripts/directives/settings/number-setting.js.erb
new file mode 100644
index 000000000..32e69f793
--- /dev/null
+++ b/app/assets/javascripts/directives/settings/number-setting.js.erb
@@ -0,0 +1,53 @@
+Application.Directives.directive('numberSetting', ['Setting', 'growl', '_t',
+  function (Setting, growl, _t) {
+    return ({
+      restrict: 'E',
+      scope: {
+        name: '@',
+        label: '@',
+        settings: '=',
+        classes: '@',
+        faIcon: '@',
+        helperText: '@',
+        min: '@',
+        required: '<'
+      },
+      templateUrl: '<%= asset_path "admin/settings/number.html" %>',
+      link ($scope, element, attributes) {
+        // The setting
+        $scope.setting = {
+          name: $scope.name,
+          value: parseInt($scope.settings[$scope.name], 10)
+        };
+
+        /**
+         * 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;
+          if (typeof setting.value === 'number') {
+            value = setting.value.toString();
+          } else {
+            ({ 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);
+            }
+          );
+        };
+      }
+    });
+  }
+]);
diff --git a/app/assets/templates/admin/settings/number.html b/app/assets/templates/admin/settings/number.html
new file mode 100644
index 000000000..e616d0e6a
--- /dev/null
+++ b/app/assets/templates/admin/settings/number.html
@@ -0,0 +1,15 @@
+<form class="{{classes}}" name="setting-number-form">
+  <label for="setting-{{setting.name}}" class="control-label m-r" translate>{{ label }}</label>
+  <div class="form-group">
+      <div class="input-group">
+          <div class="input-group-addon">
+              <i class="fa {{faIcon}}"></i>
+          </div>
+          <input type="number" class="form-control" id="setting-{{setting.name}}" ng-model="setting.value" min="{{min}}" ng-required="required">
+      </div>
+      <span class="help-block text-info text-xs" ng-show="helperText">
+          <i class="fa fa-lightbulb-o"></i> {{ helperText | translate }}
+      </span>
+  </div>
+  <button name="button" class="btn btn-warning" ng-click="save(setting)" ng-disabled="setting-number-form.$invalid" translate>{{ 'app.shared.buttons.save' }}</button>
+</form>
diff --git a/app/assets/templates/admin/settings/reservations.html b/app/assets/templates/admin/settings/reservations.html
index b122f19d7..d4bc1693c 100644
--- a/app/assets/templates/admin/settings/reservations.html
+++ b/app/assets/templates/admin/settings/reservations.html
@@ -23,66 +23,50 @@
             </div>
             <div class="row">
                 <h3 class="m-l m-t-lg" translate>{{ 'app.admin.settings.max_visibility' }}</h3>
-                <form class="col-md-4" name="visibilityYearlyForm">
-                    <label for="yearlySubscribers" class="control-label m-r" translate>{{ 'app.admin.settings.visibility_for_yearly_members' }}</label>
-                    <div class="form-group">
-                        <div class="input-group">
-                            <div class="input-group-addon">
-                                <i class="fa fa-calendar"></i>
-                            </div>
-                            <input type="number" class="form-control" id="yearlySubscribers" ng-model="visibilityYearly.value" min="1" required>
-                        </div>
-                    </div>
-                    <button name="button" class="btn btn-warning" ng-click="save(visibilityYearly)" ng-disabled="visibilityYearlyForm.$invalid" translate>{{ 'app.shared.buttons.save' }}</button>
-                </form>
-                <form class="col-md-4 col-md-offset-2" name="visibilityOthersForm">
-                    <label for="others" class="control-label m-r" translate>{{ 'app.admin.settings.visibility_for_other_members' }}</label>
-                    <div class="form-group">
-                        <div class="input-group">
-                            <div class="input-group-addon">
-                                <i class="fa fa-calendar"></i>
-                            </div>
-                            <input type="number" class="form-control" id="others" ng-model="visibilityOthers.value" min="1" required>
-                        </div>
-                    </div>
-                    <button name="button" class="btn btn-warning" ng-click="save(visibilityOthers)" ng-disabled="visibilityOthersForm.$invalid" translate>{{ 'app.shared.buttons.save' }}</button>
-                </form>
+                <number-setting name="visibility_yearly"
+                                settings="allSettings"
+                                label="app.admin.settings.visibility_for_yearly_members"
+                                classes="col-md-4"
+                                fa-icon="fa-calendar"
+                                min="1"
+                                required="required">
+                </number-setting>
+                <number-setting name="visibility_others"
+                                settings="allSettings"
+                                label="app.admin.settings.visibility_for_other_members"
+                                classes="col-md-4"
+                                fa-icon="fa-calendar"
+                                min="1"
+                                required="required">
+                </number-setting>
             </div>
             <div class="row">
                 <h3 class="m-l m-t-lg" translate>{{ 'app.admin.settings.ability_for_the_users_to_move_their_reservations' }}</h3>
                 <boolean-setting name="booking_move_enable" settings="allSettings" label="app.admin.settings.reservations_shifting" classes="m-l"></boolean-setting>
             </div>
             <div class="row" ng-show="allSettings.booking_move_enable === 'true'">
-                <form class="col-md-4" name="moveDelayForm">
-                    <label for="moveDelay" class="control-label m-r" translate>{{ 'app.admin.settings.prior_period_hours' }}</label>
-                    <div class="form-group">
-                        <div class="input-group">
-                            <div class="input-group-addon">
-                                <i class="fa fa-clock-o"></i>
-                            </div>
-                            <input type="number" class="form-control" id="moveDelay" ng-model="moveDelay.value" min="0" ng-required="enableMove.value">
-                        </div>
-                    </div>
-                    <button name="button" class="btn btn-warning" ng-click="save(moveDelay)" ng-disabled="moveDelayForm.$invalid" translate>{{ 'app.shared.buttons.save' }}</button>
-                </form>
+                <number-setting name="booking_move_delay"
+                                settings="allSettings"
+                                label="app.admin.settings.prior_period_hours"
+                                classes="col-md-4"
+                                fa-icon="fa-clock-o"
+                                min="0"
+                                required="allSettings.booking_move_enable === 'true'">
+                </number-setting>
             </div>
             <div class="row">
                 <h3 class="m-l m-t-lg" translate>{{ 'app.admin.settings.ability_for_the_users_to_cancel_their_reservations' }}</h3>
                 <boolean-setting name="booking_cancel_enable" settings="allSettings" label="app.admin.settings.reservations_cancelling" classes="m-l"></boolean-setting>
             </div>
             <div class="row" ng-show="allSettings.booking_cancel_enable === 'true'">
-                <form class="col-md-4" name="cancelDelayForm">
-                    <label for="cancelDelay" class="control-label m-r" translate>{{ 'app.admin.settings.prior_period_hours' }}</label>
-                    <div class="form-group">
-                        <div class="input-group">
-                            <div class="input-group-addon">
-                                <i class="fa fa-clock-o"></i>
-                            </div>
-                            <input type="number" class="form-control" id="cancelDelay" ng-model="cancelDelay.value" min="0" ng-required="enableCancel.value">
-                        </div>
-                    </div>
-                    <button name="button" class="btn btn-warning" ng-click="save(cancelDelay)" ng-disabled="cancelDelayForm.$invalid" translate>{{ 'app.shared.buttons.save' }}</button>
-                </form>
+                <number-setting name="booking_cancel_delay"
+                                settings="allSettings"
+                                label="app.admin.settings.prior_period_hours"
+                                classes="col-md-4"
+                                fa-icon="fa-clock-o"
+                                min="0"
+                                required="allSettings.booking_cancel_enable === 'true'">
+                </number-setting>
             </div>
             <div class="row">
                 <h3 class="m-l m-t-lg" translate>{{ 'app.admin.settings.book_overlapping_slots_info' }}</h3>
@@ -102,21 +86,14 @@
             <boolean-setting name="reminder_enable" settings="allSettings" label="app.admin.settings.reservations_reminders" classes="m-l"></boolean-setting>
         </div>
         <div class="row" ng-show="allSettings.reminder_enable === 'true'">
-            <form class="col-md-4" name="reminderDelayForm">
-                <label for="reminderDelay" class="control-label m-r" translate>{{ 'app.admin.settings.prior_period_hours' }}</label>
-                <div class="form-group">
-                    <div class="input-group">
-                        <div class="input-group-addon">
-                            <i class="fa fa-clock-o"></i>
-                        </div>
-                        <input type="number" class="form-control" id="reminderDelay" ng-model="reminderDelay.value" min="0">
-                    </div>
-                    <span class="help-block text-info text-xs">
-                        <i class="fa fa-lightbulb-o"></i> {{ 'app.admin.settings.default_value_is_24_hours' | translate }}
-                    </span>
-                </div>
-                <button name="button" class="btn btn-warning" ng-click="save(reminderDelay)" ng-disabled="reminderDelayForm.$invalid" translate>{{ 'app.shared.buttons.save' }}</button>
-            </form>
+            <number-setting name="reminder_delay"
+                            settings="allSettings"
+                            label="app.admin.settings.prior_period_hours"
+                            classes="col-md-4"
+                            fa-icon="fa-clock-o"
+                            helper-text="app.admin.settings.default_value_is_24_hours"
+                            min="0">
+            </number-setting>
         </div>
     </div>
 </div>