mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-20 21:39:37 +02:00
Update note and checklist modals as well as add an unlinked state in the collection page for better organization
This commit is contained in:
Sean Morley
parent
f7c998ab58
commit
df2ce01910
12 changed files with 460 additions and 326 deletions
|
|
@ -12,10 +12,16 @@
|
|||
|
||||
let items: ChecklistItem[] = [];
|
||||
|
||||
let constrainDates: boolean = false;
|
||||
|
||||
items = checklist?.items || [];
|
||||
|
||||
let warning: string | null = '';
|
||||
|
||||
let isReadOnly =
|
||||
!(checklist && user?.uuid == checklist?.user_id) &&
|
||||
!(user && collection && collection.shared_with && collection.shared_with.includes(user.uuid)) &&
|
||||
!!checklist;
|
||||
let newStatus: boolean = false;
|
||||
let newItem: string = '';
|
||||
|
||||
|
|
@ -56,8 +62,6 @@
|
|||
is_public: collection.is_public
|
||||
};
|
||||
|
||||
let initialName: string = checklist?.name || '';
|
||||
|
||||
onMount(() => {
|
||||
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
|
||||
if (modal) {
|
||||
|
|
@ -127,86 +131,130 @@
|
|||
</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 mb-2">{$t('checklist.checklist_editor')}</h3>
|
||||
{#if initialName}
|
||||
<p class="font-semibold text-md mb-2">{$t('checklist.editing_checklist')} {initialName}</p>
|
||||
{/if}
|
||||
|
||||
{#if (checklist && user?.uuid == checklist?.user_id) || (user && collection && collection.shared_with.includes(user.uuid)) || !checklist}
|
||||
<form on:submit|preventDefault>
|
||||
<div class="form-control mb-2">
|
||||
<label for="name">{$t('adventures.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">{$t('adventures.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 flex flex-row">
|
||||
<input type="checkbox" bind:checked={newStatus} class="checkbox mt-4 mr-2" />
|
||||
<input
|
||||
type="text"
|
||||
id="new_item"
|
||||
placeholder={$t('checklist.new_item')}
|
||||
name="new_item"
|
||||
bind:value={newItem}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
on:keydown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
addItem();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-primary absolute right-0 mt-2.5 mr-4"
|
||||
on:click={addItem}
|
||||
>
|
||||
{$t('adventures.add')}
|
||||
</button>
|
||||
</div>
|
||||
{#if items.length > 0}
|
||||
<div class="divider"></div>
|
||||
<h2 class=" text-xl font-semibold mb-4 -mt-3">{$t('checklist.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)}
|
||||
>
|
||||
{$t('adventures.remove')}
|
||||
</button>
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<div class="modal-box w-11/12 max-w-3xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
|
||||
<h3 class="font-bold text-2xl">
|
||||
{#if checklist?.id}
|
||||
<p class="font-semibold text-md mb-2">
|
||||
{$t('checklist.checklist_editor')}
|
||||
</p>
|
||||
{:else}
|
||||
{$t('checklist.new_checklist')}
|
||||
{/if}
|
||||
</h3>
|
||||
<div class="modal-action items-center">
|
||||
<form method="post" style="width: 100%;" on:submit|preventDefault>
|
||||
<!-- Basic Information Section -->
|
||||
<div class="collapse collapse-plus bg-base-200 mb-4">
|
||||
<input type="checkbox" id="collapse-plus-1" checked />
|
||||
<div class="collapse-title text-lg font-bold">
|
||||
{$t('adventures.basic_information')}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<div class="collapse-content">
|
||||
<div class="form-control mb-2">
|
||||
<label for="name">{$t('adventures.name')}</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
class="input input-bordered w-full max-w-xs"
|
||||
bind:value={newChecklist.name}
|
||||
readonly={isReadOnly}
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control mb-2">
|
||||
<label for="content">{$t('adventures.date')}</label>
|
||||
{#if collection && collection.start_date && collection.end_date && !isReadOnly}<label
|
||||
class="label cursor-pointer flex items-start space-x-2"
|
||||
>
|
||||
<span class="label-text">{$t('adventures.date_constrain')}</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle toggle-primary"
|
||||
id="constrain_dates"
|
||||
name="constrain_dates"
|
||||
on:change={() => (constrainDates = !constrainDates)}
|
||||
/></label
|
||||
>
|
||||
{/if}
|
||||
<input
|
||||
type="date"
|
||||
id="date"
|
||||
name="date"
|
||||
min={constrainDates ? collection.start_date : ''}
|
||||
max={constrainDates ? collection.end_date : ''}
|
||||
bind:value={newChecklist.date}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
readonly={isReadOnly}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Items Section -->
|
||||
<div class="collapse collapse-plus bg-base-200 mb-4">
|
||||
<input type="checkbox" id="collapse-plus-2" checked />
|
||||
<div class="collapse-title text-lg font-bold">
|
||||
{$t('checklist.items')}
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
{#if !isReadOnly}
|
||||
<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={$t('checklist.new_item')}
|
||||
name="new_item"
|
||||
bind:value={newItem}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
on:keydown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
addItem();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-primary absolute right-0 mt-2.5 mr-4"
|
||||
on:click={addItem}
|
||||
>
|
||||
{$t('adventures.add')}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{#if items.length > 0}
|
||||
<div class="divider"></div>
|
||||
<h2 class=" text-xl font-semibold mb-4 -mt-3">{$t('checklist.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"
|
||||
readonly={isReadOnly}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
id="item_{i}"
|
||||
name="item_{i}"
|
||||
bind:value={item.name}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
readonly={isReadOnly}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-error absolute right-0 mt-2.5 mr-4"
|
||||
on:click={() => removeItem(i)}
|
||||
disabled={isReadOnly}
|
||||
>
|
||||
{$t('adventures.remove')}
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{#if warning}
|
||||
<div role="alert" class="alert alert-error">
|
||||
<svg
|
||||
|
|
@ -225,10 +273,6 @@
|
|||
<span>{warning}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button class="btn btn-primary mr-1" on:click={save}>{$t('notes.save')}</button>
|
||||
<button class="btn btn-neutral" on:click={close}>{$t('about.close')}</button>
|
||||
|
||||
{#if collection.is_public}
|
||||
<div role="alert" class="alert mt-4">
|
||||
<svg
|
||||
|
|
@ -247,60 +291,14 @@
|
|||
<span>{$t('checklist.checklist_public')}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
{:else}
|
||||
<form>
|
||||
<div class="form-control mb-2">
|
||||
<label for="name">{$t('adventures.name')}</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
class="input input-bordered w-full max-w-xs"
|
||||
bind:value={newChecklist.name}
|
||||
readonly
|
||||
/>
|
||||
|
||||
<div class="mt-4">
|
||||
<button class="btn btn-neutral" on:click={close}>{$t('about.close')}</button>
|
||||
<button class="btn btn-primary mr-1" disabled={isReadOnly} on:click={save}
|
||||
>{$t('notes.save')}</button
|
||||
>
|
||||
</div>
|
||||
<div class="form-control mb-2">
|
||||
<label for="content">{$t('adventures.date')}</label>
|
||||
<input
|
||||
type="date"
|
||||
id="date"
|
||||
name="date"
|
||||
min={collection.start_date || ''}
|
||||
max={collection.end_date || ''}
|
||||
bind:value={newChecklist.date}
|
||||
readonly
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if items.length > 0}
|
||||
<div class="divider"></div>
|
||||
<h2 class=" text-xl font-semibold mb-4 -mt-3">{$t('checklist.items')}</h2>
|
||||
{/if}
|
||||
|
||||
{#each items as item, i}
|
||||
<div class="form-control mb-2 flex flex-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={item.is_checked}
|
||||
class="checkbox mt-4 mr-2"
|
||||
readonly={true}
|
||||
disabled
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
id="item_{i}"
|
||||
name="item_{i}"
|
||||
bind:value={item.name}
|
||||
readonly
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<button class="btn btn-neutral" on:click={close}>{$t('about.close')}</button>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue