@raclettejs/core 0.1.10 → 0.1.12

package/services/frontend/src/orchestrator/components/composition/WidgetsLayoutLoader.vue

@@ -1,97 +1,206 @@
 <template>
-  <div>
-    <div class="tw:m-0 tw:h-full tw:p-0 tw:max-w-full">
-      <Transition
-        enter-active-class="tw:transition-opacity tw:duration-200 tw:ease-in-out"
-        leave-active-class="tw:transition-opacity tw:duration-200 tw:ease-in-out"
-        enter-from-class="tw:opacity-0"
-        leave-to-class="tw:opacity-0"
-        mode="out-in"
-        appear
+  <div
+    class="tw:h-full tw:max-w-full tw:bg-gray-50 tw:dark:bg-[#252525]"
+    :class="{
+      'tw:p-4':
+        slotLayout !== 'default' &&
+        slotLayout !== 'inline' &&
+        slotLayout !== 'full',
+    }"
+  >
+    <Transition
+      enter-active-class="tw:transition-opacity tw:duration-200 tw:ease-in-out"
+      leave-active-class="tw:transition-opacity tw:duration-200 tw:ease-in-out"
+      enter-from-class="tw:opacity-0"
+      leave-to-class="tw:opacity-0"
+      mode="out-in"
+      appear
+    >
+      <v-row
+        :key="gridKey"
+        :no-gutters="slotLayout === 'default' || slotLayout === 'full'"
+        class="tw:max-w-full tw:self-start"
+        :class="{ 'tw:h-full': slotLayout === 'full' }"
       >
-        <v-row :key="gridKey" no-gutters class="tw:max-w-full tw:self-start">
-          <v-col
-            v-for="(column, colIndex) in props.widgetsLayout"
-            :key="colIndex"
-            :cols="getGridCols(props.widgetsLayout.length)"
+        <v-col
+          v-for="(column, colIndex) in props.widgetsLayout"
+          :key="colIndex"
+          :cols="getGridCols(props.widgetsLayout.length)"
+          :class="{ 'tw:h-full': slotLayout === 'full' }"
+        >
+          <v-row
+            :no-gutters="slotLayout === 'default' || slotLayout === 'full'"
+            :class="{ 'tw:h-full': slotLayout === 'full', ...rowClasses }"
           >
-            <v-row no-gutters>
-              <TransitionGroup
-                name="grid-item"
-                tag="div"
-                class="tw:w-full tw:flex tw:flex-wrap"
-                appear
+            <TransitionGroup
+              name="grid-item"
+              tag="div"
+              class="tw:w-full tw:flex tw:flex-wrap"
+              appear
+            >
+              <v-col
+                v-for="(slot, slotIndex) in column"
+                :key="`${gridKey}-${colIndex}-${slotIndex}`"
+                :cols="getSlotCols(slot)"
+                :style="{
+                  'transition-delay': `${slotIndex * 50}ms`,
+                  'max-height': `${maxWidgetHeight}px`,
+                  ...(slotLayout === 'default' || slotLayout === 'full'
+                    ? { padding: '0px' }
+                    : {}),
+                }"
               >
-                <v-col
-                  v-for="(slot, slotIndex) in column"
-                  :key="`${gridKey}-${colIndex}-${slotIndex}`"
-                  class="tw:overflow-auto"
-                  :cols="getSlotCols(slot)"
-                  :style="{ 'transition-delay': `${slotIndex * 50}ms` }"
+                <div
+                  :class="widgetContainerClasses"
+                  class="tw:h-full"
+                  :style="{ 'max-height': `${maxWidgetHeight}px` }"
                 >
                   <component
                     v-if="slot.widget"
                     :is="getSlotWidget(slot.widget)"
                     :uuid="slot.widget.uuid"
+                    class="tw:h-full"
+                    :class="[
+                      hasSpacing &&
+                      widgetStates[slot.widget.uuid].config
+                        ?.allowPaddingOverride
+                        ? 'tw:p-4'
+                        : '',
+                    ]"
                     v-bind="{
                       ...widgetStates[slot.widget.uuid].config,
                       ...widgetStates[slot.widget.uuid].public,
