@raclettejs/core 0.0.1

package/services/frontend/src/orchestrator/composables/useDragAndDrop/index.ts

@@ -0,0 +1,272 @@
+import interact from "interactjs"
+import { onUnmounted, ref } from "vue"
+import type {
+  ClonedDraggableItem,
+  DraggableConfig,
+  DroppableConfig,
+} from "./types"
+import {
+  animateElements,
+  clearClonedElements,
+  cloneDraggableElements,
+  collectDraggableElements,
+  createGhostElement,
+  findClosestElement,
+  getAverageSizeOfClonedElements,
+  removeGhostElement,
+} from "./helperFunctions"
+
+let nextElementConfigIndex = 0
+let ghostElement: HTMLElement | null = null
+const elementConfigIndex: { [key: number]: DraggableConfig } = {}
+
+const getDraggableConfig = (element: HTMLElement): DraggableConfig => {
+  const configIndex = parseInt(element?.dataset?.configIndex || "")
+  const draggableConfig = elementConfigIndex[configIndex]
+
+  return draggableConfig
+}
+
+const isDraggingOrResizingAnything = ref(false)
+
+export default () => {
+  const isDragging = ref(false)
+  const isDraggingInsideDropzone = ref(false)
+  let instance: ReturnType<typeof interact>
+
+  const makeDraggable = (
+    element: HTMLElement,
+    config: DraggableConfig = {},
+  ) => {
+    const index = nextElementConfigIndex++
+    const ghostPosition = { x: 0, y: 0 }
+
+    // save the config to have access to it later
+    elementConfigIndex[index] = config
+    element.dataset.configIndex = index.toString()
+
+    instance = interact(element).draggable({
+      allowFrom: config.handleElement ? config.handleElement : undefined,
+      listeners: {
+        start: (event) => {
+          ghostElement = createGhostElement(element)
+          if (config.anchorToCorner) {
+            ghostPosition.x = event.dx
+            ghostPosition.y = event.dy
+          } else {
+            const style = getComputedStyle(ghostElement)
+
+            ghostPosition.x = parseInt(style.left)
+            ghostPosition.y = parseInt(style.top)
+          }
+        },
+        move: (event) => {
+          if (!ghostElement) {
+            return
+          }
+          if (config.anchorToCorner) {
+            ghostPosition.x = event.page.x
+            ghostPosition.y = event.page.y
+          } else {
+            ghostPosition.x += event.dx
+            ghostPosition.y += event.dy
+          }
+
+          requestAnimationFrame(() => {
+            ghostElement!.style.top = ghostPosition.y + "px"
+            ghostElement!.style.left = ghostPosition.x + "px"
+          })
+        },
+        end: (event) => {
+          config.onDragEnd?.(event.rect.left, event.rect.top)
+          element.style.transform = ""
+
+          if (ghostElement) {
+            removeGhostElement(ghostElement, element)
+          }
+        },
+      },
+    })
+
+    if (config.resize) {
+      let breakpoints: number[] = []
+      let closestBreakpoint = 0
+
+      const findClosestBreakpoint = (
+        value: number,
+        breakpoints: number[],
+      ): number =>
+        breakpoints.reduce((prev, curr) =>
+          Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev,
+        )
+
+      instance.resizable({
+        edges: { left: true, right: true },
+        listeners: {
+          start: (event) => {
+            ghostElement = createGhostElement(element, true)
+            const startCols = Number(event.currentTarget.dataset.cols) || 12
+            const startWidth = ghostElement.clientWidth
+            const colWidth = startWidth / startCols
+
+            for (let i = 1; i <= 12; i++) {
+              breakpoints.push(i * colWidth)
+            }
+
+            isDraggingOrResizingAnything.value = true
+          },
+          move: (event) => {
+            if (ghostElement) {
+              closestBreakpoint = findClosestBreakpoint(
+                event.rect.width,
+                breakpoints,
+              )
+
+              ghostElement.style.width = closestBreakpoint + "px"
+            }
+          },
+          end: (event) => {
+            const onResizePayload = {
+              draggableElement: event.relatedTarget,
+              targetElement: event.target,
+              draggableConfig: config,
+              cols: breakpoints.indexOf(closestBreakpoint) + 1,
+              width: closestBreakpoint,
+            }
+
+            breakpoints = []
+            closestBreakpoint = 0
+
+            if (ghostElement) {
+              removeGhostElement(ghostElement, element)
+            }
+
+            config.onResize?.(onResizePayload)
+            isDraggingOrResizingAnything.value = false
+          },
+        },
+      })
+    }
+  }
+
+  const createDropzone = (
+    element: HTMLElement,
+    droppableConfig: DroppableConfig = {},
+  ) => {
+    let draggableElements: Element[] = []
+    let clonedDraggableElements: ClonedDraggableItem[] = []
+    let lastHoveredIndex: number
+    let hasClones = false
+    let virtualElementSize = { width: 0, height: 0 }
+
+    instance = interact(element).dropzone({
+      ondrop: ({ relatedTarget, target }) => {
+        const draggableConfig = getDraggableConfig(relatedTarget)
+        const onDropPayload = {
+          draggableElement: relatedTarget,
+          targetElement: target,
+          draggableConfig: draggableConfig,
+          droppableConfig: droppableConfig,
+          index: lastHoveredIndex,
+        }
+
+        droppableConfig.onDrop?.(onDropPayload)
+        draggableConfig.onDrop?.(onDropPayload)
+      },
+      ondropmove: (event) => {
+        if (droppableConfig.sortable) {
+          const closestElement = findClosestElement(
+            {
+              x: event.dragEvent.pageX,
+              y: event.dragEvent.pageY,
+            },
+            clonedDraggableElements,
+            droppableConfig.sortable,
+          )
+
+          if (closestElement) {
+            const { index } = closestElement
+
+            if (index !== lastHoveredIndex) {
+              animateElements(
+                index,
+                clonedDraggableElements,
+                droppableConfig.sortable,
+                virtualElementSize,
+              )
+            }
+            lastHoveredIndex = index
+          }
+        }
+      },
+      accept: ({ draggableElement }) => {
+        const draggableType = getDraggableConfig(draggableElement)?.type
+
+        // if the draggableElement has a type, check if the config includes that type
+        if (droppableConfig.groups?.length && draggableType?.length) {
+          return droppableConfig.groups.includes(draggableType)
+        }
+
+        return false
+      },
+      ondropactivate: ({ target }: { target: HTMLElement }) => {
+        isDragging.value = true
+        isDraggingOrResizingAnything.value = true
+      },
+      ondropdeactivate: () => {
+        isDragging.value = false
+        isDraggingOrResizingAnything.value = false
+        isDraggingInsideDropzone.value = false
+        virtualElementSize = { width: 0, height: 0 }
+
+        if (hasClones) {
+          clearClonedElements(clonedDraggableElements, draggableElements)
+          hasClones = false
+        }
+        lastHoveredIndex = Infinity
+      },
+      ondragenter: ({ target }) => {
+        isDraggingInsideDropzone.value = true
+
+        if (!hasClones && droppableConfig.sortable) {
+          draggableElements = collectDraggableElements(target)
+          clonedDraggableElements = cloneDraggableElements(
+            draggableElements,
+            droppableConfig.cloneZIndex,
+          )
+
+          virtualElementSize = getAverageSizeOfClonedElements(
+            clonedDraggableElements,
+          )
+
+          hasClones = true
+        }
+      },
+      ondragleave: () => {
+        isDraggingInsideDropzone.value = false
+        lastHoveredIndex = Infinity
+
+        if (droppableConfig.sortable) {
+          animateElements(
+            Infinity,
+            clonedDraggableElements,
+            droppableConfig.sortable,
+            virtualElementSize,
+          )
+        }
+      },
+    })
+  }
+
+  onUnmounted(() => instance?.unset())
+
+  return {
+    makeDraggable,
+    createDropzone,
+    isDragging,
+    isDraggingInsideDropzone,
+    isDraggingOrResizingAnything,
+  }
+}
+
+export type * from "./types"

