diff options
Diffstat (limited to 'apps/projects/src/app/pages/views/entry-form')
4 files changed, 0 insertions, 508 deletions
diff --git a/apps/projects/src/app/pages/views/entry-form/index.svelte b/apps/projects/src/app/pages/views/entry-form/index.svelte deleted file mode 100644 index e43d2a9..0000000 --- a/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/apps/projects/src/app/pages/views/entry-form/sections/category.svelte b/apps/projects/src/app/pages/views/entry-form/sections/category.svelte deleted file mode 100644 index f7af382..0000000 --- a/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/apps/projects/src/app/pages/views/entry-form/sections/date-time.svelte b/apps/projects/src/app/pages/views/entry-form/sections/date-time.svelte deleted file mode 100644 index b91f1a4..0000000 --- a/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/apps/projects/src/app/pages/views/entry-form/sections/labels.svelte b/apps/projects/src/app/pages/views/entry-form/sections/labels.svelte deleted file mode 100644 index a6f324b..0000000 --- a/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} -/> |