profile-edit.svelte (3174B)
1 <script lang="ts"> 2 import { FloatPage, InputPwa, LayoutPage, LayoutView, NavigationTabs } from "$lib"; 3 import ButtonRoundNav from "$lib/components/button/button-round-nav.svelte"; 4 import type { LibContext } from "$lib/types/context"; 5 import type { IViewBasis } from "$lib/types/views"; 6 import type { 7 IViewProfileEditData, 8 ViewProfileEditFieldKey, 9 } from "$lib/types/views/profile"; 10 import { idb_kv_init_page } from "$lib/utils/keyval"; 11 import { 12 type ElementCallbackValue, 13 Flex, 14 fmt_id, 15 get_context, 16 } from "@radroots/apps-lib"; 17 import { type CallbackPromiseGeneric, handle_err } from "@radroots/utils"; 18 import { onMount } from "svelte"; 19 20 const { ls } = get_context<LibContext>(`lib`); 21 22 let { 23 basis, 24 val_field = $bindable(``), 25 }: { 26 basis: IViewBasis<{ 27 data?: IViewProfileEditData; 28 on_handle_back: CallbackPromiseGeneric<{ 29 field: ViewProfileEditFieldKey; 30 public_key: string; 31 }>; 32 on_handle_input: ElementCallbackValue; 33 }>; 34 val_field: string; 35 } = $props(); 36 37 const PARAM: Record<ViewProfileEditFieldKey, { placeholder: string }> = { 38 name: { 39 placeholder: `${$ls(`icu.enter_*`, { value: `profile username` })}`, // @todo 40 }, 41 display_name: { 42 placeholder: `${$ls(`icu.enter_*`, { 43 value: `profile display name`, 44 })}`, // @todo 45 }, 46 about: { 47 placeholder: `${$ls(`icu.enter_*`, { value: `profile bio` })}`, // @todo 48 }, 49 }; 50 51 onMount(async () => { 52 try { 53 if (!basis.kv_init_prevent) await idb_kv_init_page(); 54 } catch (e) { 55 handle_err(e, `on_mount`); 56 } 57 }); 58 59 const input_placeholder = $derived( 60 basis.data?.field ? PARAM[basis.data.field]?.placeholder : ``, 61 ); 62 </script> 63 64 {#if basis.data} 65 {@const { data: basis_data } = basis} 66 <LayoutView> 67 <LayoutPage> 68 <div class={`flex flex-row h-20 w-full justify-start items-center`}> 69 <Flex /> 70 </div> 71 {#if basis.data.field} 72 <InputPwa 73 bind:value={val_field} 74 basis={{ 75 id: fmt_id(`field`), 76 sync: true, 77 classes: `pl-6 h-entry_line text-ly1-gl bg-ly1 rounded-2xl`, 78 placeholder: input_placeholder, 79 callback: basis.on_handle_input, 80 }} 81 /> 82 {/if} 83 </LayoutPage> 84 </LayoutView> 85 <FloatPage 86 basis={{ 87 posx: `left`, 88 }} 89 > 90 <ButtonRoundNav 91 basis={{ 92 glyph: `arrow-left`, 93 callback: async () => { 94 await basis.on_handle_back({ 95 field: basis_data.field, 96 public_key: basis_data.public_key, 97 }); 98 }, 99 }} 100 /> 101 </FloatPage> 102 <NavigationTabs /> 103 {/if}