Merge pull request #3520 from Budibase/feature/auto-screen-ui
Autoscreen ux changes
This commit is contained in:
Peter Clement
GitHub
commit
4d18fa2360
|
|
@ -1,13 +1,20 @@
|
|||
<script>
|
||||
import { store } from "builderStore"
|
||||
import { tables } from "stores/backend"
|
||||
import { ModalContent, Body, Detail, Layout, Icon } from "@budibase/bbui"
|
||||
import {
|
||||
ModalContent,
|
||||
Body,
|
||||
Detail,
|
||||
Layout,
|
||||
Icon,
|
||||
ProgressCircle,
|
||||
} from "@budibase/bbui"
|
||||
import getTemplates from "builderStore/store/screenTemplates"
|
||||
|
||||
export let selectedScreens = []
|
||||
export let chooseModal
|
||||
export let save
|
||||
|
||||
export let showProgressCircle = false
|
||||
const blankScreen = "createFromScratch"
|
||||
|
||||
$: blankSelected = selectedScreens?.length === 1
|
||||
|
|
@ -27,78 +34,108 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
title="Add screens"
|
||||
confirmText="Add Screens"
|
||||
cancelText="Cancel"
|
||||
onConfirm={() => (autoSelected ? save() : chooseModal(1))}
|
||||
disabled={!selectedScreens.length}
|
||||
size="L"
|
||||
>
|
||||
<Body size="XS"
|
||||
>Please select the screens you would like to add to your application.
|
||||
Autogenerated screens come with CRUD functionality.</Body
|
||||
<div style="overflow-y: auto; max-height: 1000px">
|
||||
<ModalContent
|
||||
title="Add screens"
|
||||
confirmText="Add Screens"
|
||||
cancelText="Cancel"
|
||||
onConfirm={() => (autoSelected ? save() : chooseModal(1))}
|
||||
disabled={!selectedScreens.length}
|
||||
size="L"
|
||||
>
|
||||
|
||||
<Layout noPadding gap="S">
|
||||
<Detail size="S">Blank screen</Detail>
|
||||
<div
|
||||
class="item"
|
||||
class:selected={selectedScreens.find(x => x.id.includes(blankScreen))}
|
||||
on:click={() =>
|
||||
toggleScreenSelection(templates.find(t => t.id === blankScreen))}
|
||||
class:disabled={autoSelected}
|
||||
<Body size="XS"
|
||||
>Please select the screens you would like to add to your application.
|
||||
Autogenerated screens come with CRUD functionality.</Body
|
||||
>
|
||||
<div data-cy="blank-screen" class="content">
|
||||
<Body size="S">Blank</Body>
|
||||
</div>
|
||||
<div style="color: var(--spectrum-global-color-green-600); float: right">
|
||||
{#if selectedScreens.find(x => x.id === blankScreen)}
|
||||
<Icon size="S" name="CheckmarkCircleOutline" />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<Detail size="S">Autogenerated Screens</Detail>
|
||||
|
||||
{#each $tables.list.filter(table => table._id !== "ta_users") as table}
|
||||
<Layout noPadding gap="S">
|
||||
<Detail size="S">Blank screen</Detail>
|
||||
<div
|
||||
class:disabled={blankSelected}
|
||||
class:selected={selectedScreens.find(x => x.name.includes(table.name))}
|
||||
on:click={() => toggleScreenSelection(table)}
|
||||
class="item"
|
||||
class:selected={selectedScreens.find(x => x.id.includes(blankScreen))}
|
||||
on:click={() =>
|
||||
toggleScreenSelection(templates.find(t => t.id === blankScreen))}
|
||||
class:disabled={autoSelected}
|
||||
>
|
||||
<div class="content">
|
||||
{table.name}
|
||||
<div data-cy="blank-screen" class="content">
|
||||
<div class="text">Blank</div>
|
||||
</div>
|
||||
<div
|
||||
style="color: var(--spectrum-global-color-green-600); float: right"
|
||||
>
|
||||
{#if selectedScreens.find(x => x.name.includes(table.name))}
|
||||
<Icon size="S" name="CheckmarkCircleOutline" />
|
||||
{#if selectedScreens.find(x => x.id === blankScreen)}
|
||||
<div class="checkmark-spacing">
|
||||
<Icon size="S" name="CheckmarkCircleOutline" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</Layout>
|
||||
</ModalContent>
|
||||
<Detail size="S">Autogenerated Screens</Detail>
|
||||
|
||||
{#each $tables.list.filter(table => table._id !== "ta_users") as table}
|
||||
<div
|
||||
class:disabled={blankSelected}
|
||||
class:selected={selectedScreens.find(x =>
|
||||
x.name.includes(table.name)
|
||||
)}
|
||||
on:click={() => toggleScreenSelection(table)}
|
||||
class="item"
|
||||
>
|
||||
<div class="content">
|
||||
<div class="text">{table.name}</div>
|
||||
</div>
|
||||
<div
|
||||
style="color: var(--spectrum-global-color-green-600); float: right"
|
||||
>
|
||||
{#if selectedScreens.find(x => x.name.includes(table.name))}
|
||||
<div class="checkmark-spacing">
|
||||
<Icon size="S" name="CheckmarkCircleOutline" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</Layout>
|
||||
<div slot="footer">
|
||||
{#if showProgressCircle}
|
||||
<div class="footer-progress"><ProgressCircle size="S" /></div>
|
||||
{/if}
|
||||
</div>
|
||||
</ModalContent>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.disabled {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
.checkmark-spacing {
|
||||
margin-right: var(--spacing-m);
|
||||
}
|
||||
|
||||
.content {
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
|
||||
.footer-progress {
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
|
||||
.text {
|
||||
font-weight: 600;
|
||||
margin-left: var(--spacing-m);
|
||||
font-size: 14px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.item {
|
||||
cursor: pointer;
|
||||
grid-gap: var(--spectrum-alias-grid-margin-xsmall);
|
||||
padding: var(--spectrum-alias-item-padding-s);
|
||||
background: var(--background);
|
||||
background: var(--spectrum-alias-background-color-primary);
|
||||
transition: 0.3s all;
|
||||
border: solid var(--spectrum-alias-border-color);
|
||||
border-radius: 2px;
|
||||
border: 1px solid #e7e7e7;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { ModalContent, Input } from "@budibase/bbui"
|
||||
import { ModalContent, Input, ProgressCircle } from "@budibase/bbui"
|
||||
import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
|
||||
import { selectedAccessRole, allScreens } from "builderStore"
|
||||
|
||||
|
|
@ -7,6 +7,8 @@
|
|||
export let url
|
||||
export let chooseModal
|
||||
export let save
|
||||
export let showProgressCircle = false
|
||||
|
||||
let routeError
|
||||
let roleId = $selectedAccessRole || "BASIC"
|
||||
|
||||
|
|
@ -48,4 +50,15 @@
|
|||
bind:value={url}
|
||||
on:change={routeChanged}
|
||||
/>
|
||||
<div slot="footer">
|
||||
{#if showProgressCircle}
|
||||
<div class="footer-progress"><ProgressCircle size="S" /></div>
|
||||
{/if}
|
||||
</div>
|
||||
</ModalContent>
|
||||
|
||||
<style>
|
||||
.footer-progress {
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,32 +12,36 @@
|
|||
let screenName = ""
|
||||
let url = ""
|
||||
let selectedScreens = []
|
||||
|
||||
let roleId = $selectedAccessRole || "BASIC"
|
||||
|
||||
let showProgressCircle = false
|
||||
let routeError
|
||||
let createdScreens = []
|
||||
$: {
|
||||
selectedScreens?.forEach(screen => {
|
||||
createdScreens = [...createdScreens, screen.create()]
|
||||
})
|
||||
|
||||
const createScreens = async () => {
|
||||
for (let screen of selectedScreens) {
|
||||
let test = screen.create()
|
||||
createdScreens.push(test)
|
||||
}
|
||||
}
|
||||
|
||||
const save = async () => {
|
||||
showProgressCircle = true
|
||||
await createScreens()
|
||||
for (let screen of createdScreens) {
|
||||
await saveScreens(screen)
|
||||
}
|
||||
|
||||
await store.actions.routing.fetch()
|
||||
selectedScreens = []
|
||||
createdScreens = []
|
||||
screenName = ""
|
||||
url = ""
|
||||
showProgressCircle = false
|
||||
}
|
||||
const saveScreens = async draftScreen => {
|
||||
let existingScreenCount = $store.screens.filter(
|
||||
s => s.props._instanceName == draftScreen.props._instanceName
|
||||
).length
|
||||
|
||||
if (existingScreenCount > 0) {
|
||||
let oldUrlArr = draftScreen.routing.route.split("/")
|
||||
oldUrlArr[1] = `${oldUrlArr[1]}-${existingScreenCount + 1}`
|
||||
|
|
@ -86,6 +90,7 @@
|
|||
selectedScreens = []
|
||||
screenName = ""
|
||||
url = ""
|
||||
createdScreens = []
|
||||
})
|
||||
|
||||
export const showModal = () => {
|
||||
|
|
@ -109,9 +114,20 @@
|
|||
</script>
|
||||
|
||||
<Modal bind:this={newScreenModal}>
|
||||
<NewScreenModal bind:selectedScreens {save} {chooseModal} />
|
||||
<NewScreenModal
|
||||
bind:selectedScreens
|
||||
{showProgressCircle}
|
||||
{save}
|
||||
{chooseModal}
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
<Modal bind:this={screenDetailsModal}>
|
||||
<ScreenDetailsModal bind:screenName bind:url {save} {chooseModal} />
|
||||
<ScreenDetailsModal
|
||||
bind:screenName
|
||||
bind:url
|
||||
{showProgressCircle}
|
||||
{save}
|
||||
{chooseModal}
|
||||
/>
|
||||
</Modal>
|
||||
|
|
|
|||
Loading…
Reference in New Issue