From a8b44b09a404aee477e735501b828d1b14aad311 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Tue, 7 Jun 2022 01:33:52 +0200
Subject: feat: Add inital translation support

---
 .../src/app/pages/views/entry-form/index.svelte    |  13 +-
 .../views/entry-form/sections/category.svelte      |  11 +-
 .../views/entry-form/sections/date-time.svelte     | 233 +++++++++++----------
 .../pages/views/entry-form/sections/labels.svelte  |   9 +-
 4 files changed, 136 insertions(+), 130 deletions(-)

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

diff --git a/apps/projects/src/app/pages/views/entry-form/index.svelte b/apps/projects/src/app/pages/views/entry-form/index.svelte
index cb974ed..cf3d173 100644
--- a/apps/projects/src/app/pages/views/entry-form/index.svelte
+++ b/apps/projects/src/app/pages/views/entry-form/index.svelte
@@ -1,4 +1,5 @@
 <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";
@@ -48,7 +49,7 @@
 
     function description_is_valid() {
         if (!description) {
-            descriptionError = "Description is required";
+            descriptionError = $LL.views.entryForm.errDescriptionReq();
         } else {
             descriptionError = "";
         }
@@ -97,7 +98,7 @@
                     functions.reset();
                     dispatch("updated", response.data);
                 } else {
-                    formError = "An error occured while updating the entry, try again soon";
+                    formError = $LL.views.entryForm.entryUpdateError();
                     formIsLoading = false;
                 }
             } else {
@@ -106,7 +107,7 @@
                     functions.reset();
                     dispatch("created");
                 } else {
-                    formError = "An error occured while creating the entry, try again soon";
+                    formError = $LL.views.entryForm.entryCreateError();
                     formIsLoading = false;
                 }
             }
@@ -175,14 +176,14 @@
     <div class="margin-bottom-sm">
         <Textarea class="width-100%"
                   id="description"
-                  label="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="Reset"
+            <Button text="{$LL.views.entryForm.reset()}"
                     on:click={() => functions.reset()}
                     variant="subtle"
             />
@@ -190,7 +191,7 @@
         <Button loading={formIsLoading}
                 type="submit"
                 variant="primary"
-                text={entryId ? "Save" : "Create"}
+                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
index aac84be..f7af382 100644
--- a/apps/projects/src/app/pages/views/entry-form/sections/category.svelte
+++ b/apps/projects/src/app/pages/views/entry-form/sections/category.svelte
@@ -3,6 +3,7 @@
 	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;
@@ -12,7 +13,7 @@
 	function reset() {
 		DropdownExports.reset();
 		categoriesError = "";
-		console.log("Reset category-part");
+		console.log($LL.views.entryForm.category._logReset());
 	}
 
 	async function on_create({name}) {
@@ -40,7 +41,7 @@
 		let isValid = true;
 		const category = get_selected();
 		if (!is_guid(category?.id)) {
-			categoriesError = "Category is required";
+			categoriesError = $LL.views.entryForm.category.errisRequired();
 			isValid = false;
 			move_focus(document.getElementById("category-dropdown"));
 		} else {
@@ -60,15 +61,15 @@
 
 <Dropdown
         entries={$categories}
-        label="Category"
+        label="{$LL.views.entryForm.category.category()}"
         maxlength="50"
         createable={true}
-        placeholder="Search or create"
+        placeholder="{$LL.views.entryForm.category.placeholder()}"
         id="category-dropdown"
         loading={loading}
         name="category-dropdown"
         on_create_async={on_create}
-        noResultsText="No categories available (Create a new one by searching for it)"
+        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
index c91e014..47b06e3 100644
--- 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
@@ -1,131 +1,134 @@
 <script lang="ts">
-	import {Temporal} from "@js-temporal/polyfill";
+    import LL from "$app/lib/i18n/i18n-svelte";
+    import {Temporal} from "@js-temporal/polyfill";
 
-	// TIME
-	let fromTimeValue = "";
-	let fromTimeError = "";
-	let toTimeValue = "";
-	let toTimeError = "";
+    // TIME
+    let fromTimeValue = "";
+    let fromTimeError = "";
+    let toTimeValue = "";
+    let toTimeError = "";
 
-	function handle_from_time_changed(e) {
-		fromTimeValue = e.target.value;
-		if (fromTimeValue) {
-			fromTimeError = "";
-		}
-	}
+    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 = "";
-		}
-	}
+    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 = "";
+    // DATE
+    let date = Temporal.Now.plainDateTimeISO().toString().substring(0, 10);
+    let dateError = "";
 