package/services/frontend/src/orchestrator/composables/useDragAndDrop/types.ts

@@ -0,0 +1,55 @@
+import type { WidgetSlot } from "@racletteCore/store/types/index"
+
+export type DraggableType =
+  | "ticket"
+  | "user"
+  | "tag"
+  | "organization"
+  | "project"
+  | "content"
+  | "block"
+  | "widget"
+  | "page"
+
+type BasePayload = {
+  draggableElement: HTMLElement
+  targetElement: HTMLElement
+  draggableConfig: DraggableConfig
+}
+
+export type OnDropFunction = (
+  payload: BasePayload & {
+    droppableConfig: DroppableConfig
+    index: number
+  },
+) => void
+
+export type OnResizeFunction = (
+  payload: BasePayload & {
+    cols: number
+    width: number
+  },
+) => void
+
+export type DraggableConfig = {
+  widgetName?: string
+  type?: DraggableType
+  handleElement?: HTMLElement
+  onDrop?: OnDropFunction
+  onDragStart?: Function
+  onDragEnd?: (x: Number, y: Number) => void
+  resize?: Boolean
+  onResize?: OnResizeFunction
+  anchorToCorner?: Boolean
+  widget?: WidgetSlot
+  pluginKey?: string
+}
+
+export type DroppableConfig = {
+  groups?: DraggableType[]
+  sortable?: "horizontal" | "vertical"
+  onDrop?: OnDropFunction
+  cloneZIndex?: number
+}
+
+export type ClonedDraggableItem = { element: HTMLElement; rect: DOMRect }

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

