From b7e39b59fd0fc7b5610ebff29035bf622079e0d8 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Wed, 5 Oct 2022 20:45:21 +0800
Subject: refactor: Change file structure

---
 .../src/app/pages/views/entry-form/index.svelte    | 199 ---------------------
 .../views/entry-form/sections/category.svelte      |  76 --------
 .../views/entry-form/sections/date-time.svelte     | 167 -----------------
 .../pages/views/entry-form/sections/labels.svelte  |  66 -------
 4 files changed, 508 deletions(-)
 delete mode 100644 old-apps/projects/src/app/pages/views/entry-form/index.svelte
 delete mode 100644 old-apps/projects/src/app/pages/views/entry-form/sections/category.svelte
 delete mode 100644 old-apps/projects/src/app/pages/views/entry-form/sections/date-time.svelte
 delete mode 100644 old-apps/projects/src/app/pages/views/entry-form/sections/labels.svelte

(limited to 'old-apps/projects/src/app/pages/views/entry-form')

diff --git a/old-apps/projects/src/app/pages/views/entry-form/index.svelte b/old-apps/projects/src/app/pages/views/entry-form/index.svelte
deleted file mode 100644
index e43d2a9..0000000
--- a/old-apps/projects/src/app/pages/views/entry-form/index.svelte
+++ /dev/null
@@ -1,199 +0,0 @@
-<script lang="ts">
-    import LL from "$app/lib/i18n/i18n-svelte";
-    import {TimeEntryDto} from "$shared/lib/models/TimeEntryDto";
-    import {Temporal} from "@js-temporal/polyfill";
-    import {createEventDispatcher, onMount, onDestroy} from "svelte";
-    import DateTimePart from "./sections/date-time.svelte";
-    import LabelsPart from "./sections/labels.svelte";
-    import CategoryPart from "./sections/category.svelte";
-    import Button from "$shared/components/button.svelte";
-    import {Textarea} from "$shared/components/form";
-    import Alert from "$shared/components/alert.svelte";
-    import {is_guid} from "$shared/lib/helpers";
-    import {create_entry_async, edit_entry_async} from "$app/lib/stores/entries";
-
-    const dispatch = createEventDispatcher();
-
-    let formError = "";
-    let formIsLoading = false;
-    let isSubmitting = false;
-    let description = "";
-    let descriptionError = "";
-    let dateTimePart;
-    let labelsPart;
-    let categoryPart;
-    let entryId;
-
-    onMount(() => {
-        formIsLoading = true;
-
-        Promise.all([categoryPart.load_categories(), labelsPart.load_labels()]).then(() => {
-            formIsLoading = false;
-        });
-
-        window.addEventListener("keydown", handle_window_keydown);
-    });
-
-    onDestroy(() => {
-        window.removeEventListener("keydown", handle_window_keydown);
-    });
-
-    function handle_window_keydown(event) {
-        if (event.ctrlKey && event.code === "Enter") {
-            submit_form();
-        }
-    }
-
-    function validate_form() {
-        return dateTimePart.is_valid() && categoryPart.is_valid() && description_is_valid();
-    }
-
-    function description_is_valid() {
-        if (!description) {
-            descriptionError = $LL.views.entryForm.errDescriptionReq();
-        } else {
-            descriptionError = "";
-        }
-
-        return description;
-    }
-
-    function get_payload() {
-        const response = {} as TimeEntryDto;
-        const values = get_values();
-        if (!is_guid(values.id)) {
-            delete values.id;
-        } else {
-            response.id = values.id;
-        }
-
-        const currentTimeZone = Temporal.Now.zonedDateTimeISO().offset;
-        response.start = values.date + "T" + values.fromTimeValue + currentTimeZone.toString();
-        response.stop = values.date + "T" + values.toTimeValue + currentTimeZone.toString();
-
-        response.category = {
-            id: values.category.id,
-        };
-
-        const selectedLabels = values.labels;
-        if (selectedLabels?.length > 0 ?? false) {
-            response.labels = selectedLabels;
-        }
-
-        const descriptionContent = description?.trim();
-        if (descriptionContent?.length > 0 ?? false) {
-            response.description = descriptionContent;
-        }
-
-        return response;
-    }
-
-    async function submit_form() {
-        formError = "";
-        if (validate_form()) {
-            const payload = get_payload() as TimeEntryDto;
-            isSubmitting = true;
-            if (is_guid(payload.id)) {
-                const response = await edit_entry_async(payload);
-                if (response.ok) {
-                    functions.reset();
-                    dispatch("updated", response.data);
-                } else {
-                    formError = $LL.views.entryForm.entryUpdateError();
-                    isSubmitting = false;
-                }
-            } else {
-                const response = await create_entry_async(payload);
-                if (response.ok) {
-                    functions.reset();
-                    dispatch("created");
-                } else {
-                    formError = $LL.views.entryForm.entryCreateError();
-                    isSubmitting = false;
-                }
-            }
-        }
-    }
-
-    function get_values() {
-        return {
-            id: entryId,
-            toTimeValue: dateTimePart.get_to_time_value(),
-            fromTimeValue: dateTimePart.get_from_time_value(),
-            date: dateTimePart.get_date(),
-            category: categoryPart.get_selected(),
-            labels: labelsPart.get_selected(),
-            description: description,
-        };
-    }
-
-    export const functions = {
-        set_values(values) {
-            entryId = values.id;
-            dateTimePart.set_values(values);
-            labelsPart.select_labels(values?.labels.map((c) => c.id) ?? []);
-            categoryPart.select_category(values?.category?.id);
-            description = values.description;
-        },
-        set_time(value: {to: Temporal.PlainTime, from: Temporal.PlainTime}) {
-            dateTimePart.set_times(value);
-        },
-        set_description(value: string) {
-            if (description) description = description + "\n\n" + value;
-            else description = value;
-        },
-        reset() {
-            isSubmitting = false;
-            formIsLoading = false;
-            entryId = "";
-            labelsPart.reset();
-            categoryPart.reset();
-            dateTimePart.reset(true);
-            description = "";
-            formError = "";
-        },
-    };
-</script>
-
-<form on:submit|preventDefault={submit_form}
-      on:reset={() => functions.reset()}>
-    <div class="margin-y-sm">
-        <Alert visible={formError !== ""}
-               message={formError}
-               type="error"/>
-    </div>
-
-    <div class="margin-bottom-sm">
-        <DateTimePart bind:functions={dateTimePart}/>
-    </div>
-
-    <div class="margin-bottom-sm">
-        <CategoryPart bind:functions={categoryPart}/>
-    </div>
-
-    <div class="margin-bottom-sm">
-        <LabelsPart bind:functions={labelsPart}/>
-    </div>
-
-    <div class="margin-bottom-sm">
-        <Textarea class="width-100%"
-                  id="description"
-                  label="{$LL.views.entryForm.description()}"
-                  errorText="{descriptionError}"
-                  bind:value={description}></Textarea>
-    </div>
-
-    <div class="flex flex-row justify-end gap-x-xs">
-        {#if entryId}
-            <Button text="{$LL.views.entryForm.reset()}"
-                    on:click={() => functions.reset()}
-                    variant="subtle"
-            />
-        {/if}
-        <Button loading={isSubmitting}
-                type="submit"
-                variant="primary"
-                text={entryId ? $LL.views.entryForm.save() : $LL.views.entryForm.create()}
-        />
-    </div>
-</form>
diff --git a/old-apps/projects/src/app/pages/views/entry-form/sections/category.svelte b/old-apps/projects/src/app/pages/views/entry-form/sections/category.svelte
deleted file mode 100644
index f7af382..0000000
--- a/old-apps/projects/src/app/pages/views/entry-form/sections/category.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<script>
-	import {generate_random_hex_color} from "$shared/lib/colors";
-	import Dropdown from "$shared/components/dropdown.svelte";
-	import {is_guid, move_focus} from "$shared/lib/helpers";
-	import categories, {reload_categories, create_category_async} from "$app/lib/stores/categories";
-	import LL from "$app/lib/i18n/i18n-svelte"
-
-	let categoriesError = "";
-	let loading = false;
-
-	let DropdownExports;
-
-	function reset() {
-		DropdownExports.reset();
-		categoriesError = "";
-		console.log($LL.views.entryForm.category._logReset());
-	}
-
-	async function on_create({name}) {
-		loading = true;
-		const response = await create_category_async({
-			name: name,
-			color: generate_random_hex_color(),
-		});
-		loading = false;
-		if (response.ok) {
-			// Small pause to allow loading state to update everywhere.
-			setTimeout(() => select_category(response.data.id), 50);
-		}
-	}
-
-	function get_selected() {
-		return $categories.find((c) => c.selected === true);
-	}
-
-	function select_category(id) {
-		DropdownExports.select(id);
-	}
-
-	function is_valid() {
-		let isValid = true;
-		const category = get_selected();
-		if (!is_guid(category?.id)) {
-			categoriesError = $LL.views.entryForm.category.errisRequired();
-			isValid = false;
-			move_focus(document.getElementById("category-dropdown"));
-		} else {
-			categoriesError = "";
-		}
-		return isValid;
-	}
-
-	export const functions = {
-		get_selected,
-		reset,
-		is_valid,
-		select_category,
-		load_categories: reload_categories,
-	};
-</script>
-
-<Dropdown
-        entries={$categories}
-        label="{$LL.views.entryForm.category.category()}"
-        maxlength="50"
-        createable={true}
-        placeholder="{$LL.views.entryForm.category.placeholder()}"
-        id="category-dropdown"
-        loading={loading}
-        name="category-dropdown"
-        on_create_async={on_create}
-        noResultsText="{$LL.views.entryForm.category.noResults()}"
-        errorText="{categoriesError}"
-        bind:this={DropdownExports}
-/>
-
diff --git a/old-apps/projects/src/app/pages/views/entry-form/sections/date-time.svelte b/old-apps/projects/src/app/pages/views/entry-form/sections/date-time.svelte
deleted file mode 100644
index b91f1a4..0000000
--- a/old-apps/projects/src/app/pages/views/entry-form/sections/date-time.svelte
+++ /dev/null
@@ -1,167 +0,0 @@
-<script lang="ts">
-    import LL from "$app/lib/i18n/i18n-svelte";
-    import { Temporal } from "@js-temporal/polyfill";
-
-    // TIME
-    let fromTimeValue = "";
-    let fromTimeError = "";
-    let toTimeValue = "";
-    let toTimeError = "";
-
-    function handle_from_time_changed(e) {
-        fromTimeValue = e.target.value;
-        if (fromTimeValue) {
-            fromTimeError = "";
-        }
-    }
-
-    function handle_to_time_changed(e) {
-        toTimeValue = e.target.value;
-        if (toTimeValue) {
-            toTimeError = "";
-        }
-    }
-
-    // DATE
-    let date = Temporal.Now.plainDateTimeISO().toString().substring(0, 10);
-    let dateError = "";
-
-    function is_valid() {
-        let isValid = true;
-        let focusIsSet = false;
-        if (!date) {
-            dateError = $LL.views.entryForm.dateTime.errDateIsRequired();
-            isValid = false;
-            if (!focusIsSet) {
-                document.getElementById("date")?.focus();
-                focusIsSet = true;
-            }
-        } else {
-            dateError = "";
-        }
-
-        if (!fromTimeValue) {
-            fromTimeError = $LL.views.entryForm.dateTime.errFromIsRequired();
-            isValid = false;
-            if (!focusIsSet) {
-                document.getElementById("from")?.focus();
-                focusIsSet = true;
-            }
-        } else if (toTimeValue && fromTimeValue > toTimeValue) {
-            fromTimeError = $LL.views.entryForm.dateTime.errFromAfterTo();
-            isValid = false;
-            if (!focusIsSet) {
-                document.getElementById("from")?.focus();
-                focusIsSet = true;
-            }
-        } else if (fromTimeValue === toTimeValue) {
-            fromTimeError = $LL.views.entryForm.dateTime.errFromEqTo();
-
-            isValid = false;
-            if (!focusIsSet) {
-                document.getElementById("from")?.focus();
-                focusIsSet = true;
-            }
-        } else {
-            fromTimeError = "";
-        }
-
-        if (!toTimeValue) {
-            toTimeError = $LL.views.entryForm.dateTime.errToIsRequired();
-            isValid = false;
-            if (!focusIsSet) {
-                document.getElementById("to")?.focus();
-                focusIsSet = true;
-            }
-        } else if (fromTimeValue && toTimeValue < fromTimeValue) {
-            toTimeError = $LL.views.entryForm.dateTime.errToBeforeFrom();
-            isValid = false;
-            if (!focusIsSet) {
-                document.getElementById("to")?.focus();
-                focusIsSet = true;
-            }
-        } else {
-            toTimeError = "";
-        }
-
-        return isValid;
-    }
-
-    export const functions = {
-        get_from_time_value() {
-            return fromTimeValue;
-        },
-        get_to_time_value() {
-            return toTimeValue;
-        },
-        get_date() {
-            return date;
-        },
-        is_valid,
-        reset(focusDate = false) {
-            fromTimeValue = "";
-            toTimeValue = "";
-            if (focusDate) {
-                document.getElementById("date")?.focus();
-            }
-            console.log($LL.views.entryForm.dateTime._logReset());
-        },
-        set_times(value) {
-            fromTimeValue = value.from.toPlainTime().toString().substring(0, 5);
-            toTimeValue = value.to.toPlainTime().toString().substring(0, 5);
-        },
-        set_date(new_date: Temporal.PlainDate) {
-            date = new_date.toString();
-        },
-        set_values(values) {
-            const currentTimeZone = Temporal.Now.timeZone().id;
-            const startDate = Temporal.Instant.from(values.start);
-            const stopDate = Temporal.Instant.from(values.stop);
-            fromTimeValue = startDate.toZonedDateTimeISO(currentTimeZone).toPlainTime().toString().substring(0, 5);
-            toTimeValue = stopDate.toZonedDateTimeISO(currentTimeZone).toPlainTime().toString().substring(0, 5);
-            date = startDate.toZonedDateTimeISO(currentTimeZone).toPlainDate().toString();
-        }
-    };
-</script>
-
-<div class="grid gap-xs">
-    <div class="col-4">
-        <label for="date"
-               class="form-label margin-bottom-xxs">{$LL.views.entryForm.dateTime.date()}</label>
-        <input type="date"
-               id="date"
-               class="form-control width-100%"
-               bind:value={date}>
-        {#if dateError}
-            <small class="color-error">{dateError}</small>
-        {/if}
-    </div>
-    <div class="col-4">
-        <label for="from"
-               class="form-label margin-bottom-xxs">{$LL.views.entryForm.dateTime.from()}</label>
-        <input id="from"
-               class="form-control width-100%"
-               pattern="[0-9][0-9]:[0-9][0-9]"
-               type="time"
-               bind:value={fromTimeValue}
-               on:input={handle_from_time_changed}
-        />
-        {#if fromTimeError}
-            <small class="color-error">{fromTimeError}</small>
-        {/if}
-    </div>
-    <div class="col-4">
-        <label for="to"
-               class="form-label margin-bottom-xxs">{$LL.views.entryForm.dateTime.to()}</label>
-        <input id="to"
-               class="form-control  width-100%"
-               pattern="[0-9][0-9]:[0-9][0-9]"
-               type="time"
-               bind:value={toTimeValue}
-               on:input={handle_to_time_changed}
-        />
-        {#if toTimeError}
-            <small class="color-error">{toTimeError}</small>
-        {/if}
-    </div>
-</div>
diff --git a/old-apps/projects/src/app/pages/views/entry-form/sections/labels.svelte b/old-apps/projects/src/app/pages/views/entry-form/sections/labels.svelte
deleted file mode 100644
index a6f324b..0000000
--- a/old-apps/projects/src/app/pages/views/entry-form/sections/labels.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-<script>
-	import LL from "$app/lib/i18n/i18n-svelte";
-	import {generate_random_hex_color} from "$shared/lib/colors";
-	import labels, {reload_labels, create_label_async} from "$app/lib/stores/labels";
-	import Dropdown from "$shared/components/dropdown.svelte";
-
-	let labelsError = "";
-	let loading = false;
-	let DropdownExports;
-
-	function reset() {
-		DropdownExports.reset();
-		console.log($LL.views.entryForm.labels._logReset());
-	}
-
-	function get_selected() {
-		return $labels.filter((c) => Object.hasOwn(c, "selected") && c.selected === true);
-	}
-
-	function select_label(id) {
-		DropdownExports.select(id);
-	}
-
-	function select_labels(ids) {
-		for (const id of ids) {
-			DropdownExports.select(id);
-		}
-	}
-
-	async function on_create({name}) {
-		loading = true;
-		const response = await create_label_async({
-			name: name,
-			color: generate_random_hex_color(),
-		});
-		loading = false;
-		if (response.ok) {
-			// Small pause to allow loading state to update everywhere.
-			setTimeout(() => select_label(response.data.id), 50);
-		}
-	}
-
-	export const functions = {
-		get_selected,
-		reset,
-		load_labels: reload_labels,
-		select_labels,
-		select_label,
-	};
-</script>
-
-<Dropdown
-        entries={$labels}
-        label="{$LL.views.entryForm.labels.labels()}"
-        maxlength="50"
-        createable={true}
-        placeholder="{$LL.views.entryForm.labels.placeholder()}"
-        multiple="{true}"
-        id="labels-search"
-        name="labels-search"
-        on_create_async={on_create}
-        noResultsText="{$LL.views.entryForm.labels.placeholder()}"
-        errorText="{labelsError}"
-        bind:this={DropdownExports}
-        {loading}
-/>
-- 
cgit v1.3