@raclettejs/workbench 0.1.32 → 0.1.33-canary.1

package/CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- set eslint version to latest
+
 ## [0.1.32] - 2026-04-30 <a href="https://gitlab.com/raclettejs/core-dev/-/compare/v0.1.31...v0.1.32" target="_blank" rel="noopener"><b>Overview of all changes</b></a>
 
 ## [0.1.31] - 2026-04-27 <a href="https://gitlab.com/raclettejs/core-dev/-/compare/v0.1.30...v0.1.31" target="_blank" rel="noopener"><b>Overview of all changes</b></a>

package/i18n/de-DE.json

@@ -38,15 +38,6 @@
         "continue": "Weiter"
       }
     },
-    "baseDataTable": {
-      "searchPlaceholder": "{dataName} durchsuchen",
-      "createDataButton": "{dataName} erstellen",
-      "deleteDataTitle": "{dataName} löschen",
-      "restoreDataTitle": "{dataName} widerherstellen",
-      "deleteDataConfirmMessage": "Bist du sicher, dass du {article} {dataName} <strong>{value}</strong> löschen willst?",
-      "deleteDataConfirmButton": "Löschen",
-      "deleteDataConfirmCancel": "Abbrechen"
-    },
     "compositionList": {
       "dataName": "Komposition",
       "dataArticle": "die",
@@ -290,4 +281,4 @@
       }
     }
   }
-}
+}

package/i18n/en-EU.json

@@ -38,15 +38,6 @@
         "continue": "Continue"
       }
     },
-    "baseDataTable": {
-      "searchPlaceholder": "Search {dataName}",
-      "createDataButton": "Create {dataName}",
-      "deleteDataTitle": "Delete {dataName}",
-      "restoreDataTitle": "Restore {dataName}",
-      "deleteDataConfirmMessage": "Are you sure you want to delete {article} {dataName} <strong>{value}</strong>?",
-      "deleteDataConfirmButton": "Delete",
-      "deleteDataConfirmCancel": "Cancel"
-    },
     "compositionList": {
       "dataName": "Composition",
       "dataArticle": "the",
@@ -290,4 +281,4 @@
       }
     }
   }
-}
+}

package/i18n/sk-SK.json

@@ -38,15 +38,6 @@
         "continue": "Pokračovať"
       }
     },
-    "baseDataTable": {
-      "searchPlaceholder": "Hľadať {dataName}",
-      "createDataButton": "Vytvoriť {dataName}",
-      "deleteDataTitle": "Odstrániť {dataName}",
-      "restoreDataTitle": "Obnoviť {dataName}",
-      "deleteDataConfirmMessage": "Naozaj chcete odstrániť {article} {dataName} <strong>{value}</strong>?",
-      "deleteDataConfirmButton": "Odstrániť",
-      "deleteDataConfirmCancel": "Zrušiť"
-    },
     "compositionList": {
       "dataName": "Kompozícia",
       "dataArticle": "",
@@ -285,4 +276,4 @@
       }
     }
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raclettejs/workbench",
-  "version": "0.1.32",
+  "version": "0.1.33-canary.1",
   "license": "MIT",
   "description": "racletteJS Workbench - used to configure your application, for dev and prod",
   "repository": "https://gitlab.com/raclettejs/workbench",
@@ -13,6 +13,8 @@
     "update": "raclette update",
     "restart": "raclette restart",
     "add-package": "raclette add-package",
+    "format:check": "prettier --check .",
+    "format:fix": "prettier --write .",
     "lint": "eslint",
     "lint:fix": "eslint --fix"
   },
