[bug] in the settings area, boolean switches are always shown as false

.eslintrc

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

CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog Fab-manager
 
+- Fix a bug: in the settings area, boolean switches are always shown as false
+
 ## v4.6.2 2020 October 23
 
 - Add intermediate step version for upgrades: v4.4.6. This will prevent issues with FootprintDebug if a regeneration is needed

app/frontend/src/javascript/components/switch.js

@@ -0,0 +1,4 @@
+import Switch from 'react-switch';
+import { react2angular } from 'react2angular';
+
+Application.Components.component('switch', react2angular(Switch, ['checked', 'onChange', 'id', 'className']));

app/frontend/src/javascript/directives/settings/boolean-setting.js

@@ -6,8 +6,6 @@ Application.Directives.directive('booleanSetting', ['Setting', 'growl', '_t',
         name: '@',
         label: '@',
         settings: '=',
-        yesLabel: '@',
-        noLabel: '@',
         classes: '@',
         onBeforeSave: '='
       },
@@ -19,9 +17,28 @@ Application.Directives.directive('booleanSetting', ['Setting', 'growl', '_t',
           value: ($scope.settings[$scope.name] === 'true')
         };
 
-        // default values for the switch labels
+        // ID of the html input
-        $scope.yesLabel = $scope.yesLabel || 'app.shared.buttons.yes';
+        $scope.id = `setting-${$scope.setting.name}`;
-        $scope.noLabel = $scope.noLabel || 'app.shared.buttons.no';
+
+        /**
+         * This will update the value when the user toggles the switch button
+         * @param checked {Boolean}
+         * @param event {string}
+         * @param id {string}
+         */
+        $scope.toggleSetting = (checked, event, id) => {
+          setTimeout(() => {
+            $scope.setting.value = checked;
+            $scope.$apply();
+          }, 50);
+        };
+
+        /**
+         * This will force the component to update, and the child react component to re-render
+         */
+        $scope.refreshComponent = () => {
+          $scope.$apply();
+        };
 
         /**
          * Callback to save the setting value to the database
@@ -75,14 +92,14 @@ Application.Directives.directive('booleanSetting', ['Setting', 'growl', '_t',
               console.log(error);
             }
           );
-        }
+        };
 
         /**
          * Reset the value of the setting to its original state (when the component loads)
          */
         const resetValue = function () {
           $scope.setting.value = $scope.settings[$scope.name] === 'true';
-        }
+        };
       }
     });
   }

app/frontend/templates/admin/invoices/payment.html

@@ -11,9 +11,7 @@
                        label="app.admin.invoices.payment.enable_online_payment"
                        classes="m-l"
                        on-before-save="requireStripeKeys"
-                       fa-icon="fa-font"
+                       fa-icon="fa-font">
-                       yes-label="app.shared.buttons.yes"
-                       no-label="app.shared.buttons.no">
       </boolean-setting>
     </div>
     <div class="row m-t" ng-show="allSettings.online_payment_module === 'true'">

app/frontend/templates/admin/projects/settings.html

@@ -90,9 +90,7 @@
       <boolean-setting name="openlab_default"
                        settings="allSettings"
                        label="app.admin.projects.settings.default_to_openlab"
-                       classes="m-l"
+                       classes="m-l"></boolean-setting>
-                       yes-label="app.shared.buttons.yes"
-                       no-label="app.shared.buttons.no"></boolean-setting>
     </div>
   </div>
 </div>

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

@@ -1,12 +1,5 @@
 <div class="form-group {{classes}}">
-  <label for="setting-{{setting.name}}" class="control-label m-r" translate>{{ label }}</label>
+  <label for="{{id}}" class="control-label m-r" translate ng-click="refreshComponent">{{ label }}</label>
-  <input bs-switch
+  <switch checked="setting.value" id="id" on-change="toggleSetting" class-name="'v-middle'" ng-if="setting"></switch>
-         ng-model="setting.value"
-         id="setting-{{setting.name}}"
-         type="checkbox"
-         class="form-control"
-         switch-on-text="{{ yesLabel | translate }}"
-         switch-off-text="{{ noLabel | 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/frontend/templates/admin/settings/general.html

@@ -396,9 +396,7 @@
       <div class="col-md-10 col-md-offset-1">
         <boolean-setting name="phone_required"
                          settings="allSettings"
-                         label="app.admin.settings.phone_is_required"
+                         label="app.admin.settings.phone_is_required">
-                         yes-label="app.shared.buttons.yes"
-                         no-label="app.shared.buttons.no">
         </boolean-setting>
       </div>
     </div>
@@ -430,9 +428,7 @@
           <div class="col-md-10 col-md-offset-1">
               <boolean-setting name="confirmation_required"
                                settings="allSettings"
-                               label="app.admin.settings.confirmation_is_required"
+                               label="app.admin.settings.confirmation_is_required">
-                               yes-label="app.shared.buttons.yes"
-                               no-label="app.shared.buttons.no">
               </boolean-setting>
           </div>
       </div>
@@ -451,9 +447,7 @@
       <boolean-setting name="spaces_module"
                        settings="allSettings"
                        label="app.admin.settings.enable_spaces"
-                       classes="m-l"
+                       classes="m-l"></boolean-setting>
-                       yes-label="app.shared.buttons.yes"
-                       no-label="app.shared.buttons.no"></boolean-setting>
     </div>
     <div class="row">
       <h3 class="m-l" translate>{{ 'app.admin.settings.plans' }}</h3>
@@ -461,9 +455,7 @@
       <boolean-setting name="plans_module"
                        settings="allSettings"
                        label="app.admin.settings.enable_plans"
-                       classes="m-l"
+                       classes="m-l"></boolean-setting>
-                       yes-label="app.shared.buttons.yes"
-                       no-label="app.shared.buttons.no"></boolean-setting>
     </div>
     <div class="row">
       <h3 class="m-l" translate>{{ 'app.admin.settings.invoicing' }}</h3>
@@ -471,9 +463,7 @@
       <boolean-setting name="invoicing_module"
                        settings="allSettings"
                        label="app.admin.settings.enable_invoicing"
-                       classes="m-l"
+                       classes="m-l"></boolean-setting>
-                       yes-label="app.shared.buttons.yes"
-                       no-label="app.shared.buttons.no"></boolean-setting>
     </div>
     <div class="row">
         <h3 class="m-l" translate>{{ 'app.admin.settings.general.wallet' }}</h3>
@@ -481,9 +471,7 @@
         <boolean-setting name="wallet_module"
                          settings="allSettings"
                          label="app.admin.settings.general.enable_wallet"
-                         classes="m-l"
+                         classes="m-l"></boolean-setting>
-                         yes-label="app.shared.buttons.yes"
-                         no-label="app.shared.buttons.no"></boolean-setting>
     </div>
     <div class="row">
         <h3 class="m-l" translate>{{ 'app.admin.settings.general.statistics' }}</h3>
@@ -491,9 +479,7 @@
         <boolean-setting name="statistics_module"
                          settings="allSettings"
                          label="app.admin.settings.general.enable_statistics"
-                         classes="m-l"
+                         classes="m-l"></boolean-setting>
-                         yes-label="app.shared.buttons.yes"
-                         no-label="app.shared.buttons.no"></boolean-setting>
     </div>
   </div>
 </div>

app/frontend/templates/admin/settings/privacy.html

@@ -41,9 +41,7 @@
           <boolean-setting
               name="fab_analytics"
               settings="allSettings"
-              label="app.admin.settings.fab_analytics"
+              label="app.admin.settings.fab_analytics">
-              yes-label="app.shared.buttons.yes"
-              no-label="app.shared.buttons.no">
           </boolean-setting>
           <p>
             <span translate>{{ 'app.admin.settings.privacy.about_analytics' }}</span>

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

@@ -48,9 +48,7 @@
                     <boolean-setting name="booking_move_enable"
                                      settings="allSettings"
                                      label="app.admin.settings.reservations_shifting"
-                                     classes="m-l"
+                                     classes="m-l">
-                                     yes-label="app.shared.buttons.yes"
-                                     no-label="app.shared.buttons.no">
                     </boolean-setting>
                 </div>
                 <div class="col-md-6" ng-show="allSettings.booking_move_enable === 'true'">
@@ -70,9 +68,7 @@
                     <boolean-setting name="booking_cancel_enable"
                                      settings="allSettings"
                                      label="app.admin.settings.reservations_cancelling"
-                                     classes="m-l"
+                                     classes="m-l">
-                                     yes-label="app.shared.buttons.yes"
-                                     no-label="app.shared.buttons.no">
                     </boolean-setting>
                 </div>
                 <div class="col-md-6" ng-show="allSettings.booking_cancel_enable === 'true'">
@@ -92,9 +88,7 @@
                 <boolean-setting name="book_overlapping_slots"
                                  settings="allSettings"
                                  label="app.admin.settings.allow_booking"
-                                 classes="m-l"
+                                 classes="m-l">
-                                 yes-label="app.shared.buttons.yes"
-                                 no-label="app.shared.buttons.no">
                 </boolean-setting>
             </div>
             <div class="section-separator"></div>
@@ -124,9 +118,7 @@
             <boolean-setting name="reminder_enable"
                              settings="allSettings"
                              label="app.admin.settings.reservations_reminders"
-                             classes="m-l"
+                             classes="m-l">
-                             yes-label="app.shared.buttons.yes"
-                             no-label="app.shared.buttons.no">
             </boolean-setting>
         </div>
         <div class="row" ng-show="allSettings.reminder_enable === 'true'">
@@ -154,9 +146,7 @@
             <boolean-setting name="display_name_enable"
                              settings="allSettings"
                              label="app.admin.settings.display_name"
-                             classes="m-l"
+                             classes="m-l">
-                             yes-label="app.shared.buttons.yes"
-                             no-label="app.shared.buttons.no">
             </boolean-setting>
         </div>
       <div class="row">
@@ -165,9 +155,7 @@
         <boolean-setting name="events_in_calendar"
                          settings="allSettings"
                          label="app.admin.settings.show_event"
-                         classes="m-l"
+                         classes="m-l"></boolean-setting>
-                         yes-label="app.shared.buttons.yes"
-                         no-label="app.shared.buttons.no"></boolean-setting>
       </div>
     </div>
 </div>

package.json

@@ -89,6 +89,7 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
+    "react-switch": "^5.0.1",
     "react2angular": "^4.0.6",
     "summernote": "0.8.18",
     "twitter-fetcher": "^18.0.2",

yarn.lock

@@ -7273,7 +7273,7 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
-prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -7447,6 +7447,13 @@ react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-switch@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/react-switch/-/react-switch-5.0.1.tgz#449277f4c3aed5286fffd0f50d5cbc2a23330406"
+  integrity sha512-Pa5kvqRfX85QUCK1Jv0rxyeElbC3aNpCP5hV0LoJpU/Y6kydf0t4kRriQ6ZYA4kxWwAYk/cH51T4/sPzV9mCgQ==
+  dependencies:
+    prop-types "^15.6.2"
+
 react2angular@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/react2angular/-/react2angular-4.0.6.tgz#ec49ef834d101c9a320e25229fc5afa5b29edc4f"