133 lines
3.9 KiB
Svelte
133 lines
3.9 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import { clickOutside } from 'svelte-outside';
|
|
import * as Card from '$lib/components/ui/card/index';
|
|
import * as Select from '$lib/components/ui/select';
|
|
import { Label } from '$lib/components/ui/label';
|
|
import { db } from '../db/main';
|
|
import { liveQuery } from 'dexie';
|
|
import { appState, shortforms } from '$lib/stores.svelte';
|
|
import { cacheShortforms } from '../modules/shortforms';
|
|
|
|
const onSelectedStandardListChange = (e) => {
|
|
console.log('onSelectedStandardListChange', e);
|
|
shortforms.standardList = e.value;
|
|
cacheShortforms([Number(shortforms.standardList), Number(shortforms.subjectList)]);
|
|
};
|
|
|
|
const onSelectedSubjectListChange = (e) => {
|
|
if (e.value == 0) {
|
|
listSelectorForm.subject = { value: '', label: '' };
|
|
shortforms.subjectList = '';
|
|
cacheShortforms([Number(shortforms.standardList)]);
|
|
return;
|
|
}
|
|
console.log('onSelectedSubjectListChange', e);
|
|
shortforms.subjectList = e.value;
|
|
cacheShortforms([Number(shortforms.standardList), Number(shortforms.subjectList)]);
|
|
};
|
|
|
|
const onSubmit = (e) => {
|
|
e.preventDefault();
|
|
console.log('submit', listSelectorForm);
|
|
};
|
|
|
|
$: listSelectorForm = {
|
|
standard: { value: '', label: '' },
|
|
subject: {}
|
|
};
|
|
|
|
const getListFromId = (lists, id) => {
|
|
return lists.filter((l) => l.id == id)[0];
|
|
};
|
|
|
|
let standardLists = [];
|
|
let subjectLists = [];
|
|
let show = false;
|
|
onMount(async () => {
|
|
//console.log($state.snapshot(shortforms));
|
|
db.lists.toArray().then((lists) => {
|
|
standardLists = lists.filter((l) => l.type == 0);
|
|
subjectLists = lists.filter((l) => l.type == 1);
|
|
const standard = getListFromId(standardLists, shortforms.standardList);
|
|
listSelectorForm.standard = { value: standard.id, label: standard.name };
|
|
const subject = getListFromId(subjectLists, shortforms.subjectList);
|
|
listSelectorForm.subject = { value: subject.id, label: subject.name };
|
|
console.log(listSelectorForm);
|
|
});
|
|
|
|
setTimeout(() => {
|
|
show = true;
|
|
}, 15);
|
|
});
|
|
const close = () => {
|
|
if (show == true) {
|
|
appState.open = '';
|
|
}
|
|
};
|
|
</script>
|
|
|
|
{#if show}
|
|
<div use:clickOutside={close}>
|
|
<Card.Root class="mx-auto w-[490px]">
|
|
<Card.Header>
|
|
<Card.Title>Välj förkortningslistor</Card.Title>
|
|
<Card.Description></Card.Description>
|
|
</Card.Header>
|
|
<Card.Content class="mx-auto">
|
|
<form
|
|
class="grid gap-4 py-4"
|
|
method="post"
|
|
enctype="multipart/form-data"
|
|
onsubmit={onSubmit}
|
|
autocomplete="off"
|
|
>
|
|
<div class="grid grid-cols-4 items-center gap-4">
|
|
<Label>Standardlista</Label>
|
|
<Select.Root
|
|
selected={listSelectorForm.standard}
|
|
onSelectedChange={onSelectedStandardListChange}
|
|
>
|
|
<Select.Trigger class="w-[290px]">
|
|
<Select.Value placeholder="Ingen lista vald" />
|
|
</Select.Trigger>
|
|
|
|
<Select.Content>
|
|
{#each standardLists as list}
|
|
<Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
|
|
{/each}
|
|
</Select.Content>
|
|
</Select.Root>
|
|
</div>
|
|
<div class="grid grid-cols-4 items-center gap-4">
|
|
<Label>Ämneslista</Label>
|
|
<Select.Root
|
|
selected={listSelectorForm.subject}
|
|
onSelectedChange={onSelectedSubjectListChange}
|
|
disabled={subjectLists.length < 1}
|
|
>
|
|
<Select.Trigger class="w-[290px]">
|
|
<Select.Value placeholder="Ingen lista vald" />
|
|
</Select.Trigger>
|
|
|
|
<Select.Content>
|
|
<Select.Item value={0} label="Ingen lista vald">Ingen lista vald</Select.Item>
|
|
{#each subjectLists as list}
|
|
<Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
|
|
{/each}
|
|
</Select.Content>
|
|
</Select.Root>
|
|
</div>
|
|
<button type="submit" class="hidden" />
|
|
</form>
|
|
</Card.Content>
|
|
<!--
|
|
<Card.Footer class="flex justify-between">
|
|
<Button on:click={cancelCreate} variant="outline">Avbryt</Button>
|
|
<Button on:click={handleCreate}>Importera</Button>
|
|
</Card.Footer>
|
|
-->
|
|
</Card.Root>
|
|
</div>
|
|
{/if}
|