@raclettejs/workbench 0.1.17 → 0.1.19

package/CHANGELOG.md

@@ -7,6 +7,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.1.19] - 12.12.2025 <a href="https://gitlab.com/raclettejs/workbench/-/compare/v0.1.18...v0.1.19" target="_blank" rel="noopener"><b>Overview of all changes</b></a>
+
+### Added
+
+- Compositions, interactionLinks and tags can now be imported and exported
+
+## [0.1.18] - 05.12.2025 <a href="https://gitlab.com/raclettejs/workbench/-/compare/v0.1.17...v0.1.18" target="_blank" rel="noopener"><b>Overview of all changes</b></a>
+
+### Removed
+
+- Removed redundand authTokenExpiryDays config
+
+### Added
+
+- Interaction Links can now have a trigger in the appbar
+- possibility to restore items
+- possibility to add prepend and append actions to base table row items
+- added project configuration interface
+
 ## [0.1.17] - 06.11.2025 <a href="https://gitlab.com/raclettejs/workbench/-/compare/v0.1.15...v0.1.17" target="_blank" rel="noopener"><b>Overview of all changes</b></a>
 
 ### Added

package/config/compositions.js

@@ -2,7 +2,6 @@ export default [
   // composition administration
   {
     _id: "compositionList",
-    description: "Ein Test",
     pathname: {
       default: "composition-list",
     },
@@ -21,7 +20,6 @@ export default [
   },
   {
     _id: "compositionCreate",
-    description: "Ein Test",
     pathname: {
       default: "composition-create",
     },
@@ -41,7 +39,6 @@ export default [
   },
   {
     _id: "compositionEdit",
-    description: "Ein Test",
     pathname: {
       default: "composition-edit",
     },
@@ -63,7 +60,6 @@ export default [
   // interactionLinks administration
   {
     _id: "interactionLinkList",
-    description: "Ein Test",
     pathname: {
       default: "interactionLink-list",
     },
@@ -82,7 +78,6 @@ export default [
   },
   {
     _id: "interactionLinkCreate",
-    description: "Ein Test",
     pathname: {
       default: "interactionLink-create",
     },
@@ -101,7 +96,6 @@ export default [
   },
   {
     _id: "interactionLinkEdit",
-    description: "Ein Test",
     pathname: {
       default: "interactionLink-edit",
     },
@@ -123,7 +117,6 @@ export default [
   // users administration
   {
     _id: "userList",
-    description: "Ein Test",
     pathname: {
       default: "user-list",
     },
@@ -142,7 +135,6 @@ export default [
   },
   {
     _id: "userCreate",
-    description: "Ein Test",
     pathname: {
       default: "user-create",
     },
@@ -161,7 +153,6 @@ export default [
   },
   {
     _id: "userEdit",
-    description: "Ein Test",
     pathname: {
       default: "user-edit",
     },
@@ -182,7 +173,6 @@ export default [
   // tags administration
   {
     _id: "tagList",
-    description: "Ein Test",
     pathname: {
       default: "tag-list",
     },
@@ -201,7 +191,6 @@ export default [
   },
   {
     _id: "tagCreate",
-    description: "Ein Test",
     pathname: {
       default: "tag-create",
     },
@@ -220,7 +209,6 @@ export default [
   },
   {
     _id: "tagEdit",
-    description: "Ein Test",
     pathname: {
       default: "tag-edit",
     },
@@ -242,7 +230,6 @@ export default [
   // plugins configuration
   {
     _id: "pluginList",
-    description: "Ein Test",
     pathname: {
       default: "plugin-list",
     },
@@ -261,7 +248,6 @@ export default [
   },
   {
     _id: "pluginDetail",
-    description: "Ein Test",
     pathname: {
       default: "plugin-detail",
     },
@@ -279,4 +265,22 @@ export default [
     ],
     queryParameters: ["id"],
   },
+  {
+    _id: "projectDetail",
+    pathname: {
+      default: "project-detail",
+    },
+    widgetsLayout: [
+      [
+        {
+          column: 12,
+          widget: {
+            uuid: "ProjectDetail",
+            name: "ProjectDetail",
+            pluginKey: "pacifico__project",
+          },
+        },
+      ],
+    ],
+  },
 ] //satisfies Composition[]

package/config/interactionLinks.js

@@ -45,8 +45,8 @@ export default [
         settings: {
           icon: "mdi-link-box-variant",
           title: {
-            default: "interactionLink",
-            de: "interactionLink",
+            default: "Interaction Links",
+            de: "Interaktionslinks",
           },
           sortOrder: 1,
           navigationBarType: "navItem",
@@ -78,8 +78,8 @@ export default [
         settings: {
           icon: "mdi-account-details",
           title: {
-            default: "users",
-            de: "users",
+            default: "Users",
+            de: "Nutzer",
           },
           sortOrder: 2,
           navigationBarType: "navItem",
@@ -111,10 +111,10 @@ export default [
         settings: {
           icon: "mdi-tag",
           title: {
-            default: "tags",
-            de: "tags",
+            default: "Tags",
+            de: "Tags",
           },
-          sortOrder: 2,
+          sortOrder: 3,
           navigationBarType: "navItem",
         },
       },
@@ -145,10 +145,10 @@ export default [
         settings: {
           icon: "mdi-puzzle",
           title: {
-            default: "plugins",
-            de: "plugins",
+            default: "Plugins",
+            de: "Plugins",
           },
-          sortOrder: 2,
+          sortOrder: 4,
           navigationBarType: "navItem",
         },
       },
@@ -161,4 +161,24 @@ export default [
     triggers: [],
     queryParameters: ["pluginKey"],
   },
+  // project configuration
+  {
+    _id: "projectDetailInteractionLink",
+    composition: compositions[14]._id,
+    slotType: "page",
+    triggers: [
+      {
+        type: "page-navigation",
+        settings: {
+          icon: "mdi-application-cog",
+          title: {
+            default: "Project",
+            de: "Projekt",
+          },
+          sortOrder: 0,
+          navigationBarType: "footerItem",
+        },
+      },
+    ],
+  },
 ] // satisfies Partial<InteractionLink>[]

package/i18n/de-DE.json

@@ -42,6 +42,7 @@
       "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"
@@ -246,6 +247,31 @@
         "invalidEmail": "Bitte geben Sie eine gültige E-Mail-Adresse ein",
         "invalidUrl": "Bitte geben Sie eine gültige URL ein"
       }
+    },
+    "project": {
+      "formtitle": "Projekt bearbeiten",
+      "dataName": "Projekt",
+      "dividers": {
+        "general": "Allgemein",
+        "config": "Konfiguration"
+      },
+      "title": {
+        "title": "Projekt name",
+        "description": "Der Name des Projekts"
+      },
+      "tags": {
+        "title": "Tags",
+        "description": "Dieses Feld dient nur der internen Zuordnung der Komposition und wird nicht im Produkt angezeigt."
+      },
+      "description": {
+        "title": "Projekt Beschreibung",
+        "description": "Die Beschreibung des Portal/Platform Inhalts"
+      },
+      "config": "Projekt Konfiguration",
+      "railPageNavigation": {
+        "title": "Ausklappbare Navigation",
+        "description": "Wenn aktiviert wird die Seitennavigation automatisch ein- und aufgeklappt"
+      }
     }
   }
-}
+}

package/i18n/en-EU.json

@@ -42,6 +42,7 @@
       "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"
@@ -246,6 +247,31 @@
         "invalidEmail": "Please enter a valid email address",
         "invalidUrl": "Please enter a valid URL"
       }
+    },
+    "project": {
+      "formtitle": "Edit Project",
+      "dataName": "Project",
+      "dividers": {
+        "general": "General",
+        "config": "Configuration"
+      },
+      "title": {
+        "title": "Project Name",
+        "description": "The name of the project"
+      },
+      "tags": {
+        "title": "Tags",
+        "description": "This field is only used for internal categorization of the composition and is not displayed in the product."
+      },
+      "description": {
+        "title": "Project Description",
+        "description": "The description of the portal/platform content"
+      },
+      "config": "Project Configuration",
+      "railPageNavigation": {
+        "title": "Collapsible Navigation",
+        "description": "When enabled, the page navigation is automatically collapsed and expanded"
+      }
     }
   }
-}
+}

package/i18n/sk-SK.json

@@ -42,6 +42,7 @@
       "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ť"
@@ -241,6 +242,31 @@
         "invalidEmail": "Zadajte platnú emailovú adresu",
         "invalidUrl": "Zadajte platnú URL adresu"
       }
+    },
+    "project": {
+      "formtitle": "Upraviť projekt",
+      "dataName": "Projekt",
+      "dividers": {
+        "general": "Všeobecné",
+        "config": "Konfigurácia"
+      },
+      "title": {
+        "title": "Názov projektu",
+        "description": "Názov projektu"
+      },
+      "description": {
+        "title": "Popis projektu",
+        "description": "Popis obsahu portálu/platformy"
+      },
+      "config": "Projekt Konfigurácia",
+      "railPageNavigation": {
+        "title": "Sklopná navigácia",
+        "description": "Ak je povolená, stránková navigácia sa automaticky sklopí a rozbalí"
+      },
+      "tags": {
+        "title": "Značky",
+        "description": "Toto pole slúži len na internú kategorizáciu kompozície a nezobrazuje sa v produkte."
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raclettejs/workbench",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "license": "MIT",
   "description": "racletteJS Workbench - used to configure your application, for dev and prod",
   "repository": "https://gitlab.com/raclettejs/workbench",
@@ -31,13 +31,13 @@
     ".": "./index.ts"
   },
   "dependencies": {
-    "@raclettejs/core": "0.1.17",
+    "@raclettejs/core": "0.1.19",
     "three": "0.180.0",
     "vanta": "0.5.24"
   },
   "devDependencies": {
     "@eslint/js": "9.35.0",
-    "@raclettejs/types": "0.1.17",
+    "@raclettejs/types": "0.1.19",
     "@sinclair/typebox": "0.34.41",
     "@types/ramda": "0.31.1",
     "@vueuse/core": "13.9.0",

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

@@ -1,56 +1,151 @@
 <template>
-  <BaseDataTable
-    :items="parsedCompositions"
-    :loading="compositionsLoading || tagsLoading"
-    :headers="headers"
-    create-interaction-link-id="compositionCreateInteractionLink"
-    edit-interaction-link-id="compositionEditInteractionLink"
-    :data-name="$t('workbench.compositionList.dataName')"
-    :data-article="$t('workbench.compositionList.dataArticle')"
-    @delete="deleteComposition"
-    :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 status column -->
-    <template #item.status="{ item }">
-      <v-icon
-        :icon="item.statusIcon"
-        :color="item.statusColor"
-        size="x-large"
-      />
-    </template>
-  </BaseDataTable>
+  <div>
+    <BaseDataTable
+      :items="parsedCompositions"
+      :loading="compositionsLoading || tagsLoading"
+      :headers="headers"
+      create-interaction-link-id="compositionCreateInteractionLink"
+      edit-interaction-link-id="compositionEditInteractionLink"
+      :data-name="$t('workbench.compositionList.dataName')"
+      :data-article="$t('workbench.compositionList.dataArticle')"
+      @delete="deleteComposition"
+      :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 status column -->
+      <template #item.status="{ item }">
+        <v-icon
+          :icon="item.statusIcon"
+          :color="item.statusColor"
+          size="x-large"
+        />
+      </template>
+      <template #prepend-row-actions="{ item }">
+        <v-icon
+          v-if="showDeleted"
+          color="green"
+          class="mr-2"
+          @click.stop.prevent="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="title"
+      :title="$t('core.selectItemsToExport')"
+      :confirm-text="$t('core.export')"
+      @confirm="handleExportConfirm"
+    />
+
+    <!-- Import Selection Dialog -->
+    <SelectionDialog
+      v-model="showImportDialog"
+      :items="importableItems"
+      display-attribute="title"
+      :title="$t('core.selectItemsToImport')"
+      :confirm-text="$t('core.import')"
+      @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
+      v-model="showImportSummary"
+      display-attribute="title"
+      :items="importedItems"
+      :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 { usePluginApi } from "@raclettejs/core/orchestrator/composables"
-import { computed, watch, ref } from "vue"
+import { computed, watch, ref, useTemplateRef } from "vue"
 import type { Composition } from "@raclettejs/core"
 import { formatDistance } from "date-fns"
 import BaseDataTable from "@app/components/BaseDataTable.vue"
 import { useI18n } from "vue-i18n"
-const showDeleted = ref(false)
+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 { 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 headers = computed<
   { title: string; key: keyof Composition | "actions" }[]
@@ -85,13 +180,12 @@ const props = defineProps<{
   uuid: string
 }>()
 
-const { $data, $socket } = usePluginApi("raclette__core")
+const { $data, $socket, $user } = usePluginApi("raclette__core")
 const {
   data: compositions,
   execute,
   isLoading: compositionsLoading,
 } = $data.composition.getAll()
-
 const { data: tags, isLoading: tagsLoading } = $data.tag.getAll({
   options: { immediate: true },
 })
@@ -101,6 +195,12 @@ const { data: users } = $data.user.getAll({
 const { execute: executeDelete } = await $data.composition.delete({
   options: { cb: () => execute({ isDeleted: showDeleted.value }) },
 })
+const { execute: executeBulkCreate } = await $data.composition.createBulk({
+  options: { notify: false, cb: () => execute() },
+})
+const { execute: executeRestore } = await $data.composition.updateRestore({
+  options: { cb: () => execute({ isDeleted: showDeleted.value }) },
+})
 const { execute: executeHardDelete } = await $data.composition.deleteHard({
   options: { cb: () => execute({ isDeleted: showDeleted.value }) },
 })
@@ -146,7 +246,67 @@ 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) => {
+  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] = 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 = []
+}
 const deleteComposition = async (composition: Composition) => {
   if (showDeleted.value) {
     await executeHardDelete({ _id: composition._id })
@@ -154,7 +314,9 @@ const deleteComposition = async (composition: Composition) => {
     await executeDelete({ _id: composition._id })
   }
 }
-
+const restore = (_id: string) => {
+  executeRestore({ _id })
+}
 $socket.on("compositionCreated", () =>
   execute({ isDeleted: showDeleted.value }),
 )