@@ -0,0 +1,55 @@
+import type { InteractionLinksState } from "@racletteCore/store/types/index"
+import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"
+import { computed } from "vue"
+import { clone } from "ramda"
+import type { InteractionLink } from "@shared/types"
+
+type UseInteractionLinksSettings = {
+  filterTriggers?: boolean
+}
+
+type InteractionLinkTriggerType = InteractionLink["triggers"][number]["type"]
+
+export default (
+  triggerType?: InteractionLinkTriggerType | InteractionLinkTriggerType[],
+  settings: UseInteractionLinksSettings = {
+    filterTriggers: true,
+  },
+) => {
+  // normalize triggerType to an array (only if defined)
+  const _triggerType =
+    triggerType === undefined
+      ? undefined
+      : typeof triggerType === "string"
+        ? [triggerType]
+        : clone(triggerType)
+
+  const { state } =
+    useStateSubscriber<InteractionLinksState>("interactionLinks")
+
+  const filteredInteractionLinks = computed(() => {
+    if (!_triggerType) {
+      return Object.values(state.value)
+    }
+
+    let filteredState = Object.values(state.value).filter((interactionLink) =>
+      interactionLink.triggers.some((trigger) =>
+        _triggerType.includes(trigger.type),
+      ),
+    )
+
+    if (settings.filterTriggers) {
+      filteredState = clone(filteredState)
+
+      filteredState.forEach((interactionLink) => {
+        interactionLink.triggers = interactionLink.triggers.filter((trigger) =>
+          _triggerType.includes(trigger.type),
+        )
+      })
+    }
+
+    return filteredState
+  })
+
+  return { state: filteredInteractionLinks }
+}

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

