@raclettejs/core 0.1.17 → 0.1.18

package/services/frontend/src/orchestrator/components/menu/UserMenu.vue

@@ -31,6 +31,7 @@
         >
       </v-list-item>
       <v-divider />
+
       <v-list-item @click="toggleTheme">
         <template #prepend>
           <v-icon>mdi-theme-light-dark</v-icon>
@@ -43,42 +44,59 @@
         </template>
         <v-list-item-title>{{ $t("core.toggle_snow") }}</v-list-item-title>
       </v-list-item>
-      <template v-for="item in pageNavigation.userMenuItems" :key="item.route">
-        <v-list-item
-          :key="locale"
-          v-if="item.slotType !== 'inline'"
-          :disabled="activeRouteName === item.route || !item.route"
-          :active="activeRouteName === item.route"
-          :value="item.route || ''"
-          color="primary"
-          class="nav-link"
-          link
-          @click="navigate(item)"
+      <div id="appUserMenu" ref="appUserMenu">
+        <template
+          v-for="item in pageNavigation.userMenuItems"
+          :key="item.route"
         >
-          <!-- item prepend icon -->
-          <template v-if="item.icon" #prepend>
-            <v-icon :icon="item.icon" />
-          </template>
-          <v-list-item-title v-if="item.title">{{
-            item.title
-          }}</v-list-item-title>
-        </v-list-item>
-        <v-list-group v-else>
-          <template v-slot:activator="{ props }">
-            <v-list-item
-              v-bind="props"
-              :prepend-icon="item.icon"
-              :title="item.title"
-            ></v-list-item>
+          <v-list-item
+            :key="locale"
+            v-if="item.slotType !== 'inline'"
+            :disabled="activeRouteName === item.route || !item.route"
+            :active="activeRouteName === item.route"
+            :value="item.route || ''"
+            color="primary"
+            class="nav-link"
+            link
+            @click="navigate(item)"
+          >
+            <!-- item prepend icon -->
+            <template v-if="item.icon" #prepend>
+              <v-icon :icon="item.icon" />
+            </template>
+            <v-list-item-title v-if="item.title">{{
+              item.title
+            }}</v-list-item-title>
+          </v-list-item>
+          <template v-else>
+            <v-list-group v-if="item.icon || item.title">
+              <template v-slot:activator="{ props }">
+                <v-list-item
+                  v-bind="props"
+                  :prepend-icon="item.icon"
+                  :title="item.title"
+                ></v-list-item>
+              </template>
+              <WidgetsLayoutLoader
+                v-if="compositions[item.compositionId]"
+                :widgets-layout="compositions[item.compositionId].widgetsLayout"
+                slot-type="inline"
+                :slot-layout="compositions[item.compositionId].slotLayout"
+                :max-height="availableComponentHeight"
+              />
+            </v-list-group>
+            <template v-else>
+              <WidgetsLayoutLoader
+                v-if="compositions[item.compositionId]"
+                :widgets-layout="compositions[item.compositionId].widgetsLayout"
+                slot-type="inline"
+                :max-height="availableComponentHeight"
+                :slot-layout="compositions[item.compositionId].slotLayout"
+              />
+            </template>
           </template>
-          <WidgetsLayoutLoader
-            v-if="compositions[item.compositionId]"
-            :widgets-layout="compositions[item.compositionId].widgetsLayout"
-            slot-type="inline"
-            :slot-layout="compositions[item.compositionId].slotLayout"
-          />
-        </v-list-group>
-      </template>
+        </template>
+      </div>
 
       <v-divider />
 
@@ -94,7 +112,7 @@
 </template>
 <script setup lang="ts">
 import localeFlags from "@racletteOrchestrator/assets/iconMappings/flags.json"
-import { computed, onMounted, ref } from "vue"
+import { computed, useTemplateRef, onMounted, ref } from "vue"
 import { useRouter } from "vue-router"
 import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"
 import useUiState from "@racletteOrchestrator/composables/useUiState"