-                      ...(slot?.widget?.props || {}),
-                      // TODO: handle route slot params here as well
+                      ...routeParams,
+                      compositionName: currentRouteConfig?.slotValue,
+                      slotType,
                     }"
                   />
-                </v-col>
-              </TransitionGroup>
-            </v-row>
-          </v-col>
-        </v-row>
-      </Transition>
-    </div>
+                </div>
+              </v-col>
+            </TransitionGroup>
+          </v-row>
+        </v-col>
+      </v-row>
+    </Transition>
   </div>
 </template>
 
 <script setup lang="ts">
-import { watch, ref, h } from "vue"
+import type { Composition } from "@shared/types/core/Composition.types"
+import type { WidgetBase } from "@racletteCore/store/types"
+import { watch, ref, h, computed, type Component } from "vue"
 import { widgetLoader } from "@racletteOrchestrator/helpers/widgetLoader"
 import { useDisplay } from "vuetify"
+import { useWindowSize } from "@vueuse/core"
 import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"
-import type { Composition } from "@shared/types/core/Composition.types"
-import type { WidgetBase } from "@racletteCore/store/types"
+import useRouteState from "@racletteOrchestrator/composables/useRouteState"
 
 const props = defineProps<{
   widgetsLayout: Composition["widgetsLayout"]
+  slotType: String
+  slotLayout: String
 }>()
 
+const { compositionSlots } = useRouteState()
+
+const currentRouteConfig = computed(() =>
+  compositionSlots.value?.find((slot) => slot.slotName === props.slotType),
+)
+
+const widgetContainerClasses = computed(() => {
+  const baseClasses = "tw:h-auto tw:overflow-auto"
+
+  switch (props.slotLayout) {
+    case "spaced":
+      return `${baseClasses} tw:rounded-lg`
+    case "card":
+      return `${baseClasses} tw:rounded-lg tw:shadow-lg hover:tw:shadow-xl tw:transition-shadow tw:duration-200`
+    case "border":
+      return `${baseClasses} tw:rounded-lg tw:border tw:border-gray-300 tw:dark:border-gray-700`
+    default:
+      return baseClasses
+  }
+})
+
+const hasSpacing = computed(() =>
+  ["spaced", "card", "border"].includes(props.slotLayout),
+)
+
+const rowClasses = computed(() => {
+  return hasSpacing.value ? "tw:gap-2" : ""
+})
+
 const { mdAndDown } = useDisplay()
+const { height: windowHeight } = useWindowSize()
 
 const { state: widgetStates } = useStateSubscriber("widgets")
+const routeParams = computed(() => {
+  const cleanedParams = {}
+  if (currentRouteConfig.value?.slotParams) {
+    for (const [key, value] of Object.entries(
+      currentRouteConfig.value.slotParams,
+    )) {
+      if (value && value !== "undefined") {
+        cleanedParams[key] = value
+      }
+    }
+  }
+
+  return cleanedParams
+})
 
 // Create a reactive key that changes when widgetsLayout changes
 const gridKey = ref(0)
 
