@raclettejs/core 0.1.32 → 0.1.33-canary.0

package/services/frontend/src/orchestrator/components/dataImport/ImportSummaryDialog.vue

@@ -0,0 +1,211 @@
+<template>
+  <v-dialog v-model="dialog" max-width="800" scrollable>
+    <v-card class="tw:overflow-hidden">
+      <v-card-title class="tw:flex tw:items-center tw:justify-between tw:gap-2">
+        <span class="tw:text-lg tw:font-semibold">{{ title }}</span>
+        <v-btn icon="mdi-close" size="small" variant="text" @click="close" />
+      </v-card-title>
+
+      <v-divider />
+
+      <v-card-text class="tw:py-4">
+        <v-alert :type="type" variant="tonal" class="tw:mb-4">
+          <div class="tw:text-base tw:font-medium tw:mb-2">
+            {{ message }}
+          </div>
+          <div class="tw:text-sm">
+            {{ $t("core.itemsCount") }}:
+            <strong>{{ itemCount }}</strong>
+          </div>
+        </v-alert>
+
+        <div v-if="showItems && renderedItems.length > 0">
+          <div class="tw:text-xs tw:uppercase tw:font-semibold tw:opacity-60 tw:mb-2">
+            {{ $t("core.selectedItems") }}
+          </div>
+
+          <v-list density="compact" class="tw:border tw:rounded-md tw:py-0">
+            <v-list-item
+              v-for="item in renderedItems"
+              :key="item.key"
+              class="tw:py-2"
+            >
+              <template #title>
+                <span class="tw:text-sm tw:font-medium">{{ item.title }}</span>
+              </template>
+
+              <template #subtitle>
+                <pre
+                  v-if="item.kind === 'pre'"
+                  class="tw:mt-1 tw:text-xs tw:font-mono tw:p-2 tw:max-h-44 tw:overflow-auto tw:rounded tw:bg-black/5 dark:tw:bg-white/5 tw:whitespace-pre-wrap tw:break-all"
+                >{{ item.text }}</pre>
+                <div v-else class="tw:mt-1 tw:text-sm tw:opacity-80 tw:break-all">
+                  {{ item.text }}
+                </div>
+              </template>
+            </v-list-item>
+          </v-list>
+        </div>
+      </v-card-text>
+
+      <v-divider />
+
+      <v-card-actions class="tw:px-4 tw:py-3">
+        <v-spacer />
+        <v-btn variant="text" @click="close">
+          {{ cancelText || $t("core.close") }}
+        </v-btn>
+        <v-btn
+          v-if="showConfirm"
+          :color="type === 'warning' ? 'warning' : type === 'error' ? 'error' : 'primary'"
+          variant="flat"
+          @click="confirm"
+        >
+          {{ confirmText }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import { useI18n } from "vue-i18n"
+
+interface Props {
+  modelValue: boolean
+  items: any[]
+  title: string
+  message: string
+  type?: "info" | "success" | "warning" | "error"
+  showItems?: boolean
+  showConfirm?: boolean
+  displayAttribute: string
+  confirmText?: string
+  cancelText?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "info",
+  showItems: true,
+  showConfirm: false,
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean]
+  confirm: []
+}>()
+const { t } = useI18n()
+
+const dialog = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+})
+
+const itemCount = computed(() => props.items.length)
+
+const close = () => {
+  dialog.value = false
+}
+
+type SummaryRenderKind = "text" | "pre"
+
+interface SummaryRenderItem {
+  key: string
+  title: string
+  kind: SummaryRenderKind
+  text: string
+}
+
+interface SummaryFormatter {
+  kind: SummaryRenderKind
+  canHandle: (value: unknown) => boolean
+  format: (value: unknown) => string
+}
+
+const formatAsText = (value: unknown): string => {
+  if (value === null || value === undefined) return "-"
+  return String(value)
+}
+
+const objectJsonFormatter: SummaryFormatter = {
+  kind: "pre",
+  canHandle: (value) =>
+    value !== null && typeof value === "object" && !Array.isArray(value),
+  format: (value) => JSON.stringify(value, null, 2),
+}
+
+const arrayJsonFormatter: SummaryFormatter = {
+  kind: "pre",
+  canHandle: (value) => Array.isArray(value),
+  format: (value) => JSON.stringify(value, null, 2),
+}
+
+const primitiveFormatter: SummaryFormatter = {
+  kind: "text",
+  canHandle: () => true,
+  format: (value) => formatAsText(value),
+}
+
+// TODO(summary-formatters): Add XML formatter when import/export surfaces XML payloads.
+// TODO(summary-formatters): Add CSV formatter with row/column-aware preview rendering.
+// TODO(summary-formatters): Add image formatter for URL/blob metadata and thumbnail previews.
+const summaryFormatters: SummaryFormatter[] = [
+  objectJsonFormatter,
+  arrayJsonFormatter,
+  primitiveFormatter,
+]
+
+const resolveFormatter = (value: unknown): SummaryFormatter => {
+  return (
+    summaryFormatters.find((formatter) => formatter.canHandle(value)) ??
+    primitiveFormatter
+  )
+}
+
+const formatDisplayTitle = (item: unknown, index: number): string => {
+  if (!item || typeof item !== "object" || Array.isArray(item)) {
+    return `${t("core.selectedItems")} #${index + 1}`
+  }
+
+  const record = item as Record<string, unknown>
+  const attributeValue = record[props.displayAttribute]
+  if (attributeValue !== undefined && attributeValue !== null) {
+    return formatAsText(attributeValue)
+  }
+  if (record._id !== undefined && record._id !== null) {
+    return formatAsText(record._id)
+  }
+  return `${t("core.selectedItems")} #${index + 1}`
+}
+
+const getDisplayPayload = (item: unknown): unknown => {
+  if (!item || typeof item !== "object" || Array.isArray(item)) {
+    return item
+  }
+
+  const record = item as Record<string, unknown>
+  const payload = { ...record }
+  delete payload[props.displayAttribute]
+  return payload
+}
+
+const renderedItems = computed<SummaryRenderItem[]>(() =>
+  props.items.map((item, index) => {
+    const payload = getDisplayPayload(item)
+    const formatter = resolveFormatter(payload)
+
+    return {
+      key: `${index}-${formatDisplayTitle(item, index)}`,
+      title: formatDisplayTitle(item, index),
+      kind: formatter.kind,
+      text: formatter.format(payload),
+    }
+  }),
+)
+
+const confirm = () => {
+  emit("confirm")
+  close()
+}
+</script>

