2019-08-07 20:03:49 +12:00
|
|
|
<script>
|
2021-11-11 05:04:27 +13:00
|
|
|
import { store } from "builderStore"
|
2021-08-26 21:11:48 +12:00
|
|
|
import { tables } from "stores/backend"
|
2021-11-24 09:14:28 +13:00
|
|
|
import {
|
|
|
|
|
ModalContent,
|
|
|
|
|
Body,
|
|
|
|
|
Detail,
|
|
|
|
|
Layout,
|
|
|
|
|
Icon,
|
|
|
|
|
ProgressCircle,
|
|
|
|
|
} from "@budibase/bbui"
|
2020-10-09 03:46:29 +13:00
|
|
|
import getTemplates from "builderStore/store/screenTemplates"
|
2021-11-30 00:53:46 +13:00
|
|
|
import { onDestroy } from "svelte"
|
|
|
|
|
|
|
|
|
|
import { createEventDispatcher } from "svelte"
|
2020-10-09 02:53:06 +13:00
|
|
|
|
2021-11-17 23:24:14 +13:00
|
|
|
export let chooseModal
|
2021-11-23 22:01:12 +13:00
|
|
|
export let save
|
2021-11-24 09:14:28 +13:00
|
|
|
export let showProgressCircle = false
|
2021-11-30 00:53:46 +13:00
|
|
|
|
|
|
|
|
let selectedScreens = []
|
|
|
|
|
|
2021-11-11 05:04:27 +13:00
|
|
|
const blankScreen = "createFromScratch"
|
2021-11-30 00:53:46 +13:00
|
|
|
const dispatch = createEventDispatcher()
|
|
|
|
|
|
|
|
|
|
function setScreens() {
|
|
|
|
|
dispatch("save", {
|
|
|
|
|
screens: selectedScreens,
|
|
|
|
|
})
|
|
|
|
|
}
|
2021-11-17 23:24:14 +13:00
|
|
|
|
|
|
|
|
$: blankSelected = selectedScreens?.length === 1
|
|
|
|
|
$: autoSelected = selectedScreens?.length > 0 && !blankSelected
|
2021-11-30 00:53:46 +13:00
|
|
|
|
2021-11-23 22:01:12 +13:00
|
|
|
let templates = getTemplates($store, $tables.list)
|
2021-11-30 00:53:46 +13:00
|
|
|
|
|
|
|
|
const confirm = async () => {
|
|
|
|
|
if (autoSelected) {
|
|
|
|
|
setScreens()
|
|
|
|
|
await save()
|
|
|
|
|
} else {
|
|
|
|
|
setScreens()
|
|
|
|
|
chooseModal(1)
|
|
|
|
|
}
|
|
|
|
|
}
|
2021-11-11 05:04:27 +13:00
|
|
|
const toggleScreenSelection = table => {
|
2021-11-25 08:10:10 +13:00
|
|
|
if (selectedScreens.find(s => s.table === table.name)) {
|
2021-11-11 05:04:27 +13:00
|
|
|
selectedScreens = selectedScreens.filter(
|
2021-11-25 08:10:10 +13:00
|
|
|
screen => screen.table !== table.name
|
2021-11-11 05:04:27 +13:00
|
|
|
)
|
2021-11-09 22:33:34 +13:00
|
|
|
} else {
|
2021-11-23 22:01:12 +13:00
|
|
|
let partialTemplates = getTemplates($store, $tables.list).filter(
|
2021-11-25 08:10:10 +13:00
|
|
|
template => template.table === table.name
|
2021-11-11 05:04:27 +13:00
|
|
|
)
|
2021-11-23 22:01:12 +13:00
|
|
|
selectedScreens = [...partialTemplates, ...selectedScreens]
|
2020-02-25 23:01:07 +13:00
|
|
|
}
|
|
|
|
|
}
|
2021-11-30 00:53:46 +13:00
|
|
|
|
|
|
|
|
onDestroy(() => {
|
|
|
|
|
selectedScreens = []
|
|
|
|
|
})
|
2019-08-07 20:03:49 +12:00
|
|
|
</script>
|
|
|
|
|
|
2021-11-30 00:53:46 +13:00
|
|
|
<div>
|
2021-11-24 09:14:28 +13:00
|
|
|
<ModalContent
|
|
|
|
|
title="Add screens"
|
|
|
|
|
confirmText="Add Screens"
|
|
|
|
|
cancelText="Cancel"
|
2021-11-30 00:53:46 +13:00
|
|
|
onConfirm={() => confirm()}
|
2021-11-24 09:14:28 +13:00
|
|
|
disabled={!selectedScreens.length}
|
|
|
|
|
size="L"
|
2021-11-09 22:33:34 +13:00
|
|
|
>
|
2021-12-04 03:27:38 +13:00
|
|
|
<Body size="S"
|
2021-11-24 09:14:28 +13:00
|
|
|
>Please select the screens you would like to add to your application.
|
|
|
|
|
Autogenerated screens come with CRUD functionality.</Body
|
2021-11-09 22:33:34 +13:00
|
|
|
>
|
|
|
|
|
|
2021-11-24 09:14:28 +13:00
|
|
|
<Layout noPadding gap="S">
|
|
|
|
|
<Detail size="S">Blank screen</Detail>
|
2021-11-09 22:33:34 +13:00
|
|
|
<div
|
|
|
|
|
class="item"
|
2021-11-24 09:14:28 +13:00
|
|
|
class:selected={selectedScreens.find(x => x.id.includes(blankScreen))}
|
|
|
|
|
on:click={() =>
|
|
|
|
|
toggleScreenSelection(templates.find(t => t.id === blankScreen))}
|
|
|
|
|
class:disabled={autoSelected}
|
2021-11-09 22:33:34 +13:00
|
|
|
>
|
2021-11-24 09:14:28 +13:00
|
|
|
<div data-cy="blank-screen" class="content">
|
|
|
|
|
<div class="text">Blank</div>
|
2021-11-09 22:33:34 +13:00
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
style="color: var(--spectrum-global-color-green-600); float: right"
|
|
|
|
|
>
|
2021-11-24 09:14:28 +13:00
|
|
|
{#if selectedScreens.find(x => x.id === blankScreen)}
|
|
|
|
|
<div class="checkmark-spacing">
|
|
|
|
|
<Icon size="S" name="CheckmarkCircleOutline" />
|
|
|
|
|
</div>
|
2021-11-09 22:33:34 +13:00
|
|
|
{/if}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2021-11-30 00:53:46 +13:00
|
|
|
{#if $tables.list.filter(table => table._id !== "ta_users").length > 0}
|
|
|
|
|
<Detail size="S">Autogenerated Screens</Detail>
|
2021-11-24 09:14:28 +13:00
|
|
|
|
2021-11-30 00:53:46 +13:00
|
|
|
{#each $tables.list.filter(table => table._id !== "ta_users") as table}
|
2021-11-24 09:14:28 +13:00
|
|
|
<div
|
2021-11-30 00:53:46 +13:00
|
|
|
class:disabled={blankSelected}
|
|
|
|
|
class:selected={selectedScreens.find(x => x.table === table.name)}
|
|
|
|
|
on:click={() => toggleScreenSelection(table)}
|
|
|
|
|
class="item"
|
2021-11-24 09:14:28 +13:00
|
|
|
>
|
2021-11-30 00:53:46 +13:00
|
|
|
<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.table === table.name)}
|
|
|
|
|
<div class="checkmark-spacing">
|
|
|
|
|
<Icon size="S" name="CheckmarkCircleOutline" />
|
|
|
|
|
</div>
|
|
|
|
|
{/if}
|
|
|
|
|
</div>
|
2021-11-24 09:14:28 +13:00
|
|
|
</div>
|
2021-11-30 00:53:46 +13:00
|
|
|
{/each}
|
|
|
|
|
{/if}
|
2021-11-24 09:14:28 +13:00
|
|
|
</Layout>
|
|
|
|
|
<div slot="footer">
|
|
|
|
|
{#if showProgressCircle}
|
|
|
|
|
<div class="footer-progress"><ProgressCircle size="S" /></div>
|
|
|
|
|
{/if}
|
|
|
|
|
</div>
|
|
|
|
|
</ModalContent>
|
|
|
|
|
</div>
|
2021-11-09 22:33:34 +13:00
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.disabled {
|
|
|
|
|
opacity: 0.3;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
2021-11-24 09:14:28 +13:00
|
|
|
.checkmark-spacing {
|
|
|
|
|
margin-right: var(--spacing-m);
|
|
|
|
|
}
|
2021-11-09 22:33:34 +13:00
|
|
|
|
|
|
|
|
.content {
|
|
|
|
|
letter-spacing: 0px;
|
|
|
|
|
}
|
2021-11-24 09:14:28 +13:00
|
|
|
|
|
|
|
|
.footer-progress {
|
|
|
|
|
margin-top: var(--spacing-s);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
margin-left: var(--spacing-m);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-transform: capitalize;
|
|
|
|
|
}
|
|
|
|
|
|
2021-11-09 22:33:34 +13:00
|
|
|
.item {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
grid-gap: var(--spectrum-alias-grid-margin-xsmall);
|
|
|
|
|
padding: var(--spectrum-alias-item-padding-s);
|
2021-11-24 09:14:28 +13:00
|
|
|
background: var(--spectrum-alias-background-color-primary);
|
2021-11-09 22:33:34 +13:00
|
|
|
transition: 0.3s all;
|
2021-11-26 10:57:27 +13:00
|
|
|
border: 1px solid var(--spectrum-global-color-gray-300);
|
2021-11-24 09:14:28 +13:00
|
|
|
border-radius: 4px;
|
2021-11-09 22:33:34 +13:00
|
|
|
box-sizing: border-box;
|
|
|
|
|
border-width: 1px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
height: 60px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item:hover,
|
|
|
|
|
.selected {
|
|
|
|
|
background: var(--spectrum-alias-background-color-tertiary);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
