Add global toggle

src/FilterBar.svelte

@@ -1,14 +1,19 @@
 <script>
   import { Button, Offcanvas, Icon } from 'sveltestrap';
   import FilterItem from './FilterItem.svelte';
+  import { writable } from 'svelte/store';
+
   export let calendarTree = [];
   export let selected = null;
 
+  let open = true;
+  let generalToggle = writable(true);
+  const toggle = () => (open = !open);
+
+  $: icon = () => ($generalToggle ? 'toggle-on' : 'toggle-off');
+
   let subSelections = Array.from({ length: Object.keys(calendarTree).length }, _ => []);
   $: selected = subSelections.flat();
-
-  let open = false;
-  const toggle = () => (open = !open);
 </script>
 
 <Button on:click={toggle} class="mb-3 col-6 mx-auto">
@@ -23,7 +28,27 @@
   placement="start"
   header="Sélection des calendriers"
 >
+  <span class="fs-5 toggle" on:click={() => ($generalToggle = !$generalToggle)}>
+    <Icon name={icon()} />
+    <span class="ms-2">Tous les calendriers</span>
+  </span>
+  <hr class="my-3" />
+
   {#each Object.entries(calendarTree) as [toplevel, subtrees], i}
-    <FilterItem item={toplevel} children={subtrees} bind:selected={subSelections[i]} />
+    <FilterItem
+      item={toplevel}
+      children={subtrees}
+      bind:selected={subSelections[i]}
+      bind:generalToggle
+    />
   {/each}
 </Offcanvas>
+
+<style>
+  .toggle {
+    display: block;
+    cursor: pointer;
+    width: 100%;
+    text-align: center;
+  }
+</style>

src/FilterItem.svelte

@@ -8,11 +8,12 @@
 
   export let item = null;
   export let level = 1;
+  export let generalToggle = undefined;
 
   export let children = [];
   export let selected = [];
-  export let filtering = createTriState(CHECKED);
-  let subfiltering = createTriStates(CHECKED, Object.entries(children).length);
+  export let filtering = createTriState(UNCHECKED);
+  let subfiltering = createTriStates(UNCHECKED, Object.entries(children).length);
   let subselected = Array.from({ length: Object.entries(children).length }, _ => []);
 
   function isVal(val) {
@@ -68,6 +69,13 @@
     dispatch('change', { value: evt.detail.value });
   }
 
+  if (generalToggle) {
+    generalToggle.subscribe(value => {
+      setTimeout(() => (value ? filtering.setChecked() : filtering.setUnchecked()), 0);
+      dispatch('change', { value: $filtering });
+    });
+  }
+
   $: selected =
     $filtering === CHECKED ? [item, ...subselected.flat()] : subselected.flat();
 </script>