@@ -31,7 +33,7 @@
     ".": "./index.ts"
   },
   "dependencies": {
-    "@raclettejs/core": "^0.1.32",
+    "@raclettejs/core": "^0.1.33-canary.1",
     "@vueuse/integrations": "14.2.1",
     "fuse.js": "7.1.0",
     "three": "0.183.2",
@@ -41,7 +43,7 @@
     "@emnapi/core": "1.9.2",
     "@emnapi/runtime": "1.9.2",
     "@eslint/js": "9.35.0",
-    "@raclettejs/types": "^0.1.32",
+    "@raclettejs/types": "^0.1.33-canary.1",
     "@sinclair/typebox": "0.34.48",
     "@types/ramda": "0.31.1",
     "@vueuse/core": "14.2.1",

package/plugins/pacifico__compositions/frontend/widgets/CompositionListWidget.vue

@@ -2,6 +2,7 @@
   <div>
     <BaseDataTable
       :items="parsedCompositions"
+      :exportable-items="exportableCompositions"
       :loading="compositionsLoading || tagsLoading"
       :headers="headers"
       create-interaction-link-id="compositionCreateInteractionLink"
@@ -9,16 +10,17 @@
       :data-name="$t('workbench.compositionList.dataName')"
       :data-article="$t('workbench.compositionList.dataArticle')"
       @delete="deleteComposition"
-      :itemsDeleted="showDeleted"
+      :items-deleted="showDeleted"
+      :on-file-loaded="handleFileUpload"
     >
-      <template #actions>
+      <template #toolbar-leading>
         <v-tooltip
           :text="showDeleted ? $t('core.hideDeleted') : $t('core.showDeleted')"
         >
-          <template v-slot:activator="{ props }">
+          <template #activator="{ props: activatorProps }">
             <v-btn-toggle
               density="compact"
-              v-bind="props"
+              v-bind="activatorProps"
               v-model="showDeleted"
               mandatory
               :color="showDeleted ? 'error' : 'success'"
@@ -30,29 +32,9 @@
             </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 status column -->
-      <template #item.status="{ item }">
+      <template #[`item.status`]="{ item }">
         <v-icon
           :icon="item.statusIcon"
           :color="item.statusColor"
@@ -74,18 +56,8 @@
         />
       </template>
     </BaseDataTable>
-    <!-- Export Selection Dialog -->
-    <SelectionDialog
-      v-model="showExportDialog"
-      :items="exportableItems"
-      display-attribute="title"
-      :title="$t('core.selectItemsToExport')"
-      :confirm-text="$t('core.export')"
-      @confirm="handleExportConfirm"
-    />
-
     <!-- Import Selection Dialog -->
-    <SelectionDialog
+    <ImportSelectionDialog
       v-model="showImportDialog"
       :items="importableItems"
       display-attribute="title"
@@ -94,18 +66,8 @@
       @confirm="handleImportConfirm"
     />
 
-    <!-- Export Summary Dialog -->
-    <SummaryDialog
-      v-model="showExportSummary"
-      display-attribute="title"
-      :items="exportedItems"
-      :title="$t('core.exportSummary')"
-      :message="$t('core.exportSuccessMessage')"
-      type="success"
-    />
-
     <!-- Import Summary Dialog -->
-    <SummaryDialog
+    <ImportSummaryDialog
       v-model="showImportSummary"
       display-attribute="title"
       :items="importedItems"
@@ -121,31 +83,27 @@
 
 <script setup lang="ts">
 import { usePluginApi } from "@raclettejs/core/orchestrator/composables"
-import { computed, watch, ref, useTemplateRef } from "vue"
+import { computed, watch, ref } from "vue"
 import type { Composition } from "@raclettejs/core"
 import { formatDistance } from "date-fns"
-import BaseDataTable from "@app/components/BaseDataTable.vue"
+import BaseDataTable from "@raclettejs/core/orchestrator/components/dataTable/BaseDataTable.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"
+import {
+  mapJsonValues,
+  parseAndNormalizeWorkbenchImportJson,
+  resolveWorkbenchImportSelection,
+} from "@app/lib/jsonTools"
+import ImportSelectionDialog from "@raclettejs/core/orchestrator/components/dataImport/ImportSelectionDialog.vue"
+import ImportSummaryDialog from "@raclettejs/core/orchestrator/components/dataImport/ImportSummaryDialog.vue"
 
 const { t } = useI18n()
 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 pendingImportById = ref<Record<string, any>>({})
 
 const headers = computed<
   { title: string; key: keyof Composition | "actions" }[]
@@ -204,25 +162,39 @@ const { execute: executeRestore } = await $data.composition.updateRestore({
 const { execute: executeHardDelete } = await $data.composition.deleteHard({
   options: { cb: () => execute({ isDeleted: showDeleted.value }) },
 })
-const parsedCompositions = computed(() => {
-  if (compositions.value && tags.value) {
-    return Object.values(
-      compositions.value as { [key: string]: Composition },
-    ).map((composition) => ({
-      ...composition,
-      tags: composition.tags.map((tag) => tags.value?.[tag]),
-      lastEditor: users.value?.[composition.author]?.email,
-      author: users.value?.[composition.author]?.email,
-      status: composition.status, // TODO: parse status
-      statusIcon: getStatusIcon(composition.status),
-      statusColor: getStatusColor(composition.status),
-      createdAt: formatDistance(new Date(composition.createdAt), new Date()),
-      updatedAt: formatDistance(new Date(composition.updatedAt), new Date()),
-    }))
+const compositionTableRows = (relativeDates: boolean) => {
+  if (!compositions.value || !tags.value) {
+    return []
   }
 
-  return []
-})
+  return Object.values(
+    compositions.value as { [key: string]: Composition },
+  ).map((composition) => ({
+    ...composition,
+    tags: composition.tags.map((tag) => tags.value?.[tag]),
+    lastEditor: users.value?.[composition.author]?.email,
+    author: users.value?.[composition.author]?.email,
+    status: composition.status, // TODO: parse status
+    statusIcon: getStatusIcon(composition.status),
+    statusColor: getStatusColor(composition.status),
+    ...(relativeDates
+      ? {
+          createdAt: formatDistance(
+            new Date(composition.createdAt),
+            new Date(),
+          ),
+          updatedAt: formatDistance(
+            new Date(composition.updatedAt),
+            new Date(),
+          ),
+        }
+      : {}),
+  }))
+}
+
+const parsedCompositions = computed(() => compositionTableRows(true))
+
+const exportableCompositions = computed(() => compositionTableRows(false))
 
 // TODO: replace with composition status type
 const getStatusIcon = (status: string) => {
@@ -246,42 +218,26 @@ const getStatusColor = (status: string) => {
     return "#B66218"
   }
 }
-// Export functions
-const openExportDialog = () => {
-  exportableItems.value = Object.values(compositions.value || {})
-  showExportDialog.value = true
-}
-
-const handleExportConfirm = (selectedIds: string[]) => {
-  const dataToExport = selectedIds.reduce((acc, id) => {
-    if (compositions.value?.[id]) {
-      acc[id] = compositions.value[id]
-    }
-    return acc
-  }, {} as any)
-
-  exportedItems.value = Object.values(dataToExport)
-  downloadJson(dataToExport, "compositions")
-  showExportSummary.value = true
-}
-
 // Import functions
-const handleFileUpload = (content: string, file: File) => {
+const handleFileUpload = (content: string | ArrayBuffer) => {
+  if (typeof content !== "string") {
+    return
+  }
   try {
-    const parsedData = JSON.parse(content)
-    const itemsArray = Object.values(parsedData)
-
-    importableItems.value = itemsArray
-    pendingImportData.value = parsedData
+    const { items, byId } = parseAndNormalizeWorkbenchImportJson(content)
+    importableItems.value = items
+    pendingImportById.value = byId
     showImportDialog.value = true
   } catch (error) {
-    console.error("Failed to parse JSON:", error)
+    console.error("Failed to prepare import:", error)
   }
 }
 
 const handleImportConfirm = (selectedIds: string[]) => {
-  const selectedItems = selectedIds.map((id) => pendingImportData.value[id])
-  importedItems.value = selectedItems
+  importedItems.value = resolveWorkbenchImportSelection(
+    pendingImportById.value,
+    selectedIds,
+  )
   showImportSummary.value = true
 }
 
@@ -303,7 +259,7 @@ const finalizeImport = async () => {
   // e.g., call an API endpoint to save the imported compositions
 
   // Reset states
-  pendingImportData.value = null
+  pendingImportById.value = {}
   importableItems.value = []
   importedItems.value = []
 }

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

@@ -2,6 +2,7 @@
   <div>
     <BaseDataTable
       :items="parsedInteractionLinks"
+      :exportable-items="exportableInteractionLinks"
       :loading="interactionLinksLoading || tagsLoading"
       :headers="headers"
       create-interaction-link-id="interactionLinkCreateInteractionLink"
@@ -9,16 +10,17 @@
       :data-name="$t('workbench.interactionLinkList.dataName')"
       :data-article="$t('workbench.interactionLinkList.dataArticle')"
       @delete="deleteInteractionLink"
-      :itemsDeleted="showDeleted"
+      :items-deleted="showDeleted"
+      :on-file-loaded="handleFileUpload"
     >
-      <template #actions>
+      <template #toolbar-leading>
         <v-tooltip
           :text="showDeleted ? $t('core.hideDeleted') : $t('core.showDeleted')"
         >
-          <template v-slot:activator="{ props }">
+          <template #activator="{ props: activatorProps }">
             <v-btn-toggle
               density="compact"
-              v-bind="props"
+              v-bind="activatorProps"
               v-model="showDeleted"
               mandatory
               :color="showDeleted ? 'error' : 'success'"
@@ -30,29 +32,9 @@
             </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 }">
+      <template #[`item.triggers`]="{ item }">
         <span class="tw:flex tw:gap-2">
           <span>{{ item.triggers }}</span>
           <v-icon icon="mdi-link" />
@@ -73,18 +55,8 @@
         />
       </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
+    <ImportSelectionDialog
       v-model="showImportDialog"
       :items="importableItems"
       display-attribute="description"
@@ -93,18 +65,8 @@
       @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
+    <ImportSummaryDialog
       v-model="showImportSummary"
       :items="importedItems"
       display-attribute="description"
@@ -119,31 +81,26 @@
 </template>
 
 <script setup lang="ts">
-import { clone } from "ramda"
-import BaseDataTable from "@app/components/BaseDataTable.vue"
+import BaseDataTable from "@raclettejs/core/orchestrator/components/dataTable/BaseDataTable.vue"
 import { InteractionLink } from "@raclettejs/core"
 import { usePluginApi } from "@raclettejs/core/orchestrator/composables"
 import { formatDistance } from "date-fns"
-import { computed, ref, watch, useTemplateRef } from "vue"
+import { computed, ref, watch } 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"
+import {
+  mapJsonValues,
+  parseAndNormalizeWorkbenchImportJson,
+  resolveWorkbenchImportSelection,
+} from "@app/lib/jsonTools"
+import ImportSelectionDialog from "@raclettejs/core/orchestrator/components/dataImport/ImportSelectionDialog.vue"
+import ImportSummaryDialog from "@raclettejs/core/orchestrator/components/dataImport/ImportSummaryDialog.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 pendingImportById = ref<Record<string, any>>({})
 
 const { t } = useI18n()
 
@@ -217,32 +174,40 @@ const { execute: executeHardDelete } = await $data.interactionLink.deleteHard({
 const { execute: executeRestore } = await $data.interactionLink.updateRestore({
   options: { cb: () => execute({ isDeleted: showDeleted.value }) },
 })
-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(),
-        ),
-      }
-    })
+const interactionLinkTableRows = (relativeDates: boolean) => {
+  if (!interactionLinks.value || !tags.value) {
+    return []
   }
 
-  return []
-})
+  return Object.values(
+    interactionLinks.value as { [key: string]: InteractionLink },
+  ).map((interactionLink) => ({
+    ...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,
+    ...(relativeDates
+      ? {
+          createdAt: formatDistance(
+            new Date(interactionLink.createdAt),
+            new Date(),
+          ),
+          updatedAt: formatDistance(
+            new Date(interactionLink.updatedAt),
+            new Date(),
+          ),
+        }
+      : {}),
+  }))
+}
+
+const parsedInteractionLinks = computed(() => interactionLinkTableRows(true))
+
+const exportableInteractionLinks = computed(() =>
+  interactionLinkTableRows(false),
+)
 const restore = async (_id: string) => {
   executeRestore({ _id })
 }
@@ -267,50 +232,27 @@ const createTitleString = (link) => {
   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) => {
+const handleFileUpload = (content: string | ArrayBuffer) => {
+  if (typeof content !== "string") {
+    return
+  }
   try {
-    const parsedData = JSON.parse(content)
-    const itemsArray = Object.values(parsedData)
-
-    importableItems.value = itemsArray
-    pendingImportData.value = parsedData
+    const { items, byId } = parseAndNormalizeWorkbenchImportJson(content)
+    importableItems.value = items
+    pendingImportById.value = byId
     showImportDialog.value = true
   } catch (error) {
-    console.error("Failed to parse JSON:", error)
+    console.error("Failed to prepare import:", error)
   }
 }
 
 const handleImportConfirm = (selectedIds: string[]) => {
-  const selectedItems = selectedIds.map((id) => pendingImportData.value[id])
-  importedItems.value = selectedItems
+  importedItems.value = resolveWorkbenchImportSelection(
+    pendingImportById.value,
+    selectedIds,
+  )
   showImportSummary.value = true
 }
 
@@ -332,7 +274,7 @@ const finalizeImport = async () => {
   // e.g., call an API endpoint to save the imported compositions
 
   // Reset states
-  pendingImportData.value = null
+  pendingImportById.value = {}
   importableItems.value = []
   importedItems.value = []
 }

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

@@ -8,20 +8,20 @@
     :show-delete-action="false"
     :show-actions-column="false"
     :row-click-handler="onRowClick"
+    :show-export="false"
   >
   </BaseDataTable>
 </template>
 
 <script setup lang="ts">
 import useWorkbenchPlugins from "@app/composables/useWorkbenchPlugins"
-import BaseDataTable from "@app/components/BaseDataTable.vue"
+import BaseDataTable from "@raclettejs/core/orchestrator/components/dataTable/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()