2020-08-04 03:08:54 +12:00
|
|
|
<script>
|
2021-01-15 06:01:31 +13:00
|
|
|
import { writable, get as svelteGet } from "svelte/store"
|
2021-12-09 07:51:24 +13:00
|
|
|
import { notifications, Input, ModalContent, Dropzone } from "@budibase/bbui"
|
2022-01-22 06:31:18 +13:00
|
|
|
import { store, automationStore } from "builderStore"
|
2022-01-21 22:10:59 +13:00
|
|
|
import { API } from "api"
|
2022-01-22 06:31:18 +13:00
|
|
|
import { apps, admin, auth } from "stores/portal"
|
2021-09-21 22:47:14 +12:00
|
|
|
import analytics, { Events } from "analytics"
|
2021-01-07 06:28:22 +13:00
|
|
|
import { onMount } from "svelte"
|
2021-05-08 00:13:51 +12:00
|
|
|
import { goto } from "@roxi/routify"
|
2022-01-21 05:01:09 +13:00
|
|
|
import { createValidationStore } from "helpers/validation/yup"
|
|
|
|
import * as appValidation from "helpers/validation/yup/app"
|
2022-03-23 00:38:17 +13:00
|
|
|
import TemplateCard from "components/common/TemplateCard.svelte"
|
2020-05-27 22:54:53 +12:00
|
|
|
|
2020-09-26 01:47:42 +12:00
|
|
|
export let template
|
2021-01-08 04:37:41 +13:00
|
|
|
|
2022-01-21 05:01:09 +13:00
|
|
|
const values = writable({ name: "", url: null })
|
|
|
|
const validation = createValidationStore()
|
|
|
|
$: validation.check($values)
|
2021-01-07 05:58:29 +13:00
|
|
|
|
|
|
|
onMount(async () => {
|
2022-03-23 00:38:17 +13:00
|
|
|
$values.url = resolveAppUrl(template, $values.name, $values.url)
|
|
|
|
$values.name = resolveAppName(template, $values.name)
|
2022-01-21 05:01:09 +13:00
|
|
|
await setupValidation()
|
2021-01-07 05:58:29 +13:00
|
|
|
})
|
2020-08-04 01:59:50 +12:00
|
|
|
|
2022-03-23 00:38:17 +13:00
|
|
|
$: appUrl = `${window.location.origin}${
|
|
|
|
$values.url ? $values.url : `/${resolveAppUrl(template, $values.name)}`
|
|
|
|
}`
|
|
|
|
|
|
|
|
const resolveAppUrl = (template, name) => {
|
|
|
|
let parsedName
|
|
|
|
const resolvedName = resolveAppName(template, 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.trim()
|
|
|
|
}
|
|
|
|
|
2022-01-21 05:01:09 +13:00
|
|
|
const setupValidation = async () => {
|
2022-01-22 06:31:18 +13:00
|
|
|
const applications = svelteGet(apps)
|
|
|
|
appValidation.name(validation, { apps: applications })
|
|
|
|
appValidation.url(validation, { apps: applications })
|
2022-01-21 05:01:09 +13:00
|
|
|
appValidation.file(validation, { template })
|
|
|
|
// init validation
|
|
|
|
validation.check($values)
|
2020-08-04 01:59:50 +12:00
|
|
|
}
|
|
|
|
|
2020-11-07 01:38:59 +13:00
|
|
|
async function createNewApp() {
|
2020-08-04 01:59:50 +12:00
|
|
|
try {
|
2021-03-16 07:32:20 +13:00
|
|
|
// Create form data to create app
|
|
|
|
let data = new FormData()
|
2021-08-17 21:41:37 +12:00
|
|
|
data.append("name", $values.name.trim())
|
2022-01-21 05:01:09 +13:00
|
|
|
if ($values.url) {
|
|
|
|
data.append("url", $values.url.trim())
|
|
|
|
}
|
|
|
|
data.append("useTemplate", template != null)
|
|
|
|
if (template) {
|
|
|
|
data.append("templateName", template.name)
|
|
|
|
data.append("templateKey", template.key)
|
2021-05-10 22:53:32 +12:00
|
|
|
data.append("templateFile", $values.file)
|
2021-03-16 07:32:20 +13:00
|
|
|
}
|
|
|
|
|
2020-08-04 02:26:28 +12:00
|
|
|
// Create App
|
2022-01-21 22:10:59 +13:00
|
|
|
const createdApp = await API.createApp(data)
|
2021-09-21 22:47:14 +12:00
|
|
|
analytics.captureEvent(Events.APP.CREATED, {
|
2021-05-10 22:53:32 +12:00
|
|
|
name: $values.name,
|
2022-01-21 22:10:59 +13:00
|
|
|
appId: createdApp.instance._id,
|
2022-01-21 05:01:09 +13:00
|
|
|
templateToUse: template,
|
2020-08-04 01:59:50 +12:00
|
|
|
})
|
2020-08-04 02:26:28 +12:00
|
|
|
|
|
|
|
// Select Correct Application/DB in prep for creating user
|
2022-01-21 22:10:59 +13:00
|
|
|
const pkg = await API.fetchAppPackage(createdApp.instance._id)
|
|
|
|
await store.actions.initialise(pkg)
|
|
|
|
await automationStore.actions.fetch()
|
|
|
|
// Update checklist - in case first app
|
|
|
|
await admin.init()
|
2020-08-04 02:26:28 +12:00
|
|
|
|
|
|
|
// Create user
|
2022-01-21 22:10:59 +13:00
|
|
|
await API.updateOwnMetadata({ roleId: $values.roleId })
|
2021-11-05 02:03:18 +13:00
|
|
|
await auth.setInitInfo({})
|
2022-01-21 22:10:59 +13:00
|
|
|
$goto(`/builder/app/${createdApp.instance._id}`)
|
2020-08-04 01:59:50 +12:00
|
|
|
} catch (error) {
|
|
|
|
console.error(error)
|
2022-01-25 03:32:27 +13:00
|
|
|
notifications.error("Error creating app")
|
2020-05-27 21:44:15 +12:00
|
|
|
}
|
|
|
|
}
|
2021-11-04 00:43:52 +13:00
|
|
|
|
2022-01-21 05:01:09 +13:00
|
|
|
// auto add slash to url
|
|
|
|
$: {
|
|
|
|
if ($values.url && !$values.url.startsWith("/")) {
|
|
|
|
$values.url = `/${$values.url}`
|
2022-01-25 03:32:27 +13:00
|
|
|
}
|
2021-11-10 05:40:31 +13:00
|
|
|
}
|
2020-05-27 02:25:37 +12:00
|
|
|
</script>
|
|
|
|
|
2022-01-20 07:29:09 +13:00
|
|
|
<ModalContent
|
2022-01-21 05:01:09 +13:00
|
|
|
title={"Create your app"}
|
2022-01-20 07:29:09 +13:00
|
|
|
confirmText={template?.fromFile ? "Import app" : "Create app"}
|
|
|
|
onConfirm={createNewApp}
|
2022-01-21 05:01:09 +13:00
|
|
|
disabled={!$validation.valid}
|
2022-01-20 07:29:09 +13:00
|
|
|
>
|
2022-03-23 00:38:17 +13:00
|
|
|
{#if template && !template?.fromFile}
|
|
|
|
<TemplateCard
|
|
|
|
name={template.name}
|
|
|
|
imageSrc={template.image}
|
|
|
|
backgroundColour={template.background}
|
|
|
|
overlayEnabled={false}
|
|
|
|
icon={template.icon}
|
|
|
|
/>
|
|
|
|
{/if}
|
2022-01-20 07:29:09 +13:00
|
|
|
{#if template?.fromFile}
|
|
|
|
<Dropzone
|
2022-01-21 05:01:09 +13:00
|
|
|
error={$validation.touched.file && $validation.errors.file}
|
2022-01-20 07:29:09 +13:00
|
|
|
gallery={false}
|
|
|
|
label="File to import"
|
|
|
|
value={[$values.file]}
|
|
|
|
on:change={e => {
|
|
|
|
$values.file = e.detail?.[0]
|
2022-01-21 05:01:09 +13:00
|
|
|
$validation.touched.file = true
|
2021-05-10 22:53:32 +12:00
|
|
|
}}
|
|
|
|
/>
|
2022-01-20 07:29:09 +13:00
|
|
|
{/if}
|
|
|
|
<Input
|
|
|
|
bind:value={$values.name}
|
2022-01-21 05:01:09 +13:00
|
|
|
error={$validation.touched.name && $validation.errors.name}
|
|
|
|
on:blur={() => ($validation.touched.name = true)}
|
2022-01-20 07:29:09 +13:00
|
|
|
label="Name"
|
|
|
|
placeholder={$auth.user.firstName
|
2022-01-21 05:01:09 +13:00
|
|
|
? `${$auth.user.firstName}s app`
|
2022-01-20 07:29:09 +13:00
|
|
|
: "My app"}
|
|
|
|
/>
|
2022-03-23 00:38:17 +13:00
|
|
|
<span>
|
|
|
|
<Input
|
|
|
|
bind:value={$values.url}
|
|
|
|
error={$validation.touched.url && $validation.errors.url}
|
|
|
|
on:blur={() => ($validation.touched.url = true)}
|
|
|
|
label="URL"
|
|
|
|
placeholder={$values.url
|
|
|
|
? $values.url
|
|
|
|
: `/${resolveAppUrl(template, $values.name)}`}
|
|
|
|
/>
|
|
|
|
{#if $values.name}
|
|
|
|
<div class="app-server-wrap" title={appUrl}>
|
|
|
|
<span class="app-server-prefix">
|
|
|
|
{window.location.origin}
|
|
|
|
</span>
|
|
|
|
{$values.url
|
|
|
|
? $values.url
|
|
|
|
: `/${resolveAppUrl(template, $values.name)}`}
|
|
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
</span>
|
2022-01-20 07:29:09 +13:00
|
|
|
</ModalContent>
|
2022-03-23 00:38:17 +13:00
|
|
|
|
|
|
|
<style>
|
|
|
|
.app-server-prefix {
|
|
|
|
color: var(--spectrum-global-color-gray-500);
|
|
|
|
}
|
|
|
|
.app-server-wrap {
|
|
|
|
margin-top: 10px;
|
|
|
|
width: 320px;
|
|
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
|
|
</style>
|