From 3aebdd33d9bd7f7d3312f3804a84d2dff1b50e68 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 17 Jun 2022 10:18:39 +0100 Subject: [PATCH] Move screen ranking and sorting logic to screen store --- .../client/src/components/ClientApp.svelte | 51 ++++--------------- packages/client/src/stores/screens.js | 23 ++++++++- 2 files changed, 33 insertions(+), 41 deletions(-) diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte index 0f25f84f1d..3dbc02aba3 100644 --- a/packages/client/src/components/ClientApp.svelte +++ b/packages/client/src/components/ClientApp.svelte @@ -3,7 +3,7 @@ import { setContext, onMount } from "svelte" import { Layout, Heading, Body } from "@budibase/bbui" import ErrorSVG from "@budibase/frontend-core/assets/error.svg" - import { Constants, CookieUtils, RoleUtils } from "@budibase/frontend-core" + import { Constants, CookieUtils } from "@budibase/frontend-core" import Component from "./Component.svelte" import SDK from "sdk" import { @@ -48,11 +48,16 @@ $: { if (dataLoaded && $routeStore.routerLoaded && !$routeStore.activeRoute) { if ($screenStore.screens.length) { - // If we have some available screens, find the best route to push the - // user to initially - const route = getBestRoute($screenStore.screens) - permissionError = false - routeStore.actions.navigate(route) + // If we have some available screens, use the first screen which + // represents the best route based on rank + const route = $screenStore.screens[0].routing?.route + if (!route) { + permissionError = true + console.error("No route found but screens exist") + } else { + permissionError = false + routeStore.actions.navigate(route) + } } else if ($authStore) { // If the user is logged in but has no screens, they don't have // permission to use the app @@ -67,40 +72,6 @@ } } - // Assigns a rank to a potential screen route, preferring home screens - // and higher roles - const rankScreen = screen => { - const roleId = screen.routing.roleId - let rank = RoleUtils.getRolePriority(roleId) - if (screen.routing.homeScreen) { - rank += 100 - } - return rank - } - - // Determines the best route to push the user to initially from a set of - // available screens - const getBestRoute = screens => { - // Enrich and rank all screens, preferring all home screens - const enrichedScreens = screens?.map(screen => ({ - ...screen, - rank: rankScreen(screen), - })) - - // Sort ranked screens - const rankedScreens = enrichedScreens?.sort((a, b) => { - // First sort by rank - if (a.rank !== b.rank) { - return a.rank > b.rank ? -1 : 1 - } - // Then sort alphabetically - return a.routing.route < b.routing.route ? -1 : 1 - }) - - // Use the best ranking screen - return rankedScreens?.[0].routing?.route || "/" - } - // Load app config onMount(async () => { await initialise() diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js index 4d862bbc07..84cd4000c1 100644 --- a/packages/client/src/stores/screens.js +++ b/packages/client/src/stores/screens.js @@ -2,6 +2,7 @@ import { derived } from "svelte/store" import { routeStore } from "./routes" import { builderStore } from "./builder" import { appStore } from "./app" +import { RoleUtils } from "@budibase/frontend-core" const createScreenStore = () => { const store = derived( @@ -21,7 +22,7 @@ const createScreenStore = () => { } } else { // Find the correct screen by matching the current route - screens = $appStore.screens + screens = $appStore.screens || [] if ($routeStore.activeRoute) { activeScreen = screens.find( screen => screen._id === $routeStore.activeRoute.screenId @@ -39,6 +40,26 @@ const createScreenStore = () => { } } + // Assign ranks to screens, preferring higher roles and home screens + screens.forEach(screen => { + const roleId = screen.routing.roleId + let rank = RoleUtils.getRolePriority(roleId) + if (screen.routing.homeScreen) { + rank += 100 + } + screen.rank = rank + }) + + // Sort screens so the best route is first + screens = screens.sort((a, b) => { + // First sort by rank + if (a.rank !== b.rank) { + return a.rank > b.rank ? -1 : 1 + } + // Then sort alphabetically + return a.routing.route < b.routing.route ? -1 : 1 + }) + // If we don't have a legacy custom layout, build a layout structure // from the screen navigation settings if (!activeLayout) {