@raclettejs/workbench 0.0.1

package/plugins/pacifico__interactionLinks/frontend/components/InteractionLinkConfiguration.vue

@@ -0,0 +1,145 @@
+<template>
+  <StepNavigator
+    :steps
+    :is-saving="disabled"
+    :show-save-button="isEditing"
+    @save="$emit('save')"
+    @save-and-finish="$emit('save-and-finish')"
+  >
+    <!-- @vue-generic {InteractionLinkCreate | InteractionLinkUpdate} -->
+    <DynamicForm
+      ref="dynamicFormRef"
+      v-model="interactionLink"
+      :data="inputFields"
+      :disabled
+      :title="
+        isEditing
+          ? $t('workbench.interactionLinkEdit.title')
+          : $t('workbench.interactionLinkCreate.title')
+      "
+      route-back-interaction-link-id="interactionLinkListInteractionLink"
+    />
+  </StepNavigator>
+</template>
+
+<script setup lang="ts">
+import type {
+  InteractionLinkCreate,
+  InteractionLinkUpdate,
+} 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 { Step } from "@app/components/stepNavigator/StepNavigatorTypes"
+import StepNavigator from "@app/components/stepNavigator/StepNavigator.vue"
+import {
+  DEFAULT_SLOT_NAME,
+  DEFAULT_MODAL_SLOT_NAME,
+} from "@raclettejs/core/orchestrator/router/routeParserHelper"
+
+defineProps<{ disabled?: boolean; isEditing?: boolean }>()
+
+defineEmits<{
+  (e: "save"): void
+  (e: "save-and-finish"): void
+}>()
+
+const interactionLink = defineModel<
+  InteractionLinkCreate | InteractionLinkUpdate
+>({ required: true })
+
+const dynamicFormRef = useTemplateRef("dynamicFormRef")
+
+const { t } = useI18n()
+
+const inputFields = computed<
+  DynamicFormItem<InteractionLinkCreate | InteractionLinkUpdate>[]
+>(() => [
+  { divider: t("workbench.interactionLinkConfiguration.dividers.general") },
+  {
+    title: t("workbench.interactionLinkConfiguration.composition.title"),
+    description: t(
+      "workbench.interactionLinkConfiguration.composition.description",
+    ),
+    inputType: "composition",
+    field: "composition",
+    prependIcon: "file-document",
+    validation: { required: true },
+  },
+  {
+    title: t("workbench.interactionLinkConfiguration.description.title"),
+    description: t(
+      "workbench.interactionLinkConfiguration.description.description",
+    ),
+    inputType: "textarea",
+    field: "description",
+    prependIcon: "text",
+  },
+  {
+    title: t("workbench.interactionLinkConfiguration.tags.title"),
+    description: t("workbench.interactionLinkConfiguration.tags.description"),
+    inputType: "tags",
+    field: "tags",
+    prependIcon: "tag-multiple",
+  },
+  {
+    divider: t("workbench.interactionLinkConfiguration.dividers.behavior"),
+  },
+  {
+    title: t("workbench.interactionLinkConfiguration.slotType.title"),
+    description: t(
+      "workbench.interactionLinkConfiguration.slotType.description",
+    ),
+    inputType: "select",
+    field: "slotType",
+    selectItems: [DEFAULT_SLOT_NAME, DEFAULT_MODAL_SLOT_NAME],
+    prependIcon: "dock-window",
+    validation: {
+      required: true,
+    },
+  },
+  {
+    title: t("workbench.interactionLinkConfiguration.triggers.title"),
+    description: t(
+      "workbench.interactionLinkConfiguration.triggers.description",
+    ),
+    inputType: "triggers",
+    field: "triggers",
+  },
+  {
+    title: t("workbench.interactionLinkConfiguration.queryParameters.title"),
+    description: t(
+      "workbench.interactionLinkConfiguration.queryParameters.description",
+    ),
+    inputType: "list",
+    field: "queryParameters",
+  },
+  {
+    title: t("workbench.interactionLinkConfiguration.isLandingPage.title"),
+    description: t(
+      "workbench.interactionLinkConfiguration.isLandingPage.description",
+    ),
+    inputType: "switch",
+    field: "isLandingPage",
+  },
+])
+
+const validateForm = (): boolean => {
+  const validateAllFields = dynamicFormRef.value?.validateAllFields
+
+  if (validateAllFields) {
+    const isValid = !!validateAllFields()
+
+    return isValid
+  }
+  return true
+}
+
+const steps = computed<Step[]>(() => [
+  {
+    id: "config",
+    validator: validateForm,
+  },
+])
+</script>