@@ -0,0 +1,138 @@
+import { useI18n } from "vue-i18n"
+
+/**
+ * Erstellt eine namespaced i18n API mit automatischem Prefix
+ * @param {string} namespace - Der Namespace-Prefix (z.B. "pacifico__openstack-billingdashboard")
+ * @param {Object} options - Optionale Konfiguration
+ * @returns {Object} Namespaced i18n API
+ */
+export function useNamespacedI18n(namespace, options = {}) {
+  const {
+    t: globalT,
+    te: globalTe,
+    tm: globalTm,
+    rt: globalRt,
+    d,
+    n,
+    locale,
+    fallbackLocale,
+    getLocaleMessage,
+    setLocaleMessage,
+    mergeLocaleMessage,
+  } = useI18n()
+
+  const { fallbackToGlobal = true, debugMode = false } = options
+
+  // Hilfsfunktion zum Erstellen des vollständigen Keys
+  const createFullKey = (key) => {
+    if (!key) return namespace
+    return `${namespace}.${key}`
+  }
+
+  // Debug-Logging
+  const debug = (message, data = {}) => {
+    if (debugMode) {
+      console.log(`[NamespacedI18n:${namespace}] ${message}`, data)
+    }
+  }
+
+  // Wrapper für die t-Funktion
+  const t = (key, ...args) => {
+    const fullKey = createFullKey(key)
+    debug("Translating key", { key, fullKey, args })
+
+    // Prüfen ob der Key existiert
+    if (globalTe(fullKey)) {
+      return globalT(fullKey, ...args)
+    }
+
+    // Fallback zum globalen Key wenn aktiviert
+    if (fallbackToGlobal && globalTe(key)) {
+      debug("Using global fallback", { key })
+      return globalT(key, ...args)
+    }
+
+    // Standard-Verhalten von vue-i18n
+    return globalT(fullKey, ...args)
+  }
+
+  // Wrapper für die te-Funktion (translation exists)
+  const te = (key) => {
+    const fullKey = createFullKey(key)
+    const exists = globalTe(fullKey)
+
+    if (!exists && fallbackToGlobal) {
+      return globalTe(key)
+    }
+
+    return exists
+  }
+
+  // Wrapper für die tm-Funktion (translation messages)
+  const tm = (key) => {
+    const fullKey = createFullKey(key)
+    const messages = globalTm(fullKey)
+
+    if (!messages && fallbackToGlobal) {
+      return globalTm(key)
+    }
+
+    return messages
+  }
+
+  // Wrapper für die rt-Funktion (resolve template)
+  const rt = (key, ...args) => {
+    const fullKey = createFullKey(key)
+    return globalRt(fullKey, ...args)
+  }
+
+  // Hilfsfunktion zum Setzen von Übersetzungen für diesen Namespace
+  const setNamespaceMessages = (locale, messages) => {
+    const currentMessages = getLocaleMessage(locale)
+    const namespacedMessages = {
+      ...currentMessages,
+      [namespace]: {
+        ...currentMessages[namespace],
+        ...messages,
+      },
+    }
+    setLocaleMessage(locale, namespacedMessages)
+  }
+
+  // Hilfsfunktion zum Abrufen aller Namespace-Übersetzungen
+  const getNamespaceMessages = (locale) => {
+    const messages = getLocaleMessage(locale)
+    return messages[namespace] || {}
+  }
+
+  return {
+    t,
+    te,
+    tm,
+    rt,
+    d,
+    n,
+    locale,
+    fallbackLocale,
+    // Zusätzliche Hilfsfunktionen
+    createFullKey,
+    namespace,
+    setNamespaceMessages,
+    getNamespaceMessages,
+    debug,
+  }
+}
+
+// Optional: Als Vue Plugin registrieren
+export const NamespacedI18nPlugin = {
+  install(app, options = {}) {
+    const { namespace = "default" } = options
+
+    app.config.globalProperties.$nt = (key, ...args) => {
+      const { t } = useI18n()
+      return t(`${namespace}.${key}`, ...args)
+    }
+
+    app.provide("namespacedI18n", useNamespacedI18n(namespace))
+  },
+}

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

@@ -0,0 +1,73 @@
+import {
+  getCompositionPathById,
+  getLocalizedName,
+} from "@racletteCore/store/reducers/compositions/selectors"
+import useInteractionLinks from "@racletteOrchestrator/composables/useInteractionLinks"
+import { computed } from "vue"
+import useRouteState from "./useRouteState"
+
+export type NavigationItem = {
+  icon: string
+  route?: string
+  sortOrder: number
+  title: string
+  slotType: string
+  navigateTo: () => void
+}
+
+export default () => {
+  const { state } = useInteractionLinks(["page-navigation", "user-menu"])
+  const { triggerInteractionLink } = useRouteState()
+
+  const navigationItems = computed<{
+    navigationItems: NavigationItem[]
+    footerItems: NavigationItem[]
+    userMenuItems: NavigationItem[]
+  }>(() => {
+    const navigationItems: NavigationItem[] = []
+    const footerItems: NavigationItem[] = []
+    const userMenuItems: NavigationItem[] = []
+
+    state.value.forEach((interactionLink) =>
+      interactionLink.triggers
+
+        .sort(
+          (a, b) => (a.settings.sortOrder ?? 0) - (b.settings.sortOrder ?? 0),
+        )
+        .forEach((trigger) => {
+          if (trigger.settings) {
+            const { type, settings } = trigger
+            const { icon, title, sortOrder, navigationBarType } = settings
+
+            const item: NavigationItem = {
+              icon,
+              sortOrder,
+              title: getLocalizedName(title),
+              route: getCompositionPathById(interactionLink.composition),
+              slotType: interactionLink.slotType,
+              navigateTo: () => triggerInteractionLink(interactionLink),
+            }
+
+            if (type === "page-navigation") {
+              if (navigationBarType === "footerItem") {
+                footerItems.push(item)
+              } else {
+                navigationItems.push(item)
+              }
+            } else if (type === "user-menu") {
+              userMenuItems.push(item)
+            }
+          }
+        }),
+    )
+
+    return {
+      navigationItems,
+      footerItems,
+      userMenuItems,
+    }
+  })
+  return {
+    state: navigationItems,
+  }
+}