feat: Move old apps into it's own directory

4 files changed, 508 insertions, 0 deletions

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
new file mode 100644
index 0000000..e43d2a9
--- /dev/null
+++ b/old-apps/projects/src/app/pages/views/entry-form/index.svelte
@@ -0,0 +1,199 @@
+<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
new file mode 100644
index 0000000..f7af382
--- /dev/null
+++ b/old-apps/projects/src/app/pages/views/entry-form/sections/category.svelte
@@ -0,0 +1,76 @@
+<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
new file mode 100644
index 0000000..b91f1a4
--- /dev/null
+++ b/old-apps/projects/src/app/pages/views/entry-form/sections/date-time.svelte
@@ -0,0 +1,167 @@
+<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
new file mode 100644
index 0000000..a6f324b
--- /dev/null
+++ b/old-apps/projects/src/app/pages/views/entry-form/sections/labels.svelte
@@ -0,0 +1,66 @@
+<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}
+/>