Add non-gallery option to dropzeon and update create app modal
This commit is contained in:
Andrew Kingston
parent
d8120d107c
commit
2bf2045a0a
|
|
@ -15,6 +15,8 @@
|
|||
export let fileSizeLimit = BYTES_IN_MB * 20
|
||||
export let processFiles = null
|
||||
export let handleFileTooLarge = null
|
||||
export let gallery = true
|
||||
export let error = null
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
const imageExtensions = [
|
||||
|
|
@ -52,6 +54,8 @@
|
|||
const newValue = [...value, ...processedFiles]
|
||||
dispatch("change", newValue)
|
||||
selectedImageIdx = newValue.length - 1
|
||||
} else {
|
||||
dispatch("change", fileList)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -94,47 +98,68 @@
|
|||
|
||||
<div class="container">
|
||||
{#if selectedImage}
|
||||
<div class="gallery">
|
||||
<div class="title">
|
||||
<div class="filename">{selectedImage.name}</div>
|
||||
<div class="filesize">
|
||||
{#if selectedImage.size <= BYTES_IN_MB}
|
||||
{`${selectedImage.size / BYTES_IN_KB} KB`}
|
||||
{:else}{`${selectedImage.size / BYTES_IN_MB} MB`}{/if}
|
||||
{#if gallery}
|
||||
<div class="gallery">
|
||||
<div class="title">
|
||||
<div class="filename">{selectedImage.name}</div>
|
||||
<div class="filesize">
|
||||
{#if selectedImage.size <= BYTES_IN_MB}
|
||||
{`${selectedImage.size / BYTES_IN_KB} KB`}
|
||||
{:else}{`${selectedImage.size / BYTES_IN_MB} MB`}{/if}
|
||||
</div>
|
||||
{#if !disabled}
|
||||
<div class="delete-button" on:click={removeFile}>
|
||||
<Icon name="Close" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if !disabled}
|
||||
<div class="delete-button" on:click={removeFile}>
|
||||
<Icon name="Close" />
|
||||
{#if isImage}
|
||||
<img alt="preview" src={selectedImage.url} />
|
||||
{:else}
|
||||
<div class="placeholder">
|
||||
<div class="extension">{selectedImage.extension}</div>
|
||||
<div>Preview not supported</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if isImage}
|
||||
<img alt="preview" src={selectedImage.url} />
|
||||
{:else}
|
||||
<div class="placeholder">
|
||||
<div class="extension">{selectedImage.extension}</div>
|
||||
<div>Preview not supported</div>
|
||||
<div
|
||||
class="nav left"
|
||||
class:visible={selectedImageIdx > 0}
|
||||
on:click={navigateLeft}
|
||||
>
|
||||
<Icon name="ChevronLeft" />
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
class="nav left"
|
||||
class:visible={selectedImageIdx > 0}
|
||||
on:click={navigateLeft}
|
||||
>
|
||||
<Icon name="ChevronLeft" />
|
||||
<div
|
||||
class="nav right"
|
||||
class:visible={selectedImageIdx < fileCount - 1}
|
||||
on:click={navigateRight}
|
||||
>
|
||||
<Icon name="ChevronRight" />
|
||||
</div>
|
||||
<div class="footer">File {selectedImageIdx + 1} of {fileCount}</div>
|
||||
</div>
|
||||
<div
|
||||
class="nav right"
|
||||
class:visible={selectedImageIdx < fileCount - 1}
|
||||
on:click={navigateRight}
|
||||
>
|
||||
<Icon name="ChevronRight" />
|
||||
</div>
|
||||
<div class="footer">File {selectedImageIdx + 1} of {fileCount}</div>
|
||||
</div>
|
||||
{:else if value?.length}
|
||||
{#each value as file}
|
||||
<div class="gallery">
|
||||
<div class="title">
|
||||
<div class="filename">{file.name}</div>
|
||||
<div class="filesize">
|
||||
{#if file.size <= BYTES_IN_MB}
|
||||
{`${file.size / BYTES_IN_KB} KB`}
|
||||
{:else}{`${file.size / BYTES_IN_MB} MB`}{/if}
|
||||
</div>
|
||||
{#if !disabled}
|
||||
<div class="delete-button" on:click={removeFile}>
|
||||
<Icon name="Close" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
{/if}
|
||||
<div
|
||||
class="spectrum-Dropzone"
|
||||
class:is-invalid={!!error}
|
||||
class:disabled
|
||||
role="region"
|
||||
tabindex="0"
|
||||
|
|
@ -245,6 +270,9 @@
|
|||
.spectrum-Dropzone {
|
||||
user-select: none;
|
||||
}
|
||||
.spectrum-Dropzone.is-invalid {
|
||||
border-color: var(--spectrum-global-color-red-400);
|
||||
}
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -276,7 +304,7 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
align-items: center;
|
||||
}
|
||||
.filename {
|
||||
flex: 1 1 auto;
|
||||
|
|
@ -331,6 +359,7 @@
|
|||
.delete-button {
|
||||
transition: all 0.3s;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
}
|
||||
.delete-button i {
|
||||
font-size: 2em;
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
}
|
||||
focus = false
|
||||
updateValue(event.target.value)
|
||||
dispatch("blur")
|
||||
}
|
||||
|
||||
const updateValueOnEnter = event => {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
export let fileSizeLimit = undefined
|
||||
export let processFiles = undefined
|
||||
export let handleFileTooLarge = undefined
|
||||
export let gallery = true
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
const onChange = e => {
|
||||
|
|
@ -27,6 +28,7 @@
|
|||
{fileSizeLimit}
|
||||
{processFiles}
|
||||
{handleFileTooLarge}
|
||||
{gallery}
|
||||
on:change={onChange}
|
||||
/>
|
||||
</Field>
|
||||
|
|
|
|||
|
|
@ -30,5 +30,6 @@
|
|||
on:change={onChange}
|
||||
on:click
|
||||
on:input
|
||||
on:blur
|
||||
/>
|
||||
</Field>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
.wide {
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding: var(--spacing-xl) calc(var(--spacing-xl) * 2);
|
||||
padding: var(--spacing-xl) calc(var(--spacing-xl) * 2)
|
||||
calc(var(--spacing-xl) * 2) calc(var(--spacing-xl) * 2);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,58 +1,50 @@
|
|||
<script>
|
||||
import { writable, get as svelteGet } from "svelte/store"
|
||||
import { notifications, Heading, Button } from "@budibase/bbui"
|
||||
import {
|
||||
notifications,
|
||||
Input,
|
||||
ModalContent,
|
||||
Dropzone,
|
||||
Body,
|
||||
Checkbox,
|
||||
} from "@budibase/bbui"
|
||||
import { store, automationStore, hostingStore } from "builderStore"
|
||||
import { string, object } from "yup"
|
||||
import { string, mixed, object } from "yup"
|
||||
import api, { get } from "builderStore/api"
|
||||
import Spinner from "components/common/Spinner.svelte"
|
||||
import { Info, User } from "./Steps"
|
||||
import Indicator from "./Indicator.svelte"
|
||||
import { fade } from "svelte/transition"
|
||||
import { post } from "builderStore/api"
|
||||
import analytics from "analytics"
|
||||
import { onMount } from "svelte"
|
||||
import Logo from "/assets/bb-logo.svg"
|
||||
import { capitalise } from "../../helpers"
|
||||
import { goto } from "@roxi/routify"
|
||||
|
||||
export let template
|
||||
|
||||
const currentStep = writable(0)
|
||||
const values = writable({ roleId: "ADMIN" })
|
||||
const values = writable({ name: null })
|
||||
const errors = writable({})
|
||||
const touched = writable({})
|
||||
const steps = [Info, User]
|
||||
let validators = [
|
||||
{
|
||||
applicationName: string().required("Your application must have a name"),
|
||||
},
|
||||
{
|
||||
roleId: string()
|
||||
.nullable()
|
||||
.required("You need to select a role for this app"),
|
||||
},
|
||||
]
|
||||
const validator = {
|
||||
name: string().required("Your application must have a name"),
|
||||
file: mixed().required("Please choose a file to import"),
|
||||
}
|
||||
|
||||
let submitting = false
|
||||
let valid = false
|
||||
$: checkValidity($values, validators[$currentStep])
|
||||
$: checkValidity($values, validator)
|
||||
|
||||
onMount(async () => {
|
||||
const hostingInfo = await hostingStore.actions.fetch()
|
||||
if (hostingInfo.type === "self") {
|
||||
await hostingStore.actions.fetchDeployedApps()
|
||||
const existingAppNames = svelteGet(hostingStore).deployedAppNames
|
||||
validators[0].applicationName = string()
|
||||
.required("Your application must have a name.")
|
||||
.test(
|
||||
"non-existing-app-name",
|
||||
"App with same name already exists. Please try another app name.",
|
||||
value =>
|
||||
!existingAppNames.some(
|
||||
appName => appName.toLowerCase() === value.toLowerCase()
|
||||
)
|
||||
)
|
||||
}
|
||||
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 => appName.toLowerCase() === value.toLowerCase()
|
||||
)
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
const checkValidity = async (values, validator) => {
|
||||
|
|
@ -70,15 +62,24 @@
|
|||
|
||||
async function createNewApp() {
|
||||
submitting = true
|
||||
|
||||
// Check a template exists if we are important
|
||||
if (template && !$values.file) {
|
||||
$errors.file = "Please choose a file to import"
|
||||
valid = false
|
||||
submitting = false
|
||||
return false
|
||||
}
|
||||
|
||||
try {
|
||||
// Create form data to create app
|
||||
let data = new FormData()
|
||||
data.append("name", $values.applicationName)
|
||||
data.append("name", $values.name)
|
||||
data.append("useTemplate", template != null)
|
||||
if (template) {
|
||||
data.append("templateName", template.name)
|
||||
data.append("templateKey", template.key)
|
||||
data.append("templateFile", template.file)
|
||||
data.append("templateFile", $values.file)
|
||||
}
|
||||
|
||||
// Create App
|
||||
|
|
@ -89,7 +90,7 @@
|
|||
}
|
||||
|
||||
analytics.captureEvent("App Created", {
|
||||
name: $values.applicationName,
|
||||
name: $values.name,
|
||||
appId: appJson._id,
|
||||
template,
|
||||
})
|
||||
|
|
@ -121,129 +122,91 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="sidebar">
|
||||
<img src={Logo} alt="budibase icon" />
|
||||
<div class="steps">
|
||||
{#each steps as component, i}
|
||||
<Indicator
|
||||
active={$currentStep === i}
|
||||
done={i < $currentStep}
|
||||
step={i + 1}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="heading">
|
||||
<Heading size="L">Get started with Budibase</Heading>
|
||||
</div>
|
||||
<div class="step">
|
||||
{#each steps as component, i (i)}
|
||||
<div class:hidden={$currentStep !== i}>
|
||||
<svelte:component
|
||||
this={component}
|
||||
{template}
|
||||
{values}
|
||||
{errors}
|
||||
{touched}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="footer">
|
||||
{#if $currentStep > 0}
|
||||
<Button medium secondary on:click={() => $currentStep--}>Back</Button>
|
||||
{/if}
|
||||
{#if $currentStep < steps.length - 1}
|
||||
<Button medium cta on:click={() => $currentStep++} disabled={!valid}>
|
||||
Next
|
||||
</Button>
|
||||
{/if}
|
||||
{#if $currentStep === steps.length - 1}
|
||||
<Button
|
||||
medium
|
||||
cta
|
||||
on:click={createNewApp}
|
||||
disabled={!valid || submitting}
|
||||
>
|
||||
{submitting ? "Loading..." : "Submit"}
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if submitting}
|
||||
<div in:fade class="spinner-container">
|
||||
<Spinner />
|
||||
<span class="spinner-text">Creating your app...</span>
|
||||
</div>
|
||||
<ModalContent
|
||||
title={template ? "Import app" : "Create new app"}
|
||||
confirmText={template ? "Import app" : "Create app"}
|
||||
onConfirm={createNewApp}
|
||||
disabled={!valid}
|
||||
>
|
||||
{#if template}
|
||||
<Dropzone
|
||||
error={$touched.file && $errors.file}
|
||||
gallery={false}
|
||||
label="File to import"
|
||||
value={[$values.file]}
|
||||
on:change={e => {
|
||||
$values.file = e.detail?.[0]
|
||||
$touched.file = true
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
<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)}
|
||||
label="Name"
|
||||
/>
|
||||
<Checkbox label="Group access" disabled value={true} text="All users" />
|
||||
</ModalContent>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
min-height: 600px;
|
||||
display: grid;
|
||||
grid-template-columns: 80px 1fr;
|
||||
position: relative;
|
||||
}
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
padding: 40px 0;
|
||||
background: var(--grey-1);
|
||||
}
|
||||
.steps {
|
||||
flex: 1 1 auto;
|
||||
display: grid;
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
border-top-left-radius: 0.5rem;
|
||||
grid-gap: 30px;
|
||||
align-content: center;
|
||||
}
|
||||
.heading {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.body {
|
||||
padding: 40px 60px 40px 60px;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
.spinner-container {
|
||||
background: var(--background);
|
||||
position: absolute;
|
||||
border-radius: 5px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-content: center;
|
||||
grid-gap: 50px;
|
||||
}
|
||||
.spinner-text {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
img {
|
||||
height: 40px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
<!--<div class="container">-->
|
||||
<!-- <div class="sidebar">-->
|
||||
<!-- <img src={Logo} alt="budibase icon" />-->
|
||||
<!-- <div class="steps">-->
|
||||
<!-- {#each steps as component, i}-->
|
||||
<!-- <Indicator-->
|
||||
<!-- active={$currentStep === i}-->
|
||||
<!-- done={i < $currentStep}-->
|
||||
<!-- step={i + 1}-->
|
||||
<!-- />-->
|
||||
<!-- {/each}-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="body">-->
|
||||
<!-- <div class="heading">-->
|
||||
<!-- <Heading size="L">Get started with Budibase</Heading>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="step">-->
|
||||
<!-- {#each steps as component, i (i)}-->
|
||||
<!-- <div class:hidden={$currentStep !== i}>-->
|
||||
<!-- <svelte:component-->
|
||||
<!-- this={component}-->
|
||||
<!-- {template}-->
|
||||
<!-- {values}-->
|
||||
<!-- {errors}-->
|
||||
<!-- {touched}-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
<!-- {/each}-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="footer">-->
|
||||
<!-- {#if $currentStep > 0}-->
|
||||
<!-- <Button medium secondary on:click={() => $currentStep--}>Back</Button>-->
|
||||
<!-- {/if}-->
|
||||
<!-- {#if $currentStep < steps.length - 1}-->
|
||||
<!-- <Button medium cta on:click={() => $currentStep++} disabled={!valid}>-->
|
||||
<!-- Next-->
|
||||
<!-- </Button>-->
|
||||
<!-- {/if}-->
|
||||
<!-- {#if $currentStep === steps.length - 1}-->
|
||||
<!-- <Button-->
|
||||
<!-- medium-->
|
||||
<!-- cta-->
|
||||
<!-- on:click={createNewApp}-->
|
||||
<!-- disabled={!valid || submitting}-->
|
||||
<!-- >-->
|
||||
<!-- {submitting ? "Loading..." : "Submit"}-->
|
||||
<!-- </Button>-->
|
||||
<!-- {/if}-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- {#if submitting}-->
|
||||
<!-- <div in:fade class="spinner-container">-->
|
||||
<!-- <Spinner />-->
|
||||
<!-- <span class="spinner-text">Creating your app...</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- {/if}-->
|
||||
|
|
|
|||
|
|
@ -85,10 +85,14 @@
|
|||
/>
|
||||
</ActionGroup>
|
||||
</div>
|
||||
{#if layout === "grid"}
|
||||
<AppGridView {exportApp} />
|
||||
{#if $apps.length}
|
||||
{#if layout === "grid"}
|
||||
<AppGridView {exportApp} />
|
||||
{:else}
|
||||
<AppTableView {exportApp} />
|
||||
{/if}
|
||||
{:else}
|
||||
<AppTableView {exportApp} />
|
||||
<div>No apps.</div>
|
||||
{/if}
|
||||
</Layout>
|
||||
</Page>
|
||||
|
|
|
|||
Loading…
Reference in New Issue