CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-19 10:48:30 +12:00
Code Issues Projects Releases Wiki Activity

Add screen creation modal to screens tab

Browse source
This commit is contained in:
Andrew Kingston 2022-04-25 14:37:14 +01:00
parent 7d6a7c372c
commit 378d7a014e
4 changed files with 24 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/builder/src/components/design/NavigationPanel/NavigationPanel.svelte
View file

@ -12,8 +12,8 @@
<Heading size="XS">{title || ""}</Heading> <Heading size="XS">{title || ""}</Heading>
</div> </div>
{#if showAddButton} {#if showAddButton}
<div class="add-button"> <div class="add-button" on:click={onClickAddButton}>
<Icon name="Add" on:click={onClickAddButton} /> <Icon name="Add" />
</div> </div>
{/if} {/if}
</div> </div>

0
packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte
View file

4
packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenWizard.svelte
View file

@ -1,6 +1,6 @@
<script> <script>
import ScreenDetailsModal from "components/design/NavigationPanel/ScreenDetailsModal.svelte" import ScreenDetailsModal from "./ScreenDetailsModal.svelte"
import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte" import NewScreenModal from "./NewScreenModal.svelte"
import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl" import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
import { Modal, notifications } from "@budibase/bbui" import { Modal, notifications } from "@budibase/bbui"
import { store, selectedAccessRole } from "builderStore" import { store, selectedAccessRole } from "builderStore"

29
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte
View file

@ -7,17 +7,22 @@
import ScreenDropdownMenu from "./_components/ScreenDropdownMenu.svelte" import ScreenDropdownMenu from "./_components/ScreenDropdownMenu.svelte"
import AppPanel from "components/design/AppPanel/AppPanel.svelte" import AppPanel from "components/design/AppPanel/AppPanel.svelte"
import { RoleColours } from "constants" import { RoleColours } from "constants"
import ScreenWizard from "./_components/ScreenWizard.svelte"
let searchString let searchString
let accessRole let accessRole = "all"
let showNewScreenModal
$: filteredScreens = getFilteredScreens($allScreens, searchString) $: filteredScreens = getFilteredScreens($allScreens, searchString, accessRole)
const getFilteredScreens = (screens, searchString) => { const getFilteredScreens = (screens, search, role) => {
return screens return screens
.filter( .filter(screen => {
screen => !searchString || screen.routing.route.includes(searchString) const searchMatch = !search || screen.routing.route.includes(search)
) const roleMatch =
!role || role === "all" || screen.routing.roleId === role
return searchMatch && roleMatch
})
.slice() .slice()
.sort((a, b) => { .sort((a, b) => {
return a.routing.route < b.routing.route ? -1 : 1 return a.routing.route < b.routing.route ? -1 : 1
@ -29,7 +34,11 @@
} }
</script> </script>
<NavigationPanel title="Screens" showAddButton onClickAddButton> <NavigationPanel
title="Screens"
showAddButton
onClickAddButton={showNewScreenModal}
>
<Layout paddingX="L" paddingY="XL" gap="S"> <Layout paddingX="L" paddingY="XL" gap="S">
<Search <Search
placeholder="Enter a route to search" placeholder="Enter a route to search"
@ -38,10 +47,10 @@
/> />
<Select <Select
bind:value={accessRole} bind:value={accessRole}
placeholder="All screens" placeholder={null}
getOptionLabel={role => role.name} getOptionLabel={role => role.name}
getOptionValue={role => role._id} getOptionValue={role => role._id}
options={$roles} options={[{ name: "All screens", _id: "all" }, ...$roles]}
/> />
</Layout> </Layout>
{#each filteredScreens as screen (screen._id)} {#each filteredScreens as screen (screen._id)}
@ -66,4 +75,6 @@
{/each} {/each}
</NavigationPanel> </NavigationPanel>
<ScreenWizard bind:showModal={showNewScreenModal} />
<AppPanel /> <AppPanel />