@raclettejs/workbench 0.1.31 → 0.1.32-nightly-1

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"
 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()
 

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

@@ -2,6 +2,7 @@
   <div>
     <BaseDataTable
       :items="parsedTags"
+      :exportable-items="exportableTags"
       :loading="tagsLoading"
       :headers="headers"
       create-interaction-link-id="tagCreateInteractionLink"
@@ -9,16 +10,17 @@
       :data-name="$t('workbench.tagList.dataName')"
       :data-article="$t('workbench.tagList.dataArticle')"
       @delete="deleteTag"
-      :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,26 +32,6 @@
             </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>
       <template #prepend-row-actions="{ item }">
         <v-icon
@@ -66,18 +48,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"
@@ -86,18 +58,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"
@@ -113,30 +75,27 @@
 
 <script setup lang="ts">
 import { usePluginApi } from "@raclettejs/core/orchestrator/composables"
-import { computed, ref, watch, useTemplateRef } from "vue"
+import { computed, ref, watch } from "vue"
 import type { Tag } from "@raclettejs/core"
 import { useI18n } from "vue-i18n"
-import BaseDataTable from "@app/components/BaseDataTable.vue"
+import { BaseDataTable } from "@raclettejs/core/orchestrator/components"
 import { formatDistance } from "date-fns"
-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"
+import { ImportSummaryDialog } from "@raclettejs/core/orchestrator/components"
+
 const showDeleted = ref(false)
 const { t } = useI18n()
