MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use sorted screens in both screen navigation panel and above preview

This commit is contained in:
Andrew Kingston 2022-05-10 13:33:05 +01:00
parent 063a1d67c1
commit c0ffd9f518
2 changed files with 13 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
View File

@ -1,8 +1,8 @@
<script> <script>
import DevicePreviewSelect from "./DevicePreviewSelect.svelte" import DevicePreviewSelect from "./DevicePreviewSelect.svelte"
import AppPreview from "./AppPreview.svelte" import AppPreview from "./AppPreview.svelte"
import { store, selectedScreen } from "builderStore" import { store, selectedScreen, sortedScreens } from "builderStore"
import { Button, Select, StatusLight, Body } from "@budibase/bbui" import { Button, Select, StatusLight, Body, Badge } from "@budibase/bbui"
import { RoleUtils } from "@budibase/frontend-core" import { RoleUtils } from "@budibase/frontend-core"
import { roles } from "stores/backend" import { roles } from "stores/backend"
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
@ -16,17 +16,13 @@
<div class="header"> <div class="header">
<div class="header-left"> <div class="header-left">
<Select <Select
options={$store.screens} options={$sortedScreens}
getOptionLabel={x => x.routing.route} getOptionLabel={x => x.routing.route}
getOptionValue={x => x._id} getOptionValue={x => x._id}
getOptionIcon={x => (x.routing.homeScreen ? "Home" : "WebPage")} getOptionIcon={x => (x.routing.homeScreen ? "Home" : "WebPage")}
getOptionColour={x => RoleUtils.getRoleColour(x.routing.roleId)}
bind:value={$store.selectedScreenId} bind:value={$store.selectedScreenId}
/> />
<StatusLight custom color={roleColor}>
<Body size="S">
{roleName} access
</Body>
</StatusLight>
</div> </div>
<div class="header-right"> <div class="header-right">
{#if $store.clientFeatures.devicePreview} {#if $store.clientFeatures.devicePreview}
@ -75,7 +71,7 @@
gap: var(--spacing-l); gap: var(--spacing-l);
} }
.header-left :global(.spectrum-Picker) { .header-left :global(.spectrum-Picker) {
width: 240px; width: 250px;
} }
.content { .content {
flex: 1 1 auto; flex: 1 1 auto;

24
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenNavigationPanel.svelte
View File

@ -2,7 +2,7 @@
import { Search, Layout, Select, Body } from "@budibase/bbui" import { Search, Layout, Select, Body } from "@budibase/bbui"
import NavigationPanel from "components/design/navigation/NavigationPanel.svelte" import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
import { roles } from "stores/backend" import { roles } from "stores/backend"
import { store } from "builderStore" import { store, sortedScreens } from "builderStore"
import NavItem from "components/common/NavItem.svelte" import NavItem from "components/common/NavItem.svelte"
import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte" import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
import ScreenWizard from "./ScreenWizard.svelte" import ScreenWizard from "./ScreenWizard.svelte"
@ -13,36 +13,18 @@
let showNewScreenModal let showNewScreenModal
$: filteredScreens = getFilteredScreens( $: filteredScreens = getFilteredScreens(
$store.screens, $sortedScreens,
searchString, searchString,
accessRole accessRole
) )
const getFilteredScreens = (screens, search, role) => { const getFilteredScreens = (screens, search, role) => {
return screens return screens.filter(screen => {
.filter(screen => {
const searchMatch = !search || screen.routing.route.includes(search) const searchMatch = !search || screen.routing.route.includes(search)
const roleMatch = const roleMatch =
!role || role === "all" || screen.routing.roleId === role !role || role === "all" || screen.routing.roleId === role
return searchMatch && roleMatch return searchMatch && roleMatch
}) })
.slice()
.sort((a, b) => {
// Sort by role first
const roleA = RoleUtils.getRolePriority(a.routing.roleId)
const roleB = RoleUtils.getRolePriority(b.routing.roleId)
if (roleA !== roleB) {
return roleA > roleB ? -1 : 1
}
// Then put home screens first
const homeA = !!a.routing.homeScreen
const homeB = !!b.routing.homeScreen
if (homeA !== homeB) {
return homeA ? -1 : 1
}
// Finally sort alphabetically by route
return a.routing.route < b.routing.route ? -1 : 1
})
} }
</script> </script>