@raclettejs/workbench 0.0.1

package/plugins/pacifico__compositions/frontend/components/compositionConfiguration/CompositionConfiguration.vue

@@ -0,0 +1,140 @@
+<template>
+  <StepNavigator
+    :steps
+    :is-saving="disabled"
+    :show-save-button="isEditing"
+    @save="$emit('save')"
+    @save-and-finish="$emit('save-and-finish')"
+  >
+    <template #default="{ currentStep }">
+      <template v-if="currentStep.id === 'config'">
+        <div>
+          <!-- @vue-generic {CompositionCreate | CompositionUpdate} -->
+          <DynamicForm
+            ref="dynamicFormRef"
+            v-model="composition"
+            :data="inputFields"
+            :disabled
+            :validate-on-change="false"
+            :title="
+              isEditing
+                ? $t('workbench.compositionEdit.title')
+                : $t('workbench.compositionCreate.title')
+            "
+            route-back-interaction-link-id="compositionListInteractionLink"
+          />
+        </div>
+      </template>
+
+      <template v-else-if="currentStep.id === 'layout'">
+        <v-navigation-drawer permanent class="tw:p-2">
+          <WidgetList />
+        </v-navigation-drawer>
+
+        <CompositionWidgetsLayout v-model="composition" />
+      </template>
+
+      <template v-else-if="currentStep.id === 'integration'"> </template>
+    </template>
+  </StepNavigator>
+</template>
+
+<script setup lang="ts">
+import type { CompositionCreate, CompositionUpdate } from "@raclettejs/core"
+import DynamicForm from "@app/components/dynamicForm/DynamicForm.vue"
+import type { DynamicFormItem } from "@app/components/dynamicForm/DynamicFormTypes"
+import { useI18n } from "vue-i18n"
+import { computed, useTemplateRef } from "vue"
+import CompositionWidgetsLayout from "./CompositionWidgetsLayout.vue"
+import WidgetList from "./widgetsLayout/WidgetList.vue"
+import StepNavigator from "@app/components/stepNavigator/StepNavigator.vue"
+import { Step } from "@app/components/stepNavigator/StepNavigatorTypes"
+
+defineProps<{ disabled?: boolean; isEditing?: boolean }>()
+
+defineEmits<{
+  (e: "save"): void
+  (e: "save-and-finish"): void
+}>()
+
+const composition = defineModel<CompositionCreate | CompositionUpdate>({
+  required: true,
+})
+
+const dynamicFormRef = useTemplateRef("dynamicFormRef")
+
+const { t } = useI18n()
+
+const inputFields = computed<
+  DynamicFormItem<CompositionCreate | CompositionUpdate>[]
+>(() => [
+  { divider: t("workbench.compositionConfiguration.divider.general") },
+  {
+    title: t("workbench.compositionConfiguration.title.title"),
+    description: t("workbench.compositionConfiguration.title.description"),
+    inputType: "text",
+    field: "title",
+    prependIcon: "text-short",
+    validation: {
+      required: true,
+      maxLength: 200,
+    },
+  },
+  {
+    title: t("workbench.compositionConfiguration.description.title"),
+    description: t(
+      "workbench.compositionConfiguration.description.description",
+    ),
+    inputType: "textarea",
+    field: "description",
+    prependIcon: "text",
+  },
+  {
+    title: t("workbench.compositionConfiguration.tags.title"),
+    description: t("workbench.compositionConfiguration.tags.description"),
+    inputType: "tags",
+    field: "tags",
+    prependIcon: "tag-multiple",
+  },
+  { divider: t("workbench.compositionConfiguration.divider.navigation") },
+  {
+    title: t("workbench.compositionConfiguration.pathname.title"),
+    description: t("workbench.compositionConfiguration.pathname.description"),
+    inputType: "localized",
+    field: "pathname",
+    prependIcon: "link-variant",
+    validation: {
+      required: true,
+    },
+  },
+])
+
+const validateConfigStep = (): boolean => {
+  const validateAllFields = dynamicFormRef.value?.validateAllFields
+
+  if (validateAllFields) {
+    const isValid = !!validateAllFields()
+
+    return isValid
+  }
+  return true
+}
+
+const steps = computed<Step[]>(() => [
+  {
+    id: "config",
+    title: t("workbench.compositionConfiguration.steps.configuration.title"),
+    subtitle: t(
+      "workbench.compositionConfiguration.steps.configuration.subtitle",
+    ),
+    validator: validateConfigStep,
+  },
+  {
+    id: "layout",
+    title: t("workbench.compositionConfiguration.steps.widgetLayout.title"),
+    subtitle: t(
+      "workbench.compositionConfiguration.steps.widgetLayout.subtitle",
+    ),
+  },
+])
+</script>

