112 lines
2.7 KiB
Svelte
112 lines
2.7 KiB
Svelte
<script>
|
|
import { writable, get as svelteGet } from "svelte/store"
|
|
import {
|
|
notifications,
|
|
Input,
|
|
Modal,
|
|
ModalContent,
|
|
Body,
|
|
} from "@budibase/bbui"
|
|
import { hostingStore } from "builderStore"
|
|
import { apps } from "stores/portal"
|
|
import { string, object } from "yup"
|
|
import { onMount } from "svelte"
|
|
import { capitalise } from "helpers"
|
|
|
|
const values = writable({ name: null })
|
|
const errors = writable({})
|
|
const touched = writable({})
|
|
const validator = {
|
|
name: string().required("Your application must have a name"),
|
|
}
|
|
|
|
export let app
|
|
|
|
let modal
|
|
let valid = false
|
|
let dirty = false
|
|
$: checkValidity($values, validator)
|
|
$: {
|
|
// prevent validation by setting name to undefined without an app
|
|
if (app) {
|
|
$values.name = app?.name
|
|
}
|
|
}
|
|
|
|
onMount(async () => {
|
|
await hostingStore.actions.fetchDeployedApps()
|
|
const existingAppNames = svelteGet(hostingStore).deployedAppNames
|
|
validator.name = string()
|
|
.required("Your application must have a name")
|
|
.test(
|
|
"non-existing-app-name",
|
|
"Another app with the same name already exists",
|
|
value => {
|
|
return !existingAppNames.some(
|
|
appName => dirty && appName.toLowerCase() === value.toLowerCase()
|
|
)
|
|
}
|
|
)
|
|
})
|
|
|
|
const checkValidity = async (values, validator) => {
|
|
const obj = object().shape(validator)
|
|
Object.keys(validator).forEach(key => ($errors[key] = null))
|
|
try {
|
|
await obj.validate(values, { abortEarly: false })
|
|
} catch (validationErrors) {
|
|
validationErrors.inner.forEach(error => {
|
|
$errors[error.path] = capitalise(error.message)
|
|
})
|
|
}
|
|
valid = await obj.isValid(values)
|
|
}
|
|
|
|
async function updateApp() {
|
|
try {
|
|
// Update App
|
|
await apps.update(app.instance._id, $values.name)
|
|
hide()
|
|
} catch (error) {
|
|
console.error(error)
|
|
notifications.error(error)
|
|
}
|
|
}
|
|
|
|
export const show = () => {
|
|
modal.show()
|
|
}
|
|
export const hide = () => {
|
|
modal.hide()
|
|
}
|
|
|
|
const onCancel = () => {
|
|
hide()
|
|
}
|
|
|
|
const onShow = () => {
|
|
dirty = false
|
|
}
|
|
</script>
|
|
|
|
<Modal bind:this={modal} on:hide={onCancel} on:show={onShow}>
|
|
<ModalContent
|
|
title={"Update app"}
|
|
confirmText={"Update app"}
|
|
onConfirm={updateApp}
|
|
disabled={!(valid && dirty)}
|
|
>
|
|
<Body size="S">
|
|
Give your new app a name, and choose which groups have access (paid plans
|
|
only).
|
|
</Body>
|
|
<Input
|
|
bind:value={$values.name}
|
|
error={$touched.name && $errors.name}
|
|
on:blur={() => ($touched.name = true)}
|
|
on:change={() => (dirty = true)}
|
|
label="Name"
|
|
/>
|
|
</ModalContent>
|
|
</Modal>
|