@raclettejs/core 0.0.1

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

@@ -0,0 +1,87 @@
+<template>
+  <!-- Navigation Drawer -->
+  <v-navigation-drawer
+    v-if="
+      pageNavigation?.navigationItems?.length ||
+      pageNavigation?.footerItems?.length
+    "
+    id="navSideBar"
+    v-model="navigationDrawer"
+    :rail="navigationRail"
+    permanent
+    :order="-2"
+    color="page-nav-bg"
+  >
+    <!-- Navigation List -->
+    <div class="tw:h-full">
+      <v-list density="compact" nav class="tw:flex tw:flex-col tw:gap-[2px]">
+        <!-- item -->
+        <div v-for="item in pageNavigation?.navigationItems" :key="item.route">
+          <div
+            class="tw:border tw:border-solid tw:border-transparent tw:transition-all tw:duration-75"
+          >
+            <v-list-item
+              :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>
+          </div>
+        </div>
+      </v-list>
+    </div>
+
+    <template #append>
+      <v-list density="compact">
+        <div v-for="item in pageNavigation?.footerItems" :key="item.route">
+          <div
+            class="tw:border tw:border-solid tw:border-transparent tw:transition-all tw:duration-75"
+          >
+            <v-list-item
+              :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>
+          </div>
+        </div>
+      </v-list>
+    </template>
+  </v-navigation-drawer>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue"
+import usePageNavigation, {
+  type NavigationItem,
+} from "@racletteOrchestrator/composables/usePageNavigation"
+import useRouteState from "@racletteOrchestrator/composables/useRouteState"
+import { DEFAULT_SLOT_NAME } from "@racletteOrchestrator/router/routeParserHelper"
+
+const { state: pageNavigation } = usePageNavigation()
+const { getCompositionLinkForSlotName } = useRouteState()
+const currentPageRoute = getCompositionLinkForSlotName(DEFAULT_SLOT_NAME)
+
+const navigationDrawer = ref(true)
+const navigationRail = ref(true)
+
+const activeRouteName = computed(() => currentPageRoute?.value?.slotValue)
+
+const navigate = (item: NavigationItem) => item.navigateTo()
+</script>

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

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <v-snackbar
+      v-for="(snackbar, index) in snackbars"
+      :key="index"
+      v-model="snackbar.show"
+      :color="snackbar.color || 'blue'"
+      :timeout="snackbar.timeout ?? -1"
+      :style="{ 'margin-bottom': calcMargin(index) }"
+      @click="handleSnackbarClick(index)"
+    >
+      <template v-if="snackbar.content && snackbar.i18n">
+        {{ $t(snackbar.i18n, snackbar.content) }}
+      </template>
+      <template v-else-if="snackbar.i18n">
+        {{ $t(snackbar.i18n) }}
+      </template>
+      <template v-else>
+        {{ snackbar.message }}
+      </template>
+
+      <template #actions>
+        <v-btn
+          v-if="snackbar.timeout < 0"
+          icon="mdi-close"
+          variant="text"
+          @click="handleSnackbarClick(index)"
+        />
+      </template>
+    </v-snackbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue"
+import { $store, $eventbus } from "@racletteCore/main"
+
+export type SnackbarMessage = {
+  message?: string
+  content?: Record<string, any>
+  i18n?: string
+  color?: string
+  timeout?: number
+}
+
+const snackbars = ref<(SnackbarMessage & { show: boolean })[]>([])
+
+const defaultTimeout = 4000
+
+// Function to calculate margin for stacking snackbars
+const calcMargin = (index: number) => `${index * 60 + 10}px`
+
+// Function to close the snackbar
+// 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 }
+
+  // Prevent duplicate messages (check last two)
+  const lastMessages = snackbars.value.slice(-2)
+  const isDuplicate = lastMessages.some(
+    (lastMsg) => !$store.hasChanges(lastMsg, snackbar),
+  )
+
+  if (isDuplicate) {
+    return
+  }
+
+  snackbars.value.push(snackbar)
+
+  if (snackbar.timeout !== -1) {
+    setTimeout(() => {
+      const index = snackbars.value.indexOf(snackbar)
+
+      if (index !== -1) {
+        snackbars.value.splice(index, 1)
+      }
+    }, snackbar.timeout ?? defaultTimeout)
+  }
+}
+
+onMounted(() => $eventbus.on("ui_addToSnackBar", addToSnackBar))
+
+onUnmounted(() => $eventbus.removeListener("ui_addToSnackBar", addToSnackBar))
+</script>