package/plugins/pacifico__interactionLinks/frontend/widgets/InteractionLinkCreateWidget.vue

@@ -0,0 +1,48 @@
+<template>
+  <InteractionLinkConfiguration
+    v-model="newInteractionLink"
+    :disabled="isLoading"
+    @save-and-finish="onSubmit"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import InteractionLinkConfiguration from "../components/InteractionLinkConfiguration.vue"
+import { InteractionLinkCreate } from "@raclettejs/core"
+import {
+  useRouteState,
+  usePluginApi,
+} from "@raclettejs/core/orchestrator/composables"
+import { DEFAULT_SLOT_NAME } from "@raclettejs/core/orchestrator/router/routeParserHelper"
+
+const props = defineProps<{
+  uuid: string
+}>()
+
+const { $data } = usePluginApi("raclette__core")
+const { triggerInteractionLinkById } = useRouteState()
+
+const { execute, isLoading, error } = $data.interactionLink.create()
+
+const newInteractionLink = ref<InteractionLinkCreate>({
+  composition: "",
+  description: "",
+  slotType: DEFAULT_SLOT_NAME,
+  triggers: [],
+  tags: [],
+  queryParameters: [],
+  isLandingPage: false,
+})
+
+const navigateBack = () =>
+  triggerInteractionLinkById("interactionLinkListInteractionLink")
+
+const onSubmit = async () => {
+  await execute(newInteractionLink.value)
+
+  if (!error.value) {
+    navigateBack()
+  }
+}
+</script>

package/plugins/pacifico__interactionLinks/frontend/widgets/InteractionLinkEditWidget.vue

@@ -0,0 +1,66 @@
+<template>
+  <InteractionLinkConfiguration
+    v-if="editableInteractionLink"
+    v-model="editableInteractionLink"
+    :disabled="isLoading"
+    is-editing
+    @save="onSubmit"
+  />
+</template>
+
+<script setup lang="ts">
+import { clone } from "ramda"
+import type { InteractionLink } from "@raclettejs/core"
+import {
+  usePluginApi,
+  useRouteState,
+} from "@raclettejs/core/orchestrator/composables"
+import { computed, ref, toRaw } from "vue"
+import InteractionLinkConfiguration from "../components/InteractionLinkConfiguration.vue"
+import { DEFAULT_SLOT_NAME } from "@raclettejs/core/orchestrator/router/routeParserHelper"
+
+const props = defineProps<{
+  uuid: string
+}>()
+
+const { compositionSlots, triggerInteractionLinkById } = useRouteState()
+const { $data } = usePluginApi("raclette__core")
+
+const id = computed(
+  () =>
+    compositionSlots.value.find((slot) => slot.slotName === DEFAULT_SLOT_NAME)
+      ?.slotParams?.id,
+)
+
+const { data } = $data.interactionLink.get({
+  params: { _id: id.value },
+  options: {
+    immediate: true,
+    cb: () => {
+      if (!interactionLink.value) {
+        return navigateBack()
+      }
+
+      editableInteractionLink.value = clone(interactionLink.value)
+    },
+  },
+})
+
+const { execute: executeUpdate, isLoading } = $data.interactionLink.update()
+
+const editableInteractionLink = ref<InteractionLink>()
+
+const interactionLink = computed<InteractionLink | undefined>(() => {
+  if (!id.value) {
+    return undefined
+  }
+
+  return data.value?.[id.value]
+})
+
+const navigateBack = () =>
+  triggerInteractionLinkById("interactionLinkListInteractionLink")
+
+const onSubmit = async () =>
+  await executeUpdate(toRaw(editableInteractionLink.value))
+</script>

package/plugins/pacifico__interactionLinks/frontend/widgets/InteractionLinkListWidget.vue