package/plugins/pacifico__compositions/frontend/components/compositionConfiguration/CompositionIntegration.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Ich bin die Einbindung für eine Komposition :)</div>
+</template>

package/plugins/pacifico__compositions/frontend/components/compositionConfiguration/CompositionWidgetsLayout.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="tw:mt-14">
+    <!-- editor -->
+    <div
+      v-if="composition.widgetsLayout"
+      class="tw:grid"
+      :class="`tw:grid-cols-12`"
+    >
+      <!-- spawn a dropzone for each array element in widgetsLayout -->
+      <DropzoneElement
+        v-for="(dropzoneSlot, dropzoneIndex) in composition.widgetsLayout"
+        :key="dropzoneIndex"
+        :droppable-config="{
+          groups: ['widget'],
+          sortable: 'vertical',
+          onDrop: onDropWrapper(dropzoneIndex),
+        }"
+        class="tw:col-span-1 tw:grid tw:w-full tw:grid-cols-12 tw:pb-[200px] tw:empty:min-h-[200px]"
+        :class="`tw:col-span-${columnSizesMap[dropzoneIndex]}`"
+      >
+        <!-- each slot in slot[][] represents a widget -->
+        <WidgetRenderer
+          v-for="(widgetSlot, widgetIndex) in dropzoneSlot"
+          :key="widgetIndex"
+          :widget-config="widgetSlot"
+          @resize="onResize($event, dropzoneIndex, widgetIndex)"
+          @update-config="onConfigChanges($event, dropzoneIndex, widgetIndex)"
+          @remove-widget="removeWidget(widgetSlot.widget.uuid)"
+          @open-settings="showSettingsForWidget = widgetSlot.widget"
+        />
+      </DropzoneElement>
+    </div>
+
+    <v-navigation-drawer
+      :model-value="!!showSettingsForWidget"
+      location="right"
+      class="tw:p-2"
+    >
+      <WidgetSettings
+        v-if="!!showSettingsForWidget"
+        v-model="showSettingsForWidget"
+      />
+    </v-navigation-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue"
+import { v4 as uuidv4 } from "uuid"
+import { CompositionCreate, CompositionUpdate } from "@raclettejs/core"
+import {
+  WidgetSlot,
+  type WidgetBase,
+} from "@raclettejs/core/frontend/store/types"
+import { OnDropFunction } from "@raclettejs/core/orchestrator/composables/useDragAndDrop"
+import WidgetRenderer from "./widgetsLayout/WidgetRenderer.vue"
+import WidgetSettings from "./widgetsLayout/WidgetSettings.vue"
+import DropzoneElement from "@raclettejs/core/orchestrator/components/dragAndDrop/DropzoneElement.vue"
+
+const composition = defineModel<CompositionCreate | CompositionUpdate>({
+  required: true,
+})
+
+const showSettingsForWidget = ref<WidgetBase | null>()
+
+const createNewWidget = (widgetName: string, pluginKey: string) => ({
+  column: 12,
+  widget: {
+    uuid: uuidv4(),
+    name: widgetName,
+    pluginKey,
+  },
+})
+
+const onDropWrapper =
+  (dropzoneIndex: number): OnDropFunction =>
+  ({ draggableConfig, index }) => {
+    let widgetToPut = draggableConfig.widget
+
+    if (widgetToPut) {
+      removeWidget(widgetToPut.widget.uuid)
+    } else if (draggableConfig.widgetName && draggableConfig.pluginKey) {
+      widgetToPut = createNewWidget(
+        draggableConfig.widgetName,
+        draggableConfig.pluginKey,
+      )
+    }
+    if (widgetToPut) {
+      if (!composition.value.widgetsLayout) {
+        composition.value.widgetsLayout = []
+      }
+
+      composition.value.widgetsLayout[dropzoneIndex].splice(
+        index,
+        0,
+        widgetToPut,
+      )
+    }
+  }
+
+// split an input like "8-4" to an array with [8, 4] and consider missing inputs
+const columnSizesMap = computed(() => [12])
+
+const removeWidget = (uuid: string) => {
+  const layout = composition.value.widgetsLayout
+  if (showSettingsForWidget?.value?.uuid === uuid) {
+    showSettingsForWidget.value = undefined
+  }
+  for (let column of layout || []) {
+    for (let i = column.length - 1; i >= 0; i--) {
+      if (column[i].widget.uuid === uuid) {
+        column.splice(i, 1)
+      }
+    }
+  }
+}
+
+const onResize = (cols: number, dropzoneIndex: number, widgetIndex: number) => {
+  composition.value.widgetsLayout![dropzoneIndex][widgetIndex].column = cols
+}
+
+const onConfigChanges = (
+  config: WidgetSlot,
+  dropzoneIndex: number,
+  widgetIndex: number,
+) => {
+  composition.value.widgetsLayout[dropzoneIndex][widgetIndex] = config
+}
+</script>

