@raclettejs/workbench 0.1.17 → 0.1.19

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

@@ -1,53 +1,149 @@
 <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"
-    :itemsDeleted="showDeleted"
-  >
-    <template #actions>
-      <v-tooltip
-        :text="showDeleted ? $t('core.hideDeleted') : $t('core.showDeleted')"
-      >
-        <template v-slot:activator="{ props }">
-          <v-btn-toggle
-            density="compact"
-            v-bind="props"
-            v-model="showDeleted"
-            mandatory
-            :color="showDeleted ? 'error' : 'success'"
-          >
-            <v-btn :value="true">
-              <v-icon>mdi-table-eye-off</v-icon>
-            </v-btn>
-            <v-btn :value="false"><v-icon>mdi-table-eye</v-icon></v-btn>
-          </v-btn-toggle>
-        </template>
-      </v-tooltip>
-    </template>
-    <!-- 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>
+  <div>
+    <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"
+      :itemsDeleted="showDeleted"
+    >
+      <template #actions>
+        <v-tooltip
+          :text="showDeleted ? $t('core.hideDeleted') : $t('core.showDeleted')"
+        >
+          <template v-slot:activator="{ props }">
+            <v-btn-toggle
+              density="compact"
+              v-bind="props"
+              v-model="showDeleted"
+              mandatory
+              :color="showDeleted ? 'error' : 'success'"
+            >
+              <v-btn :value="true">
+                <v-icon>mdi-table-eye-off</v-icon>
+              </v-btn>
+              <v-btn :value="false"><v-icon>mdi-table-eye</v-icon></v-btn>
+            </v-btn-toggle>
+          </template>
+        </v-tooltip>
+        <v-btn-group density="compact">
+          <v-tooltip :text="$t('core.export')">
+            <template v-slot:activator="{ props }">
+              <v-btn color="info" v-bind="props" flat @click="openExportDialog">
+                <v-icon>mdi-database-export</v-icon>
+              </v-btn>
+            </template>
+          </v-tooltip>
+          <v-tooltip :text="$t('core.import')">
+            <template v-slot:activator="{ props }">
+              <v-btn v-bind="props" color="warning">
+                <FileUpload
+                  ref="uploadRef"
+                  :onFileLoaded="handleFileUpload"
+                  accept=".json"
+                  readAs="text"
+              /></v-btn>
+            </template>
+          </v-tooltip>
+        </v-btn-group>
+      </template>
+      <!-- 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>
+      <template #prepend-row-actions="{ item }">
+        <v-icon
+          v-if="showDeleted"
+          color="green"
+          class="mr-2"
+          @click="restore(item._id)"
+          :title="
+            $t('workbench.baseDataTable.restoreDataTitle', {
+              dataName: item.title,
+            })
+          "
+          icon="mdi-delete-restore"
+        />
+      </template>
+    </BaseDataTable>
+    <!-- Export Selection Dialog -->
+    <SelectionDialog
+      v-model="showExportDialog"
+      :items="exportableItems"
+      display-attribute="description"
+      :title="$t('core.selectItemsToExport')"
+      :confirm-text="$t('core.export')"
+      @confirm="handleExportConfirm"
+    />
+
+    <!-- Import Selection Dialog -->
+    <SelectionDialog
+      v-model="showImportDialog"
+      :items="importableItems"
+      display-attribute="description"
+      :title="$t('core.selectItemsToImport')"
+      :confirm-text="$t('core.import')"
+      @confirm="handleImportConfirm"
+    />
+
+    <!-- Export Summary Dialog -->
+    <SummaryDialog
+      v-model="showExportSummary"
+      display-attribute="description"
+      :items="exportedItems"
+      :title="$t('core.exportSummary')"
+      :message="$t('core.exportSuccessMessage')"
+      type="success"
+    />
+
+    <!-- Import Summary Dialog -->
+    <SummaryDialog
+      v-model="showImportSummary"
+      :items="importedItems"
+      display-attribute="description"
+      :title="$t('core.importSummary')"
+      :message="$t('core.importSuccessMessage')"
+      type="success"
+      :show-confirm="true"
+      :confirm-text="$t('core.saveImported')"
+      @confirm="finalizeImport"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
+import { clone } from "ramda"
 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, ref, watch } from "vue"
+import { computed, ref, watch, useTemplateRef } from "vue"
 import { useI18n } from "vue-i18n"
