Added updated UX for updating app metadata.
This commit is contained in:
parent
fcb5d88eaf
commit
1602e97047
7 changed files with 309 additions and 265 deletions
|
@ -155,6 +155,8 @@ export default function positionDropdown(element, opts) {
|
||||||
applyXStrategy(Strategies.StartToEnd)
|
applyXStrategy(Strategies.StartToEnd)
|
||||||
} else if (align === "left-outside") {
|
} else if (align === "left-outside") {
|
||||||
applyXStrategy(Strategies.EndToStart)
|
applyXStrategy(Strategies.EndToStart)
|
||||||
|
} else if (align === "center") {
|
||||||
|
applyXStrategy(Strategies.MidPoint)
|
||||||
} else {
|
} else {
|
||||||
applyXStrategy(Strategies.StartToStart)
|
applyXStrategy(Strategies.StartToStart)
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,6 +7,7 @@
|
||||||
export let app
|
export let app
|
||||||
export let color
|
export let color
|
||||||
export let autoSave = false
|
export let autoSave = false
|
||||||
|
export let disabled = false
|
||||||
|
|
||||||
let modal
|
let modal
|
||||||
</script>
|
</script>
|
||||||
|
@ -14,12 +15,16 @@
|
||||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||||
<div class="editable-icon">
|
<div class="editable-icon">
|
||||||
<div class="hover" on:click={modal.show}>
|
{#if !disabled}
|
||||||
<Icon name="Edit" {size} color="var(--spectrum-global-color-gray-600)" />
|
<div class="hover" on:click={modal.show}>
|
||||||
</div>
|
<Icon name="Edit" {size} color="var(--spectrum-global-color-gray-600)" />
|
||||||
<div class="normal">
|
</div>
|
||||||
|
<div class="normal">
|
||||||
|
<Icon name={name || "Apps"} {size} {color} />
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
<Icon {name} {size} {color} />
|
<Icon {name} {size} {color} />
|
||||||
</div>
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Modal bind:this={modal}>
|
<Modal bind:this={modal}>
|
||||||
|
|
217
packages/builder/src/components/common/UpdateAppForm.svelte
Normal file
217
packages/builder/src/components/common/UpdateAppForm.svelte
Normal file
|
@ -0,0 +1,217 @@
|
||||||
|
<script>
|
||||||
|
import { Button, Label, Icon, Input, notifications } from "@budibase/bbui"
|
||||||
|
import { AppStatus } from "constants"
|
||||||
|
import { appStore, initialise } from "stores/builder"
|
||||||
|
import { appsStore } from "stores/portal"
|
||||||
|
import { API } from "api"
|
||||||
|
import { writable } from "svelte/store"
|
||||||
|
import { createValidationStore } from "helpers/validation/yup"
|
||||||
|
import * as appValidation from "helpers/validation/yup/app"
|
||||||
|
import EditableIcon from "components/common/EditableIcon.svelte"
|
||||||
|
import { isEqual } from "lodash"
|
||||||
|
|
||||||
|
export let alignActions = "left"
|
||||||
|
|
||||||
|
const values = writable({})
|
||||||
|
const validation = createValidationStore()
|
||||||
|
|
||||||
|
let updating = false
|
||||||
|
let edited = 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]
|
||||||
|
|
||||||
|
$: appMeta = {
|
||||||
|
name: $appStore.name,
|
||||||
|
url: $appStore.url,
|
||||||
|
iconName: $appStore.icon?.name,
|
||||||
|
iconColor: $appStore.icon?.color,
|
||||||
|
}
|
||||||
|
|
||||||
|
// On app update, reset the state.
|
||||||
|
$: if (appMeta) {
|
||||||
|
edited = false
|
||||||
|
const { name, url, iconName, iconColor } = appMeta
|
||||||
|
values.set({
|
||||||
|
name,
|
||||||
|
url,
|
||||||
|
iconName,
|
||||||
|
iconColor,
|
||||||
|
})
|
||||||
|
|
||||||
|
setupValidation()
|
||||||
|
}
|
||||||
|
|
||||||
|
$: if (values && $values) {
|
||||||
|
const { url } = $values || {}
|
||||||
|
validation.check({
|
||||||
|
...$values,
|
||||||
|
url: url?.[0] === "/" ? url.substring(1, url.length) : url,
|
||||||
|
})
|
||||||
|
edited = !isEqual($values, appMeta)
|
||||||
|
}
|
||||||
|
|
||||||
|
const resolveAppUrl = (template, name) => {
|
||||||
|
let parsedName
|
||||||
|
const resolvedName = resolveAppName(null, name)
|
||||||
|
parsedName = resolvedName ? resolvedName.toLowerCase() : ""
|
||||||
|
const parsedUrl = parsedName ? parsedName.replace(/\s+/g, "-") : ""
|
||||||
|
return encodeURI(parsedUrl)
|
||||||
|
}
|
||||||
|
|
||||||
|
const nameToUrl = appName => {
|
||||||
|
let resolvedUrl = resolveAppUrl(null, appName)
|
||||||
|
tidyUrl(resolvedUrl)
|
||||||
|
}
|
||||||
|
|
||||||
|
const resolveAppName = (template, name) => {
|
||||||
|
if (template && !name) {
|
||||||
|
return template.name
|
||||||
|
}
|
||||||
|
return name ? name.trim() : null
|
||||||
|
}
|
||||||
|
|
||||||
|
const tidyUrl = url => {
|
||||||
|
if (url && !url.startsWith("/")) {
|
||||||
|
url = `/${url}`
|
||||||
|
}
|
||||||
|
$values.url = url === "" ? null : url
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateIcon = e => {
|
||||||
|
const { name, color } = e.detail
|
||||||
|
$values.iconColor = color
|
||||||
|
$values.iconName = name
|
||||||
|
}
|
||||||
|
|
||||||
|
const setupValidation = async () => {
|
||||||
|
const applications = $appsStore.apps
|
||||||
|
appValidation.name(validation, {
|
||||||
|
apps: applications,
|
||||||
|
currentApp: {
|
||||||
|
...app,
|
||||||
|
appId,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
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,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateApp() {
|
||||||
|
try {
|
||||||
|
await appsStore.save($appStore.appId, {
|
||||||
|
name: $values.name?.trim(),
|
||||||
|
url: $values.url?.trim(),
|
||||||
|
icon: {
|
||||||
|
name: $values.iconName,
|
||||||
|
color: $values.iconColor,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
await initialiseApp()
|
||||||
|
notifications.success("App update successful")
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error)
|
||||||
|
notifications.error("Error updating app")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const initialiseApp = async () => {
|
||||||
|
const applicationPkg = await API.fetchAppPackage($appStore.appId)
|
||||||
|
await initialise(applicationPkg)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="form">
|
||||||
|
<div class="fields">
|
||||||
|
<div class="field">
|
||||||
|
<Label size="L">Name</Label>
|
||||||
|
<Input
|
||||||
|
bind:value={$values.name}
|
||||||
|
error={$validation.touched.name && $validation.errors.name}
|
||||||
|
on:blur={() => ($validation.touched.name = true)}
|
||||||
|
on:change={nameToUrl($values.name)}
|
||||||
|
disabled={appDeployed}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<Label size="L">URL</Label>
|
||||||
|
<Input
|
||||||
|
bind:value={$values.url}
|
||||||
|
error={$validation.touched.url && $validation.errors.url}
|
||||||
|
on:blur={() => ($validation.touched.url = true)}
|
||||||
|
on:change={tidyUrl($values.url)}
|
||||||
|
placeholder={$values.url
|
||||||
|
? $values.url
|
||||||
|
: `/${resolveAppUrl(null, $values.name)}`}
|
||||||
|
disabled={appDeployed}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<Label size="L">Icon</Label>
|
||||||
|
<EditableIcon
|
||||||
|
{app}
|
||||||
|
size="XL"
|
||||||
|
name={$values.iconName}
|
||||||
|
color={$values.iconColor}
|
||||||
|
on:change={updateIcon}
|
||||||
|
disabled={appDeployed}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="actions" class:right={alignActions === "right"}>
|
||||||
|
{#if !appDeployed}
|
||||||
|
<Button
|
||||||
|
cta
|
||||||
|
on:click={async () => {
|
||||||
|
updating = true
|
||||||
|
await updateApp()
|
||||||
|
updating = false
|
||||||
|
}}
|
||||||
|
disabled={appDeployed || updating || !edited}>Save</Button
|
||||||
|
>
|
||||||
|
{:else}
|
||||||
|
<div class="edit-info">
|
||||||
|
<Icon size="S" name="Info" /> Unpublish your app to edit name and URL
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.actions.right {
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
|
.fields {
|
||||||
|
display: grid;
|
||||||
|
grid-gap: var(--spacing-l);
|
||||||
|
}
|
||||||
|
.field {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 80px 220px;
|
||||||
|
grid-gap: var(--spacing-l);
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.edit-info {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-s);
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,77 @@
|
||||||
|
<script>
|
||||||
|
import { Popover, Layout, Icon } from "@budibase/bbui"
|
||||||
|
import { deploymentStore } from "stores/builder"
|
||||||
|
import { appsStore } from "stores/portal"
|
||||||
|
import UpdateAppForm from "./UpdateAppForm.svelte"
|
||||||
|
|
||||||
|
export let application
|
||||||
|
|
||||||
|
let formPopover
|
||||||
|
let formPopoverAnchor
|
||||||
|
let formPopoverOpen = false
|
||||||
|
|
||||||
|
$: filteredApps = $appsStore.apps.filter(app => app.devId === application)
|
||||||
|
$: selectedApp = filteredApps?.length ? filteredApps[0] : null
|
||||||
|
$: latestDeployments = $deploymentStore
|
||||||
|
.filter(deployment => deployment.status === "SUCCESS")
|
||||||
|
.sort((a, b) => a.updatedAt > b.updatedAt)
|
||||||
|
$: isPublished =
|
||||||
|
selectedApp?.status === "published" && latestDeployments?.length > 0
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div bind:this={formPopoverAnchor}>
|
||||||
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||||
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||||
|
<div
|
||||||
|
class="app-heading"
|
||||||
|
class:editing={formPopoverOpen}
|
||||||
|
on:click={() => {
|
||||||
|
formPopover.show()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
<span class="edit-icon">
|
||||||
|
<Icon size="S" name="Edit" color={"var(--grey-7)"} />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Popover
|
||||||
|
customZindex={998}
|
||||||
|
bind:this={formPopover}
|
||||||
|
align="center"
|
||||||
|
disabled={!isPublished}
|
||||||
|
anchor={formPopoverAnchor}
|
||||||
|
offset={20}
|
||||||
|
on:close={() => {
|
||||||
|
formPopoverOpen = false
|
||||||
|
}}
|
||||||
|
on:open={() => {
|
||||||
|
formPopoverOpen = true
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Layout noPadding gap="M">
|
||||||
|
<div class="popover-content">
|
||||||
|
<UpdateAppForm />
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
</Popover>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.popover-content {
|
||||||
|
padding: var(--spacing-xl);
|
||||||
|
}
|
||||||
|
.app-heading {
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-s);
|
||||||
|
}
|
||||||
|
.edit-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.app-heading:hover .edit-icon,
|
||||||
|
.app-heading.editing .edit-icon {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -8,13 +8,11 @@
|
||||||
ActionButton,
|
ActionButton,
|
||||||
Icon,
|
Icon,
|
||||||
Link,
|
Link,
|
||||||
Modal,
|
|
||||||
StatusLight,
|
StatusLight,
|
||||||
AbsTooltip,
|
AbsTooltip,
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import RevertModal from "components/deploy/RevertModal.svelte"
|
import RevertModal from "components/deploy/RevertModal.svelte"
|
||||||
import VersionModal from "components/deploy/VersionModal.svelte"
|
import VersionModal from "components/deploy/VersionModal.svelte"
|
||||||
import UpdateAppModal from "components/start/UpdateAppModal.svelte"
|
|
||||||
import { processStringSync } from "@budibase/string-templates"
|
import { processStringSync } from "@budibase/string-templates"
|
||||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||||
import analytics, { Events, EventSource } from "analytics"
|
import analytics, { Events, EventSource } from "analytics"
|
||||||
|
@ -37,7 +35,6 @@
|
||||||
export let loaded
|
export let loaded
|
||||||
|
|
||||||
let unpublishModal
|
let unpublishModal
|
||||||
let updateAppModal
|
|
||||||
let revertModal
|
let revertModal
|
||||||
let versionModal
|
let versionModal
|
||||||
let appActionPopover
|
let appActionPopover
|
||||||
|
@ -61,11 +58,6 @@
|
||||||
$: canPublish = !publishing && loaded && $sortedScreens.length > 0
|
$: canPublish = !publishing && loaded && $sortedScreens.length > 0
|
||||||
$: lastDeployed = getLastDeployedString($deploymentStore, lastOpened)
|
$: lastDeployed = getLastDeployedString($deploymentStore, lastOpened)
|
||||||
|
|
||||||
const initialiseApp = async () => {
|
|
||||||
const applicationPkg = await API.fetchAppPackage($appStore.devId)
|
|
||||||
await initialise(applicationPkg)
|
|
||||||
}
|
|
||||||
|
|
||||||
const getLastDeployedString = deployments => {
|
const getLastDeployedString = deployments => {
|
||||||
return deployments?.length
|
return deployments?.length
|
||||||
? processStringSync("Published {{ duration time 'millisecond' }} ago", {
|
? processStringSync("Published {{ duration time 'millisecond' }} ago", {
|
||||||
|
@ -247,16 +239,12 @@
|
||||||
appActionPopover.hide()
|
appActionPopover.hide()
|
||||||
if (isPublished) {
|
if (isPublished) {
|
||||||
viewApp()
|
viewApp()
|
||||||
} else {
|
|
||||||
updateAppModal.show()
|
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{$appStore.url}
|
{$appStore.url}
|
||||||
{#if isPublished}
|
{#if isPublished}
|
||||||
<Icon size="S" name="LinkOut" />
|
<Icon size="S" name="LinkOut" />
|
||||||
{:else}
|
|
||||||
<Icon size="S" name="Edit" />
|
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
</Body>
|
</Body>
|
||||||
|
@ -330,20 +318,6 @@
|
||||||
Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
|
Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
|
||||||
</ConfirmDialog>
|
</ConfirmDialog>
|
||||||
|
|
||||||
<Modal bind:this={updateAppModal} padding={false} width="600px">
|
|
||||||
<UpdateAppModal
|
|
||||||
app={{
|
|
||||||
name: $appStore.name,
|
|
||||||
url: $appStore.url,
|
|
||||||
icon: $appStore.icon,
|
|
||||||
appId: $appStore.appId,
|
|
||||||
}}
|
|
||||||
onUpdateComplete={async () => {
|
|
||||||
await initialiseApp()
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
<RevertModal bind:this={revertModal} />
|
<RevertModal bind:this={revertModal} />
|
||||||
<VersionModal hideIcon bind:this={versionModal} />
|
<VersionModal hideIcon bind:this={versionModal} />
|
||||||
|
|
||||||
|
|
|
@ -1,151 +0,0 @@
|
||||||
<script>
|
|
||||||
import { writable, get as svelteGet } from "svelte/store"
|
|
||||||
import {
|
|
||||||
notifications,
|
|
||||||
Input,
|
|
||||||
ModalContent,
|
|
||||||
Layout,
|
|
||||||
Label,
|
|
||||||
} from "@budibase/bbui"
|
|
||||||
import { appsStore } from "stores/portal"
|
|
||||||
import { onMount } from "svelte"
|
|
||||||
import { createValidationStore } from "helpers/validation/yup"
|
|
||||||
import * as appValidation from "helpers/validation/yup/app"
|
|
||||||
import EditableIcon from "../common/EditableIcon.svelte"
|
|
||||||
|
|
||||||
export let app
|
|
||||||
export let onUpdateComplete
|
|
||||||
|
|
||||||
$: appIdParts = app.appId ? app.appId?.split("_") : []
|
|
||||||
$: appId = appIdParts.slice(-1)[0]
|
|
||||||
|
|
||||||
const values = writable({
|
|
||||||
name: app.name,
|
|
||||||
url: app.url,
|
|
||||||
iconName: app.icon?.name,
|
|
||||||
iconColor: app.icon?.color,
|
|
||||||
})
|
|
||||||
const validation = createValidationStore()
|
|
||||||
|
|
||||||
$: {
|
|
||||||
const { url } = $values
|
|
||||||
|
|
||||||
validation.check({
|
|
||||||
...$values,
|
|
||||||
url: url?.[0] === "/" ? url.substring(1, url.length) : url,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const setupValidation = async () => {
|
|
||||||
const applications = svelteGet(appsStore).apps
|
|
||||||
appValidation.name(validation, {
|
|
||||||
apps: applications,
|
|
||||||
currentApp: {
|
|
||||||
...app,
|
|
||||||
appId,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
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,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
async function updateApp() {
|
|
||||||
try {
|
|
||||||
await appsStore.save(app.appId, {
|
|
||||||
name: $values.name?.trim(),
|
|
||||||
url: $values.url?.trim(),
|
|
||||||
icon: {
|
|
||||||
name: $values.iconName,
|
|
||||||
color: $values.iconColor,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
if (typeof onUpdateComplete == "function") {
|
|
||||||
onUpdateComplete()
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error)
|
|
||||||
notifications.error("Error updating app")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const resolveAppUrl = (template, name) => {
|
|
||||||
let parsedName
|
|
||||||
const resolvedName = resolveAppName(null, name)
|
|
||||||
parsedName = resolvedName ? resolvedName.toLowerCase() : ""
|
|
||||||
const parsedUrl = parsedName ? parsedName.replace(/\s+/g, "-") : ""
|
|
||||||
return encodeURI(parsedUrl)
|
|
||||||
}
|
|
||||||
|
|
||||||
const resolveAppName = (template, name) => {
|
|
||||||
if (template && !name) {
|
|
||||||
return template.name
|
|
||||||
}
|
|
||||||
return name ? name.trim() : null
|
|
||||||
}
|
|
||||||
|
|
||||||
const tidyUrl = url => {
|
|
||||||
if (url && !url.startsWith("/")) {
|
|
||||||
url = `/${url}`
|
|
||||||
}
|
|
||||||
$values.url = url === "" ? null : url
|
|
||||||
}
|
|
||||||
|
|
||||||
const nameToUrl = appName => {
|
|
||||||
let resolvedUrl = resolveAppUrl(null, appName)
|
|
||||||
tidyUrl(resolvedUrl)
|
|
||||||
}
|
|
||||||
|
|
||||||
const updateIcon = e => {
|
|
||||||
const { name, color } = e.detail
|
|
||||||
$values.iconColor = color
|
|
||||||
$values.iconName = name
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(setupValidation)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<ModalContent
|
|
||||||
title="Edit name and URL"
|
|
||||||
confirmText="Save"
|
|
||||||
onConfirm={updateApp}
|
|
||||||
disabled={!$validation.valid}
|
|
||||||
>
|
|
||||||
<Input
|
|
||||||
bind:value={$values.name}
|
|
||||||
error={$validation.touched.name && $validation.errors.name}
|
|
||||||
on:blur={() => ($validation.touched.name = true)}
|
|
||||||
on:change={nameToUrl($values.name)}
|
|
||||||
label="Name"
|
|
||||||
/>
|
|
||||||
<Layout noPadding gap="XS">
|
|
||||||
<Label>Icon</Label>
|
|
||||||
<EditableIcon
|
|
||||||
{app}
|
|
||||||
size="XL"
|
|
||||||
name={$values.iconName}
|
|
||||||
color={$values.iconColor}
|
|
||||||
on:change={updateIcon}
|
|
||||||
/>
|
|
||||||
</Layout>
|
|
||||||
<Input
|
|
||||||
bind:value={$values.url}
|
|
||||||
error={$validation.touched.url && $validation.errors.url}
|
|
||||||
on:blur={() => ($validation.touched.url = true)}
|
|
||||||
on:change={tidyUrl($values.url)}
|
|
||||||
label="URL"
|
|
||||||
placeholder={$values.url
|
|
||||||
? $values.url
|
|
||||||
: `/${resolveAppUrl(null, $values.name)}`}
|
|
||||||
/>
|
|
||||||
</ModalContent>
|
|
|
@ -1,30 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import {
|
import { Layout, Divider, Heading, Body } from "@budibase/bbui"
|
||||||
Layout,
|
import UpdateAppForm from "components/common/UpdateAppForm.svelte"
|
||||||
Divider,
|
|
||||||
Heading,
|
|
||||||
Body,
|
|
||||||
Button,
|
|
||||||
Label,
|
|
||||||
Modal,
|
|
||||||
Icon,
|
|
||||||
} from "@budibase/bbui"
|
|
||||||
import { AppStatus } from "constants"
|
|
||||||
import { appStore, initialise } from "stores/builder"
|
|
||||||
import { appsStore } from "stores/portal"
|
|
||||||
import UpdateAppModal from "components/start/UpdateAppModal.svelte"
|
|
||||||
import { API } from "api"
|
|
||||||
|
|
||||||
let updatingModal
|
|
||||||
|
|
||||||
$: filteredApps = $appsStore.apps.filter(app => app.devId == $appStore.appId)
|
|
||||||
$: app = filteredApps.length ? filteredApps[0] : {}
|
|
||||||
$: appDeployed = app?.status === AppStatus.DEPLOYED
|
|
||||||
|
|
||||||
const initialiseApp = async () => {
|
|
||||||
const applicationPkg = await API.fetchAppPackage($appStore.appId)
|
|
||||||
await initialise(applicationPkg)
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout noPadding>
|
<Layout noPadding>
|
||||||
|
@ -33,61 +9,5 @@
|
||||||
<Body>Edit your app's name and URL</Body>
|
<Body>Edit your app's name and URL</Body>
|
||||||
</Layout>
|
</Layout>
|
||||||
<Divider />
|
<Divider />
|
||||||
|
<UpdateAppForm />
|
||||||
<Layout noPadding gap="XXS">
|
|
||||||
<Label size="L">Name</Label>
|
|
||||||
<Body>{$appStore?.name}</Body>
|
|
||||||
</Layout>
|
|
||||||
|
|
||||||
<Layout noPadding gap="XS">
|
|
||||||
<Label size="L">Icon</Label>
|
|
||||||
<div class="icon">
|
|
||||||
<Icon
|
|
||||||
size="L"
|
|
||||||
name={$appStore?.icon?.name || "Apps"}
|
|
||||||
color={$appStore?.icon?.color}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
|
|
||||||
<Layout noPadding gap="XXS">
|
|
||||||
<Label size="L">URL</Label>
|
|
||||||
<Body>{$appStore.url}</Body>
|
|
||||||
</Layout>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
cta
|
|
||||||
on:click={() => {
|
|
||||||
updatingModal.show()
|
|
||||||
}}
|
|
||||||
disabled={appDeployed}
|
|
||||||
tooltip={appDeployed
|
|
||||||
? "You must unpublish your app to make changes"
|
|
||||||
: null}
|
|
||||||
>
|
|
||||||
Edit
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<Modal bind:this={updatingModal} padding={false} width="600px">
|
|
||||||
<UpdateAppModal
|
|
||||||
app={{
|
|
||||||
name: $appStore.name,
|
|
||||||
url: $appStore.url,
|
|
||||||
icon: $appStore.icon,
|
|
||||||
appId: $appStore.appId,
|
|
||||||
}}
|
|
||||||
onUpdateComplete={async () => {
|
|
||||||
await initialiseApp()
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.icon {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
Loading…
Reference in a new issue