MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
budibase/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte

171 lines
4.6 KiB
Svelte
Raw Normal View History

builder ui changes - UI builder in progress
2019-08-07 10:03:49 +02:00
<script>
new auto screen ux
2021-11-09 10:33:34 +01:00
import { store, allScreens } from "builderStore"
Revert "Filter users table out of DataSource component and NewScreenModal"
2021-08-26 11:11:48 +02:00
import { tables } from "stores/backend"
new auto screen ux
2021-11-09 10:33:34 +01:00
import { ModalContent, Body, Detail, Layout, Icon } from "@budibase/bbui"
screen templates - backup before merge from master
2020-10-08 16:46:29 +02:00
import getTemplates from "builderStore/store/screenTemplates"
Screen Template - pre merge
2020-10-08 15:53:06 +02:00
const CONTAINER = "@budibase/standard-components/container"
new auto screen ux
2021-11-09 10:33:34 +01:00
const blankScreen = "createFromScratch"
let selectedScreens = []
let navigationSelectionModal
include svelte files in prettier
2020-02-03 10:50:30 +01:00
let name = ""
Screen Template - pre merge
2020-10-08 15:53:06 +02:00
let baseComponent = CONTAINER
auto create screens with new table
2020-10-09 12:58:46 +02:00
let templateIndex
screen templates - backup before merge from master
2020-10-08 16:46:29 +02:00
let draftScreen
new auto screen ux
2021-11-09 10:33:34 +01:00
$: blankSelected = selectedScreens.includes(blankScreen)
$: autoSelected = selectedScreens.length > 0 && !blankSelected
eslint tidy up
2020-02-25 16:21:23 +01:00
Revert "Filter users table out of DataSource component and NewScreenModal"
2021-08-26 11:11:48 +02:00
$: templates = getTemplates($store, $tables.list)
Refactoring to replace the use of frontend store.screens with derived allScreens and currentScreens.
2020-11-05 18:47:27 +01:00
$: route = !route && $allScreens.length === 0 ? "*" : route
auto create screens with new table
2020-10-09 12:58:46 +02:00
$: {
if (templates && templateIndex === undefined) {
templateIndex = 0
templateChanged(0)
}
}
Add explicit prettier options
2021-05-04 12:32:22 +02:00
const templateChanged = newTemplateIndex => {
auto create screens with new table
2020-10-09 12:58:46 +02:00
if (newTemplateIndex === undefined) return
screen templates - backup before merge from master
2020-10-08 16:46:29 +02:00
draftScreen = templates[newTemplateIndex].create()
if (draftScreen.props._instanceName) {
name = draftScreen.props._instanceName
}
if (draftScreen.props._component) {
baseComponent = draftScreen.props._component
}
Large update, tests passing, have simplifed access level API, access levels and permissions are now totally separate.
2020-11-13 16:35:20 +01:00
if (draftScreen.routing) {
route = draftScreen.routing.route
screen templates - backup before merge from master
2020-10-08 16:46:29 +02:00
}
}
new auto screen ux
2021-11-09 10:33:34 +01:00
/*
Add option to create link when creating new screen
2020-10-17 19:20:31 +02:00
const save = async () => {
NewScreen - use bbui input - use input error message - screen name no longer needs to be unique
2020-08-18 21:59:34 +02:00
if (!route) {
Allow multiple screens to have the same URL as long as role is different
2020-12-09 19:39:49 +01:00
routeError = "URL is required"
using BBUI inputs where possible
2020-08-18 18:14:35 +02:00
} else {
Allow multiple screens to have the same URL as long as role is different
2020-12-09 19:39:49 +01:00
if (routeExists(route, roleId)) {
routeError = "This URL is already taken for this access role"
using BBUI inputs where possible
2020-08-18 18:14:35 +02:00
} else {
routeError = ""
}
}
Screen Template - pre merge
2020-10-08 15:53:06 +02:00
if (routeError) return false
screen templates - backup before merge from master
2020-10-08 16:46:29 +02:00
draftScreen.props._instanceName = name
draftScreen.props._component = baseComponent
Allow role selection when creating new screen
2020-12-09 15:53:17 +01:00
draftScreen.routing = { route, roleId }
screen templates - backup before merge from master
2020-10-08 16:46:29 +02:00
Update and improve state <-> URL binding
2021-01-15 15:23:27 +01:00
await store.actions.screens.create(draftScreen)
Add option to create link when creating new screen
2020-10-17 19:20:31 +02:00
if (createLink) {
Further updates to clear out all usage of the old frontend store functions.
2020-11-05 12:44:18 +01:00
await store.actions.components.links.save(route, name)
Add option to create link when creating new screen
2020-10-17 19:20:31 +02:00
}
fix e2e
2020-11-20 12:41:17 +01:00
await store.actions.routing.fetch()
screen templates - backup before merge from master
2020-10-08 16:46:29 +02:00
Analytics - record screen template used
2020-10-12 16:51:03 +02:00
if (templateIndex !== undefined) {
const template = templates[templateIndex]
changed events to constants, instantiated analytics client at right time
2021-09-21 21:21:15 +02:00
analytics.captureEvent(Events.SCREEN.CREATED, {
Analytics - record screen template used
2020-10-12 16:51:03 +02:00
template: template.id || template.name,
})
}
include svelte files in prettier
2020-02-03 10:50:30 +01:00
}
new auto screen ux
2021-11-09 10:33:34 +01:00
*/
const toggleScreenSelection = template => {
if (selectedScreens.includes(template.id)) {
selectedScreens = selectedScreens.filter(screen => screen !== template.id)
} else {
selectedScreens = [template.id, ...selectedScreens]
New Screen - Route Validation
2020-02-25 11:01:07 +01:00
}
}
builder ui changes - UI builder in progress
2019-08-07 10:03:49 +02:00
</script>
new auto screen ux
2021-11-09 10:33:34 +01:00
<ModalContent
title="Add screens"
confirmText="Add Screens"
cancelText="Cancel"
onConfirm={() => navigationSelectionModal.show()}
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
>
<Layout noPadding>
<Detail size="S">Blank screen</Detail>
<div
class="item"
class:selected={selectedScreens.includes(blankScreen)}
on:click={() => toggleScreenSelection({ id: blankScreen })}
class:disabled={autoSelected}
>
<div class="content">
<Body size="S">Blank</Body>
</div>
<div style="color: var(--spectrum-global-color-green-600); float: right">
{#if selectedScreens.includes(blankScreen)}
<Icon size="S" name="CheckmarkCircleOutline" />
{/if}
</div>
</div>
<Detail size="S">Autogenerated Screens</Detail>
{#each templates.filter(x => x.id !== blankScreen) as template}
<div
class:disabled={blankSelected}
class:selected={selectedScreens.includes(template.id)}
on:click={() => toggleScreenSelection(template)}
class="item"
>
<div class="content">
{template.name}
</div>
<div
style="color: var(--spectrum-global-color-green-600); float: right"
>
{#if selectedScreens.includes(template.id)}
<Icon size="S" name="CheckmarkCircleOutline" />
{/if}
</div>
</div>
{/each}
</Layout>
Bump BBUI version
2020-10-08 10:34:22 +02:00
</ModalContent>
new auto screen ux
2021-11-09 10:33:34 +01:00
<style>
.disabled {
opacity: 0.3;
pointer-events: none;
}
.content {
padding-left: 10px;
letter-spacing: 0px;
color: #2c2c2c;
}
.item {
cursor: pointer;
grid-gap: var(--spectrum-alias-grid-margin-xsmall);
padding: var(--spectrum-alias-item-padding-s);
background: var(--background);
transition: 0.3s all;
border: solid var(--spectrum-alias-border-color);
border-radius: 2px;
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>