feat(logic): implement filter bar / filter item selection logic

package.json

@@ -27,6 +27,8 @@
     "svelte-fullcalendar": "^1.1.1"
   },
   "dependencies": {
+    "@fullcalendar/adaptive": "^5.10.1",
+    "@fullcalendar/list": "^5.10.1",
     "@fullcalendar/rrule": "^5.10.1",
     "@nextcloud/cdav-library": "^1.0.0",
     "ical.js": "^1.5.0",

src/App.svelte

@@ -3,8 +3,10 @@
   import { writable } from 'svelte/store';
   import FullCalendar from 'svelte-fullcalendar';
   import timeGridPlugin from '@fullcalendar/timegrid';
+  import adaptivePlugin from '@fullcalendar/adaptive';
   import rrulePlugin from '@fullcalendar/rrule';
   import dayGridPlugin from '@fullcalendar/daygrid';
+  import listPlugin from '@fullcalendar/list';
   import frLocale from '@fullcalendar/core/locales/fr';
   import Modal, { bind } from 'svelte-simple-modal';
   import EventDetails from './EventDetails.svelte';
@@ -12,11 +14,17 @@
   import { refreshEvents, calendarTree } from './calendar';
 
   const modal = writable(null);
+  let calendar;
 
   let options = {
     initialView: 'timeGridWeek',
-    plugins: [timeGridPlugin, dayGridPlugin, rrulePlugin],
+    plugins: [timeGridPlugin, dayGridPlugin, rrulePlugin, listPlugin, adaptivePlugin],
     locale: frLocale,
+    headerToolbar: {
+      left: 'prev,next today',
+      center: 'title',
+      right: 'dayGridMonth,timeGridWeek,listWeek'
+    },
     height: "100%",
     schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
     nowIndicator: true,
@@ -34,8 +42,6 @@
     options.events = evts.flat();
     options = { ...options };
   });
-
-  $: console.log(options);
 </script>
 
 <div class="app-container">
@@ -44,7 +50,7 @@
     <Modal show={$modal}>
       <FilterBar {calendarTree} {selectedCalendars} />
       <div style="flex: 1;">
-        <FullCalendar {options} />
+        <FullCalendar bind:this={calendar} {options} />
       </div>
     </Modal>
   </div>

src/FilterBar.svelte

@@ -2,10 +2,13 @@
   import FilterItem from './FilterItem.svelte';
   export let calendarTree = [];
   export let selectedCalendars = null;
+
+  let subSelections = Array(Object.keys(calendarTree).length).fill([]);
+  $: selectedCalendars = subSelections.flat();
 </script>
 
 <ul>
-{#each Object.entries(calendarTree) as [toplevel, subtrees]}
-<FilterItem item={toplevel} children={subtrees} />
+{#each Object.entries(calendarTree) as [toplevel, subtrees], i}
+  <FilterItem item={toplevel} children={subtrees} bind:selected={subSelections[i]} />
 {/each}
 </ul>

src/FilterItem.svelte

@@ -1,15 +1,44 @@
 <script>
   export let item = null;
   export let children = [];
+  export let filtering = true;
+  export let selected = [];
+
+  let subfiltering = Object.entries(children).map(([k, v]) => v ? true : false);
+
+  function setAllSubFilters(value) {
+    subfiltering = Object.entries(children).map(([k, v]) => value);
+  }
+
+  function handleClick(evt) {
+    setAllSubFilters(evt.target.checked);
+  }
+
+  $: if (subfiltering.length > 0) {
+    filtering = subfiltering.every(Boolean);
+  }
+
+  $: {
+    const subselected = Object.entries(children).flatMap(([toplevel, _], index) => subfiltering[index] ? [toplevel] : []);
+    if (item != null && filtering) {
+      selected = [item, ...subselected];
+    } else {
+      selected = subselected;
+    }
+  }
 </script>
 
 {#if item != null}
 <li>
-<input type="checkbox" value={item}><span>{item}</span>
-<ul>
-{#each Object.entries(children) as [toplevel, subchildren]}
-<svelte:self item={toplevel} children={subchildren} />
-{/each}
-</ul>
+  <input type="checkbox" bind:checked={filtering} on:click={handleClick} value={item}><span>{item}</span>
+  <ul>
+  {#each Object.entries(children) as [toplevel, subchildren], i}
+    {#if subchildren}
+      <svelte:self item={toplevel} children={subchildren} bind:filtering={subfiltering[i]} />
+    {:else}
+      <svelte:self item={toplevel} />
+    {/if}
+  {/each}
+  </ul>
 </li>
 {/if}