add filter to benevole page

src/views/BenevoleManager.vue

@@ -25,12 +25,20 @@
       :uuid="uuid"
     />
     <manage-registration v-if="show == 'inscriptions'" />
+    <filter-panel
+      ref="filter"
+      :data="benevoleForFilter"
+      title="Filtrer les bénévoles"
+      @filterChange="updateList($event)"
+      :filters="filters"
+    />
   </navigation>
 </template>
 
 <script lang="ts">
 import Competence from "@/models/Competence";
 import EditeurBenevole from "@/components/EditeurBenevole.vue";
+import FilterPanel, { FilterParam } from "@/components/filteringPanel.vue";
 import EditeurQuestionnaire from "@/components/EditeurQuestionnaire.vue";
 import ManageRegistration from "@/components/ManageRegistration.vue";
 import Navigation from "@/components/NavigationPanel.vue";
@@ -52,9 +60,28 @@ const navOption = [
   { id: "questionnaire", title: "Gestion du questionnaire" },
   { id: "inscriptions", title: "Validations des inscriptions" },
 ];
+const filters: Array<FilterParam> = [
+  {
+    name: "Préference & compétences",
+    type: "category",
+    key: "competenceIdList",
+    placeholder: "Selectionner une compétence",
+  },
+];
+type filterObject = {
+  id: number;
+  competenceIdList: Array<string>;
+};
 export default defineComponent({
   name: "EditeurCreneau",
-  components: { DataTable, EditeurBenevole, ManageRegistration, EditeurQuestionnaire, Navigation },
+  components: {
+    DataTable,
+    EditeurBenevole,
+    ManageRegistration,
+    EditeurQuestionnaire,
+    Navigation,
+    FilterPanel,
+  },
   data: () => ({
     navOption,
     show: "benevole",
@@ -100,6 +127,8 @@ export default defineComponent({
     currentBenevole: undefined as Benevole | undefined,
     loading: true,
     customButton: [] as Array<CustomButton>,
+    benevoleList: [] as Array<Benevole>,
+    filters,
   }),
   computed: {
     uuid(): string {
@@ -114,9 +143,19 @@ export default defineComponent({
     fanfareList(): Array<Competence> {
       return this.competenceList.filter((o) => o.name.startsWith("Fanfare"));
     },
-    benevoleList(): Array<Benevole> {
+    rawBenevoleList(): Array<Benevole> {
       return this.$store.state.benevoleList;
     },
+    benevoleForFilter(): Array<filterObject> {
+      return this.rawBenevoleList.map((b: Benevole) => {
+        return {
+          id: b.id,
+          competenceIdList: b.competenceIdList.map(
+            (id) => this.competenceList.find((o) => o.id == id)?.name ?? ""
+          ),
+        };
+      });
+    },
     data(): DataTableData<DataTableObject> {
       return {
         items: this.benevoleList.map((b) => {
@@ -132,7 +171,20 @@ export default defineComponent({
       };
     },
   },
+  watch: {
+    rawBenevoleList() {
+      this.benevoleList = this.rawBenevoleList;
+      (this.$refs.filter as typeof FilterPanel).reset();
+    },
+  },
   methods: {
+    openFilter() {
+      (this.$refs.filter as typeof FilterPanel).open();
+    },
+    updateList(l: Array<filterObject>) {
+      const ids = l.map((o) => o.id);
+      this.benevoleList = this.rawBenevoleList.filter((b) => ids.includes(b.id));
+    },
     getFanfareForBenevole(benevole: Benevole): string {
       if (benevole.competenceIdList.length == 0) {
         return "Exte";
@@ -258,6 +310,7 @@ export default defineComponent({
   },
   mounted() {
     this.loading = false;
+    this.customButton.push({ icon: "filter_alt", hide: false, onclick: this.openFilter });
     this.customButton.push({ icon: "file_download", hide: false, onclick: this.getImportTemplate });
     this.customButton.push({
       icon: "file_upload",
@@ -266,6 +319,7 @@ export default defineComponent({
         this.csvInputElt.click();
       },
     });
+    this.benevoleList = this.rawBenevoleList;
   },
 });
 </script>

src/views/PrintablePlanning.vue

@@ -18,6 +18,8 @@
 import { defineComponent } from "vue";
 import Timeline from "jc-timeline/lib/Timeline";
 import DatePicker from "@/components/date-picker.vue";
+
+import FilterPanel, { FilterParam } from "@/components/filteringPanel.vue";
 import { Event as jcEvent } from "jc-timeline/lib/Event";
 import dayjs from "dayjs";
 import Creneau from "@/models/Creneau";
@@ -40,6 +42,7 @@ function pickColor2(str: string) {
 function pickColor(str: string) {
   return "#" + ("000000" + (hashCode(str) & 0x00ffffff).toString(16)).slice(-6);
 }
+const filters: Array<FilterParam> = [];
 export default defineComponent({
   name: "PrintablePlanning",
   components: { DatePicker },
@@ -50,6 +53,7 @@ export default defineComponent({
       slotduration: 30,
       legendspan: 2,
       slotwidth: 50,
+      filters,
     };
   },
   watch: {
@@ -81,12 +85,11 @@ export default defineComponent({
     filteredRessource(): Array<Ressource> {
       const set = new Set();
       this.filteredCreneau.forEach((c) => set.add(c.ressourceId));
-      const arr = Array.from(set);
-      return this.$store.state.creneauGroupList.filter((r) => arr.includes(r.id));
+      return this.$store.state.creneauGroupList.filter((r) => set.has(r.id));
     },
     eventList(): Array<jcEvent> {
       return this.filteredCreneau.flatMap((c) =>
-        Array.from(new Set(c.benevoleIdList)).map((id) => {
+        c.benevoleIdList.map((id) => {
           const b = this.$store.getters.getBenevoleById(id);
           return jcEvent.fromJSON({
             ressourceId: c.ressourceId,
@@ -105,7 +108,10 @@ export default defineComponent({
   methods: {
     updateTimeline(): void {
       this.$nextTick(() => {
-        this.timeline.getRessources().forEach((c) => this.timeline.removeRessourceById(c.id));
+        this.timeline
+          .getRessources()
+          .map((c) => c.id)
+          .forEach((id) => this.timeline.removeRessourceById(id));
         this.timeline.addRessources(this.filteredRessource);
         this.timeline.addEvents(this.eventList);
         this.timeline.requestUpdate();