update handling of app updates

This commit is contained in:
Peter Clement 2021-12-14 15:30:20 +00:00
parent b94f2791ef
commit 93230b7207
6 changed files with 21 additions and 46 deletions

View File

@ -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>

View File

@ -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

View File

@ -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}

View File

@ -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)

View File

@ -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}

View File

@ -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,
} }
} }