From 36086f93dff0862f42f444a93de652dabc86d61c Mon Sep 17 00:00:00 2001
From: Sylvain <sylvain@sbx.pm>
Date: Thu, 21 Oct 2021 18:09:36 +0200
Subject: [PATCH] [WIP] ability to select categories of slots for computing
 overlapping slots

---
 .../settings/check-list-setting.tsx           | 75 +++++++++++++++++++
 .../javascript/controllers/admin/settings.js  | 14 ++++
 .../admin/settings/reservations.html          | 21 ++++--
 app/models/setting.rb                         |  3 +-
 4 files changed, 107 insertions(+), 6 deletions(-)
 create mode 100644 app/frontend/src/javascript/components/settings/check-list-setting.tsx

diff --git a/app/frontend/src/javascript/components/settings/check-list-setting.tsx b/app/frontend/src/javascript/components/settings/check-list-setting.tsx
new file mode 100644
index 000000000..ab0905868
--- /dev/null
+++ b/app/frontend/src/javascript/components/settings/check-list-setting.tsx
@@ -0,0 +1,75 @@
+import React, { BaseSyntheticEvent, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SettingName } from '../../models/setting';
+import { IApplication } from '../../models/application';
+import { react2angular } from 'react2angular';
+import SettingAPI from '../../api/setting';
+import { Loader } from '../base/loader';
+
+declare const Application: IApplication;
+
+interface CheckListSettingProps {
+  name: SettingName,
+  label: string,
+  className?: string,
+  allSettings: Record<SettingName, string>,
+  availableOptions: Array<string>,
+  onSuccess: (message: string) => void,
+  onError: (message: string) => void,
+}
+
+const CheckListSetting: React.FC<CheckListSettingProps> = ({ name, label, className, allSettings, availableOptions, onSuccess, onError }) => {
+  const { t } = useTranslation('admin');
+
+  const [value, setValue] = useState<string>(null);
+
+  useEffect(() => {
+    if (!allSettings) return;
+
+    setValue(allSettings[name]);
+  }, [allSettings]);
+
+  const toggleCheckbox = (option: string) => {
+    return (event: BaseSyntheticEvent) => {
+      if (event.target.checked) {
+        let newValue = value ? `${value},` : '';
+        newValue += option;
+        setValue(newValue);
+      } else {
+        const regex = new RegExp(`,?${option}`, 'g');
+        setValue(value.replace(regex, ''));
+      }
+    };
+  };
+
+  const handleSave = () => {
+    SettingAPI.update(name, value)
+      .then(() => onSuccess(t('app.admin.check_list_setting.customization_of_SETTING_successfully_saved', { SETTING: t(`app.admin.settings.${name}`) })))
+      .catch(err => onError(err));
+  };
+
+  const isChecked = (option) => {
+    return value?.includes(option);
+  };
+
+  return (
+    <div className={`check-list-setting ${className || ''}`}>
+      <span className="check-list-title">{label}</span>
+      {availableOptions.map(option => <div key={option}>
+        <input id={`setting-${name}-${option}`} type="checkbox" checked={isChecked(option)} onChange={toggleCheckbox(option)} />
+        <label htmlFor={`setting-${name}-${option}`}>{option}</label>
+      </div>)}
+      <button className="save" onClick={handleSave}>{t('app.admin.buttons.save')}</button>
+    </div>
+  );
+};
+
+const CheckListSettingWrapper: React.FC<CheckListSettingProps> = ({ allSettings, availableOptions, onSuccess, onError, label, className, name }) => {
+  return (
+    <Loader>
+      <CheckListSetting allSettings={allSettings} availableOptions={availableOptions} label={label} name={name} onError={onError} onSuccess={onSuccess} className={className} />
+    </Loader>
+  );
+};
+
+Application.Components.component('checkListSetting', react2angular(CheckListSettingWrapper, ['allSettings', 'className', 'name', 'label', 'availableOptions', 'onSuccess', 'onError']));
diff --git a/app/frontend/src/javascript/controllers/admin/settings.js b/app/frontend/src/javascript/controllers/admin/settings.js
index 249af097a..0d668b7b1 100644
--- a/app/frontend/src/javascript/controllers/admin/settings.js
+++ b/app/frontend/src/javascript/controllers/admin/settings.js
@@ -314,6 +314,20 @@ Application.Controllers.controller('SettingsController', ['$scope', '$rootScope'
       $scope.codeMirrorEditor = editor;
     };
 
+    /**
+     * Shows a success message forwarded from a child react component
+     */
+    $scope.onSuccess = function (message) {
+      growl.success(message);
+    };
+
+    /**
+     * Callback triggered by react components
+     */
+    $scope.onError = function (message) {
+      growl.error(message);
+    };
+
     /**
      * Setup the feature-tour for the admin/settings page.
      * This is intended as a contextual help (when pressing F1)
diff --git a/app/frontend/templates/admin/settings/reservations.html b/app/frontend/templates/admin/settings/reservations.html
index ee40a9f81..2eaa947ed 100644
--- a/app/frontend/templates/admin/settings/reservations.html
+++ b/app/frontend/templates/admin/settings/reservations.html
@@ -85,11 +85,22 @@
             <div class="section-separator"></div>
             <div class="row">
                 <h3 class="m-l m-t-lg" translate>{{ 'app.admin.settings.book_overlapping_slots_info' }}</h3>
-                <boolean-setting name="book_overlapping_slots"
-                                 settings="allSettings"
-                                 label="app.admin.settings.allow_booking"
-                                 classes="m-l">
-                </boolean-setting>
+                <div class="col-md-6">
+                    <boolean-setting name="book_overlapping_slots"
+                                     settings="allSettings"
+                                     label="app.admin.settings.allow_booking"
+                                     classes="m-l">
+                    </boolean-setting>
+                </div>
+                <div class="col-md-6">
+                    <check-list-setting name="overlapping_categories"
+                                        label="'app.admin.settings.overlapping_categories' | translate"
+                                        all-setting="allSettings"
+                                        available-options="['training_reservations','machine_reservations','space_reservations','events_reservations']"
+                                        on-success="onSuccess"
+                                        on-error="onError">
+                    </check-list-setting>
+                </div>
             </div>
             <div class="section-separator"></div>
             <div class="row">
diff --git a/app/models/setting.rb b/app/models/setting.rb
index 1ee8b4623..65dc85786 100644
--- a/app/models/setting.rb
+++ b/app/models/setting.rb
@@ -120,7 +120,8 @@ class Setting < ApplicationRecord
                              payzen_currency
                              public_agenda_module
                              renew_pack_threshold
-                             pack_only_for_subscription] }
+                             pack_only_for_subscription
+                             overlapping_categories] }
   # WARNING: when adding a new key, you may also want to add it in app/policies/setting_policy.rb#public_whitelist
   # and in config/locales/en.yml#settings