Populate division filter list dynamically

indico · Nov 4, 2024 · 6f2c0a9 · 6f2c0a9
1 parent e5d6791
commit 6f2c0a9
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 81 deletions.
diff --git a/labotel/indico_labotel/blueprint.py b/labotel/indico_labotel/blueprint.py
@@ -7,11 +7,12 @@
 
 from indico.core.plugins import IndicoPluginBlueprint
 
-from indico_labotel.controllers import RHLabotelStats, RHLabotelStatsCSV, RHUserDivision
+from indico_labotel.controllers import RHDivisions, RHLabotelStats, RHLabotelStatsCSV, RHUserDivision
 
 
 blueprint = IndicoPluginBlueprint('labotel', __name__, url_prefix='/rooms')
 
+blueprint.add_url_rule('/api/divisions', 'divisions', RHDivisions)
 blueprint.add_url_rule('/api/user/division', 'user_division', RHUserDivision, methods=('GET', 'POST'))
 blueprint.add_url_rule('/api/labotel-stats', 'stats', RHLabotelStats)
 blueprint.add_url_rule('/labotel-stats.csv', 'stats_csv', RHLabotelStatsCSV)

diff --git a/labotel/indico_labotel/client/js/components/BootstrapOptions.jsx b/labotel/indico_labotel/client/js/components/BootstrapOptions.jsx
@@ -5,59 +5,54 @@
 // them and/or modify them under the terms of the MIT License; see
 // the LICENSE file for more details.
 
+import divisionsURL from 'indico-url:plugin_labotel.divisions';
 import defaultDivisionURL from 'indico-url:plugin_labotel.user_division';
 
 import PropTypes from 'prop-types';
 import React from 'react';
 import {Button} from 'semantic-ui-react';
 
+import {useIndicoAxios} from 'indico/react/hooks';
 import {Translate} from 'indico/react/i18n';
 import {indicoAxios, handleAxiosError} from 'indico/utils/axios';
 
