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

34
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 NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
import { roles } from "stores/backend"
import { store } from "builderStore"
import { store, sortedScreens } from "builderStore"
import NavItem from "components/common/NavItem.svelte"
import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
import ScreenWizard from "./ScreenWizard.svelte"
@ -13,36 +13,18 @@
let showNewScreenModal
$: filteredScreens = getFilteredScreens(
$store.screens,
$sortedScreens,
searchString,
accessRole
)
const getFilteredScreens = (screens, search, role) => {
return screens
.filter(screen => {
const searchMatch = !search || screen.routing.route.includes(search)
const roleMatch =
!role || role === "all" || screen.routing.roleId === role
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
})
return screens.filter(screen => {
const searchMatch = !search || screen.routing.route.includes(search)
const roleMatch =
!role || role === "all" || screen.routing.roleId === role
return searchMatch && roleMatch
})
}
</script>