Added filter "Status"

app/apps/regie/forms.py

@@ -57,6 +57,18 @@ class FilterForm(forms.Form):
         required=False,
     )
 
+    status = forms.MultipleChoiceField(
+        label="Status",
+        widget=forms.CheckboxSelectMultiple(
+            attrs={
+                "class": "list--form-check-input",
+                "hideLabel": True,
+            }
+        ),
+        choices=[],
+        required=False,
+    )
+
     ordering = forms.CharField(
         widget=forms.HiddenInput(),
         initial="aangemaakt_op",
@@ -82,9 +94,11 @@ class FilterForm(forms.Form):
     def __init__(self, *args, **kwargs):
         offset_options = kwargs.pop("offset_options", None)
         locatie_opties = kwargs.pop("locatie_opties", None)
+        status_opties = kwargs.pop("status_opties", None)
         super().__init__(*args, **kwargs)
         self.fields["offset"].choices = offset_options
         self.fields["begraafplaats"].choices = locatie_opties
+        self.fields["status"].choices = status_opties
 
 
 class LoginForm(forms.Form):

app/apps/regie/templates/melding/part_overview_table.html

@@ -14,15 +14,25 @@
                 <h1 class="page-title">Meldingen</h1>
                 <span class="help-text">{{ startNum }} - {{ endNum }} van {{ totaal }} resultaten</span>
             </div>
-
-            <div class="container__filter" data-controller="filter">
-                <label class="visually-hidden">Locatie</label>
-                <div class="container__multiselect">
-                    <button class="toggle" data-action="filter#onToggleShow" type="button">Kies locatie(s) ({{locaties_geselecteerd}}/{{filter_options.begraafplaats|length}})</button>
-                    <div class="wrapper">
-                        {{ form.begraafplaats|render_rotterdam_formulier }}
-                        {{ form.ordering|render_rotterdam_formulier }}
-                        {{ form.limit|render_rotterdam_formulier }}
+            <div class="container__tools">
+                <div class="container__filter" data-controller="filter" data-filter-target="filterOverview">
+                    <div class="container__multiselect">
+                        <label class="visually-hidden">Locatie</label>
+                        <button class="toggle js-toggle" type="button">Selecteer locatie ({{locaties_geselecteerd}}/{{filter_options.begraafplaats|length}})</button>
+                        <div class="wrapper">
+                            {{ form.begraafplaats|render_rotterdam_formulier }}
+                            {{ form.ordering|render_rotterdam_formulier }}
+                            {{ form.limit|render_rotterdam_formulier }}
+                        </div>
+                    </div>
+                    <div class="container__multiselect">
+                        <label class="visually-hidden">Status</label>
+                        <button class="toggle js-toggle" type="button">Selecteer status ({{statussen_geselecteerd}}/{{filter_options.status|length}})</button>
+                        <div class="wrapper">
+                            {{ form.status|render_rotterdam_formulier }}
+                            {{ form.ordering|render_rotterdam_formulier }}
+                            {{ form.limit|render_rotterdam_formulier }}
+                        </div>
                     </div>
                 </div>
                 <a href="{{ melding_aanmaken_url }}" class="btn btn-action">

app/apps/regie/views.py

@@ -74,13 +74,23 @@ def overview(request):
     )
 
     locaties_geselecteerd = len(query_dict.getlist("begraafplaats"))
+    statussen_geselecteerd = len(query_dict.getlist("status"))
+
     begraafplaatsen = [
         [k, f"{v[0]}"]
         for k, v in data.get("filter_options", {}).get("begraafplaats", {}).items()
     ]
 
+    statussen = [
+        [k, f"{v[0]}"]
+        for k, v in data.get("filter_options", {}).get("status", {}).items()
+    ]
+
     form = FilterForm(
-        query_dict, offset_options=offset_options, locatie_opties=begraafplaatsen
+        query_dict,
+        offset_options=offset_options,
+        locatie_opties=begraafplaatsen,
+        status_opties=statussen,
     )
 
     filter_form_data = copy.deepcopy(standaard_waardes)
@@ -117,6 +127,7 @@ def overview(request):
             "endNum": endNum,
             "form": form,
             "locaties_geselecteerd": locaties_geselecteerd,
+            "statussen_geselecteerd": statussen_geselecteerd,
             "filter_options": data.get("filter_options", {}),
             "melding_aanmaken_url": melding_aanmaken_url,
         },

app/frontend/assets/controllers/filter_controller.js

@@ -1,19 +1,44 @@
 import { Controller } from '@hotwired/stimulus';
-
 export default class extends Controller {
 
+    static targets = ["filterOverview"]
+
     connect() {
         const inputList = document.getElementsByTagName("input")
         for (let i=0; i<inputList.length; i++){
             inputList[i].addEventListener('change', this.onInputChange)
         }
+
+        //hide dropdowns on click anywhere
+        document.addEventListener('click', this.toggleFilterElements)
+    }
+
+    disconnect(){
+        console.log("disconnect")
+        document.removeEventListener("click", this.toggleFilterElements)
     }
 
     onInputChange() {
         document.getElementById('filterForm').requestSubmit()
     }
 
-    onToggleShow(e) {
-        e.target.closest("div").classList.toggle("show")
+    toggleFilterElements(e) {
+        const container = e.target.closest("div")
+        if(e.target.classList.contains("js-toggle")){
+            container.classList.toggle("show")
+
+            const elementsToHide = document.querySelectorAll(".show")
+            elementsToHide.forEach((element) => {
+                if(element !== container){
+                    element.classList.remove("show")
+                }
+            })
+        } else {
+            const elementsToHide = document.querySelectorAll(".show")
+            elementsToHide.forEach((element) => {
+                element.classList.remove("show")
+            })
+        }
     }
+
 }

app/frontend/assets/styles/components/_filters.scss

@@ -1,16 +1,27 @@
-.container__filter {
+.container__tools {
     margin-top: $alert-padding-y;
     display: flex;
 
-    >label {
-        line-height: 3.2;
-        margin-right: $alert-padding-x;
+    .container__filter {
+        flex: 1;
+        display: flex;
+
+        >label {
+            line-height: 3.2;
+            margin-right: $alert-padding-x;
+        }
+
+        >div {
+            flex: 0 1 20%;
+            min-width: 250px;
+        }
     }
 
     > .btn {
         padding: 0 16px 0 10px;
         flex: 0;
     }
+
 }
 
 .filter-header {
@@ -51,6 +62,7 @@
         top: 100%;
         left: 0;
         height: 0;
+        min-width: 220px;
         overflow: hidden;
         background-color: #fff;
     }