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

Use sorted screens in both screen navigation panel and above preview

pull/6409/head
Andrew Kingston 4 years ago
parent
088c7123e6
commit
faa3ad2ac4
2 changed files with 13 additions and 35 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
  2. 34
      packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenNavigationPanel.svelte

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;

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 { 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>

Write Preview
Loading…
Cancel
Save