MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix datasource selection after import and add maxmimum files support to dropzone

This commit is contained in:
Rory Powell 2021-12-02 16:51:13 +00:00
parent cadd3cf259
commit 9d5866e747
3 changed files with 130 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

215
packages/bbui/src/Form/Core/Dropzone.svelte
View File

@ -21,6 +21,7 @@
export let gallery = true export let gallery = true
export let error = null export let error = null
export let fileTags = [] export let fileTags = []
export let maximum = null
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
const imageExtensions = [ const imageExtensions = [
@ -187,116 +188,118 @@
{/each} {/each}
{/if} {/if}
{/if} {/if}
<div {#if !maximum || (maximum && value?.length < maximum)}
class="spectrum-Dropzone" <div
class:is-invalid={!!error} class="spectrum-Dropzone"
class:disabled class:is-invalid={!!error}
role="region" class:disabled
tabindex="0" role="region"
on:dragover={handleDragOver} tabindex="0"
on:dragleave={handleDragLeave} on:dragover={handleDragOver}
on:dragenter={handleDragOver} on:dragleave={handleDragLeave}
on:drop={handleDrop} on:dragenter={handleDragOver}
class:is-dragged={fileDragged} on:drop={handleDrop}
> class:is-dragged={fileDragged}
<div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta"> >
<input <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
id={fieldId} <input
{disabled} id={fieldId}
type="file" {disabled}
multiple type="file"
on:change={handleFile} multiple
/> on:change={handleFile}
<svg
class="spectrum-IllustratedMessage-illustration"
width="125"
height="60"
viewBox="0 0 199 97.7"
>
<defs>
<style>
.cls-1,
.cls-2 {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.cls-1 {
stroke-width: 3px;
}
.cls-2 {
stroke-width: 2px;
}
</style>
</defs>
<path
class="cls-1"
d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"
/> />
<line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5" /> <svg
<path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" /> class="spectrum-IllustratedMessage-illustration"
<path width="125"
class="cls-1" height="60"
d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19" viewBox="0 0 199 97.7"
/>
<line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" />
<path
class="cls-2"
d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"
/>
<path
class="cls-2"
d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"
/>
<path
class="cls-2"
d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"
/>
<path
class="cls-1"
d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"
/>
<rect
class="cls-1"
x="1.5"
y="34.5"
width="58"
height="39"
rx="2"
ry="2"
/>
</svg>
<h2
class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading"
>
Drag and drop your file
</h2>
{#if !disabled}
<p
class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"
> >
<label for={fieldId} class="spectrum-Link"> <defs>
Select a file to upload <style>
</label> .cls-1,
<br /> .cls-2 {
from your computer fill: none;
</p> stroke-linecap: round;
{#if fileTags.length} stroke-linejoin: round;
<Tags> }
<div class="tags"> .cls-1 {
{#each fileTags as tag} stroke-width: 3px;
<div class="tag"> }
<Tag> .cls-2 {
{tag} stroke-width: 2px;
</Tag> }
</div> </style>
{/each} </defs>
</div> <path
</Tags> class="cls-1"
d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"
/>
<line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5" />
<path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" />
<path
class="cls-1"
d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"
/>
<line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" />
<path
class="cls-2"
d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"
/>
<path
class="cls-2"
d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"
/>
<path
class="cls-2"
d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"
/>
<path
class="cls-1"
d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"
/>
<rect
class="cls-1"
x="1.5"
y="34.5"
width="58"
height="39"
rx="2"
ry="2"
/>
</svg>
<h2
class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading"
>
Drag and drop your file
</h2>
{#if !disabled}
<p
class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"
>
<label for={fieldId} class="spectrum-Link">
Select a file to upload
</label>
<br />
from your computer
</p>
{#if fileTags.length}
<Tags>
<div class="tags">
{#each fileTags as tag}
<div class="tag">
<Tag>
{tag}
</Tag>
</div>
{/each}
</div>
</Tags>
{/if}
{/if} {/if}
{/if} </div>
</div> </div>
</div> {/if}
</div> </div>
<style> <style>

2
packages/bbui/src/Form/Dropzone.svelte
View File

@ -13,6 +13,7 @@
export let handleFileTooLarge = undefined export let handleFileTooLarge = undefined
export let gallery = true export let gallery = true
export let fileTags = [] export let fileTags = []
export let maximum = undefined
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
const onChange = e => { const onChange = e => {
@ -31,6 +32,7 @@
{handleFileTooLarge} {handleFileTooLarge}
{gallery} {gallery}
{fileTags} {fileTags}
{maximum}
on:change={onChange} on:change={onChange}
/> />
</Field> </Field>

30
packages/builder/src/components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte
View File

@ -14,16 +14,17 @@
} from "@budibase/bbui" } from "@budibase/bbui"
import analytics, { Events } from "analytics" import analytics, { Events } from "analytics"
import { datasources, queries } from "stores/backend" import { datasources, queries } from "stores/backend"
import { writable } from "svelte/store"
export let modal export let modal
export let datasourceId export let datasourceId
export let createDatasource = false export let createDatasource = false
let data = { const data = writable({
url: "", url: "",
raw: "", raw: "",
file: "", file: undefined,
} })
let lastTouched = "url" let lastTouched = "url"
@ -32,12 +33,12 @@
// parse the file into memory and send as string // parse the file into memory and send as string
if (lastTouched === "file") { if (lastTouched === "file") {
dataString = await data.file[0].text() dataString = await $data.file.text()
} else if (lastTouched === "url") { } else if (lastTouched === "url") {
const response = await fetch(data.url) const response = await fetch($data.url)
dataString = await response.text() dataString = await response.text()
} else if (lastTouched === "raw") { } else if (lastTouched === "raw") {
dataString = data.raw dataString = $data.raw
} }
return dataString return dataString
@ -56,7 +57,10 @@
datasourceId, datasourceId,
} }
await queries.import(body) const importResult = await queries.import(body)
if (!datasourceId) {
datasourceId = importResult.datasourceId
}
// reload // reload
await datasources.fetch() await datasources.fetch()
@ -93,7 +97,7 @@
<Tabs selected="Link"> <Tabs selected="Link">
<Tab title="Link"> <Tab title="Link">
<Input <Input
bind:value={data.url} bind:value={$data.url}
on:change={() => (lastTouched = "url")} on:change={() => (lastTouched = "url")}
label="Enter a URL" label="Enter a URL"
placeholder="e.g. https://petstore.swagger.io/v2/swagger.json" placeholder="e.g. https://petstore.swagger.io/v2/swagger.json"
@ -102,14 +106,18 @@
<Tab title="File"> <Tab title="File">
<Dropzone <Dropzone
gallery={false} gallery={false}
bind:value={data.file} value={$data.file ? [$data.file] : []}
on:change={() => (lastTouched = "file")} on:change={e => {
$data.file = e.detail?.[0]
lastTouched = "file"
}}
fileTags={["OpenAPI 2.0", "Swagger 2.0", "cURL", "YAML", "JSON"]} fileTags={["OpenAPI 2.0", "Swagger 2.0", "cURL", "YAML", "JSON"]}
maximum={1}
/> />
</Tab> </Tab>
<Tab title="Raw Text"> <Tab title="Raw Text">
<TextArea <TextArea
bind:value={data.raw} bind:value={$data.raw}
on:change={() => (lastTouched = "raw")} on:change={() => (lastTouched = "raw")}
label={"Paste raw text"} label={"Paste raw text"}
placeholder={'e.g. curl --location --request GET "https://example.com"'} placeholder={'e.g. curl --location --request GET "https://example.com"'}