diff --git a/packages/builder/src/components/common/UpdateAppForm.svelte b/packages/builder/src/components/common/UpdateAppForm.svelte index 6fc897dffa..22b3c72a90 100644 --- a/packages/builder/src/components/common/UpdateAppForm.svelte +++ b/packages/builder/src/components/common/UpdateAppForm.svelte @@ -17,44 +17,49 @@ let updating = false let edited = false + let initialised = false $: filteredApps = $appsStore.apps.filter(app => app.devId == $appStore.appId) $: app = filteredApps.length ? filteredApps[0] : {} $: appDeployed = app?.status === AppStatus.DEPLOYED - $: appIdParts = app.appId ? app.appId?.split("_") : [] - $: appId = appIdParts.slice(-1)[0] + $: appName = $appStore.name + $: appURL = $appStore.url + $: appIconName = $appStore.icon?.name + $: appIconColor = $appStore.icon?.color $: appMeta = { - name: $appStore.name, - url: $appStore.url, - iconName: $appStore.icon?.name, - iconColor: $appStore.icon?.color, + name: appName, + url: appURL, + iconName: appIconName, + iconColor: appIconColor, } - // On app update, reset the state. - $: if (appMeta) { + const initForm = appMeta => { edited = false - const { name, url, iconName, iconColor } = appMeta values.set({ - name, - url, - iconName, - iconColor, + ...appMeta, }) - setupValidation() + if (!initialised) { + setupValidation() + initialised = true + } } - $: if (values && $values) { - const { url } = $values || {} + const validate = (vals, appMeta) => { + const { url } = vals || {} validation.check({ - ...$values, + ...vals, url: url?.[0] === "/" ? url.substring(1, url.length) : url, }) - edited = !isEqual($values, appMeta) + edited = !isEqual(vals, appMeta) } + // On app/apps update, reset the state. + $: initForm(appMeta) + $: validate($values, appMeta) + const resolveAppUrl = (template, name) => { let parsedName const resolvedName = resolveAppName(null, name) @@ -89,26 +94,13 @@ } const setupValidation = async () => { - const applications = $appsStore.apps appValidation.name(validation, { - apps: applications, - currentApp: { - ...app, - appId, - }, + apps: $appsStore.apps, + currentApp: app, }) appValidation.url(validation, { - apps: applications, - currentApp: { - ...app, - appId, - }, - }) - // init validation - const { url } = $values - validation.check({ - ...$values, - url: url?.[0] === "/" ? url.substring(1, url.length) : url, + apps: $appsStore.apps, + currentApp: app, }) } @@ -182,8 +174,10 @@ await updateApp() updating = false }} - disabled={appDeployed || updating || !edited}>Save + Save + {:else}
Unpublish your app to edit name and URL diff --git a/packages/builder/src/components/common/UpdateAppTopNav.svelte b/packages/builder/src/components/common/UpdateAppTopNav.svelte index 539cc78582..54d6fefe8a 100644 --- a/packages/builder/src/components/common/UpdateAppTopNav.svelte +++ b/packages/builder/src/components/common/UpdateAppTopNav.svelte @@ -40,7 +40,6 @@ customZindex={998} bind:this={formPopover} align="center" - disabled={!isPublished} anchor={formPopoverAnchor} offset={20} on:close={() => { diff --git a/packages/builder/src/helpers/validation/yup/app.js b/packages/builder/src/helpers/validation/yup/app.js index 1947844f63..3a00b7a49f 100644 --- a/packages/builder/src/helpers/validation/yup/app.js +++ b/packages/builder/src/helpers/validation/yup/app.js @@ -19,11 +19,10 @@ export const name = (validation, { apps, currentApp } = { apps: [] }) => { // exit early, above validator will fail return true } - if (currentApp) { - // filter out the current app if present - apps = apps.filter(app => app.appId !== currentApp.appId) - } return !apps + .filter(app => { + return app.appId !== currentApp?.appId + }) .map(app => app.name) .some(appName => appName.toLowerCase() === value.toLowerCase()) } diff --git a/packages/builder/src/stores/portal/apps.js b/packages/builder/src/stores/portal/apps.js index 6af9fa56ac..4d75cac55e 100644 --- a/packages/builder/src/stores/portal/apps.js +++ b/packages/builder/src/stores/portal/apps.js @@ -131,7 +131,7 @@ export class AppsStore extends BudiStore { if (updatedAppIndex !== -1) { let updatedApp = state.apps[updatedAppIndex] updatedApp = { ...updatedApp, ...value } - state.apps = state.apps.splice(updatedAppIndex, 1, updatedApp) + state.apps.splice(updatedAppIndex, 1, updatedApp) } return state })