EditTask.svelte

<script>
    import Modal from "../UIComponent/Modal.svelte";
    import Button from "../UIComponent/Button.svelte";
    import TaskItems from "./task-store";
    import { writable } from "svelte/store";
    import { onDestroy, onMount } from "svelte";
    // import { debug } from "svelte/internal";

    //progress variable
    let progress = writable(0);

    //task id
    export let task = null;

    //subscribe taskItems to get latest update
    const unsubscribe = TaskItems.subscribe((tasks) => {
        if (task) {
            const targetTask = tasks.filter((t) => t.id === task.id);
            task.checkLists = targetTask[0].checkLists;
        }
    });

    onMount(() => {
        if (task.checkLists && task.checkLists.length !== 0) {
            let doneWorks = task.checkLists.filter((c) => c.done);
            progress_value = (doneWorks.length / task.checkLists.length) * 100;
            progress.set(progress_value / 100);
        }
    });

    onDestroy(() => {
        if (unsubscribe) {
            unsubscribe();
        }
    });

    //progress part
    let progress_value = 0;
    function checkListHandler(checkList_id) {
        //update checkList first
        const checkListIndex = task.checkLists.findIndex(
            (c) => c.id === checkList_id
        );
        const updateCheckList = task.checkLists[checkListIndex];
        updateCheckList.done = !task.checkLists[checkListIndex].done;
        const updateCheckLists = task.checkLists;
        updateCheckLists[checkListIndex] = updateCheckList;
        //update TaskItems
        if (task) {
            TaskItems.update((tasks) => {
                const taskIndex = tasks.findIndex((t) => t.id === task.id);
                const targetItem = tasks[taskIndex];
                targetItem.checkLists = updateCheckLists;
                const updateTask = targetItem;
                const updateTasks = tasks;
                updateTasks[taskIndex] = updateTask;
                return updateTasks;
            });
        }

        //set progress
        let doneWorks = task.checkLists.filter((c) => c.done);
        progress_value = (doneWorks.length / task.checkLists.length) * 100;
        progress.set(progress_value / 100);
    }

    let addMode = false;

    let textarea_value = "";

    function addCheckList() {
        addMode = true;
    }

    function saveCheckListHandler() {
        if (textarea_value === "") {
            return;
        }
        let newCheckList = {
            id: task.checkLists.length + 1,
            value: textarea_value,
            done: false,
        };
        TaskItems.update((tasks) => {
            console.log(task.id);
            const taskIndex = tasks.findIndex((t) => t.id === task.id);
            const targetItem = tasks[taskIndex];
            console.log(targetItem);
            targetItem.checkLists.push(newCheckList);
            const updateTask = targetItem;
            console.log(targetItem);
            const updateTasks = tasks;
            updateTasks[taskIndex] = updateTask;
            return updateTasks;
        });
        textarea_value = "";
        addMode = false;

        //reset progress
        let doneWorks = task.checkLists.filter((c) => c.done);
        progress_value = (doneWorks.length / task.checkLists.length) * 100;
        progress.set(progress_value / 100);
    }

    function cancelHandler() {
        addMode = false;
    }
</script>

<Modal on:cancel>
    <form class="form">
        <div class="check-progress">
            <lable class="percentage">{progress_value}%</lable>
            <progress value={$progress} />
        </div>
        <div>
            {#if task.checkLists}
                {#each task.checkLists as checkList (checkList.id)}
                    <label class="checkList">
                        <input
                            type="checkbox"
                            checked={checkList.done}
                            on:click={checkListHandler(checkList.id)}
                        />
                        {checkList.value}
                    </label>
                {/each}
            {/if}
        </div>
        {#if !addMode}
            <a href="#" on:click={addCheckList}>Add a checkList</a>
        {:else}
            <div>
                <div class="newTask">
                    <div class="new_task_detail">
                        <textarea
                            class="task_title"
                            placeholder="Enter a title"
                            bind:value={textarea_value}
                        />
                    </div>
                </div>
                <div class="right_side_button">
                    <Button on:click={saveCheckListHandler}>Save</Button>
                    <Button on:click={cancelHandler}>Cancel</Button>
                </div>
            </div>
        {/if}
    </form>
</Modal>