@@ -112,7 +130,10 @@ import {
 import usePageNavigation, {
   type NavigationItem,
 } from "@racletteOrchestrator/composables/usePageNavigation"
-
+const appUserMenuRef = useTemplateRef("appUserMenu")
+const availableComponentHeight = computed(
+  () => appUserMenuRef?.value?.offsetHeight || 150,
+)
 const { locales } = configService.getI18nConfig()
 const router = useRouter()
 const asteroidsDebounce = asteroidsDebounceHelper(3)
@@ -125,10 +146,6 @@ const { getCompositionLinkForSlotName } = useRouteState()
 const userLanguage = useLocalStorage<string>("user-language", null)
 const userTheme = useLocalStorage<string>("user-theme", null)
 const { state: pageNavigation } = usePageNavigation()
-const showDevIndicator = useLocalStorage<boolean | ("true" | "false")>(
-  "show-dev-indicator",
-  null,
-)
 
 const isOpen = ref(false)
 const canRefresh = ref(true)
@@ -164,11 +181,6 @@ const avatar = computed(() => {
 
   return nameString
 })
-
-const isInDev = computed(
-  () => showDevIndicator.value === true || showDevIndicator.value === "true",
-)
-
 const toggleTheme = () => {
   theme.value = theme.value === "light" ? "dark" : "light"
   userTheme.value = theme.value
@@ -197,7 +209,11 @@ const navigate = (item: NavigationItem) => {
   item.navigateTo()
 }
 
-const openEgg = () => asteroidsDebounce(() => eggMe("asteroids"))
+const openEgg = () =>
+  asteroidsDebounce(() => {
+    isOpen.value = false
+    eggMe("asteroids")
+  })
 
 onMounted(async () => {
   if (isDecember()) {

package/services/frontend/src/orchestrator/components/navigation/PageNavigationSidebar.vue

@@ -5,9 +5,10 @@
       pageNavigation?.navigationItems?.length ||
       pageNavigation?.footerItems?.length
     "
-    id="navSideBar"
+    id="appPageNavSidebar"
     v-model="navigationDrawer"
     :rail="navigationRail"
+    :expand-on-hover="pageNavigationRail"
     permanent
     :order="-2"
     color="page-nav-bg"
@@ -33,6 +34,9 @@
               <template v-if="item.icon" #prepend>
                 <v-icon :icon="item.icon" />
               </template>
+              <template v-if="item.title" #title>
+                {{ item.title }}
+              </template>
             </v-list-item>
           </div>
         </div>
@@ -58,6 +62,9 @@
               <template v-if="item.icon" #prepend>
                 <v-icon :icon="item.icon" />
               </template>
+              <template v-if="item.title" #title>
+                {{ item.title }}
+              </template>
             </v-list-item>
           </div>
         </div>
@@ -73,7 +80,9 @@ import usePageNavigation, {
 } from "@racletteOrchestrator/composables/usePageNavigation"
 import useRouteState from "@racletteOrchestrator/composables/useRouteState"
 import { DEFAULT_SLOT_NAME } from "@racletteOrchestrator/router/routeParserHelper"
+import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"
 
+const { state: projectConfig } = useStateSubscriber(["project", "config"])
 const { state: pageNavigation } = usePageNavigation()
 const { getCompositionLinkForSlotName } = useRouteState()
 const currentPageRoute = getCompositionLinkForSlotName(DEFAULT_SLOT_NAME)
@@ -81,6 +90,7 @@ const currentPageRoute = getCompositionLinkForSlotName(DEFAULT_SLOT_NAME)
 const navigationDrawer = ref(true)
 const navigationRail = ref(true)
 
+const pageNavigationRail = projectConfig.value?.railPageNavigation || false
 const activeRouteName = computed(() => currentPageRoute?.value?.slotValue)
 
 const navigate = (item: NavigationItem) => item.navigateTo()

package/services/frontend/src/orchestrator/composables/usePageNavigation.ts

@@ -19,17 +19,23 @@ export type NavigationItem = {
 
 export default () => {
   const { locale } = useUiState()
-  const { state } = useInteractionLinks(["page-navigation", "user-menu"])
+  const { state } = useInteractionLinks([
+    "page-navigation",
+    "user-menu",
+    "app-bar",
+  ])
   const { triggerInteractionLink } = useRouteState()
 
   const navigationItems = computed<{
     navigationItems: NavigationItem[]
     footerItems: NavigationItem[]
     userMenuItems: NavigationItem[]
+    appBarItems: NavigationItem[]
   }>(() => {
     const navigationItems: NavigationItem[] = []
     const footerItems: NavigationItem[] = []
     const userMenuItems: NavigationItem[] = []
+    const appBarItems: NavigationItem[] = []
     locale.value
     state.value.forEach((interactionLink) =>
       interactionLink.triggers
@@ -60,6 +66,8 @@ export default () => {
               }
             } else if (type === "user-menu") {
               userMenuItems.push(item)
+            } else if (type === "app-bar") {
+              appBarItems.push(item)
             }
           }
         }),
@@ -69,6 +77,7 @@ export default () => {
       navigationItems,
       footerItems,
       userMenuItems,
+      appBarItems,
     }
   })
   return {

package/services/frontend/src/orchestrator/i18n/de-DE.json

@@ -72,6 +72,7 @@
       "noAccountYet": "Noch kein Konto?",
       "moreInformation": "Weitere Informationen"
     },
+    "openInFloatingWindow": "In extrafenster öffnen",
     "showDeleted": "Zeige gelöschte",
     "hideDeleted": "Verstecke gelöschte",
     "cancel": "Abbrechen",

package/services/frontend/src/orchestrator/i18n/en-EU.json

@@ -72,6 +72,7 @@
       "noAccountYet": "Don't have an account yet?",
       "moreInformation": "More information"
     },
+    "openInFloatingWindow": "Open in floating window",
     "showDeleted": "Show deleted",
     "hideDeleted": "Hide deleted",
     "cancel": "Cancel",

package/services/frontend/src/orchestrator/i18n/sk.json

@@ -72,6 +72,7 @@
       "noAccountYet": "Ešte nemáte účet?",
       "moreInformation": "Viac informácií"
     },
+    "openInFloatingWindow": "Otvoriť v plávajúcom okne",
     "showDeleted": "relácia vymazaná",
     "hideDeleted": "skryť odstránené",
     "cancel": "Zrušiť",

package/services/frontend/src/orchestrator/router/index.ts

@@ -4,6 +4,7 @@
 import { createRouter, createWebHistory } from "vue-router"
 import { afterEach, beforeEach } from "./routerHooks"
 import routes from "./routes"
+import { $eventbus } from "@racletteCore/main"
 
 // create router instance
 
@@ -15,5 +16,20 @@ const router = createRouter({
 /* Rooter hooks */
 router.beforeEach(beforeEach)
 router.afterEach(afterEach)
+$eventbus.on("backend/error", (error) => {
+  if (error.name === "AxiosError") {
+    const errorResponse = error.response?.data
+    if (errorResponse?.code === "FST_JWT_AUTHORIZATION_TOKEN_EXPIRED") {
+      // Capture current route path (including query and hash)
+      const currentUrl = router.currentRoute.value.fullPath
+      // Redirect to login with the current URL as a query param
+      if (window.location.href !== window.location.origin + "/login") {
+        window.location.href =
+          window.location.origin + "/login?redirect=" + currentUrl
+      }
 
+      return
+    }
+  }
+})
 export default router

package/yarn.lock

@@ -295,10 +295,10 @@
   resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.2.9.tgz#d229a7b7f9dac167a156992ef23c7f023653f53b"
   integrity sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==
 
-"@raclettejs/types@^0.1.17":
-  version "0.1.17"
-  resolved "https://registry.yarnpkg.com/@raclettejs/types/-/types-0.1.17.tgz#ced377e5fa8879a5790b1c0c838f621917032690"
-  integrity sha512-WBhi6Nf/XJPlisF1stEB0KGo5TWw+EMaTuYt39fJKc+Vtyf/SFmZqP2D3BKlssE5N/8bo2DFgf2qUeKowo0onA==
+"@raclettejs/types@^0.1.18":
+  version "0.1.18"
+  resolved "https://registry.yarnpkg.com/@raclettejs/types/-/types-0.1.18.tgz#7df0eb1b86db015694fabfafa089a277e654b350"
+  integrity sha512-mvQI2sO48z6+QKj/s5A5JMBKnY8piE+8D8N0soctfsU7tAKg8nEwlxOiQHZiqJyR1k+gX2p+VBMRGbxHCYAGFw==
   dependencies:
     "@types/node" "24.5.2"
     fastify "5.6.0"

package/services/frontend/src/orchestrator/setup/loginApp.ts

@@ -1,27 +0,0 @@
-// TODO: check if this file can be deleted
-export const createLoginApp = async (
-  el: string,
-  loginMethod: Function,
-  noUsers: boolean,
-) => {
-  const [{ createApp }, { default: LoginApp }, { i18n }, { default: vuetify }] =
-    await Promise.all([
-      import("vue"),
-      import("../LoginApp.vue"),
-      import("./i18n"),
-      import("./vuetify"),
-    ])
-
-  await Promise.all([
-    import("../assets/styles/main.scss"),
-    import("../assets/styles/tailwindStyles.css"),
-    import("../assets/styles/vuetifyStyles.scss"),
-  ])
-
-  const app = createApp(LoginApp, { loginMethod, noUsers })
-  app.use(i18n)
-  app.use(vuetify)
-  app.mount(el)
-
-  return app
-}