package/plugins/pacifico__compositions/frontend/components/compositionConfiguration/widgetsLayout/WidgetContextMenu.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="tw:z-50">
+    <div class="tw:flex tw:gap-1">
+      <v-btn
+        v-if="Object.keys(configurableParameteters || {}).length"
+        class="tw:rounded"
+        icon="mdi-cog"
+        color="grey-darken-3"
+        @click="openWidgetSettings()"
+      />
+      <v-btn
+        class="tw:rounded"
+        icon="mdi-delete-outline"
+        color="error"
+        @click="removeWidget()"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, type PropType, watchEffect } from "vue"
+import { clone } from "ramda"
+import type { WidgetSlot } from "@raclettejs/core/frontend/store/types"
+import useWidgets from "@raclettejs/core/orchestrator/composables/useWidgets"
+
+const { widgetConfig } = defineProps({
+  widgetConfig: {
+    type: Object as PropType<WidgetSlot>,
+    required: true,
+  },
+})
+
+const emit = defineEmits<{
+  updateConfig: [config: WidgetSlot]
+  removeWidget: [void]
+  openSettings: [void]
+}>()
+
+const { findWidgetByName } = useWidgets()
+
+const editableConfig = ref<WidgetSlot>(clone(widgetConfig))
+const widget = computed(() => findWidgetByName(widgetConfig.widget.name))
+
+const configurableParameteters = computed(
+  () => widget.value?.configurableParameters,
+)
+const openWidgetSettings = () => emit("openSettings")
+
+const removeWidget = () => emit("removeWidget")
+
+watchEffect(() => (editableConfig.value = clone(widgetConfig)))
+</script>

