mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-20 21:39:37 +02:00
checklists ui
This commit is contained in:
Sean Morley
parent
d5f93c5d9d
commit
18ef919a11
6 changed files with 405 additions and 12 deletions
263
frontend/src/lib/components/ChecklistModal.svelte
Normal file
263
frontend/src/lib/components/ChecklistModal.svelte
Normal file
|
|
@ -0,0 +1,263 @@
|
|||
<script lang="ts">
|
||||
import { isValidUrl } from '$lib';
|
||||
import type { Collection, Checklist, User, ChecklistItem } from '$lib/types';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
const dispatch = createEventDispatcher();
|
||||
import { onMount } from 'svelte';
|
||||
let modal: HTMLDialogElement;
|
||||
|
||||
export let checklist: Checklist | null = null;
|
||||
export let collection: Collection;
|
||||
export let user: User | null = null;
|
||||
|
||||
let items: ChecklistItem[] = [];
|
||||
|
||||
items = checklist?.items || [];
|
||||
|
||||
let warning: string | null = '';
|
||||
|
||||
let newStatus: boolean = false;
|
||||
let newItem: string = '';
|
||||
|
||||
function addItem() {
|
||||
if (newItem.trim() == '') {
|
||||
warning = 'Item cannot be empty';
|
||||
return;
|
||||
}
|
||||
if (newChecklist.items.find((item) => item.name.trim() == newItem)) {
|
||||
warning = 'Item already exists';
|
||||
return;
|
||||
}
|
||||
items = [
|
||||
...items,
|
||||
{
|
||||
name: newItem,
|
||||
is_checked: newStatus,
|
||||
id: 0,
|
||||
user_id: 0,
|
||||
checklist: 0,
|
||||
created_at: '',
|
||||
updated_at: ''
|
||||
}
|
||||
];
|
||||
if (checklist) {
|
||||
newChecklist.items = items;
|
||||
}
|
||||
newItem = '';
|
||||
newStatus = false;
|
||||
warning = '';
|
||||
}
|
||||
|
||||
let newChecklist = {
|
||||
name: checklist?.name || '',
|
||||
date: checklist?.date || undefined || null,
|
||||
items: checklist?.items || [],
|
||||
collection: collection.id,
|
||||
is_public: collection.is_public
|
||||
};
|
||||
|
||||
let initialName: string = checklist?.name || '';
|
||||
|
||||
onMount(() => {
|
||||
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
|
||||
if (modal) {
|
||||
modal.showModal();
|
||||
}
|
||||
});
|
||||
|
||||
function close() {
|
||||
dispatch('close');
|
||||
}
|
||||
|
||||
function removeItem(i: number) {
|
||||
items = items.filter((_, index) => index !== i);
|
||||
newChecklist.items = items;
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') {
|
||||
dispatch('close');
|
||||
}
|
||||
}
|
||||
|
||||
async function save() {
|
||||
// handles empty date
|
||||
if (newChecklist.date == '') {
|
||||
newChecklist.date = null;
|
||||
}
|
||||
|
||||
if (checklist && checklist.id) {
|
||||
console.log('newNote', newChecklist);
|
||||
const res = await fetch(`/api/checklists/${checklist.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(newChecklist)
|
||||
});
|
||||
if (res.ok) {
|
||||
let data = await res.json();
|
||||
if (data) {
|
||||
dispatch('save', data);
|
||||
}
|
||||
} else {
|
||||
console.error('Failed to save checklist');
|
||||
}
|
||||
} else {
|
||||
console.log('newNote', newChecklist);
|
||||
const res = await fetch(`/api/checklists/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(newChecklist)
|
||||
});
|
||||
if (res.ok) {
|
||||
let data = await res.json();
|
||||
if (data) {
|
||||
dispatch('create', data);
|
||||
}
|
||||
} else {
|
||||
let data = await res.json();
|
||||
console.error('Failed to save checklist', data);
|
||||
console.error('Failed to save checklist');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<dialog id="my_modal_1" class="modal">
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
|
||||
<h3 class="font-bold text-lg">Checklist Editor</h3>
|
||||
{#if initialName}
|
||||
<p class="font-semibold text-md mb-2">Editing note {initialName}</p>
|
||||
{/if}
|
||||
|
||||
{#if (checklist && user?.pk == checklist?.user_id) || !checklist}
|
||||
<form on:submit|preventDefault>
|
||||
<div class="form-control mb-2">
|
||||
<label for="name">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
class="input input-bordered w-full max-w-xs"
|
||||
bind:value={newChecklist.name}
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control mb-2">
|
||||
<label for="content">Date</label>
|
||||
<input
|
||||
type="date"
|
||||
id="date"
|
||||
name="date"
|
||||
min={collection.start_date || ''}
|
||||
max={collection.end_date || ''}
|
||||
bind:value={newChecklist.date}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="form-control mb-2">
|
||||
<label for="content">New Item</label>
|
||||
<div class="form-control">
|
||||
<input type="checkbox" bind:checked={newStatus} class="checkbox" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
id="new_item"
|
||||
name="new_item"
|
||||
bind:value={newItem}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
<button class="btn btn-primary mt-1" on:click={addItem}>Add Item</button>
|
||||
</div> -->
|
||||
<div class="form-control mb-2 flex flex-row">
|
||||
<input type="checkbox" bind:checked={newStatus} class="checkbox mt-4 mr-2" />
|
||||
<input
|
||||
type="text"
|
||||
id="new_item"
|
||||
placeholder="New Item"
|
||||
name="new_item"
|
||||
bind:value={newItem}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-primary absolute right-0 mt-2.5 mr-4"
|
||||
on:click={addItem}
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
{#if items.length > 0}
|
||||
<div class="divider"></div>
|
||||
<h2 class=" text-xl font-semibold mb-4 -mt-3">Items</h2>
|
||||
{/if}
|
||||
|
||||
{#each items as item, i}
|
||||
<div class="form-control mb-2 flex flex-row">
|
||||
<input type="checkbox" bind:checked={item.is_checked} class="checkbox mt-4 mr-2" />
|
||||
<input
|
||||
type="text"
|
||||
id="item_{i}"
|
||||
name="item_{i}"
|
||||
bind:value={item.name}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-error absolute right-0 mt-2.5 mr-4"
|
||||
on:click={() => removeItem(i)}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
{#if warning}
|
||||
<div role="alert" class="alert alert-error">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 shrink-0 stroke-current"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span>{warning}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button class="btn btn-primary mr-1" on:click={save}>Save</button>
|
||||
<button class="btn btn-neutral" on:click={close}>Close</button>
|
||||
|
||||
{#if collection.is_public}
|
||||
<div role="alert" class="alert mt-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="h-6 w-6 shrink-0 stroke-current"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>This checklist is public because it is in a public collection.</span>
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
{:else}
|
||||
<!-- view only form -->
|
||||
{/if}
|
||||
</div>
|
||||
</dialog>
|
||||
Loading…
Add table
Add a link
Reference in a new issue