Fix modalCard removal and update
This commit is contained in:
parent
3c505670ed
commit
838031c75c
|
@ -1,10 +1,11 @@
|
|||
<script lang="ts">
|
||||
import currentDraggedCard from '$lib/stores/currentDraggedCard';
|
||||
import currentModalCard from '$lib/stores/currentModalCard';
|
||||
import type Card from '$lib/types/Card';
|
||||
import ModalCard from './ModalCard.svelte';
|
||||
|
||||
export let card: Card;
|
||||
|
||||
let showModal = false;
|
||||
</script>
|
||||
|
||||
<div
|
||||
|
@ -12,15 +13,13 @@
|
|||
tabindex="0"
|
||||
draggable={true}
|
||||
on:dragstart={() => currentDraggedCard.set(card)}
|
||||
on:click={() => currentModalCard.set(card.id)}
|
||||
on:click={() => (showModal = true)}
|
||||
role="button"
|
||||
on:keydown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
currentModalCard.set(card.id);
|
||||
}
|
||||
if (e.key === 'Enter') showModal = true;
|
||||
}}
|
||||
>
|
||||
<div class="title">{card.title}</div>
|
||||
<div class="title">{card.id} - {card.title}</div>
|
||||
<div class="tags">
|
||||
{#each card.cardTags as tag}
|
||||
{#if tag.option}
|
||||
|
@ -32,7 +31,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<ModalCard {card} />
|
||||
{#if showModal}
|
||||
<ModalCard {card} bind:showModal />
|
||||
{/if}
|
||||
|
||||
<style lang="less">
|
||||
.card {
|
||||
|
|
|
@ -2,11 +2,11 @@
|
|||
import CloseIcon from '$lib/components/icons/CloseIcon.svelte';
|
||||
import TrashIcon from '$lib/components/icons/TrashIcon.svelte';
|
||||
import ModalTags from '$lib/components/tags/ModalTags.svelte';
|
||||
import currentModalCard from '$lib/stores/currentModalCard';
|
||||
import type Card from '$lib/types/Card';
|
||||
import { cards } from '$lib/types/Card';
|
||||
|
||||
export let card: Card;
|
||||
export let showModal: boolean;
|
||||
|
||||
let newTitle = card.title;
|
||||
let newContent = card.content;
|
||||
|
@ -15,41 +15,44 @@
|
|||
if (card.title !== newTitle || card.content !== newContent) {
|
||||
if (!(await card.update(newTitle, newContent))) return;
|
||||
}
|
||||
if (closeModal) currentModalCard.set(null);
|
||||
if (closeModal) showModal = false;
|
||||
|
||||
cards.reload();
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if $currentModalCard == card.id}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div class="modal" on:click={() => save(true)}>
|
||||
<div class="content" on:click|stopPropagation>
|
||||
<div class="header">
|
||||
<input class="title" bind:value={newTitle} on:blur={() => save(false)} />
|
||||
<div class="buttons">
|
||||
<button on:click={() => card.delete()}>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
<button on:click={() => currentModalCard.set(null)}>
|
||||
<CloseIcon />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<ModalTags {card} />
|
||||
</div>
|
||||
<div class="body">
|
||||
<textarea
|
||||
bind:value={newContent}
|
||||
placeholder="Add a description"
|
||||
on:blur={() => save(false)}
|
||||
/>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div class="modal" on:click={() => save(true)}>
|
||||
<div class="content" on:click|stopPropagation>
|
||||
<div class="header">
|
||||
<input class="title" bind:value={newTitle} on:blur={() => save(false)} />
|
||||
<div class="buttons">
|
||||
<button
|
||||
on:click={async () => {
|
||||
await card.delete();
|
||||
showModal = false;
|
||||
}}
|
||||
>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
<button on:click={() => (showModal = false)}>
|
||||
<CloseIcon />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<ModalTags {card} />
|
||||
</div>
|
||||
<div class="body">
|
||||
<textarea
|
||||
bind:value={newContent}
|
||||
placeholder="Add a description"
|
||||
on:blur={() => save(false)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="less">
|
||||
.modal {
|
||||
|
|
|
@ -45,8 +45,10 @@
|
|||
<nav class:hidden={!isVisible}>
|
||||
<div>
|
||||
<div id="branding">
|
||||
<span id="title">Focus.</span>
|
||||
<span id="version">v0.0.1</span>
|
||||
<a href="/">
|
||||
<span id="title">Focus.</span>
|
||||
<span id="version">v0.0.1</span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="views">
|
||||
<h2>{project.title}</h2>
|
||||
|
|
|
@ -1,8 +0,0 @@
|
|||
import { writable } from 'svelte/store';
|
||||
|
||||
const { subscribe, set, update } = writable(null as number | null);
|
||||
|
||||
export default {
|
||||
subscribe,
|
||||
set
|
||||
};
|
Loading…
Reference in New Issue