From 391c3eb669a4e08c4a5e433b5faeb3ce51f20377 Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Thu, 9 Mar 2023 14:57:43 +0100 Subject: [PATCH] feat(frontend): add hash to ctx in apps --- .../apps/components/inputs/AppDateInput.svelte | 3 ++- .../apps/components/inputs/AppNumberInput.svelte | 3 ++- .../apps/components/inputs/AppTextInput.svelte | 7 +++++-- .../lib/components/apps/editor/AppEditor.svelte | 14 ++++++++++---- .../lib/components/apps/editor/AppPreview.svelte | 13 ++++++++++--- .../apps/editor/contextPanel/ContextPanel.svelte | 2 +- frontend/src/routes/(root)/(logged)/+page.svelte | 2 +- .../(logged)/apps/get/[...path]/+page.svelte | 3 ++- .../public/[workspace]/[...secret]/+page.svelte | 3 ++- 9 files changed, 35 insertions(+), 15 deletions(-) diff --git a/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte index c56440ecea..c9fc15ac24 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte @@ -16,7 +16,7 @@ export let customCss: ComponentCustomCSS<'input'> | undefined = undefined export let render: boolean - const { app, worldStore } = getContext('AppEditorContext') + const { app, worldStore, selectedComponent } = getContext('AppEditorContext') let labelValue: string = 'Title' let minValue: string = '' let maxValue: string = '' @@ -46,6 +46,7 @@ {#if inputType === 'date'} ($selectedComponent = id)} on:pointerdown|stopPropagation type="date" bind:value diff --git a/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte index a7cbafc7c3..644ec7cc5a 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte @@ -15,7 +15,7 @@ export let customCss: ComponentCustomCSS<'input'> | undefined = undefined export let render: boolean - const { app, worldStore } = getContext('AppEditorContext') + const { app, worldStore, selectedComponent } = getContext('AppEditorContext') let defaultValue: number | undefined = undefined let placeholder: string | undefined = undefined @@ -49,6 +49,7 @@ ($selectedComponent = id)} class={twMerge( 'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5', css?.input?.class ?? '' diff --git a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte index a6ef8df882..24edd64b52 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte @@ -14,11 +14,11 @@ export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined export const staticOutputs: string[] = ['result'] export let customCss: ComponentCustomCSS<'input'> | undefined = undefined - export let appCssKey: 'textinputcomponent' | 'passwordinputcomponent' | 'emailcomponent' = + export let appCssKey: 'textinputcomponent' | 'passwordinputcomponent' | 'emailinputcomponent' = 'textinputcomponent' export let render: boolean - const { app, worldStore } = getContext('AppEditorContext') + const { app, worldStore, selectedComponent } = getContext('AppEditorContext') let placeholder: string | undefined = undefined let defaultValue: string | undefined = undefined @@ -51,6 +51,7 @@ )} style={css?.input?.style ?? ''} on:pointerdown|stopPropagation + on:focus={() => ($selectedComponent = id)} type="password" bind:value {placeholder} @@ -63,6 +64,7 @@ )} style={css?.input?.style ?? ''} on:pointerdown|stopPropagation + on:focus={() => ($selectedComponent = id)} type="text" bind:value {placeholder} @@ -75,6 +77,7 @@ )} style={css?.input?.style ?? ''} on:pointerdown|stopPropagation + on:focus={() => ($selectedComponent = id)} type="email" bind:value {placeholder} diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte index f8c54c8bf3..f3f354dcbc 100644 --- a/frontend/src/lib/components/apps/editor/AppEditor.svelte +++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte @@ -33,7 +33,6 @@ import SettingsPanel from './SettingsPanel.svelte' import { fly } from 'svelte/transition' import type { Policy } from '$lib/gen' - import UnsavedConfirmationModal from '$lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte' import { page } from '$app/stores' import CssSettings from './componentsPanel/CssSettings.svelte' import { initHistory } from '$lib/history' @@ -45,7 +44,6 @@ export let summary: string export let fromHub: boolean = false - console.log('app', app) const appStore = writable(app) const worldStore = writable(undefined) const staticOutputs = writable>({}) @@ -110,10 +108,16 @@ mounted = true }) - $: context = { + let context = { email: $userStore?.email, username: $userStore?.username, - query: Object.fromEntries($page.url.searchParams.entries()) + query: Object.fromEntries($page.url.searchParams.entries()), + hash: $page.url.hash + } + + function hashchange(e: HashChangeEvent) { + context.hash = e.newURL.split('#')[1] + context = context } $: mounted && ($worldStore = buildWorld($staticOutputs, $worldStore, context)) @@ -128,6 +132,8 @@ } + + {#if $connectingInput.opened}
import { onMount, setContext } from 'svelte' - import { fade } from 'svelte/transition' - import { cubicOut } from 'svelte/easing' import { writable, type Writable } from 'svelte/store' import { buildWorld, type World } from '../rx' import type { @@ -73,11 +71,20 @@ mounted = true }) - $: mounted && ($worldStore = buildWorld($staticOutputs, $worldStore, context)) + let ncontext = context + + function hashchange(e: HashChangeEvent) { + ncontext.hash = e.newURL.split('#')[1] + ncontext = ncontext + } + + $: mounted && ($worldStore = buildWorld($staticOutputs, $worldStore, ncontext)) $: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full ' $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : '' + +
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte index 4943b4de09..918063f381 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte @@ -42,7 +42,7 @@ return 'Table action' } } - $: panels = [['ctx', ['email', 'username', 'query']] as [string, string[]]].concat( + $: panels = [['ctx', ['email', 'username', 'query', 'hash']] as [string, string[]]].concat( Object.entries($staticOutputs) ) diff --git a/frontend/src/routes/(root)/(logged)/+page.svelte b/frontend/src/routes/(root)/(logged)/+page.svelte index c4c31b96f3..44f66cad59 100644 --- a/frontend/src/routes/(root)/(logged)/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/+page.svelte @@ -12,7 +12,7 @@ import PickHubFlow from '$lib/components/flows/pickers/PickHubFlow.svelte' import FlowViewer from '$lib/components/FlowViewer.svelte' import HighlightCode from '$lib/components/HighlightCode.svelte' - import { Building, ExternalLink, Globe2 } from 'lucide-svelte' + import { Building, Globe2 } from 'lucide-svelte' import ItemsList from '$lib/components/home/ItemsList.svelte' import CreateActionsApp from '$lib/components/flows/CreateActionsApp.svelte' diff --git a/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte index 8a2ffa93ce..c5c2732054 100644 --- a/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte @@ -37,7 +37,8 @@ context={{ email: $userStore?.email, username: $userStore?.username, - query: Object.fromEntries($page.url.searchParams.entries()) + query: Object.fromEntries($page.url.searchParams.entries()), + hash: $page.url.hash }} workspace={$workspaceStore ?? ''} summary={app.summary} diff --git a/frontend/src/routes/public/[workspace]/[...secret]/+page.svelte b/frontend/src/routes/public/[workspace]/[...secret]/+page.svelte index deb26b34b4..0041d99353 100644 --- a/frontend/src/routes/public/[workspace]/[...secret]/+page.svelte +++ b/frontend/src/routes/public/[workspace]/[...secret]/+page.svelte @@ -80,7 +80,8 @@ context={{ email: $userStore?.email, username: $userStore?.username, - query: Object.fromEntries($page.url.searchParams.entries()) + query: Object.fromEntries($page.url.searchParams.entries()), + hash: $page.url.hash }} workspace={$page.params.workspace} summary={app.summary}