@@ -0,0 +1,126 @@
+<template>
+  <BaseDataTable
+    :items="parsedInteractionLinks"
+    :loading="interactionLinksLoading || tagsLoading"
+    :headers="headers"
+    create-interaction-link-id="interactionLinkCreateInteractionLink"
+    edit-interaction-link-id="interactionLinkEditInteractionLink"
+    :data-name="$t('workbench.interactionLinkList.dataName')"
+    :data-article="$t('workbench.interactionLinkList.dataArticle')"
+    @delete="deleteInteractionLink"
+  >
+    <!-- Custom triggers column -->
+    <template #item.triggers="{ item }">
+      <span class="tw:flex tw:gap-2">
+        <span>{{ item.triggers }}</span>
+        <v-icon icon="mdi-link" />
+      </span>
+    </template>
+  </BaseDataTable>
+</template>
+
+<script setup lang="ts">
+import BaseDataTable from "@app/components/BaseDataTable.vue"
+import { InteractionLink } from "@raclettejs/core"
+import { usePluginApi } from "@raclettejs/core/orchestrator/composables"
+import { formatDistance } from "date-fns"
+import { computed } from "vue"
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
+
+const headers = computed<{ title: string; key: keyof InteractionLink }[]>(
+  () => [
+    {
+      title: t("workbench.interactionLinkList.tableHeaders.composition"),
+      key: "composition",
+    },
+    {
+      title: t("workbench.interactionLinkList.tableHeaders.tags"),
+      key: "tags",
+    },
+    {
+      title: t("workbench.interactionLinkList.tableHeaders.lastEditor"),
+      key: "lastEditor",
+    },
+    {
+      title: t("workbench.interactionLinkList.tableHeaders.slotType"),
+      key: "slotType",
+    },
+    {
+      title: t("workbench.interactionLinkList.tableHeaders.triggers"),
+      key: "triggers",
+    },
+    {
+      title: t("workbench.interactionLinkList.tableHeaders.author"),
+      key: "author",
+    },
+    {
+      title: t("workbench.interactionLinkList.tableHeaders.updatedAt"),
+      key: "updatedAt",
+    },
+  ],
+)
+
+const props = defineProps<{
+  uuid: string
+}>()
+
+const { $data, $socket } = usePluginApi("raclette__core")
+
+const {
+  data: interactionLinks,
+  execute,
+  isLoading: interactionLinksLoading,
+} = $data.interactionLink.getAll({
+  options: { immediate: true },
+})
+
+const { data: tags, isLoading: tagsLoading } = $data.tag.getAll({
+  options: { immediate: true },
+})
+
+const { data: users } = $data.user.getAll({
+  options: { immediate: true },
+})
+
+const { data: compositions } = $data.composition.getAll({
+  options: { immediate: true },
+})
+
+const { execute: executeDelete } = $data.interactionLink.delete({
+  options: { cb: () => execute() },
+})
+
+const parsedInteractionLinks = computed(() => {
+  if (interactionLinks.value && tags.value) {
+    return Object.values(
+      interactionLinks.value as { [key: string]: InteractionLink },
+    ).map((interactionLink) => {
+      return {
+        ...interactionLink,
+        composition: compositions.value?.[interactionLink.composition]?.title,
+        tags: interactionLink.tags.map((tag) => tags.value?.[tag]),
+        lastEditor: users.value?.[interactionLink.author]?.email,
+        author: users.value?.[interactionLink.author]?.email,
+        triggers: interactionLink.triggers.length,
+        createdAt: formatDistance(
+          new Date(interactionLink.createdAt),
+          new Date(),
+        ),
+        updatedAt: formatDistance(
+          new Date(interactionLink.updatedAt),
+          new Date(),
+        ),
+      }
+    })
+  }
+
+  return []
+})
+
+const deleteInteractionLink = async (interactionLink: InteractionLink) =>
+  await executeDelete({ _id: interactionLink._id })
+
+$socket.on("interactionLinkCreated", () => execute())
+</script>

package/plugins/pacifico__interactionLinks/raclette.plugin.ts

@@ -0,0 +1,8 @@
+export default {
+  name: "interactionLinks",
+  author: "pacifico",
+  version: "0.0.1",
+  description: "A plugin for interactionLinks",
+  // Specify where the main frontend and backend entry points are
+  frontendDir: "./frontend",
+}

package/plugins/pacifico__plugins/frontend/index.ts

