Improve screen list sorting order

This commit is contained in:
Andrew Kingston 2022-04-27 08:22:41 +01:00
parent e2d89490b8
commit 15956ec099
2 changed files with 27 additions and 13 deletions

View File

@ -11,6 +11,13 @@ export const RoleColours = {
[Roles.PUBLIC]: "var(--spectrum-global-color-static-yellow-400)", [Roles.PUBLIC]: "var(--spectrum-global-color-static-yellow-400)",
} }
export const RolePriorities = {
[Roles.ADMIN]: 4,
[Roles.POWER]: 3,
[Roles.BASIC]: 2,
[Roles.PUBLIC]: 1,
}
export const FrontendTypes = { export const FrontendTypes = {
PAGE: "page", PAGE: "page",
SCREEN: "screen", SCREEN: "screen",

View File

@ -1,11 +1,11 @@
<script> <script>
import { Search, Layout, Select } 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 } 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 { RoleColours } from "constants" import { RoleColours, RolePriorities } from "constants"
import ScreenWizard from "./ScreenWizard.svelte" import ScreenWizard from "./ScreenWizard.svelte"
let searchString let searchString
let accessRole = "all" let accessRole = "all"
@ -27,6 +27,19 @@
}) })
.slice() .slice()
.sort((a, b) => { .sort((a, b) => {
// Sort by role first
const roleA = RolePriorities[a.routing.roleId]
const roleB = RolePriorities[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 a.routing.route < b.routing.route ? -1 : 1
}) })
} }
@ -68,18 +81,12 @@
</NavItem> </NavItem>
{/each} {/each}
{#if !filteredScreens?.length} {#if !filteredScreens?.length}
<div class="empty"> <Layout paddingY="" paddingX="L">
There aren't any screens matching the current filters <Body size="S">
</div> There aren't any screens matching the current filters
</Body>
</Layout>
{/if} {/if}
</NavigationPanel> </NavigationPanel>
<ScreenWizard bind:showModal={showNewScreenModal} /> <ScreenWizard bind:showModal={showNewScreenModal} />
<style>
.empty {
font-size: var(--spectrum-global-dimension-font-size-75);
color: var(--grey-7);
padding: 0 var(--spacing-l);
}
</style>