package/plugins/pacifico__compositions/frontend/components/compositionConfiguration/widgetsLayout/WidgetIcon.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <figure class="tw:flex tw:flex-col tw:items-center tw:gap-4">
+      <span
+        class="tw:flex tw:h-24 tw:w-24 tw:items-center tw:justify-center tw:rounded tw:shadow-lg"
+        :style="{
+          backgroundColor: module.color,
+        }"
+      >
+        <span
+          v-if="svgContent"
+          class="tw:flex tw:h-20 tw:w-20 tw:items-center tw:justify-center"
+          :style="{
+            '--highlight-color': module.color,
+            '--base-color': baseColor,
+          }"
+          v-html="svgContent"
+        />
+
+        <img
+          v-else
+          :src="module.icon"
+          :alt="`${module.title} icon`"
+          class="tw:size-20"
+        />
+      </span>
+      <figcaption class="tw:text-center tw:no-underline">
+        {{ module.title }}
+      </figcaption>
+    </figure>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { WidgetDeclaration } from "@raclettejs/core"
+import { ref, onMounted, watch, computed } from "vue"
+import type { PropType } from "vue"
+import { useTheme } from "vuetify"
+
+const props = defineProps({
+  module: {
+    type: Object as PropType<WidgetDeclaration>,
+    required: true,
+  },
+})
+
+const vuetifyTheme = useTheme()
+
+const svgContent = ref("")
+
+const baseColor = computed(() =>
+  vuetifyTheme.global.name.value === "dark" ? "#000" : "#fff",
+)
+
+const loadSvgContent = async (iconPath: string) => {
+  if (iconPath.startsWith("data:image/svg+xml;base64,")) {
+    const base64Data = iconPath.split(",")[1]
+
+    svgContent.value = atob(base64Data) // Decodes the base64 string correctly
+  } else if (iconPath.startsWith("data:image/svg+xml,")) {
+    svgContent.value = decodeURIComponent(iconPath.split(",")[1])
+  } else {
+    try {
+      const response = await fetch(iconPath)
+
+      if (!response.ok) {
+        throw new Error("Failed to fetch SVG")
+      }
+      svgContent.value = await response.text()
+    } catch (error) {
+      console.error("Error loading SVG:", error)
+      svgContent.value = ""
+    }
+  }
+}
+
+onMounted(() => {
+  if (
+    props.module.icon.endsWith(".svg") ||
+    props.module.icon.startsWith("data:image/svg+xml")
+  ) {
+    loadSvgContent(props.module.icon)
+  }
+})
+
+watch(
+  () => props.module,
+  (newModule) => {
+    if (
+      newModule.icon.endsWith(".svg") ||
+      newModule.icon.startsWith("data:image/svg+xml")
+    ) {
+      loadSvgContent(newModule.icon)
+    } else {
+      svgContent.value = ""
+    }
+  },
+)
+</script>

package/plugins/pacifico__compositions/frontend/components/compositionConfiguration/widgetsLayout/WidgetList.vue

@@ -0,0 +1,122 @@
+<template>
+  <v-list v-model:opened="openListItems">
+    <v-list-subheader>Modules</v-list-subheader>
+
+    <v-list-group
+      v-for="(authorPlugins, authorName) in groupedWidgets"
+      :key="authorName"
+      :value="authorName"
+    >
+      <template #activator="{ props }">
+        <v-list-item v-bind="props" :title="authorName" />
+      </template>
+      <v-list-group
+        v-for="(pluginWidgets, pluginKey) in authorPlugins"
+        :key="pluginKey"
+        :value="pluginKey"
+      >
+        <template #activator="{ props }">
+          <v-list-item
+            v-bind="props"
+            :title="deslugify(pluginKey.split('__')[1])"
+          ></v-list-item>
+        </template>
+
+        <DraggableElement
+          v-for="widget in pluginWidgets"
+          :key="widget.title"
+          class="tw:py-4"
+          :draggable-config="{
+            type: 'widget',
+            widgetName: widget.name,
+            pluginKey: widget.pluginKey,
+          }"
+        >
+          <WidgetIcon :module="widget" />
+        </DraggableElement>
+        <v-divider></v-divider>
+      </v-list-group>
+    </v-list-group>
+  </v-list>
+</template>
+
+<script setup lang="ts">
+import { deslugify } from "@shared/helper/pluginHelper"
+import { computed, ref } from "vue"
+import useWidgets from "@raclettejs/core/orchestrator/composables/useWidgets"
+import { RegisteredWidgetDeclaration } from "@raclettejs/core"
+import WidgetIcon from "./WidgetIcon.vue"
+import DraggableElement from "@raclettejs/core/orchestrator/components/dragAndDrop/DraggableElement.vue"
+
+const { widgets } = useWidgets()
+
+const openListItems = ref(["Users"])
+
+const groupedWidgets = computed(() => {
+  const unsortedResult: Record<
+    string,
+    Record<string, RegisteredWidgetDeclaration[]>
+  > = {}
+
+  widgets.value.forEach((widget) => {
+    if (!unsortedResult[widget.author]) {
+      unsortedResult[widget.author] = {}
+    }
+
+    if (!unsortedResult[widget.author][widget.pluginKey]) {
+      unsortedResult[widget.author][widget.pluginKey] = []
+    }
+
+    unsortedResult[widget.author][widget.pluginKey].push(widget)
+  })
+
+  const sortedAuthors = Object.keys(unsortedResult).sort((a, b) => {
+    if (a === "pacifico") {
+      return 1
+    }
+    if (b === "pacifico") {
+      return -1
+    }
+
+    return a.localeCompare(b)
+  })
+
+  const sortedResult: Record<
+    string,
+    Record<string, RegisteredWidgetDeclaration[]>
+  > = {}
+
+  sortedAuthors.forEach((author) => {
+    const plugins = Object.keys(unsortedResult[author]).sort((a, b) => {
+      if (a === "core") {
+        return 1
+      }
+      if (b === "core") {
+        return -1
+      }
+
+      return a.localeCompare(b)
+    })
+
+    sortedResult[author] = {}
+    plugins.forEach((pluginKey) => {
+      sortedResult[author][pluginKey] = unsortedResult[author][pluginKey]
+    })
+  })
+
+  return sortedResult
+})
+
+const initOpenListItems = () => {
+  const keys: string[] = []
+
+  widgets.value.forEach((widget) => {
+    keys.push(widget.author)
+    keys.push(widget.pluginKey)
+  })
+
+  openListItems.value = [...new Set(keys)]
+}
+
+initOpenListItems()
+</script>