+import { downloadJson, mapJsonValues } from "@app/lib/jsonTools"
+import FileUpload from "@app/components/FileUpload.vue"
+import SelectionDialog from "@app/components/SelectionDialog.vue"
+import SummaryDialog from "@app/components/SummaryDialog.vue"
 const showDeleted = ref(false)
+// Dialog states
+const showExportDialog = ref(false)
+const showImportDialog = ref(false)
+const showExportSummary = ref(false)
+const showImportSummary = ref(false)
+
+// Data for dialogs
+const exportableItems = ref<any[]>([])
+const importableItems = ref<any[]>([])
+const exportedItems = ref<any[]>([])
+const importedItems = ref<any[]>([])
+const pendingImportData = ref<any>(null)
+const uploadRef = useTemplateRef("uploadRef")
 
 const { t } = useI18n()
 
@@ -88,7 +184,7 @@ const props = defineProps<{
   uuid: string
 }>()
 
-const { $data, $socket } = usePluginApi("raclette__core")
+const { $data, $socket, $user } = usePluginApi("raclette__core")
 
 const {
   data: interactionLinks,
@@ -105,15 +201,22 @@ const { data: users } = $data.user.getAll({
 })
 
 const { data: compositions } = $data.composition.getAll({
+  params: { isDeleted: false },
   options: { immediate: true },
 })
 
+const { execute: executeBulkCreate } = await $data.interactionLink.createBulk({
+  options: { notify: false, cb: () => execute() },
+})
 const { execute: executeDelete } = $data.interactionLink.delete({
   options: { cb: () => execute({ isDeleted: showDeleted.value }) },
 })
 const { execute: executeHardDelete } = await $data.interactionLink.deleteHard({
   options: { cb: () => execute({ isDeleted: showDeleted.value }) },
 })
+const { execute: executeRestore } = await $data.interactionLink.updateRestore({
+  options: { cb: () => execute({ isDeleted: showDeleted.value }) },
+})
 const parsedInteractionLinks = computed(() => {
   if (interactionLinks.value && tags.value) {
     return Object.values(
@@ -140,7 +243,9 @@ const parsedInteractionLinks = computed(() => {
 
   return []
 })
-
+const restore = async (_id: string) => {
+  executeRestore({ _id })
+}
 const deleteInteractionLink = async (interactionLink: InteractionLink) => {
   if (showDeleted.value) {
     await executeHardDelete({ _id: interactionLink._id })
@@ -152,6 +257,85 @@ const deleteInteractionLink = async (interactionLink: InteractionLink) => {
 $socket.on("interactionLinkCreated", () =>
   execute({ isDeleted: showDeleted.value }),
 )
+const createTitleString = (link) => {
+  let linkTitleString = `${link.slotType}`
+  if (link.triggers) {
+    link.triggers.forEach((trigger) => {
+      linkTitleString += `${trigger.type} - ${trigger.settings?.title?.default} `
+    })
+  }
+  link.description = linkTitleString + link.description
+  return link
+}
+const createLinkDescriptions = (linkArr) => {
+  linkArr.forEach((link) => {
+    link = createTitleString(link)
+  })
+  return linkArr
+}
+// Export functions
+const openExportDialog = () => {
+  exportableItems.value = createLinkDescriptions(
+    Object.values(clone(interactionLinks.value) || {}),
+  )
+  showExportDialog.value = true
+}
+
+const handleExportConfirm = (selectedIds: string[]) => {
+  const _interactionLinks = clone(interactionLinks.value)
+  const dataToExport = clone(selectedIds).reduce((acc, id) => {
+    if (_interactionLinks?.[id]) {
+      acc[id] = createTitleString(_interactionLinks[id])
+    }
+    return acc
+  }, {} as any)
+  exportedItems.value = Object.values(dataToExport)
+  downloadJson(dataToExport, "interactionLinks")
+  showExportSummary.value = true
+}
+
+// Import functions
+const handleFileUpload = (content: string, file: File) => {
+  try {
+    const parsedData = JSON.parse(content)
+    const itemsArray = Object.values(parsedData)
+
+    importableItems.value = itemsArray
+    pendingImportData.value = parsedData
+    showImportDialog.value = true
+  } catch (error) {
+    console.error("Failed to parse JSON:", error)
+  }
+}
+
+const handleImportConfirm = (selectedIds: string[]) => {
+  const selectedItems = selectedIds.map((id) => pendingImportData.value[id])
+  importedItems.value = selectedItems
+  showImportSummary.value = true
+}
+
+const finalizeImport = async () => {
+  const mapping = {
+    owner: $user.value._id,
+    lastEditor: $user.value._id,
+    createdBy: $user.value._id,
+  }
+
+  const dataToImport = importedItems.value.reduce((acc, item) => {
+    const mappedItem = mapJsonValues(item, mapping)
+    acc[item._id] = createTitleString(mappedItem)
+    return acc
+  }, {} as any)
+
+  await executeBulkCreate(Object.values(dataToImport))
+  // TODO: Add your actual import logic here
+  // e.g., call an API endpoint to save the imported compositions
+
+  // Reset states
+  pendingImportData.value = null
+  importableItems.value = []
+  importedItems.value = []
+}
 watch(
   showDeleted,
   () => {

package/plugins/pacifico__project/frontend/components/ProjectConfiguration.vue

@@ -0,0 +1,107 @@
+<template>
+  <StepNavigator
+    :steps
+    :is-saving="disabled"
+    :show-save-button="isEditing"
+    @save="$emit('save')"
+    @save-and-finish="$emit('save-and-finish')"
+  >
+    <!-- @vue-generic {ProjectUpdate} -->
+    <DynamicForm
+      ref="dynamicFormRef"
+      v-model="project"
+      :data="projectInputFields"
+      :disabled
+      :title="$t('workbench.project.formtitle')"
+    />
+    <DynamicForm
+      ref="dynamicFormRef"
+      v-model="project.config"
+      :data="configInputFields"
+      :disabled
+    />
+  </StepNavigator>
+</template>
+
+<script setup lang="ts">
+import type { ProjectUpdate } 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"
+
+defineProps<{ disabled?: boolean; isEditing?: boolean }>()
+
+defineEmits<{
+  (e: "save"): void
+  (e: "save-and-finish"): void
+}>()
+
+const project = defineModel<ProjectUpdate>({ required: true })
+
+const dynamicFormRef = useTemplateRef("dynamicFormRef")
+
+const { t } = useI18n()
+
+const projectInputFields = computed<DynamicFormItem<ProjectUpdate>[]>(() => [
+  { divider: t("workbench.project.dividers.general") },
+  {
+    title: t("workbench.project.title.title"),
+    description: t("workbench.project.title.description"),
+    inputType: "textarea",
+    field: "title",
+    prependIcon: "text",
+  },
+  {
+    title: t("workbench.project.description.title"),
+    description: t("workbench.project.description.description"),
+    inputType: "textarea",
+    field: "description",
+    prependIcon: "text",
+  },
+  /* {
+    title: t("workbench.interactionLinkConfiguration.tags.title"),
+    description: t("workbench.project.tags.description"),
+    inputType: "tags",
+    field: "tags",
+    prependIcon: "tag-multiple",
+  },*/
+])
+const configInputFields = computed<DynamicFormItem<ProjectUpdate["config"]>[]>(
+  () => [
+    { divider: t("workbench.project.dividers.config") },
+    {
+      title: t("workbench.project.railPageNavigation.title"),
+      description: t("workbench.project.railPageNavigation.description"),
+      inputType: "switch",
+      field: "railPageNavigation",
+    },
+    /*{
+      title: t("workbench.project.tags.title"),
+      description: t("workbench.project.tags.description"),
+      inputType: "tags",
+      field: "tags",
+      prependIcon: "tag-multiple",
+    },*/
+  ],
+)
+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__project/frontend/widgets/ProjectDetailWidget.vue

@@ -0,0 +1,34 @@
+<template>
+  <ProjectConfiguration
+    v-if="editableProject"
+    v-model="editableProject"
+    :disabled="isLoading"
+    is-editing
+    @save="onSubmit"
+  />
+</template>
+
+<script setup lang="ts">
+import { clone } from "ramda"
+import type { Project } from "@raclettejs/core"
+import { usePluginApi } from "@raclettejs/core/orchestrator/composables"
+import { onMounted, ref, toRaw } from "vue"
+import ProjectConfiguration from "../components/ProjectConfiguration.vue"
+
+const props = defineProps<{
+  uuid: string
+}>()
+
+const { $data } = usePluginApi("raclette__core")
+const { $store } = usePluginApi()
+const project = $store.get(["project"])
+
+const { execute: executeUpdate, isLoading } = $data.project.update()
+
+const editableProject = ref<Project>()
+
+const onSubmit = async () => await executeUpdate(toRaw(editableProject.value))
+onMounted(() => {
+  editableProject.value = clone({ config: {}, ...project.value })
+})
+</script>

package/plugins/pacifico__project/raclette.plugin.ts

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