@raclettejs/core 0.1.31 → 0.1.32-nightly

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/dataTable/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/dataTable/FileUpload.vue

@@ -0,0 +1,83 @@
+<template>
+  <!-- Visually hidden; opened via openPicker() from a separate toolbar button -->
+  <input
+    ref="nativeInput"
+    type="file"
+    class="raclette-file-upload-input"
+    :accept="accept"
+    @change="handleNativeChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from "vue"
+
+const props = defineProps({
+  onFileLoaded: {
+    type: Function,
+    required: true,
+  },
+  accept: {
+    type: String,
+    default: "*/*",
+  },
+  readAs: {
+    type: String,
+    default: "text",
+    validator: (value: string) => ["text", "arrayBuffer"].includes(value),
+  },
+})
+
+const nativeInput = useTemplateRef<HTMLInputElement>("nativeInput")
+
+const handleNativeChange = (event: Event) => {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  if (!file) {
+    input.value = ""
+    return
+  }
+
+  const reader = new FileReader()
+
+  reader.onload = () => {
+    ;(props.onFileLoaded as (c: string | ArrayBuffer, f: File) => void)(
+      reader.result as string | ArrayBuffer,
+      file,
+    )
+    input.value = ""
+  }
+
+  reader.onerror = () => {
+    input.value = ""
+  }
+
+  if (props.readAs === "arrayBuffer") {
+    reader.readAsArrayBuffer(file)
+  } else {
+    reader.readAsText(file)
+  }
+}
+
+/** Programmatically open the file picker (toolbar button should call this). */
+const openPicker = () => {
+  nativeInput.value?.click()
+}
+
+defineExpose({ openPicker, trigger: openPicker })
+</script>
+
+<style scoped>
+.raclette-file-upload-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+</style>
+