Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-23 14:59:36 +02:00
Code Issues Releases Activity

refactor: Simplify ChecklistModal component code

Browse source
This commit is contained in:
Sean Morley 2024-08-05 21:46:26 -04:00
parent 18ef919a11
commit b6628fe2b3
1 changed files with 61 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

77
frontend/src/lib/components/ChecklistModal.svelte
View file

@ -40,9 +40,9 @@
updated_at: '' updated_at: ''
} }
]; ];
if (checklist) {
newChecklist.items = items; newChecklist.items = items;
}
newItem = ''; newItem = '';
newStatus = false; newStatus = false;
warning = ''; warning = '';
@ -158,20 +158,6 @@
class="input input-bordered w-full max-w-xs mt-1" class="input input-bordered w-full max-w-xs mt-1"
/> />
</div> </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"> <div class="form-control mb-2 flex flex-row">
<input type="checkbox" bind:checked={newStatus} class="checkbox mt-4 mr-2" /> <input type="checkbox" bind:checked={newStatus} class="checkbox mt-4 mr-2" />
<input <input
@ -181,6 +167,12 @@
name="new_item" name="new_item"
bind:value={newItem} bind:value={newItem}
class="input input-bordered w-full max-w-xs mt-1" class="input input-bordered w-full max-w-xs mt-1"
on:keydown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
addItem();
}
}}
/> />
<button <button
type="button" type="button"
@ -257,7 +249,58 @@
{/if} {/if}
</form> </form>
{:else} {:else}
<!-- view only form --> <form>
<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}
readonly
/>
</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}
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">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}>Close</button>
</form>
{/if} {/if}
</div> </div>
</dialog> </dialog>