react/livequestions: add moderator filters

changelog/_8547.md

@@ -0,0 +1,8 @@
+### Added
+
+- Added `MultiSelect` moderator filters
+
+### Changed
+
+- Changed categories select to `MultiSelect`
+- Style “Show on Screen” link

meinberlin/assets/scss/components_user_facing/_live_questions.scss

@@ -31,4 +31,16 @@
 
 .live-question__progress-percentage {
     font-weight: bold;
+}
+
+.live-question__buttons {
+    @media screen and (min-width: $breakpoint-tablet) {
+        display: flex;
+        gap: 1.25rem;
+    }
+}
+
+.live-question__present {
+    min-width: 14rem;
+    width: 100%;
 }

meinberlin/react/livequestions/Filters.jsx

@@ -1,122 +1,86 @@
 import React, { useState } from 'react'
 import django from 'django'
+import { MultiSelect } from '../contrib/forms/MultiSelect'
+import { classNames } from '../contrib/helpers'
 
-const allTag = django.gettext('all')
-const onlyShowMarkedText = django.gettext('only show marked questions')
-const displayNotHiddenText = django.gettext('display only questions which are not hidden')
-const orderLikesText = django.gettext('order by likes')
+const allTag = django.gettext('All')
+const categoriesLabelText = django.gettext('Affiliation')
+const markedLabelText = django.gettext('Marked Questions')
+const markedOptionsText = [
+  { name: django.gettext('Bookmarked'), value: 'bookmarked' },
+  { name: django.gettext('Not Bookmarked'), value: 'not_bookmarked' },
+  { name: django.gettext('Answered'), value: 'answered' },
+  { name: django.gettext('Open'), value: 'not_answered' },
+  { name: django.gettext('On Screen'), value: 'screen' },
+  { name: django.gettext('Not on Screen'), value: 'not_screen' }
+]
+const displayLabelText = django.gettext('Display')
+const displayOptionsText = [
+  { name: django.gettext('Visible'), value: 'visible' },
+  { name: django.gettext('Hidden'), value: 'hidden' }
+]
 const questionsText = django.gettext('Questions')
 const filterText = django.gettext('Filter')
-const affiliationText = django.gettext('Affiliation')
 
 const Filter = ({
   categories,
   isModerator,
-  displayOnShortlist,
-  toggleDisplayOnShortlist,
-  displayNotHiddenOnly,
-  toggledisplayNotHiddenOnly,
-  orderedByLikes,
-  toggleOrdering,
-  setCategories
+  onFiltered
 }) => {
-  const [category, setCategory] = useState(null)
+  const [filters, setFilters] = useState({
+    categories: [],
+    marked: [],
+    display: []
+  })
 
-  const selectCategory = (e) => {
-    e.preventDefault()
-    setCategory(e.target.value)
-  }
-
-  const handleSubmit = (e) => {
-    e.preventDefault()
-    if (category) {
-      setCategories(category)
-    }
+  const onFilterChange = (type, choice) => {
+    setFilters({ ...filters, [type]: choice })
   }
 
   return (
     <>
       <h2 id="filter-form-heading">{questionsText}</h2>
-      <form className="form panel--heavy" onSubmit={handleSubmit} aria-labelledby="filter-form-heading">
-        {categories.length > 0 && (
-          <div className="form-group">
-            <label htmlFor="filterCategorySelect">{affiliationText}*</label>
-            <select
-              id="filterCategorySelect"
-              className="form-control"
-              onChange={selectCategory}
-            >
-              <option value={-1}>{allTag}</option>
-              {categories.map((cat) => (
-                <option key={cat} value={cat}>{cat}</option>
-              ))}
-            </select>
-          </div>
-        )}
+      <form
+        className="form panel--heavy"
+        onSubmit={(e) => {
+          e.preventDefault()
+          onFiltered(filters)
+        }}
+        aria-labelledby="filter-form-heading"
+      >
+        <div className={classNames('flexgrid', isModerator && 'grid--3')}>
+          <MultiSelect
+            label={categoriesLabelText}
+            placeholder={allTag}
+            choices={categories.map((choice) => ({ value: choice, name: choice }))}
+            values={filters.categories}
+            onChange={(choices) => onFilterChange('categories', choices)}
+          />
+          {isModerator && (
+            <>
+              <MultiSelect
+                label={markedLabelText}
+                placeholder={allTag}
+                choices={markedOptionsText}
+                values={filters.marked}
+                onChange={(choices) => onFilterChange('marked', choices)}
+              />
+              <MultiSelect
+                label={displayLabelText}
+                placeholder={allTag}
+                choices={displayOptionsText}
+                values={filters.display}
+                onChange={(choices) => onFilterChange('display', choices)}
+              />
+            </>
+          )}
+        </div>
         <div className="form-actions">
           <div className="form-actions__right">
             <button type="submit" className="button">{filterText}</button>
           </div>
         </div>
       </form>
-      {isModerator && (
-        <div className="block">
-          <div className="checkbox-btn u-spacer-right">
-            <label
-              htmlFor="markedCheck"
-              className={'btn switch--btn' + (displayOnShortlist ? ' active' : '')}
-              title={onlyShowMarkedText}
-            >
-              <input
-                className="radio__input"
-                type="checkbox"
-                id="markedCheck"
-                name="markedCheck"
-                checked={displayOnShortlist}
-                onChange={toggleDisplayOnShortlist}
-              />
-              <span className="visually-hidden">{onlyShowMarkedText}</span>
-              <i className="far fa-list-alt" aria-hidden="true" />
-            </label>
-          </div>
-          <div className="checkbox-btn u-spacer-right">
-            <label
-              htmlFor="displayNotHiddenOnly"
-              className={'btn switch--btn' + (displayNotHiddenOnly ? ' active' : '')}
-              title={displayNotHiddenText}
-            >
-              <input
-                className="radio__input"
-                type="checkbox"
-                id="displayNotHiddenOnly"
-                name="displayNotHiddenOnly"
-                checked={displayNotHiddenOnly}
-                onChange={toggledisplayNotHiddenOnly}
-              />
-              <span className="visually-hidden">{displayNotHiddenText}</span>
-              <i className="far fa-eye" aria-hidden="true" />
-            </label>
-          </div>
-          <div className="checkbox-btn">
-            <label
-              htmlFor="orderedByLikes"
-              className={'btn switch--btn' + (orderedByLikes ? ' active' : '')}
-              title={orderLikesText}
-            >
-              <input
-                className="radio__input"
-                type="checkbox"
-                id="orderedByLikes"
-                name="orderedByLikes"
-                checked={orderedByLikes}
-                onChange={toggleOrdering}
-              />
-              <span className="visually-hidden">{orderLikesText}</span>
-              <i className="far fa-thumbs-up" aria-hidden="true" />
-            </label>
-          </div>
-        </div>
-      )}
     </>
   )
 }