@@ -0,0 +1,42 @@
+import { defineRaclettePluginFrontend } from "@raclettejs/core/frontend"
+
+export default defineRaclettePluginFrontend({
+  i18n: {
+    de: {
+      pluginList: {
+        dataName: "Plugin",
+        dataArticle: "das",
+        tableHeaders: {
+          name: "Name",
+          author: "Autor",
+          version: "Version",
+          description: "Beschreibung",
+        },
+      },
+    },
+    en: {
+      pluginList: {
+        dataName: "Plugin",
+        dataArticle: "the",
+        tableHeaders: {
+          name: "Name",
+          author: "Author",
+          version: "Version",
+          description: "Description",
+        },
+      },
+    },
+    sk: {
+      pluginList: {
+        dataName: "Plugin",
+        dataArticle: "",
+        tableHeaders: {
+          name: "Názov",
+          author: "Autor",
+          version: "Verzia",
+          description: "Popis",
+        },
+      },
+    },
+  },
+})

package/plugins/pacifico__plugins/frontend/widgets/PluginDetailWidget.vue

@@ -0,0 +1,26 @@
+<template>
+  <WorkbenchPluginComponent v-if="WorkbenchPluginComponent" />
+</template>
+
+<script setup lang="ts">
+import useWorkbenchPlugins from "@app/composables/useWorkbenchPlugins"
+import { useRouteState } from "@raclettejs/core/orchestrator/composables"
+import { computed } from "vue"
+import { DEFAULT_SLOT_NAME } from "@raclettejs/core/orchestrator/router/routeParserHelper"
+
+const { compositionSlots, triggerInteractionLinkById } = useRouteState()
+const { getWorkbenchPlugin } = useWorkbenchPlugins()
+const params = computed(
+  () =>
+    compositionSlots.value.find((slot) => slot.slotName === DEFAULT_SLOT_NAME)
+      ?.slotParams as { author: string; name: string } | undefined,
+)
+
+const navigateBack = () =>
+  triggerInteractionLinkById("pluginListInteractionLink")
+
+if (!params.value) {
+  navigateBack()
+}
+const WorkbenchPluginComponent = await getWorkbenchPlugin(params.value)
+</script>

package/plugins/pacifico__plugins/frontend/widgets/PluginListWidget.vue

@@ -0,0 +1,59 @@
+<template>
+  <BaseDataTable
+    :items="pluginMetadataFiles"
+    :headers
+    :data-name="$i18n.t('pluginList.dataName')"
+    :data-article="$i18n.t('pluginList.dataArticle')"
+    :show-create-button="false"
+    :show-delete-action="false"
+    :show-actions-column="false"
+    :row-click-handler="onRowClick"
+  >
+  </BaseDataTable>
+</template>
+
+<script setup lang="ts">
+import useWorkbenchPlugins from "@app/composables/useWorkbenchPlugins"
+import BaseDataTable from "@app/components/BaseDataTable.vue"
+import type { PluginMetadata } from "@raclettejs/core"
+import { computed } from "vue"
+import {
+  usePluginApi,
+  useRouteState,
+} from "@raclettejs/core/orchestrator/composables"
+import { DEFAULT_SLOT_NAME } from "@raclettejs/core/orchestrator/router/routeParserHelper"
+
+const { pluginMetadataFiles, hasPluginSettingsWidget } = useWorkbenchPlugins()
+
+const { $i18n } = usePluginApi()
+const { triggerInteractionLinkById } = useRouteState()
+
+const headers = computed<
+  { title: string; key: keyof PluginMetadata | "actions" }[]
+>(() => [
+  {
+    title: $i18n.t("pluginList.tableHeaders.name"),
+    key: "name",
+  },
+  {
+    title: $i18n.t("pluginList.tableHeaders.author"),
+    key: "author",
+  },
+  {
+    title: $i18n.t("pluginList.tableHeaders.version"),
+    key: "version",
+  },
+  {
+    title: $i18n.t("pluginList.tableHeaders.description"),
+    key: "description",
+  },
+])
+
+const onRowClick = (item: PluginMetadata) => {
+  if (item.pluginKey && hasPluginSettingsWidget(item.pluginKey)) {
+    triggerInteractionLinkById("pluginDetailInteractionLink", {
+      pluginKey: item.pluginKey,
+    })
+  }
+}
+</script>

package/plugins/pacifico__plugins/raclette.plugin.ts

@@ -0,0 +1,8 @@
+export default {
+  name: "plugins",
+  author: "pacifico",
+  version: "0.0.1",
+  description: "A plugin for plugin configuration",
+  // Specify where the main frontend and backend entry points are
+  frontendDir: "./frontend",
+}

