Refactoring: DRY page type/icon handling (#4119)

Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>

Author: jimtng

bundles/org.openhab.ui/web/src/App.vue

@@ -34,7 +34,7 @@
             view=".view-main"
             panel-close>
             <template #media>
-              <oh-icon :icon="pageIcon(page)" height="18" width="18" />
+              <oh-icon :icon="getPageIcon(page)" height="18" width="18" />
             </template>
           </f7-list-item>
         </f7-list>
@@ -484,6 +484,7 @@ import buildInfo from '@/assets/build-info'
 
 import routes from '@/js/routes.js'
 import PanelRight from '@/pages/panel-right.vue'
+import { getPageIcon } from '@/pages/page-type'
 import EmptyStatePlaceholder from '@/components/empty-state-placeholder.vue'
 
 import { useRuntimeStore } from '@/js/stores/useRuntimeStore'
@@ -820,23 +821,7 @@ export default {
       if (page.config.visibleTo.indexOf('user:' + user.name) >= 0) return true
       return false
     },
-    pageIcon(page) {
-      if (page.config && page.config.icon) return page.config.icon
-      switch (page.component) {
-        case 'oh-layout-page':
-          return 'f7:rectangle_grid_2x2'
-        case 'oh-tabs-page':
-          return 'f7:squares_below_rectangle'
-        case 'oh-map-page':
-          return 'f7:map'
-        case 'oh-plan-page':
-          return 'f7:square_stack_3d_up'
-        case 'oh-chart-page':
-          return 'f7:graph_square'
-        default:
-          return 'f7:tv'
-      }
-    },
+    getPageIcon,
     updateThemeOptions() {
       if (useUIOptionsStore().visibleBreakpointDisabled) {
         nextTick(() => {

bundles/org.openhab.ui/web/src/components/developer/developer-sidebar.vue

@@ -636,6 +636,7 @@ import SearchResults from './search-results.vue'
 import ExpressionTester from './expression-tester.vue'
 import ClipboardIcon from '@/components/util/clipboard-icon.vue'
 
+import { getPageType } from '@/pages/page-type'
 import RuleStatus from '@/components/rule/rule-status-mixin'
 import ThingStatus from '@/components/thing/thing-status-mixin'
 import cloneDeep from 'lodash/cloneDeep'
@@ -687,15 +688,6 @@ export default {
       newCollectionName: '',
       sseEvents: [],
       openedItem: null,
-      pageTypes: [
-        { type: 'sitemap', label: 'Sitemap', componentType: 'Sitemap', icon: 'menu' },
-        { type: 'layout', label: 'Layout', componentType: 'oh-layout-page', icon: 'rectangle_grid_2x2' },
-        { type: 'home', label: 'Home', componentType: 'oh-home-page', icon: 'house' },
-        { type: 'tabs', label: 'Tabbed', componentType: 'oh-tabs-page', icon: 'squares_below_rectangle' },
-        { type: 'map', label: 'Map', componentType: 'oh-map-page', icon: 'map' },
-        { type: 'plan', label: 'Floor plan', componentType: 'oh-plan-page', icon: 'square_stack_3d_up' },
-        { type: 'chart', label: 'Chart', componentType: 'oh-chart-page', icon: 'graph_square' }
-      ],
       testExpression: '',
       addThingAutocomplete: null,
       theme
@@ -1023,9 +1015,7 @@ export default {
         load()
       }
     },
-    getPageType(page) {
-      return this.pageTypes.find((t) => t.componentType === page.component)
-    },
+    getPageType,
     showItem(evt, item) {
       evt.cancelBubble = true
       if (this.$$(evt.target).closest('.itemlist-actions').length) return

bundles/org.openhab.ui/web/src/components/developer/search-results.vue

@@ -388,6 +388,7 @@
 
 <script>
 import ClipboardIcon from '@/components/util/clipboard-icon.vue'
+import { getPageType } from '@/pages/page-type'
 
 export default {
   components: {
@@ -408,16 +409,7 @@ export default {
         rules: 'wand_stars',
         pages: 'tv'
       },
-      expandedTypes: {},
-      pageTypes: [
-        { type: 'sitemap', label: 'Sitemap', componentType: 'Sitemap', icon: 'menu' },
-        { type: 'layout', label: 'Layout', componentType: 'oh-layout-page', icon: 'rectangle_grid_2x2' },
-        { type: 'home', label: 'Home', componentType: 'oh-home-page', icon: 'house' },
-        { type: 'tabs', label: 'Tabbed', componentType: 'oh-tabs-page', icon: 'squares_below_rectangle' },
-        { type: 'map', label: 'Map', componentType: 'oh-map-page', icon: 'map' },
-        { type: 'plan', label: 'Floor plan', componentType: 'oh-plan-page', icon: 'square_stack_3d_up' },
-        { type: 'chart', label: 'Chart', componentType: 'oh-chart-page', icon: 'graph_square' }
-      ]
+      expandedTypes: {}
     }
   },
   computed: {
@@ -482,9 +474,7 @@ export default {
     showingAll(type) {
       return this.expandedTypes[type] || this.searchResults[type].length <= 5
     },
-    getPageType(page) {
-      return this.pageTypes.find((t) => t.componentType === page.component)
-    },
+    getPageType,
     togglePin(evt, type, obj, keyName) {
       evt.cancelBubble = true
       if (evt.target.tagName.toLowerCase() === 'i') return

bundles/org.openhab.ui/web/src/pages/page-type.ts

@@ -0,0 +1,50 @@
+import type * as api from '@/api'
+import type { DeepReadonly } from 'vue'
+
+type PageType = {
+  type: string
+  label: string
+  icon: string
+}
+
+const pageTypes: Record<string, PageType> = {
+  Sitemap: { type: 'sitemap', label: 'Sitemap', icon: 'f7:menu' },
+  'oh-layout-page': { type: 'layout', label: 'Layout', icon: 'f7:rectangle_grid_2x2' },
+  'oh-home-page': { type: 'home', label: 'Home', icon: 'f7:house' },
+  'oh-tabs-page': { type: 'tabs', label: 'Tabbed', icon: 'f7:squares_below_rectangle' },
+  'oh-map-page': { type: 'map', label: 'Map', icon: 'f7:map' },
+  'oh-plan-page': { type: 'plan', label: 'Floor plan', icon: 'f7:square_stack_3d_up' },
+  'oh-chart-page': { type: 'chart', label: 'Chart', icon: 'f7:graph_square' }
+}
+
+const unknownPageType: PageType = { type: 'unknown', label: 'Unknown Page Type!', icon: 'f7:question_circle' }
+
+/**
+ * Returns the PageType for the given page, or a default "unknown" PageType if the page type is unknown.
+ * The page type is determined by matching the page's component type against the known page types.
+ * @param page
+ * @returns The PageType for the given page, or a default "unknown" PageType if the page type is unknown.
+ */
+export function getPageType(page?: api.RootUiComponent | DeepReadonly<api.RootUiComponent> | null): PageType {
+  if (!page) return unknownPageType
+  return pageTypes[page.component] || unknownPageType
+}
+
+/**
+ * Returns the icon for the given page, or a default icon if the page type is unknown.
+ * The page type is determined by matching the page's component type against the known page types.
+ *
+ * Special cases:
+ * - If the page is null or undefined, it is considered an unknown page type and gets a question mark icon.
+ * - If the page has a uid of "overview", it is considered the overview page and gets a house icon.
+ * - If the page has a config with an icon, that icon is used.
+ *
+ * @param page
+ * @returns The icon for the given page, or a default icon if the page type is unknown.
+ */
+export function getPageIcon(page?: api.RootUiComponent | DeepReadonly<api.RootUiComponent> | null): string {
+  if (!page) return unknownPageType.icon
+  if (page.uid === 'overview') return 'f7:house'
+  if (page.config && page.config.icon) return page.config.icon as string
+  return getPageType(page).icon
+}

bundles/org.openhab.ui/web/src/pages/page/page-view.vue

@@ -98,6 +98,7 @@ import { useWidgetExpression } from '@/components/widgets/useWidgetExpression.ts
 import { useViewArea } from '@/js/composables/useViewArea.ts'
 
 import * as api from '@/api'
+import { getPageType } from '@/pages/page-type'
 
 import OhLayoutPage from '@/components/widgets/layout/oh-layout-page.vue'
 import EmptyStatePlaceholder from '@/components/empty-state-placeholder.vue'
@@ -170,7 +171,7 @@ const context = computed(() => ({
   vars: Object.assign(vars.value, page.value?.config?.defineVars ?? {}, props.defineVars ?? {}),
   store: statesStore.trackedItems
 }))
-const pageType = computed(() => (page.value ? getPageType(page.value) : null))
+const pageType = computed(() => getPageType(page.value).type)
 const pageLabel = computed(() => page.value?.config?.label)
 const editable = computed(() => page.value && userStore.isAdmin())
 const fullscreenIcon = computed(() => {
@@ -199,24 +200,6 @@ const onTabChange = (idx: number) => {
   // @ts-expect-error - url is not typed as part of the router
   props.f7router.url = url
 }
-const getPageType = (page: api.RootUiComponent | DeepReadonly<api.RootUiComponent>) => {
-  if (!page) return null
-  switch (page.component) {
-    case 'oh-layout-page':
-      return 'layout'
-    case 'oh-map-page':
-      return 'map'
-    case 'oh-tabs-page':
-      return 'tabs'
-    case 'oh-plan-page':
-      return 'plan'
-    case 'oh-chart-page':
-      return 'chart'
-    default:
-      console.warn('Unknown page type!')
-      return 'unknown'
-  }
-}
 const tabContext = (tab: api.UiComponent) => {
   const tabPage: DeepReadonly<api.RootUiComponent> | string = tab.config.page
     ? componentStore.page((tab.config.page as string).replace('page:', ''))!
@@ -291,7 +274,7 @@ const editPage = () => {
           onClick: () => {
             const tabPageUid = (page.value!.slots.default![currentTab.value]!.config.page as string).replace('page:', '')
             const tabPage = componentStore.page(tabPageUid)!
-            const tabPageType = getPageType(tabPage)
+            const tabPageType = getPageType(tabPage).type
             props.f7router.navigate('/settings/pages/' + tabPageType + '/' + tabPageUid)
           }
         }

bundles/org.openhab.ui/web/src/pages/settings/pages/pages-list.vue

@@ -171,6 +171,7 @@ import { f7, theme } from 'framework7-vue'
 
 import { useLastSearchQueryStore } from '@/js/stores/useLastSearchQueryStore'
 import { showToast } from '@/js/dialog-promises'
+import { getPageType, getPageIcon } from '@/pages/page-type'
 
 export default {
   props: {
@@ -187,16 +188,7 @@ export default {
       pages: [],
       selectedItems: [],
       groupBy: 'alphabetical',
-      showCheckboxes: false,
-      pageTypes: [
-        { type: 'sitemap', label: 'Sitemap', componentType: 'Sitemap', icon: 'f7:menu' },
-        { type: 'layout', label: 'Layout', componentType: 'oh-layout-page', icon: 'f7:rectangle_grid_2x2' },
-        { type: 'home', label: 'Home', componentType: 'oh-home-page', icon: 'f7:house' },
-        { type: 'tabs', label: 'Tabbed', componentType: 'oh-tabs-page', icon: 'f7:squares_below_rectangle' },
-        { type: 'map', label: 'Map', componentType: 'oh-map-page', icon: 'f7:map' },
-        { type: 'plan', label: 'Floor plan', componentType: 'oh-plan-page', icon: 'f7:square_stack_3d_up' },
-        { type: 'chart', label: 'Chart', componentType: 'oh-chart-page', icon: 'f7:graph_square' }
-      ]
+      showCheckboxes: false
     }
   },
   computed: {
@@ -214,7 +206,7 @@ export default {
         }, {})
       } else {
         const typeGroups = this.pages.reduce((prev, page, i, things) => {
-          const type = this.getPageType(page).label
+          const type = getPageType(page).label
           if (!prev[type]) {
             prev[type] = []
           }
@@ -292,7 +284,7 @@ export default {
       if (this.showCheckboxes) {
         this.toggleItemCheck(event, item.uid, item)
       } else {
-        this.f7router.navigate(this.getPageType(item).type + '/' + item.uid)
+        this.f7router.navigate(getPageType(item).type + '/' + item.uid)
       }
     },
     ctrlClick(event, item) {
@@ -308,15 +300,8 @@ export default {
         this.selectedItems.push(itemName)
       }
     },
-    getPageType(page) {
-      return this.pageTypes.find((t) => t.componentType === page.component)
-    },
-    getPageIcon(page) {
-      if (page.uid === 'overview') return 'f7:house'
-      if (page.config && page.config.icon) return page.config.icon
-      const pageType = this.pageTypes.find((t) => t.componentType === page.component)
-      return pageType ? pageType.icon : 'f7:tv'
-    },
+    getPageType,
+    getPageIcon,
     removeSelected() {
       const vm = this