package/services/frontend/src/orchestrator/components/dataTable/BaseDataTable.vue

@@ -0,0 +1,473 @@
+<template>
+  <div>
+    <v-sheet border rounded>
+      <v-data-table
+        v-model="selected"
+        v-model:search="search"
+        density="compact"
+        :items-per-page="itemsPerPage"
+        sticky
+        fixed-header
+        :headers="computedHeaders"
+        :items="items"
+        :loading="loading"
+        @click:row="handleRowClick"
+        :class="{ itemsDeleted }"
+        :show-select="showExport"
+        :item-value
+      >
+        <template #top>
+          <v-toolbar flat>
+            <v-toolbar-title v-if="dataName?.length">
+              <v-icon
+                color="medium-emphasis"
+                icon="mdi-book-multiple"
+                size="x-small"
+                start
+              />
+
+              {{ dataName }}
+            </v-toolbar-title>
+
+            <template #append>
+              <div
+                class="tw:flex tw:flex-wrap tw:gap-2 tw:items-center tw:justify-end"
+              >
+                <slot name="actions" />
+                <slot name="toolbar-leading" />
+                <FileUpload
+                  v-if="onFileLoaded"
+                  ref="importFileUploadRef"
+                  :on-file-loaded="onFileLoaded"
+                  :accept="importAccept"
+                  :read-as="importReadAs"
+                />
+                <v-btn-group density="compact" divided>
+                  <DataExporter
+                    v-if="showExport"
+                    :data="exportPayloadData"
+                    :disabled="!selected.length"
+                    :formats="exportFormats"
+                    :default-format="exportDefaultFormat"
+                    :button-label="$t('core.export')"
+                    color="info"
+                    variant="elevated"
+                  />
+                  <v-btn
+                    v-if="onFileLoaded"
+                    color="teal"
+                    variant="elevated"
+                    density="compact"
+                    prepend-icon="mdi-database-import"
+                    :text="$t('core.import')"
+                    @click="importFileUploadRef?.openPicker()"
+                  />
+                  <v-btn
+                    v-if="showCreateButton"
+                    @click="handleCreate"
+                    prepend-icon="mdi-plus"
+                    density="compact"
+                    :text="
+                      $t('core.baseDataTable.createDataButton', {
+                        dataName,
+                      })
+                    "
+                    variant="elevated"
+                    color="success"
+                  />
+                </v-btn-group>
+              </div>
+            </template>
+          </v-toolbar>
+
+          <v-text-field
+            v-model="search"
+            :label="
+              $t('core.baseDataTable.searchPlaceholder', {
+                dataName,
+              })
+            "
+            prepend-inner-icon="mdi-magnify"
+            variant="outlined"
+            hide-details
+            single-line
+            density="compact"
+          />
+        </template>
+
+        <template
+          #item.color="{ item }"
+          v-if="!customSlots.includes('item.color')"
+        >
+          <div class="tw:flex tw:gap-2" v-if="item.color?.length">
+            <v-chip :color="item.color" label variant="outlined" size="small">
+              {{ item.color }}
+            </v-chip>
+          </div>
+        </template>
+        <!-- Built-in tags column -->
+        <template
+          #item.tags="{ item }"
+          v-if="!customSlots.includes('item.tags')"
+        >
+          <div class="tw:flex tw:gap-2" v-if="item.tags?.length">
+            <v-chip
+              v-for="tag in item.tags"
+              :key="tag._id || tag.id || tag"
+              :color="tag.color"
+              label
+              variant="outlined"
+              size="small"
+            >
+              {{ tag.title || tag.name || tag }}
+            </v-chip>
+          </div>
+        </template>
+
+        <!-- Dynamic slots for custom column rendering -->
+        <template v-for="slot in customSlots" :key="slot" #[slot]="slotProps">
+          <slot :name="slot" v-bind="slotProps" />
+        </template>
+
+        <!-- Actions column template -->
+        <template #item.actions="{ item }" v-if="showActionsColumn">
+          <slot name="prepend-row-actions" :item="item"> </slot>
+          <slot name="row-actions" :item="item">
+            <!-- Default delete action -->
+            <v-icon
+              v-if="showDeleteAction && !isDeleteDisabled(item)"
+              color="red"
+              @click.stop.prevent="handleDelete(item)"
+              class="mr-2"
+              :title="
+                $t('core.baseDataTable.deleteDataTitle', {
+                  dataName,
+                })
+              "
+              icon="mdi-delete"
+            />
+          </slot>
+          <slot name="append-row-actions" :item="item"> </slot>
+        </template>
+
+        <!-- Loading template -->
+        <template #loader>
+          <v-skeleton-loader
+            class="mx-auto border"
+            :height="500"
+            width="100%"
+            type="list-item"
+            :loading="true"
+          />
+        </template>
+
+        <!-- Additional table slots (this caused the table to be empty) -->
+        <!-- <slot name="table-slots" /> -->
+      </v-data-table>
+    </v-sheet>
+    <!-- Delete Confirmation Dialog -->
+    <v-dialog
+      v-model="deleteDialog"
+      max-width="400"
+      v-if="showDeleteAction && itemToDelete"
+    >
+      <v-card>
+        <v-card-title class="text-h6">
+          {{
+            $t("core.baseDataTable.deleteDataTitle", {
+              dataName,
+            })
+          }}
+        </v-card-title>
+
+        <v-card-text
+          v-html="
+            $t('core.baseDataTable.deleteDataConfirmMessage', {
+              article: dataArticle,
+              dataName,
+              value:
+                itemToDelete.email ||
+                itemToDelete.title ||
+                itemToDelete.name ||
+                itemToDelete._id,
+            })
+          "
+        />
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="deleteDialog = false">
+            {{ $t("core.baseDataTable.deleteDataConfirmCancel") }}
+          </v-btn>
+          <v-btn color="red" variant="flat" @click="confirmDelete">
+            {{ $t("core.baseDataTable.deleteDataConfirmButton") }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- Additional dialogs slot -->
+    <slot name="dialogs" />
+  </div>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { computed, ref, useSlots, useTemplateRef } from "vue"
+import { useRouteState } from "@raclettejs/core/orchestrator/composables"
+import DataExporter from "@raclettejs/core/orchestrator/components/dataExport/DataExporter.vue"
+import FileUpload from "@raclettejs/core/orchestrator/components/input/FileUpload.vue"
+import type {
+  ExportPayload,
+  FormatEntry,
+} from "@racletteOrchestrator/composables/useExport/types"
+
+export interface BaseDataTableProps<T> {
+  uuid?: string
+  // Data props
+  items?: T[]
+  loading?: boolean
+  itemsDeleted?: boolean
+  // Table configuration
+  headers: Array<{
+    title: string
+    key: keyof T | string
+    align?: "start" | "center" | "end"
+    sortable?: boolean
+    width?: string | number
+  }>
+  itemsPerPage?: number
+
+  // Create button
+  showCreateButton?: boolean
+  createInteractionLinkId?: string
+
+  // Row actions
+  showActionsColumn?: boolean
+  showDeleteAction?: boolean
+
+  // Navigation
+  editInteractionLinkId?: string
+
+  // Item processing
+  deleteValidator?: (item: T) => boolean
+  rowClickHandler?: (item: T) => void
+
+  dataName: string
+  dataArticle: string
+
+  showExport?: boolean
+
+  itemValue?: string
+
+  /**
+   * When set, exported rows come from here (matched to table selection via `itemValue`, default `_id`).
+   * Use this to omit display-only fields (e.g. relative dates) from JSON export while keeping table `items`.
+   */
+  exportableItems?: Record<string, unknown>[]
+  exportMeta?: Record<string, unknown>
+
+  /** Formats offered in the export menu (workbench list tables default to JSON only). */
+  exportFormats?: FormatEntry[]
+  exportDefaultFormat?: string
+
+  /** When set, an import control is shown and the handler receives file contents (same contract as FileUpload). */
+  onFileLoaded?: (content: string | ArrayBuffer, file: File) => void
+  importAccept?: string
+  importReadAs?: "text" | "arrayBuffer"
+}
+
+const props = withDefaults(defineProps<BaseDataTableProps<T>>(), {
+  uuid: undefined,
+  items: () => [],
+  itemsDeleted: false,
+  itemsPerPage: 50,
+  showCreateButton: true,
+  showActionsColumn: true,
+  showDeleteAction: true,
+  showExport: true,
+  itemValue: "_id",
+  exportableItems: undefined,
+  exportMeta: undefined,
+  exportFormats: () => ["json"] as FormatEntry[],
+  exportDefaultFormat: "json",
+  onFileLoaded: undefined,
+  importAccept: ".json",
+  importReadAs: "text",
+})
+
+const emit = defineEmits<{
+  create: []
+  edit: [item: T]
+  delete: [item: T]
+  rowClick: [item: T]
+}>()
+
+const slots = useSlots()
+const { triggerInteractionLinkById } = useRouteState()
+const importFileUploadRef = useTemplateRef<{
+  openPicker: () => void
+}>("importFileUploadRef")
+
+// Reactive data
+const search = ref("")
+const selected = ref<Array<string | number>>([])
+const deleteDialog = ref(false)
+const itemToDelete = ref<T | null>(null)
+
+const computedHeaders = computed(() => {
+  if (!props.headers || !props.headers?.length) {
+    return null
+  }
+
+  const headers = [...props.headers]
+
+  // Add actions column if needed
+  if (props.showActionsColumn) {
+    headers.push({
+      title: "Actions",
+      key: "actions",
+      align: "end" as const,
+      sortable: false,
+    })
+  }
+
+  return headers
+})
+
+const customSlots = computed(() => {
+  return Object.keys(slots).filter(
+    (slot) => slot.startsWith("item.") && slot !== "item.actions",
+  )
+})
+
+const exportColumnKeys = computed(() => {
+  return (props.headers ?? [])
+    .map((header) => String(header.key).trim())
+    .filter((key) => key.length > 0 && key !== "actions")
+})
+
+const projectRowsToVisibleColumns = <TRow extends Record<string, unknown>>(
+  rows: TRow[],
+) => {
+  if (!exportColumnKeys.value.length) {
+    return rows
+  }
+
+  return rows.map((row) => {
+    const projectedRow: Record<string, unknown> = {}
+    for (const key of exportColumnKeys.value) {
+      if (key in row) {
+        projectedRow[key] = row[key]
+      }
+    }
+    return projectedRow
+  })
+}
+
+/** Rows passed to DataExporter when something is selected. */
+const exportPayloadData = computed<ExportPayload>(() => {
+  const idKey = props.itemValue as keyof T
+  const selectedIds = selected.value
+  const toKey = (value: unknown) => String(value)
+
+  if (props.exportableItems != null) {
+    const idToRow = new Map<string, Record<string, unknown>>()
+
+    for (const row of props.exportableItems) {
+      const rawKey = row[idKey as string]
+      if (rawKey === undefined || rawKey === null) {
+        console.warn(
+          `[BaseDataTable] Export row is missing "${String(idKey)}" key and will be ignored.`,
+          row,
+        )
+        continue
+      }
+
+      const rowKey = toKey(rawKey)
+      if (idToRow.has(rowKey)) {
+        console.warn(
+          `[BaseDataTable] Duplicate export key "${rowKey}" for itemValue "${String(idKey)}".`,
+        )
+      }
+      idToRow.set(rowKey, row)
+    }
+
+    const selectedExportRows = selectedIds
+      .map((id) => idToRow.get(toKey(id)))
+      .filter((row): row is Record<string, unknown> => row !== undefined)
+
+    return {
+      items: projectRowsToVisibleColumns(selectedExportRows),
+      ...(props.exportMeta ? { meta: props.exportMeta } : {}),
+    }
+  }
+
+  const selectedKeySet = new Set(selectedIds.map((id) => toKey(id)))
+  const selectedRows = (props.items ?? []).filter((item) => {
+    const rowId = item[idKey]
+    if (rowId === undefined || rowId === null) {
+      console.warn(
+        `[BaseDataTable] Table item is missing "${String(idKey)}" key and will not be exportable.`,
+        item,
+      )
+      return false
+    }
+    return selectedKeySet.has(toKey(rowId))
+  }) as Record<string, unknown>[]
+
+  return {
+    items: projectRowsToVisibleColumns(selectedRows),
+    ...(props.exportMeta ? { meta: props.exportMeta } : {}),
+  }
+})
+
+// Methods
+const handleCreate = () => {
+  if (props.createInteractionLinkId) {
+    triggerInteractionLinkById(props.createInteractionLinkId)
+  }
+  emit("create")
+}
+
+const handleRowClick = (_: PointerEvent, row: { item: T }) => {
+  if (props.rowClickHandler) {
+    props.rowClickHandler(row.item)
+    return
+  }
+
+  if (props.editInteractionLinkId) {
+    const item = row.item as any
+
+    triggerInteractionLinkById(props.editInteractionLinkId, {
+      id: item._id,
+    })
+  }
+
+  emit("edit", row.item)
+  emit("rowClick", row.item)
+}
+
+const handleDelete = (item: T) => {
+  itemToDelete.value = item
+  deleteDialog.value = true
+}
+
+const confirmDelete = () => {
+  if (itemToDelete.value) {
+    emit("delete", itemToDelete.value)
+  }
+
+  itemToDelete.value = null
+  deleteDialog.value = false
+}
+
+const isDeleteDisabled = (item: T): boolean => {
+  return props.deleteValidator ? !props.deleteValidator(item) : false
+}
+</script>
+
+<style lang="css">
+.itemsDeleted .v-data-table__tr {
+  background-color: rgb(233, 190, 190);
+  color: #000;
+}
+</style>

package/services/frontend/src/orchestrator/components/index.ts

@@ -14,9 +14,19 @@ import UserChip from "./chip/UserChip.vue"
 import UserMenu from "./menu/UserMenu.vue"
 import UserNotifications from "./menu/UserNotifications.vue"
 import WidgetsLayoutLoader from "./composition/WidgetsLayoutLoader.vue"
+import DataExporter from "./dataExport/DataExporter.vue"
+import ImportSelectionDialog from "./dataImport/ImportSelectionDialog.vue"
+import ImportSummaryDialog from "./dataImport/ImportSummaryDialog.vue"
+import BaseDataTable from "./dataTable/BaseDataTable.vue"
+import FileUpload from "./input/FileUpload.vue"
 
 export {
+  ImportSelectionDialog,
+  ImportSummaryDialog,
+  BaseDataTable,
+  FileUpload,
   CompositionOverlay,
+  DataExporter,
   DefaultModal,
   DraggableElement,
   DropzoneElement,