-// 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 Tag }[]>(() => [
   {
     title: t("workbench.tagList.tableHeaders.title"),
@@ -183,16 +142,23 @@ const { execute: executeHardDelete } = await $data.tag.deleteHard({
 const { execute: executeRestore } = await $data.tag.updateRestore({
   options: { cb: () => execute({ isDeleted: showDeleted.value }) },
 })
-const parsedTags = computed(() => {
-  if (tags.value) {
-    return Object.values(tags.value as { [key: string]: Tag }).map((tag) => ({
-      ...tag,
-      tags: tag?.tags?.map((t) => tags.value?.[t]) ?? [],
-      updatedAt: formatDistance(new Date(tag.updatedAt), new Date()),
-    }))
+const tagTableRows = (relativeUpdatedAt: boolean) => {
+  if (!tags.value) {
+    return []
   }
-  return []
-})
+
+  return Object.values(tags.value as { [key: string]: Tag }).map((tag) => ({
+    ...tag,
+    tags: tag?.tags?.map((t) => tags.value?.[t]) ?? [],
+    ...(relativeUpdatedAt
+      ? { updatedAt: formatDistance(new Date(tag.updatedAt), new Date()) }
+      : {}),
+  }))
+}
+
+const parsedTags = computed(() => tagTableRows(true))
+
+const exportableTags = computed(() => tagTableRows(false))
 
 const deleteTag = async (tag: Tag) => {
   if (showDeleted.value) {
@@ -201,48 +167,26 @@ const deleteTag = async (tag: Tag) => {
     await executeDelete({ _id: tag._id })
   }
 }
-const openExportDialog = () => {
-  const allTags = Object.values(tags.value || {})
-  const exportableTags = []
-  allTags.forEach((tag) => {
-    if (!tag.locked) {
-      exportableTags.push(tag)
-    }
-  })
-  exportableItems.value = exportableTags
-  showExportDialog.value = true
-}
-
-const handleExportConfirm = (selectedIds: string[]) => {
-  const dataToExport = selectedIds.reduce((acc, id) => {
-    if (tags.value?.[id]) {
-      acc[id] = tags.value[id]
-    }
-    return acc
-  }, {} as any)
-
-  exportedItems.value = Object.values(dataToExport)
-  downloadJson(dataToExport, "tags")
-  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
 }
 
@@ -264,7 +208,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__users/frontend/widgets/UserListWidget.vue

@@ -1,6 +1,7 @@
 <template>
   <BaseDataTable
     :items="parsedUsers"
+    :exportable-items="exportableUsers"
     :loading="usersLoading || tagsLoading"
     :headers="headers"
     create-interaction-link-id="userCreateInteractionLink"
@@ -9,16 +10,16 @@
     :data-article="$t('workbench.userList.dataArticle')"
     :delete-validator="(user) => user._id !== $user?._id"
     @delete="deleteUser"
-    :itemsDeleted="showDeleted"
+    :items-deleted="showDeleted"
   >
-    <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'"
@@ -54,7 +55,7 @@ import { computed, watch, ref } from "vue"
 import type { User } from "@raclettejs/core"
 import { formatDistance } from "date-fns"
 import { useI18n } from "vue-i18n"
-import BaseDataTable from "@app/components/BaseDataTable.vue"
+import { BaseDataTable } from "@raclettejs/core/orchestrator/components"
 const showDeleted = ref(false)
 
 const props = defineProps<{
@@ -102,18 +103,23 @@ const { execute: executeHardDelete } = await $data.user.deleteHard({
 const { execute: executeRestore } = await $data.user.updateRestore({
   options: { cb: () => execute({ isDeleted: showDeleted.value }) },
 })
-const parsedUsers = computed(() => {
-  if (users.value && tags.value) {
-    return Object.values(users.value as { [key: string]: User }).map(
-      (user) => ({
-        ...user,
-        tags: user.tags.map((tag) => tags.value?.[tag]),
-        updatedAt: formatDistance(new Date(user.updatedAt), new Date()),
-      }),
-    )
+const userTableRows = (relativeUpdatedAt: boolean) => {
+  if (!users.value || !tags.value) {
+    return []
   }
-  return []
-})
+
+  return Object.values(users.value as { [key: string]: User }).map((user) => ({
+    ...user,
+    tags: user.tags.map((tag) => tags.value?.[tag]),
+    ...(relativeUpdatedAt
+      ? { updatedAt: formatDistance(new Date(user.updatedAt), new Date()) }
+      : {}),
+  }))
+}
+
+const parsedUsers = computed(() => userTableRows(true))
+
+const exportableUsers = computed(() => userTableRows(false))
 const deleteUser = async (user: User) => {
   if (showDeleted.value) {
     await executeHardDelete({ _id: user._id })

package/services/frontend/src/app/lib/jsonTools.ts

@@ -1,10 +1,75 @@
+/**
+ * Parsed workbench list import: rows for {@link SelectionDialog} and a map by `_id` for confirm.
+ */
+export interface WorkbenchImportNormalization {
+  items: Record<string, unknown>[]
+  byId: Record<string, Record<string, unknown>>
+}
+
+/**
+ * Parses JSON from a table export (array of records with `_id`) into dialog state.
+ * Rejects non-arrays so imports match the current export format only.
+ */
+export const parseAndNormalizeWorkbenchImportJson = (
+  content: string,
+): WorkbenchImportNormalization => {
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(content)
+  } catch {
+    throw new Error("Invalid JSON file.")
+  }
+
+  if (!Array.isArray(parsed)) {
+    throw new Error(
+      "Imported JSON must be an array of records (export from the data table).",
+    )
+  }
+
+  const byId: Record<string, Record<string, unknown>> = {}
+  const items: Record<string, unknown>[] = []
+
+  for (const entry of parsed) {
+    if (!entry || typeof entry !== "object" || Array.isArray(entry)) {
+      continue
+    }
+    const row = entry as Record<string, unknown>
+    const id = row._id
+    if (id === undefined || id === null || id === "") {
+      continue
+    }
+    const sid = String(id)
+    byId[sid] = row
+    items.push(row)
+  }
+
+  if (!items.length) {
+    throw new Error(
+      "No importable records found. Each entry must be an object with an _id.",
+    )
+  }
+
+  return { items, byId }
+}
+
+/** Resolve selected `_id`s using the `byId` map from {@link parseAndNormalizeWorkbenchImportJson}. */
+export const resolveWorkbenchImportSelection = <
+  T extends Record<string, unknown>,
+>(
+  byId: Record<string, T>,
+  selectedIds: string[],
+): T[] =>
+  selectedIds
+    .map((id) => byId[id])
+    .filter((item): item is T => item != null)
+
 /**
  * Downloads a JSON object as a .json file
  * @param {Object|Array} data - The data to be downloaded as JSON
  * @param {string} filename - The name of the file (without .json extension)
  * @throws {Error} If data cannot be serialized to JSON
  */
-export function downloadJson(data, filename = "download") {
+export const downloadJson = (data, filename = "download") => {
   try {
     // Convert data to JSON string with pretty formatting
     const jsonString = JSON.stringify(data, null, 2)
@@ -33,7 +98,8 @@ export function downloadJson(data, filename = "download") {
     URL.revokeObjectURL(url)
   } catch (error) {
     console.error("Failed to download JSON:", error)
-    throw new Error(`Unable to download JSON file: ${error.message}`)
+    const message = error instanceof Error ? error.message : String(error)
+    throw new Error(`Unable to download JSON file: ${message}`)
   }
 }
 /**
@@ -49,7 +115,7 @@ export function downloadJson(data, filename = "download") {
  * const result = mapJsonValues(data, mapping);
  * // Result: { owner: 'user456', name: 'Project A', lastEditor: 'user789' }
  */
-export function mapJsonValues(data, mapping = {}) {
+export const mapJsonValues = (data, mapping = {}) => {
   if (!data || typeof data !== "object") {
     return data
   }