+// Calculate available height for widgets
+const availableHeight = computed(() => {
+  // this is really just a simplified approach for now
+
+  // TODO: this needs to be more dynamic
+  const appBarHeight = 48 // Vuetify compact app bar height
+  const progressBarHeight = 2 // Progress bar height
+  const borderAndPadding = 8 // Border and padding buffer
+
+  const calculated =
+    windowHeight.value - appBarHeight - progressBarHeight - borderAndPadding
+  return calculated
+})
+
+// Calculate max height per widget based on grid layout
+const maxWidgetHeight = computed(() => {
+  // Always set max height to the calculated available screen height (with buffer)
+  // Later we should determine a max value based on other widgets in each row, so this value will be different across rows and columns
+
+  return Math.min(availableHeight.value, 2400)
+})
+
+const widgetComponentCache = new Map<string, Component>()
+
 const getSlotWidget = (widget: WidgetBase) => {
-  try {
-    // Use enhanced widgetLoader that handles loading/error states internally
-    return widgetLoader(widget)
-  } catch (error) {
-    console.error("🚨 Error creating widget component:", error)
-
-    // Enhanced widgetLoader handles errors internally, so this shouldn't happen
-    // But keep as fallback
-    return {
-      name: "ComponentCreationError",
-      setup() {
-        return () =>
-          h(
-            "div",
-            {
-              class: "p-4 text-red-500 border border-red-300 rounded",
-            },
-            "Error creating component",
-          )
-      },
+  const cacheKey = `${widget.pluginKey}-${widget.name}-${widget.uuid}`
+
+  if (!widgetComponentCache.has(cacheKey)) {
+    try {
+      const component = widgetLoader(widget)
+      widgetComponentCache.set(cacheKey, component)
+    } catch (error) {
+      console.error("🚨 Error creating widget component:", error)
+      // cache error component too
+      widgetComponentCache.set(cacheKey, {
+        name: "ComponentCreationError",
+        setup() {
+          return () =>
+            h(
+              "div",
+              { class: "p-4 text-red-500 border border-red-300 rounded" },
+              "Error creating component",
+            )
+        },
+      })
     }
   }
+
+  return widgetComponentCache.get(cacheKey)
 }
 
 const getGridCols = (rowLength) => (mdAndDown.value ? 12 : 12 / rowLength)

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

@@ -6,38 +6,114 @@
           <v-btn v-bind="props" icon="mdi-dev-to" color="#ffc400" />
         </div>
       </template>
-
-      <v-list>
+      <v-list
+        v-model:selected="dropCollections"
+        v-model:opened="openGroups"
+        select-strategy="leaf"
+      >
         <v-list-subheader>Development mode</v-list-subheader>
-
         <v-list-item
           :title="toggleDevIndicatorMessage"
           prepend-icon="mdi-border-outside"
           @click="toggleShowDevIndicator"
         />
+        <v-list-group value="Users">
+          <template v-slot:activator="{ props }">
+            <v-list-item v-bind="props" prepend-icon="mdi-delete-sweep">
+              Drop Collections
+            </v-list-item>
+          </template>
+          <div class="tw:relative">
+            <v-btn
+              v-if="dropCollections.length"
+              color="error"
+              class="tw:absolute! tw:top-5! tw:right-5! tw:z-9999!"
+              @click="showConfirmation = true"
+              icon="mdi-delete-circle-outline"
+            >
+            </v-btn>
+
+            <v-list-item
+              v-for="collection in allCollections"
+              :key="collection.name"
+              :title="collection.name"
+              :subtitle="`Item Count: ${collection.count}`"
+              :value="collection.name"
+              :color="getColor(collection.name)"
+              :base-color="getColor(collection.name)"
+            >
+              <template v-slot:prepend="{ isSelected, select }">
+                <v-list-item-action start>
+                  <v-checkbox-btn
+                    :model-value="isSelected"
+                    @update:model-value="select"
+                  ></v-checkbox-btn>
+                </v-list-item-action>
+              </template>
+              <template v-slot:append>
+                <v-list-item-action
+                  v-if="isCoreCollection(collection.name)"
+                  end
+                >
+                  <v-icon color="warning">mdi-alert</v-icon>
+                </v-list-item-action>
+              </template>
+            </v-list-item>
+          </div>
+        </v-list-group>
       </v-list>
     </v-bottom-sheet>
+    <v-dialog v-model="showConfirmation" max-width="400">
+      <v-card>
+        <v-card-title class="tw:text-lg tw:font-semibold tw:text-red-600">
+          Delete Database Collections
+        </v-card-title>
+        <v-card-text>
+          Are you sure you want to delete the selected Collections?
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn @click="showConfirmation = false" variant="text"> Nope </v-btn>
+          <v-btn
+            @click="handleDropCollections"
+            color="error"
+            variant="elevated"
+          >
+            Aigh
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useLocalStorage } from "@vueuse/core"
-import { computed, ref, watch } from "vue"
+import { computed, ref, watch, onMounted } from "vue"
+import { $api, $eventbus } from "@racletteCore"
+import { useRouter } from "vue-router"
 
+const router = useRouter()
+const openGroups = ref([])
 const showMenu = ref(false)
 const showDevIndicator = useLocalStorage<boolean>("show-dev-indicator", true)
-
+const showConfirmation = ref(false)
+const allCollections = ref([])
 const toggleShowDevIndicator = () => {
   showDevIndicator.value = !showDevIndicator.value
   showMenu.value = false
 }
-
+const dropCollections = ref([])
 const toggleDevIndicatorMessage = computed(() => {
   const word = showDevIndicator.value ? "Hide" : "Show"
 
   return `${word} dev indication borders`
 })
-
+watch(showMenu, (value) => {
+  if (!value) {
+    dropCollections.value = []
+  }
+})
 watch(
   showDevIndicator,
   (value) => {
@@ -49,6 +125,45 @@ watch(
   },
   { immediate: true },
 )
+onMounted(async () => {
+  const res = await $api.axios
+    .get("/core/admin/collections/all", {})
+    .catch((e) => {
+      $eventbus.emit("ui/addToSnackbar", {
+        message: e.response.data.message,
+        color: "error",
+      })
+      throw e
+    })
+  const data = res?.data?.data || []
+  allCollections.value = data.sort((a, b) => a.name.localeCompare(b.name))
+})
+const handleDropCollections = async () => {
+  if (dropCollections.value.length) {
+    const res = await $api.axios
+      .delete("/core/admin/collections", {
+        data: {
+          collections: dropCollections.value,
+        },
+      })
+      .catch((e) => {
+        $eventbus.emit("ui/addToSnackbar", {
+          message: e.response.data.message,
+          color: "error",
+        })
+        throw e
+      })
+    router.go()
+  }
+}
+const isCoreCollection = (name) => {
+  return name.indexOf("raclette__core") > -1
+}
+const getColor = (name) => {
+  if (isCoreCollection(name)) {
+    return "error"
+  }
+}
 </script>
 
 <style lang="scss">

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

@@ -43,25 +43,42 @@
         </template>
         <v-list-item-title>{{ $t("core.toggle_snow") }}</v-list-item-title>
       </v-list-item>
-      <v-list-item
-        v-for="item in pageNavigation.userMenuItems"
-        :key="item.route"
-        :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-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)"
+        >
+          <!-- 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>
+          </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>
 
       <v-divider />
 
@@ -87,7 +104,7 @@ import { awaitTime, debounceHelper } from "@racletteCore/lib/dataHelper"
 import useRouteState from "@racletteOrchestrator/composables/useRouteState"
 import { DEFAULT_SLOT_NAME } from "@racletteOrchestrator/router/routeParserHelper"
 import { useLocalStorage } from "@vueuse/core"
-
+import WidgetsLayoutLoader from "../composition/WidgetsLayoutLoader.vue"
 import {
   debounceHelper as asteroidsDebounceHelper,
   eggMe,
@@ -101,6 +118,7 @@ const router = useRouter()
 const asteroidsDebounce = asteroidsDebounceHelper(3)
 const debounce = debounceHelper(1000)
 const { state: user } = useStateSubscriber("user")
+const { state: compositions } = useStateSubscriber("compositions")
 const { locale, theme } = useUiState()
 const { getCompositionLinkForSlotName } = useRouteState()
 

package/services/frontend/src/orchestrator/components/snackbar/SnackStack.vue

@@ -41,8 +41,18 @@ export type SnackbarMessage = {
   i18n?: string
   color?: string
   timeout?: number
+  sender?: string
+}
+export type ScopedSnackbarMessage = {
+  sender: string
+  data: {
+    message?: string
+    content?: Record<string, any>
+    i18n?: string
+    color?: string
+    timeout?: number
+  }
 }
-
 const snackbars = ref<(SnackbarMessage & { show: boolean })[]>([])
 
 const defaultTimeout = 4000
@@ -54,8 +64,10 @@ const calcMargin = (index: number) => `${index * 60 + 10}px`
 // the close icon will only be shown if the bar has no timeout
 const handleSnackbarClick = (index: number) => snackbars.value.splice(index, 1)
 
-const addToSnackBar = (data: SnackbarMessage) => {
-  const snackbar = { ...data, show: true }
+const addToSnackBar = (data: SnackbarMessage | ScopedSnackbarMessage) => {
+  // TODO implement proper handling of sender attribute
+  const _data = data?.sender ? data.data : data
+  const snackbar = { ..._data, show: true }
 
   // Prevent duplicate messages (check last two)
   const lastMessages = snackbars.value.slice(-2)
@@ -80,7 +92,7 @@ const addToSnackBar = (data: SnackbarMessage) => {
   }
 }
 
-onMounted(() => $eventbus.on("ui_addToSnackBar", addToSnackBar))
+onMounted(() => $eventbus.on("ui/addToSnackbar", addToSnackBar))
 
-onUnmounted(() => $eventbus.removeListener("ui_addToSnackBar", addToSnackBar))
+onUnmounted(() => $eventbus.removeListener("ui/addToSnackbar", addToSnackBar))
 </script>

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

@@ -4,15 +4,21 @@ import { getCompositionPathById } from "@racletteCore/store/reducers/composition
 import { computed } from "vue"
 import { DEFAULT_SLOT_NAME } from "@racletteOrchestrator/router/routeParserHelper"
 
+// Simple reference cache to prevent unnecessary re-renders
+let cachedCompositionId: string | null = null
+let cachedTitle: string | null = null
+let cachedWidgetsLayout: any = null
+
 export const useCurrentComposition = (key: string = DEFAULT_SLOT_NAME) => {
   const { state: currentComposableId } = useStateSubscriber(["ui", key])
   const { state: compositions } = useStateSubscriber("compositions")
 
-  const state = computed<Composition | undefined>(
-    () => compositions.value[currentComposableId.value],
-  )
+  const state = computed<Composition | undefined>(() => {
+    return compositions.value[currentComposableId.value]
+  })
 
   const id = computed(() => state.value?._id)
+  const slotLayout = computed(() => state.value?.slotLayout || "default")
 
   const localizedPath = computed(() =>
     id.value ? getCompositionPathById(id.value) : undefined,
@@ -25,7 +31,28 @@ export const useCurrentComposition = (key: string = DEFAULT_SLOT_NAME) => {
   const pathname = computed(() => state.value?.pathname)
   const status = computed(() => state.value?.status)
 
-  const widgetsLayout = computed(() => state.value?.widgetsLayout)
+  // Cached widgetsLayout that only updates when core composition changes
+  const widgetsLayout = computed(() => {
+    const currentComposition = state.value
+    if (!currentComposition || !currentComposition._id) {
+      return undefined
+    }
+
+    const compositionId = currentComposition._id
+    const currentTitle = currentComposition.title
+    const currentWidgetsLayout = currentComposition.widgetsLayout
+
+    // If composition ID or title changed, it's a different composition - update cache
+    if (cachedCompositionId !== compositionId || cachedTitle !== currentTitle) {
+      cachedCompositionId = compositionId
+      cachedTitle = currentTitle
+      cachedWidgetsLayout = currentWidgetsLayout
+      return currentWidgetsLayout
+    }
+
+    // Same composition, return cached reference to prevent re-renders
+    return cachedWidgetsLayout
+  })
 
   return {
     state,
@@ -38,6 +65,7 @@ export const useCurrentComposition = (key: string = DEFAULT_SLOT_NAME) => {
     pathname,
     status,
     widgetsLayout,
+    slotLayout,
   }
 }
 

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

@@ -5,17 +5,20 @@ import {
 import useInteractionLinks from "@racletteOrchestrator/composables/useInteractionLinks"
 import { computed } from "vue"
 import useRouteState from "./useRouteState"
+import useUiState from "@racletteOrchestrator/composables/useUiState"
 
 export type NavigationItem = {
   icon: string
   route?: string
   sortOrder: number
+  compositionId: string
   title: string
   slotType: string
   navigateTo: () => void
 }
 
 export default () => {
+  const { locale } = useUiState()
   const { state } = useInteractionLinks(["page-navigation", "user-menu"])
   const { triggerInteractionLink } = useRouteState()
 
@@ -27,7 +30,7 @@ export default () => {
     const navigationItems: NavigationItem[] = []
     const footerItems: NavigationItem[] = []
     const userMenuItems: NavigationItem[] = []
-
+    locale.value
     state.value.forEach((interactionLink) =>
       interactionLink.triggers
 
@@ -42,6 +45,7 @@ export default () => {
             const item: NavigationItem = {
               icon,
               sortOrder,
+              compositionId: interactionLink.composition,
               title: getLocalizedName(title),
               route: getCompositionPathById(interactionLink.composition),
               slotType: interactionLink.slotType,