package/services/frontend/src/orchestrator/components/time/TimeAgo.vue

@@ -0,0 +1,73 @@
+<template>
+  <span
+    v-if="isWording"
+    class="tw:text-xs tw:font-normal"
+    @click="handleClick"
+    :class="{ 'tw:cursor-pointer': enableCopyToClipboard }"
+    :aria-label="
+      enableCopyToClipboard
+        ? t('core.copyToClipboard$name', {
+            name: `'${formattedTimestamp}'`,
+          })
+        : undefined
+    "
+    :role="enableCopyToClipboard ? 'button' : undefined"
+  >
+    <v-tooltip interactive>
+      <template v-slot:activator="{ props: activatorProps }">
+        <span v-bind="activatorProps">
+          {{ $t("core.timeAgo", { time: timeAgo }) }}
+        </span>
+      </template>
+      <div>
+        {{ formattedTimestamp }}
+      </div>
+    </v-tooltip>
+  </span>
+  <span v-else>{{ formattedTimestamp }}</span>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref } from "vue"
+import { differenceInDays } from "date-fns"
+import { format, formatDistance } from "@racletteOrchestrator/helpers/date-fns"
+import { useI18n } from "vue-i18n"
+import { copyToClipboard } from "@racletteOrchestrator/helpers/uiHelper"
+
+const props = defineProps<{
+  timestamp: string
+  enableCopyToClipboard?: boolean
+}>()
+
+const { t } = useI18n()
+
+const now = ref(new Date())
+
+const isWording = computed(() => {
+  const date = new Date(props.timestamp)
+
+  const diffDays = differenceInDays(now.value, date)
+
+  return diffDays < 7
+})
+
+const timeAgo = computed(() => {
+  const date = new Date(props.timestamp)
+
+  return formatDistance(date, now.value)
+})
+
+const formattedTimestamp = computed(() => {
+  const date = new Date(props.timestamp)
+
+  return format(date, "PPpp")
+})
+
+const handleClick = () => {
+  if (props.enableCopyToClipboard) {
+    copyToClipboard(formattedTimestamp.value, formattedTimestamp.value)
+  }
+}
+
+onMounted(() => setInterval(() => (now.value = new Date()), 60000))
+</script>

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

@@ -0,0 +1,5 @@
+export * from "./usePluginApi"
+export * from "./useRouteState"
+export * from "./useCurrentComposition"
+export * from "./useWidgets"
+export * from "./useInteractionLinks"

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

@@ -0,0 +1,23 @@
+export default () => {
+  const clearLocalStorage = () => {
+    localStorage.clear()
+  }
+  const clearCookies = () => {
+    document.cookie.split(";").forEach((cookie) => {
+      const eqPos = cookie.indexOf("=")
+      const name = eqPos > -1 ? cookie.substring(0, eqPos) : cookie
+
+      document.cookie = name + "=; max-age=- (any digit); path=/;"
+    })
+  }
+  const clearCookiesAndLocalStorage = () => {
+    clearCookies()
+    clearLocalStorage()
+  }
+
+  return {
+    clearCookies,
+    clearCookiesAndLocalStorage,
+    clearLocalStorage,
+  }
+}

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

@@ -0,0 +1,44 @@
+import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"
+import type { Composition } from "@shared/types/core/Composition.types"
+import { getCompositionPathById } from "@racletteCore/store/reducers/compositions/selectors"
+import { computed } from "vue"
+import { DEFAULT_SLOT_NAME } from "@racletteOrchestrator/router/routeParserHelper"
+
+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 id = computed(() => state.value?._id)
+
+  const localizedPath = computed(() =>
+    id.value ? getCompositionPathById(id.value) : undefined,
+  )
+
+  const title = computed(() => state.value?.title)
+  const description = computed(() => state.value?.description)
+  const tags = computed(() => state.value?.tags ?? [])
+  const icon = computed(() => state.value?.icon)
+  const pathname = computed(() => state.value?.pathname)
+  const status = computed(() => state.value?.status)
+
+  const widgetsLayout = computed(() => state.value?.widgetsLayout)
+
+  return {
+    state,
+    id,
+    localizedPath,
+    title,
+    description,
+    tags,
+    icon,
+    pathname,
+    status,
+    widgetsLayout,
+  }
+}
+
+export default useCurrentComposition

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