-export const DIVISIONS = ['Laser', 'Clean Room', 'DSF', 'QART'];
+export default function BootstrapOptions({options: {division}, setOptions}) {
+  const {data: divisions} = useIndicoAxios(divisionsURL());
 
-export default class BootstrapOptions extends React.Component {
-  static propTypes = {
-    setOptions: PropTypes.func.isRequired,
-    options: PropTypes.object.isRequired,
-  };
-
-  handleDivisionClick = async division => {
-    const {setOptions} = this.props;
-    setOptions({division});
+  const handleDivisionClick = async newDivision => {
+    setOptions({division: newDivision});
     try {
-      await indicoAxios.post(defaultDivisionURL(), {value: division});
+      await indicoAxios.post(defaultDivisionURL(), {value: newDivision});
     } catch (error) {
       handleAxiosError(error);
     }
   };
 
-  render() {
-    const {
-      options: {division},
-    } = this.props;
-
-    return (
-      <Button.Group style={{marginBottom: 10}}>
-        {DIVISIONS.map(div => (
-          <Button
-            key={div}
-            onClick={() => this.handleDivisionClick(div)}
-            type="button"
-            primary={division === div}
-          >
-            {div}
-          </Button>
-        ))}
+  return (
+    <Button.Group style={{marginBottom: 10}}>
+      {divisions?.map(div => (
         <Button
-          key="other"
-          onClick={() => this.handleDivisionClick(null)}
+          key={div}
+          onClick={() => handleDivisionClick(div)}
           type="button"
-          primary={!division}
+          primary={division === div}
         >
-          <Translate>All</Translate>
+          {div}
         </Button>
-      </Button.Group>
-    );
-  }
+      ))}
+      <Button
+        key="other"
+        onClick={() => handleDivisionClick(null)}
+        type="button"
+        primary={!division}
+      >
+        <Translate>All</Translate>
+      </Button>
+    </Button.Group>
+  );
 }
+
+BootstrapOptions.propTypes = {
+  setOptions: PropTypes.func.isRequired,
+  options: PropTypes.object.isRequired,
+};
diff --git a/labotel/indico_labotel/client/js/components/ExtraFilters.jsx b/labotel/indico_labotel/client/js/components/ExtraFilters.jsx
@@ -5,19 +5,50 @@
 // them and/or modify them under the terms of the MIT License; see
 // the LICENSE file for more details.
 
+import divisionsURL from 'indico-url:plugin_labotel.divisions';
+
 import PropTypes from 'prop-types';
 import React from 'react';
 import {Form} from 'semantic-ui-react';
 
 import {FilterDropdownFactory} from 'indico/modules/rb/common/filters/FilterBar';
 import FilterFormComponent from 'indico/modules/rb/common/filters/FilterFormComponent';
+import {useIndicoAxios} from 'indico/react/hooks';
 import {Translate} from 'indico/react/i18n';
 
-import {DIVISIONS} from './BootstrapOptions';
-
 // eslint-disable-next-line react/prop-types
 const divisionRenderer = ({division}) => (!division ? null : <span>{division}</span>);
 
+function DivisionFilter({division, setDivision}) {
+  const {data: divisions} = useIndicoAxios(divisionsURL());
+
+  return (
+    <Form.Group>
+      {divisions?.map(div => (
+        <Form.Radio
+          checked={division === div}
+          key={div}
+          label={div}
+          onChange={() => {
+            setDivision(div);
+          }}
+        />
+      ))}
+      <Form.Radio
+        checked={!division}
+        key="all"
+        label={Translate.string('All')}
+        onClick={() => setDivision(null)}
+      />
+    </Form.Group>
+  );
+}
+
+DivisionFilter.propTypes = {
+  division: PropTypes.string,
+  setDivision: PropTypes.func.isRequired,
+};
+
 class ExtraFilterForm extends FilterFormComponent {
   state = {
     division: null,
@@ -34,26 +65,7 @@ class ExtraFilterForm extends FilterFormComponent {
 
   render() {
     const {division} = this.state;
-    return (
-      <Form.Group>
-        {DIVISIONS.map(div => (
-          <Form.Radio
-            checked={division === div}
-            key={div}
-            label={div}
-            onChange={() => {
-              this.setDivision(div);
-            }}
-          />
-        ))}
-        <Form.Radio
-          checked={!division}
-          key="all"
-          label={Translate.string('All')}
-          onClick={() => this.setDivision(null)}
-        />
-      </Form.Group>
-    );
+    return <DivisionFilter setDivision={this.setDivision.bind(this)} division={division} />;
   }
 }
 

diff --git a/labotel/indico_labotel/client/js/components/LabotelLanding.jsx b/labotel/indico_labotel/client/js/components/LabotelLanding.jsx
@@ -7,32 +7,29 @@
 
 import defaultDivisionURL from 'indico-url:plugin_labotel.user_division';
 
-import React from 'react';
+import React, {useEffect, useRef} from 'react';
 
 import {Landing} from 'indico/modules/rb/modules/landing/Landing';
 import {indicoAxios, handleAxiosError} from 'indico/utils/axios';
 
-export default class LabotelLanding extends React.Component {
-  constructor(props) {
-    super(props);
-    this.landing = React.createRef();
-  }
+export default function LabotelLanding(props) {
+  const landing = useRef();
 
-  async componentDidMount() {
-    let response;
-    try {
-      response = await indicoAxios.get(defaultDivisionURL());
-    } catch (error) {
-      handleAxiosError(error);
-      return;
-    }
-    const division = response.data.value;
-    if (this.landing.current && division) {
-      this.landing.current.setExtraState({division});
-    }
-  }
+  useEffect(() => {
+    (async () => {
+      let response;
+      try {
+        response = await indicoAxios.get(defaultDivisionURL());
+      } catch (error) {
+        handleAxiosError(error);
+        return;
+      }
+      const division = response.data.value;
+      if (landing.current && division) {
+        landing.current.setExtraState({division});
+      }
+    })();
+  }, []);
 
-  render() {
-    return <Landing ref={this.landing} {...this.props} />;
-  }
+  return <Landing ref={landing} {...props} />;
 }
diff --git a/labotel/indico_labotel/controllers.py b/labotel/indico_labotel/controllers.py
@@ -10,6 +10,8 @@
 from webargs import fields, validate
 from webargs.flaskparser import use_kwargs
 
+from indico.core.db import db
+from indico.modules.rb import Room
 from indico.modules.rb.controllers import RHRoomBookingBase
 from indico.util.date_time import format_datetime
 from indico.util.spreadsheets import send_csv
@@ -37,13 +39,18 @@ def _process(self):
         return WPLabotelBase.display('room_booking.html')
 
 
+class RHDivisions(RHRoomBookingBase):
+    def _process(self):
+        return jsonify(sorted(div for div, in db.session.query(Room.division.distinct())))
+
+
 class RHUserDivision(RHProtected):
     def _process_GET(self):
         from indico_labotel.plugin import LabotelPlugin
         return jsonify(value=LabotelPlugin.user_settings.get(session.user, 'default_division'))
 
     @use_kwargs({
-        'value': fields.String(validate=validate.OneOf({'Laser', 'Clean Room', 'DSF', 'QART'}), allow_none=True)
+        'value': fields.String(allow_none=True)
     })
     def _process_POST(self, value):
         from indico_labotel.plugin import LabotelPlugin