package/plugins/pacifico__tags/frontend/components/TagConfiguration.vue

@@ -0,0 +1,99 @@
+<template>
+  <StepNavigator
+    :steps
+    :is-saving="disabled"
+    :show-save-button="isEditing"
+    @save="$emit('save')"
+    @save-and-finish="$emit('save-and-finish')"
+  >
+    <!-- @vue-generic {TagCreate | TagUpdate} -->
+    <DynamicForm
+      ref="dynamicFormRef"
+      v-model="tag"
+      :data="inputFields"
+      :disabled="props.disabled"
+      :title="
+        isEditing
+          ? $t('workbench.tagEdit.title')
+          : $t('workbench.tagCreate.title')
+      "
+      route-back-interaction-link-id="tagListInteractionLink"
+    />
+  </StepNavigator>
+</template>
+
+<script setup lang="ts">
+import type { TagCreate, TagUpdate } from "@raclettejs/core"
+import { useI18n } from "vue-i18n"
+import { tagTypes } from "@shared/types/dataTypes/tags"
+import DynamicForm from "@app/components/dynamicForm/DynamicForm.vue"
+import type { DynamicFormItem } from "@app/components/dynamicForm/DynamicFormTypes"
+import { computed, useTemplateRef } from "vue"
+import { Step } from "@app/components/stepNavigator/StepNavigatorTypes"
+import StepNavigator from "@app/components/stepNavigator/StepNavigator.vue"
+
+const props = defineProps<{ disabled?: boolean; isEditing?: boolean }>()
+
+defineEmits<{
+  (e: "save"): void
+  (e: "save-and-finish"): void
+}>()
+
+const tag = defineModel<TagCreate | TagUpdate>({ required: true })
+
+const dynamicFormRef = useTemplateRef("dynamicFormRef")
+
+const { t } = useI18n()
+
+const inputFields: DynamicFormItem<TagCreate | TagUpdate>[] = [
+  {
+    divider: t("workbench.tagConfiguration.dividers.general"),
+  },
+  {
+    title: t("workbench.tagConfiguration.title.title"),
+
+    inputType: "text",
+    field: "title",
+    prependIcon: "text-short",
+    validation: {
+      required: true,
+      maxLength: 200,
+    },
+  },
+  {
+    title: t("workbench.tagConfiguration.color.title"),
+    inputType: "color",
+    field: "color",
+    prependIcon: "palette-outline",
+  },
+  {
+    title: t("workbench.tagConfiguration.type.title"),
+    description: t("workbench.tagConfiguration.type.description"),
+    inputType: "select",
+    selectItems: [...tagTypes],
+    field: "type",
+    prependIcon: "label-variant-outline",
+    validation: {
+      required: true,
+    },
+  },
+]
+
+const validateForm = (): boolean => {
+  const validateAllFields = dynamicFormRef.value?.validateAllFields
+
+  if (validateAllFields) {
+    const isValid = !!validateAllFields()
+
+    return isValid
+  }
+  return true
+}
+
+const steps = computed<Step[]>(() => [
+  {
+    id: "config",
+    validator: validateForm,
+  },
+])
+</script>

package/plugins/pacifico__tags/frontend/widgets/TagCreateWidget.vue

@@ -0,0 +1,43 @@
+<template>
+  <TagConfiguration
+    v-model="newTag"
+    :disabled="isLoading"
+    @save-and-finish="onSubmit"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import TagConfiguration from "../components/TagConfiguration.vue"
+import { TagCreate } from "@raclettejs/core"
+import {
+  useRouteState,
+  usePluginApi,
+} from "@raclettejs/core/orchestrator/composables"
+import { DEFAULT_SLOT_NAME } from "@raclettejs/core/orchestrator/router/routeParserHelper"
+
+const props = defineProps<{
+  uuid: string
+}>()
+
+const { $data } = usePluginApi("raclette__core")
+const { triggerInteractionLinkById } = useRouteState()
+
+const { execute, isLoading, error } = $data.tag.create()
+
+const newTag = ref<TagCreate>({
+  title: "",
+  color: "#FFFFFF",
+  type: "",
+})
+
+const navigateBack = () => triggerInteractionLinkById("tagListInteractionLink")
+
+const onSubmit = async () => {
+  await execute(newTag.value)
+
+  if (!error.value) {
+    navigateBack()
+  }
+}
+</script>