forked from DGNum/metis
feat(logic): implement filter bar / filter item selection logic
This commit is contained in:
parent
cfe3956c98
commit
3fee527be1
5 changed files with 3754 additions and 36 deletions
3726
package-lock.json
generated
3726
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in a new issue