@@ -0,0 +1,247 @@
+import type { ClonedDraggableItem, DroppableConfig } from "./types"
+
+const MAX_GHOST_HEIGHT = 200
+
+export const createGhostElement = (
+  element: HTMLElement,
+  isResizing = false,
+) => {
+  // clone the element
+  const ghostElement = element.cloneNode(true) as HTMLElement
+
+  const transitionsTimings = {
+    top: 15,
+    left: 15,
+    width: 300,
+    transform: 300,
+  }
+
+  const transitionString = Object.entries(transitionsTimings)
+    .map(([key, value]) => `${key} ${value}ms ease`)
+    .join(", ")
+
+  // get the dimensions and position of the original element
+  const rect = element.getBoundingClientRect()
+  const inlineStyles: Partial<CSSStyleDeclaration> = {
+    position: "absolute",
+    pointerEvents: "none",
+    opacity: ".7",
+    zIndex: "999999999",
+    // copy the size of the original element
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+    // copy the position of the original element (place it exactly there)
+    left: `${rect.left + window.scrollX}px`,
+    top: `${rect.top + window.scrollY}px`,
+    transition: transitionString,
+    transformOrigin: "top left",
+  }
+
+  // assign all the styles to the element
+  Object.assign(ghostElement.style, inlineStyles)
+
+  ghostElement.dataset.ghost = "true"
+
+  if (!isResizing && rect.height > MAX_GHOST_HEIGHT) {
+    const scale = MAX_GHOST_HEIGHT / rect.height
+
+    // scale the element timed out, to ensure it gets animated
+    setTimeout(() => (ghostElement.style.transform = `scale(${scale})`), 0)
+  }
+
+  element.dataset.isBeingDragged = "true"
+  element.style.display = "none"
+
+  document.body.appendChild(ghostElement)
+
+  return ghostElement
+}
+
+export const removeGhostElement = (
+  element: HTMLElement,
+  draggableElement: HTMLElement,
+) => {
+  // animate the ghost element back to its origin
+  // element.style.transition = "transform 0.3s ease"
+  // element.style.transform = `translate(0, 0)`
+
+  // remove the ghost element and
+  // setTimeout(() => {
+  element?.remove()
+  delete draggableElement.dataset.isBeingDragged
+  draggableElement.style.display = ""
+  // }, 300)
+}
+
+export const findClosestElement = (
+  position: {
+    x: number
+    y: number
+  },
+  draggableElements: { rect: DOMRect; element: Element }[],
+  direction: DroppableConfig["sortable"] = "vertical",
+): { element: Element; index: number } | null => {
+  let closestElement: { rect: DOMRect; element: Element } | null = null
+  let closestIndex = -1
+  let minDistance = Infinity
+
+  // check for each element if the mouse is over or under it
+  draggableElements.forEach((draggable, index) => {
+    const rect = draggable.rect
+
+    let isInsideBounds = false
+
+    if (direction === "vertical") {
+      // check if the mouse is inside the element vertically
+      isInsideBounds = position.x >= rect.left && position.x <= rect.right
+    }
+    if (direction === "horizontal") {
+      // check if the mouse is inside the element horizontally
+      isInsideBounds = position.y >= rect.top && position.y <= rect.bottom
+    }
+
+    if (isInsideBounds) {
+      let distanceToClosestEdge = 0
+      let indexAdjustment = 0
+
+      if (direction === "vertical") {
+        // calculate the vertical distance of the mouse to the top and bottom of the element
+        const distanceAbove = Math.abs(position.y - rect.top)
+        const distanceBelow = Math.abs(position.y - rect.bottom)
+
+        distanceToClosestEdge = Math.min(distanceAbove, distanceBelow)
+
+        if (distanceBelow <= distanceAbove) {
+          indexAdjustment = 1
+        }
+      }
+      if (direction === "horizontal") {
+        // calculate the horizontal distance of the mouse to the left and right of the element
+        const distanceLeft = Math.abs(position.x - rect.left)
+        const distanceRight = Math.abs(position.x - rect.right)
+
+        distanceToClosestEdge = Math.min(distanceLeft, distanceRight)
+
+        if (distanceRight <= distanceLeft) {
+          indexAdjustment = 1
+        }
+      }
+
+      // update if this element is closer to the mouse than previous elements
+      if (distanceToClosestEdge < minDistance) {
+        minDistance = distanceToClosestEdge
+        closestElement = draggable
+        closestIndex = index + indexAdjustment // Speichere den Index
+      }
+    }
+  })
+
+  // return null if no element was found
+  if (closestElement) {
+    return { element: closestElement.element, index: closestIndex }
+  } else {
+    return null
+  }
+}
+
+export const animateElements = (
+  index: number,
+  elements: ClonedDraggableItem[],
+  direction: DroppableConfig["sortable"] = "vertical",
+  averageElementSize: { width: number; height: number },
+) => {
+  let translateX = 0
+  let translateY = 0
+
+  if (direction === "horizontal") {
+    translateX = averageElementSize.width
+  }
+  if (direction === "vertical") {
+    translateY = averageElementSize.height
+  }
+
+  elements.forEach(({ element }, i) => {
+    if (i < index) {
+      element.style.transform = ""
+    } else {
+      element.style.transition = "transform 0.3s ease"
+      element.style.transform = `translate(${translateX}px, ${translateY}px)`
+    }
+  })
+}
+
+export const collectDraggableElements = (target: HTMLElement) => {
+  const draggableChildren = target.querySelectorAll(":scope [data-draggable]")
+  const draggableElements: Element[] = []
+
+  draggableChildren.forEach((entry) => {
+    if (entry.dataset.isBeingDragged) {
+      return
+    }
+    // check if the parent is the correct parent (exclude children in deeper dropzones)
+    if (entry.closest("[data-dropzone]") === target) {
+      draggableElements.push(entry)
+    }
+  })
+
+  return draggableElements
+}
+
+export const cloneDraggableElements = (
+  draggableElements: Element[],
+  cloneZIndex?: number,
+) => {
+  const clones: ClonedDraggableItem[] = []
+
+  draggableElements.forEach((element) => {
+    const clone = element.cloneNode(true) as HTMLElement
+    const rect = element.getBoundingClientRect()
+
+    clone.style.position = "absolute"
+    clone.style.width = `${rect.width}px`
+    clone.style.height = `${rect.height}px`
+    clone.style.left = `${rect.left + window.scrollX}px`
+    clone.style.top = `${rect.top + window.scrollY}px`
+    clone.style.pointerEvents = "none"
+    clone.dataset.clone = "true"
+    if (cloneZIndex) {
+      clone.style.zIndex = cloneZIndex.toString()
+    }
+
+    element.style.visibility = "hidden"
+
+    document.body.appendChild(clone)
+    clones.push({ element: clone, rect: clone.getBoundingClientRect() })
+  })
+
+  return clones
+}
+
+export const getAverageSizeOfClonedElements = (
+  clonedDraggableElements: ClonedDraggableItem[],
+) => {
+  let width = 0
+  let height = 0
+
+  clonedDraggableElements.forEach(({ rect }) => {
+    width += rect.width
+    height += rect.height
+  })
+
+  width = width / clonedDraggableElements.length || 0
+  height = height / clonedDraggableElements.length || 0
+
+  if (height > MAX_GHOST_HEIGHT) {
+    height = MAX_GHOST_HEIGHT
+  }
+
+  return { width, height }
+}
+
+export const clearClonedElements = (
+  elements: ClonedDraggableItem[],
+  draggableElements: Element[],
+) => {
+  elements.forEach((element) => element.element.remove())
+  draggableElements.forEach((element) => (element.style.visibility = "visible"))
+}