package/plugins/pacifico__compositions/frontend/components/compositionConfiguration/widgetsLayout/WidgetRenderer.vue

@@ -0,0 +1,65 @@
+<template>
+  <DraggableElement
+    :draggable-config="{
+      type: 'widget',
+      resize: true,
+      onResize,
+      anchorToCorner: true,
+      widget: widgetConfig,
+    }"
+    class="tw:group tw:relative tw:m-1 tw:border tw:border-solid tw:border-transparent tw:shadow-md tw:hover:border-blue-500"
+    :class="`tw:col-span-${widgetConfig.column}`"
+    :data-cols="widgetConfig.column"
+  >
+    <WidgetContextMenu
+      :widget-config="widgetConfig"
+      class="tw:absolute tw:right-0 tw:hidden tw:group-hover:block"
+      @update-config="$emit('updateConfig', $event)"
+      @remove-widget="$emit('removeWidget')"
+      @open-settings="$emit('openSettings')"
+    />
+
+    <div class="tw:pointer-events-none">
+      <div v-if="activeWidget">
+        <v-img :src="activeWidget?.images[0] || activeWidget.icon" />
+      </div>
+      <div v-else class="tw:bg-red-700 tw:text-2xl tw:text-white">
+        Module not found: "{{ widgetConfig.widget.name }}"
+      </div>
+    </div>
+  </DraggableElement>
+</template>
+
+<script setup lang="ts">
+import { computed, type PropType } from "vue"
+import DraggableElement from "@raclettejs/core/orchestrator/components/dragAndDrop/DraggableElement.vue"
+import WidgetContextMenu from "./WidgetContextMenu.vue"
+import useWidgets from "@raclettejs/core/orchestrator/composables/useWidgets"
+import { OnResizeFunction } from "@raclettejs/core/orchestrator/composables/useDragAndDrop"
+import { WidgetSlot } from "@raclettejs/core/frontend/store/types"
+
+const props = defineProps({
+  widgetConfig: {
+    type: Object as PropType<WidgetSlot>,
+    required: true,
+  },
+})
+
+const emit = defineEmits<{
+  resize: [cols: number]
+  updateConfig: [config: WidgetSlot]
+  removeWidget: []
+  openSettings: [void]
+}>()
+
+const { widgets } = useWidgets()
+
+const activeWidget = computed(() =>
+  findWidgetByName(props.widgetConfig.widget.name),
+)
+
+const onResize: OnResizeFunction = ({ cols }) => emit("resize", cols)
+
+const findWidgetByName = (widgetName?: string) =>
+  widgets.value.find((widget) => widget.name === widgetName)
+</script>