-	function is_valid() {
-		let isValid = true;
-		let focusIsSet = false;
-		if (!date) {
-			dateError = "Date is required";
-			isValid = false;
-			if (!focusIsSet) {
-				document.getElementById("date")?.focus();
-				focusIsSet = true;
-			}
-		} else {
-			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 = "From is required";
-			isValid = false;
-			if (!focusIsSet) {
-				document.getElementById("from")?.focus();
-				focusIsSet = true;
-			}
-		} else if (toTimeValue && fromTimeValue > toTimeValue) {
-			fromTimeError = "From can not be after To";
-			isValid = false;
-			if (!focusIsSet) {
-				document.getElementById("from")?.focus();
-				focusIsSet = true;
-			}
-		} else if (fromTimeValue === toTimeValue) {
-			fromTimeError = "From and To can not be equal";
-			isValid = false;
-			if (!focusIsSet) {
-				document.getElementById("from")?.focus();
-				focusIsSet = true;
-			}
-		} else {
-			fromTimeError = "";
-		}
+        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();
 
-		if (!toTimeValue) {
-			toTimeError = "To is required";
-			isValid = false;
-			if (!focusIsSet) {
-				document.getElementById("to")?.focus();
-				focusIsSet = true;
-			}
-		} else if (fromTimeValue && toTimeValue < fromTimeValue) {
-			toTimeError = "To can not be before From";
-			isValid = false;
-			if (!focusIsSet) {
-				document.getElementById("to")?.focus();
-				focusIsSet = true;
-			}
-		} else {
-			toTimeError = "";
-		}
+            isValid = false;
+            if (!focusIsSet) {
+                document.getElementById("from")?.focus();
+                focusIsSet = true;
+            }
+        } else {
+            fromTimeError = "";
+        }
 
-		return isValid;
-	}
+        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 = "";
+        }
 
-	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();
-			}
-		},
-		set_times(value) {
-			console.log(value);
-			fromTimeValue = value.from.toString().substring(0, 5);
-			toTimeValue = value.to.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();
-		}
-	};
+        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) {
+            console.log(value);
+            fromTimeValue = value.from.toString().substring(0, 5);
+            toTimeValue = value.to.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">Date</label>
+               class="form-label margin-bottom-xxs">{$LL.views.entryForm.dateTime.date()}</label>
         <input type="date"
                id="date"
                class="form-control width-100%"
@@ -136,7 +139,7 @@
     </div>
     <div class="col-4">
         <label for="from"
-               class="form-label margin-bottom-xxs">From</label>
+               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]"
@@ -150,7 +153,7 @@
     </div>
     <div class="col-4">
         <label for="to"
-               class="form-label margin-bottom-xxs">To</label>
+               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]"
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
index f0853cc..a6f324b 100644
--- a/apps/projects/src/app/pages/views/entry-form/sections/labels.svelte
+++ b/apps/projects/src/app/pages/views/entry-form/sections/labels.svelte
@@ -1,4 +1,5 @@
 <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";
@@ -9,7 +10,7 @@
 
 	function reset() {
 		DropdownExports.reset();
-		console.log("Reset labels-part");
+		console.log($LL.views.entryForm.labels._logReset());
 	}
 
 	function get_selected() {
@@ -50,15 +51,15 @@
 
 <Dropdown
         entries={$labels}
-        label="Labels"
+        label="{$LL.views.entryForm.labels.labels()}"
         maxlength="50"
         createable={true}
-        placeholder="Search or create"
+        placeholder="{$LL.views.entryForm.labels.placeholder()}"
         multiple="{true}"
         id="labels-search"
         name="labels-search"
         on_create_async={on_create}
-        noResultsText="No labels available (Create a new one by searching for it)"
+        noResultsText="{$LL.views.entryForm.labels.placeholder()}"
         errorText="{labelsError}"
         bind:this={DropdownExports}
         {loading}
-- 
cgit v1.3