web_lib

commit 55c417af23209ba8dfe796b2eab69c3eef2a5d86
parent 22072f825e11cc176bf79a14685e82b54f208e89
Author: triesap <137732411+triesap@users.noreply.github.com>
Date:   Wed, 11 Sep 2024 17:24:19 +0000

apps-lib: edit input select allowing optional id, edit nav component

Diffstat:
M
apps-lib/src/lib/components/input_select.svelte
 | 
5
+++--
M
apps-lib/src/lib/components/nav.svelte
 | 
52
+++++++++++++++++++++++++++++++---------------------
M
apps-lib/src/lib/locales/en/common.json
 | 
1
+
M
apps-lib/src/lib/types/components.ts
 | 
10
++++++----

4 files changed, 41 insertions(+), 27 deletions(-)
diff --git a/apps-lib/src/lib/components/input_select.svelte b/apps-lib/src/lib/components/input_select.svelte
@@ -25,7 +25,8 @@
 
     onMount(async () => {
         try {
-            if (basis.sync) await kv.set(basis.id, basis.options[0].value);
+            if (basis.sync && basis.id)
+                await kv.set(basis.id, basis.options[0].value);
         } catch (e) {
             console.log(`e `, e);
         }
@@ -46,7 +47,7 @@
             class={`${fmt_cl(basis.classes)} z-10 form-select form-line-select text-layer-${layer}-glyph`}
             on:change={async ({ currentTarget: el }) => {
                 const val = el.value;
-                if (basis.sync) await kv.set(basis.id, val);
+                if (basis.sync && basis.id) await kv.set(basis.id, val);
                 if (basis.callback) await basis.callback(val);
             }}
         >
diff --git a/apps-lib/src/lib/components/nav.svelte b/apps-lib/src/lib/components/nav.svelte
@@ -9,6 +9,7 @@
         Glyph,
         type INavBasis,
     } from "$lib";
+    import Loading from "$lib/ui/loading.svelte";
     import { onDestroy, onMount } from "svelte";
 
     export let basis: INavBasis;
@@ -48,6 +49,7 @@
             <button
                 class={`col-span-4 flex flex-row h-full pl-2 justify-start items-center`}
                 on:click={async () => {
+                    if (basis.prev.callback) await basis.prev.callback();
                     await goto(basis.prev.route);
                 }}
             >
@@ -93,27 +95,35 @@
                 class={`col-span-4 flex flex-row h-full justify-end items-center`}
             >
                 {#if basis.option}
-                    <button
-                        class={`col-span-4 flex flex-row h-full pr-6 gap-2 justify-end items-center`}
-                        on:click={async () => {
-                            await basis.option?.callback();
-                        }}
-                    >
-                        {#if `glyph` in basis.option && basis.option.glyph}
-                            <Glyph
-                                basis={{
-                                    ...basis.option.glyph,
-                                }}
-                            />
-                        {/if}
-                        {#if `label` in basis.option && basis.option.label}
-                            <p
-                                class={`${fmt_cl(basis.option.label.classes)} font-sans text-navPrevious text-layer-1-glyph-hl group-active:opacity-60 transition-opacity`}
-                            >
-                                {basis.option.label.value}
-                            </p>
-                        {/if}
-                    </button>
+                    {#if basis.option.loading}
+                        <div
+                            class={`flex flex-row pr-4 justify-center items-center`}
+                        >
+                            <Loading />
+                        </div>
+                    {:else}
+                        <button
+                            class={`col-span-4 flex flex-row h-full pr-6 gap-2 justify-end items-center`}
+                            on:click={async () => {
+                                await basis.option?.callback();
+                            }}
+                        >
+                            {#if `glyph` in basis.option && basis.option.glyph}
+                                <Glyph
+                                    basis={{
+                                        ...basis.option.glyph,
+                                    }}
+                                />
+                            {/if}
+                            {#if `label` in basis.option && basis.option.label}
+                                <p
+                                    class={`${fmt_cl(basis.option.label.classes)} font-sans text-navPrevious text-layer-1-glyph-hl group-active:opacity-60 transition-opacity`}
+                                >
+                                    {basis.option.label.value}
+                                </p>
+                            {/if}
+                        </button>
+                    {/if}
                 {:else}
                     <Fill />
                 {/if}
diff --git a/apps-lib/src/lib/locales/en/common.json b/apps-lib/src/lib/locales/en/common.json
@@ -1,5 +1,6 @@
 {
     "other": "Other",
+    "add_current_location": "Add current location",
     "add_new_location": "Add new location",
     "no_locations_saved": "No locations saved",
     "no_items_to_display": "No items to display",
diff --git a/apps-lib/src/lib/types/components.ts b/apps-lib/src/lib/types/components.ts
@@ -1,4 +1,4 @@
-import type { CallbackPromise, CallbackPromiseGeneric, ICb, ICbGOpt, IClOpt, IGl, IGlOpt, ILabelFieldsOpt, ILabelOpt, ILabelOptFieldsOpt, ILyOpt, ILyOptTs } from "./client";
+import type { CallbackPromise, CallbackPromiseGeneric, ICb, ICbGOpt, ICbOpt, IClOpt, IGl, IGlOpt, ILabelFieldsOpt, ILabelOpt, ILabelOptFieldsOpt, ILyOpt, ILyOptTs } from "./client";
 import type { GlyphKey, GlyphWeight, IGlyph } from "./ui";
 
 export type ITabsBasisList = {
@@ -45,7 +45,7 @@ export type IInputSelectBasisOption = {
 
 export type IInputSelectBasis = IClOpt & ILyOptTs & ICbGOpt<string> & {
     classes_wrap?: string;
-    id: string;
+    id?: string;
     label?: string;
     hidden?: boolean;
     hide_arrows?: boolean;
@@ -77,13 +77,15 @@ export type IEnvelopeTitledBasis = {
 };
 
 export type INavBasis = {
-    prev: {
+    prev: ICbOpt & {
         label?: string;
         route: string;
     };
     title?: {
         label: string;
     };
-    option?: ICb & IGlOpt & ILabelOpt;
+    option?: ICb & IGlOpt & ILabelOpt & {
+        loading?: boolean;
+    };
 };