136 lines
3.7 KiB
Svelte
136 lines
3.7 KiB
Svelte
<script>
|
|
import { tables } from "stores/backend"
|
|
import { ModalContent, Body, Layout, Icon, Heading } from "@budibase/bbui"
|
|
|
|
export let onConfirm
|
|
export let onCancel
|
|
|
|
let autoCreateModeKey = "autoCreate"
|
|
let blankScreenModeKey = "blankScreen"
|
|
|
|
let selectedScreenMode
|
|
|
|
const confirmScreenSelection = async () => {
|
|
await onConfirm(selectedScreenMode)
|
|
}
|
|
</script>
|
|
|
|
<div>
|
|
<ModalContent
|
|
title="Add screens"
|
|
confirmText="Continue"
|
|
cancelText="Cancel"
|
|
onConfirm={confirmScreenSelection}
|
|
{onCancel}
|
|
disabled={!selectedScreenMode}
|
|
size="L"
|
|
>
|
|
<Layout noPadding gap="S">
|
|
<div
|
|
class="screen-type item"
|
|
class:selected={selectedScreenMode == blankScreenModeKey}
|
|
on:click={() => {
|
|
selectedScreenMode = blankScreenModeKey
|
|
}}
|
|
>
|
|
<div data-cy="blank-screen" class="content screen-type-wrap">
|
|
<Icon name="WebPage" />
|
|
<div class="screen-type-text">
|
|
<Heading size="XS">Blank screen</Heading>
|
|
<Body size="S">Add a blank screen</Body>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="color: var(--spectrum-global-color-green-600); float: right"
|
|
>
|
|
{#if selectedScreenMode == blankScreenModeKey}
|
|
<div class="checkmark-spacing">
|
|
<Icon size="S" name="CheckmarkCircle" />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="screen-type item"
|
|
class:selected={selectedScreenMode == autoCreateModeKey}
|
|
on:click={() => {
|
|
selectedScreenMode = autoCreateModeKey
|
|
}}
|
|
class:disabled={!$tables.list.filter(table => table._id !== "ta_users")
|
|
.length}
|
|
>
|
|
<div data-cy="autogenerated-screens" class="content screen-type-wrap">
|
|
<Icon name="WebPages" />
|
|
<div class="screen-type-text">
|
|
<Heading size="XS">Autogenerated screens</Heading>
|
|
<Body size="S">
|
|
Add autogenerated screens with CRUD functionality to get a working
|
|
app quickly! (Requires a datasource)
|
|
</Body>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="color: var(--spectrum-global-color-green-600); float: right"
|
|
>
|
|
{#if selectedScreenMode == autoCreateModeKey}
|
|
<div class="checkmark-spacing">
|
|
<Icon size="S" name="CheckmarkCircle" />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
</ModalContent>
|
|
</div>
|
|
|
|
<style>
|
|
.screen-type.item {
|
|
padding: var(--spectrum-alias-item-padding-xl);
|
|
}
|
|
.screen-type-wrap {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
.disabled {
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
}
|
|
.checkmark-spacing {
|
|
margin-right: var(--spacing-m);
|
|
}
|
|
.content {
|
|
letter-spacing: 0px;
|
|
}
|
|
.item {
|
|
cursor: pointer;
|
|
grid-gap: var(--spectrum-alias-grid-margin-xsmall);
|
|
padding: var(--spectrum-alias-item-padding-s);
|
|
background: var(--spectrum-alias-background-color-secondary);
|
|
transition: 0.3s all;
|
|
border: 1px solid var(--spectrum-global-color-gray-300);
|
|
border-radius: 4px;
|
|
border-width: 1px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.item:hover,
|
|
.selected {
|
|
background: var(--spectrum-alias-background-color-tertiary);
|
|
}
|
|
.screen-type-wrap .screen-type-text {
|
|
padding-left: var(--spectrum-alias-item-padding-xl);
|
|
}
|
|
.screen-type-wrap .screen-type-text :global(h1) {
|
|
padding-bottom: var(--spacing-xs);
|
|
}
|
|
.screen-type-wrap :global(.spectrum-Icon) {
|
|
min-width: var(--spectrum-icon-size-m);
|
|
}
|
|
.screen-type-wrap :global(.spectrum-Heading) {
|
|
padding-bottom: var(--spectrum-alias-item-padding-s);
|
|
}
|
|
</style>
|