update handling of app updates
This commit is contained in:
parent
b94f2791ef
commit
93230b7207
|
@ -7,7 +7,6 @@
|
||||||
MenuItem,
|
MenuItem,
|
||||||
StatusLight,
|
StatusLight,
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import { apps } from "stores/portal"
|
|
||||||
import { processStringSync } from "@budibase/string-templates"
|
import { processStringSync } from "@budibase/string-templates"
|
||||||
|
|
||||||
export let app
|
export let app
|
||||||
|
@ -19,19 +18,12 @@
|
||||||
export let unpublishApp
|
export let unpublishApp
|
||||||
export let releaseLock
|
export let releaseLock
|
||||||
export let editIcon
|
export let editIcon
|
||||||
|
|
||||||
$: color =
|
|
||||||
$apps.find(filtered_app => app?.appId === filtered_app.appId)?.icon
|
|
||||||
?.color || ""
|
|
||||||
$: name =
|
|
||||||
$apps.find(filtered_app => app?.appId === filtered_app.appId)?.icon?.name ||
|
|
||||||
"Apps"
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<div style="display: flex;">
|
<div style="display: flex;">
|
||||||
<div style="color: {color}">
|
<div style="color: {app.icon?.color || ''}">
|
||||||
<Icon size="XL" {name} />
|
<Icon size="XL" name={app.icon?.name || "Apps"} />
|
||||||
</div>
|
</div>
|
||||||
<div class="name" on:click={() => editApp(app)}>
|
<div class="name" on:click={() => editApp(app)}>
|
||||||
<Heading size="XS">
|
<Heading size="XS">
|
||||||
|
@ -99,7 +91,7 @@
|
||||||
<MenuItem on:click={() => updateApp(app)} icon="Edit">Edit</MenuItem>
|
<MenuItem on:click={() => updateApp(app)} icon="Edit">Edit</MenuItem>
|
||||||
<MenuItem on:click={() => deleteApp(app)} icon="Delete">Delete</MenuItem>
|
<MenuItem on:click={() => deleteApp(app)} icon="Delete">Delete</MenuItem>
|
||||||
{/if}
|
{/if}
|
||||||
<MenuItem on:click={() => editIcon(app)} icon="Edit">Edit Icon</MenuItem>
|
<MenuItem on:click={() => editIcon(app)} icon="Brush">Edit Icon</MenuItem>
|
||||||
</ActionMenu>
|
</ActionMenu>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -51,9 +51,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
const save = async () => {
|
const save = async () => {
|
||||||
await apps.updateIcon(app.instance._id, {
|
await apps.update(app.instance._id, {
|
||||||
name: selectedIcon,
|
icon: {
|
||||||
color: selectedColor,
|
name: selectedIcon,
|
||||||
|
color: selectedColor,
|
||||||
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -66,7 +68,7 @@
|
||||||
>
|
>
|
||||||
<div class="scrollable-icons">
|
<div class="scrollable-icons">
|
||||||
<div class="title-spacing">
|
<div class="title-spacing">
|
||||||
<Label>Select an Icon:</Label>
|
<Label>Select an Icon</Label>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
{#each iconsList as item}
|
{#each iconsList as item}
|
||||||
|
@ -82,7 +84,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="color-selection">
|
<div class="color-selection">
|
||||||
<div>
|
<div>
|
||||||
<Label>Select a Color:</Label>
|
<Label>Select a Color</Label>
|
||||||
</div>
|
</div>
|
||||||
<div class="color-selection-item">
|
<div class="color-selection-item">
|
||||||
<ColorPicker
|
<ColorPicker
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
|
|
||||||
export let template
|
export let template
|
||||||
export let inline
|
export let inline
|
||||||
|
|
||||||
const values = writable({ name: null })
|
const values = writable({ name: null })
|
||||||
const errors = writable({})
|
const errors = writable({})
|
||||||
const touched = writable({})
|
const touched = writable({})
|
||||||
|
@ -195,7 +196,9 @@
|
||||||
error={$touched.name && $errors.name}
|
error={$touched.name && $errors.name}
|
||||||
on:blur={() => ($touched.name = true)}
|
on:blur={() => ($touched.name = true)}
|
||||||
label="Name"
|
label="Name"
|
||||||
placeholder={`${$auth.user.firstName}'s first app`}
|
placeholder={$auth.user.firstName
|
||||||
|
? `${$auth.user.firstName}'s app`
|
||||||
|
: "My app"}
|
||||||
/>
|
/>
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -77,7 +77,7 @@
|
||||||
async function updateApp() {
|
async function updateApp() {
|
||||||
try {
|
try {
|
||||||
// Update App
|
// Update App
|
||||||
await apps.update(app.instance._id, $values.name.trim())
|
await apps.update(app.instance._id, { name: $values.name.trim() })
|
||||||
hide()
|
hide()
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error)
|
console.error(error)
|
||||||
|
|
|
@ -366,8 +366,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="appTable">
|
<div class="appTable">
|
||||||
{#each filteredApps as app (app.appId)}
|
{#each filteredApps as app (app.appId)}
|
||||||
<svelte:component
|
<AppRow
|
||||||
this={AppRow}
|
|
||||||
{releaseLock}
|
{releaseLock}
|
||||||
{editIcon}
|
{editIcon}
|
||||||
{app}
|
{app}
|
||||||
|
|
|
@ -65,37 +65,17 @@ export function createAppStore() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function updateIcon(appId, icon) {
|
async function update(appId, value) {
|
||||||
const response = await api.put(`/api/applications/${appId}`, { icon })
|
console.log({ value })
|
||||||
if (response.status === 200) {
|
const response = await api.put(`/api/applications/${appId}`, { ...value })
|
||||||
store.update(state => {
|
|
||||||
const updatedAppIndex = state.findIndex(
|
|
||||||
app => app.instance._id === appId
|
|
||||||
)
|
|
||||||
|
|
||||||
if (updatedAppIndex !== -1) {
|
|
||||||
const updatedApp = state[updatedAppIndex]
|
|
||||||
updatedApp.icon = icon
|
|
||||||
state.apps = state.splice(updatedAppIndex, 1, updatedApp)
|
|
||||||
}
|
|
||||||
|
|
||||||
return state
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
throw new Error("Error updating icon")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function update(appId, name) {
|
|
||||||
const response = await api.put(`/api/applications/${appId}`, { name })
|
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
store.update(state => {
|
store.update(state => {
|
||||||
const updatedAppIndex = state.findIndex(
|
const updatedAppIndex = state.findIndex(
|
||||||
app => app.instance._id === appId
|
app => app.instance._id === appId
|
||||||
)
|
)
|
||||||
if (updatedAppIndex !== -1) {
|
if (updatedAppIndex !== -1) {
|
||||||
const updatedApp = state[updatedAppIndex]
|
let updatedApp = state[updatedAppIndex]
|
||||||
updatedApp.name = name
|
updatedApp = { ...updatedApp, ...value }
|
||||||
state.apps = state.splice(updatedAppIndex, 1, updatedApp)
|
state.apps = state.splice(updatedAppIndex, 1, updatedApp)
|
||||||
}
|
}
|
||||||
return state
|
return state
|
||||||
|
@ -109,7 +89,6 @@ export function createAppStore() {
|
||||||
subscribe: store.subscribe,
|
subscribe: store.subscribe,
|
||||||
load,
|
load,
|
||||||
update,
|
update,
|
||||||
updateIcon,
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue