@raclettejs/core 0.1.31 → 0.1.32-nightly-1

package/services/frontend/src/orchestrator/components/dataExport/DataExporter.vue

@@ -0,0 +1,303 @@
+<template>
+  <v-menu
+    v-model="isOpen"
+    :close-on-content-click="false"
+    location="bottom end"
+    offset="8"
+    :max-width="520"
+    :min-width="360"
+  >
+    <template #activator="{ props: menuProps }">
+      <slot v-if="$slots.default" v-bind="triggerSlotProps" />
+      <v-btn
+        v-else
+        v-bind="{ ...menuProps, ...$attrs }"
+        :disabled="disabled"
+        :variant="$attrs.variant || 'tonal'"
+        color="info"
+        prepend-icon="mdi-export-variant"
+        class="tw:font-medium"
+        density="compact"
+        @click="open"
+      >
+        {{ buttonLabel }}
+      </v-btn>
+    </template>
+
+    <v-card rounded="lg" elevation="8" :style="{ width: '360px' }">
+      <!-- Header -->
+      <div class="tw:flex tw:items-center tw:justify-between tw:px-4 tw:pt-4 tw:pb-2">
+        <div class="tw:flex tw:items-center tw:gap-2">
+          <v-icon icon="mdi-export-variant" size="18" color="primary" />
+          <span class="tw:text-sm tw:font-semibold tw:tracking-wide tw:uppercase tw:opacity-70">
+            {{ $t("core.dataExporter.title") }}
+          </span>
+        </div>
+        <v-btn icon="mdi-close" variant="text" size="x-small" @click="isOpen = false" />
+      </div>
+
+      <v-divider />
+
+      <!-- Format tabs -->
+      <div class="tw:px-4 tw:pt-3 tw:pb-1">
+        <v-chip-group
+          v-model="activeFormatId"
+          mandatory
+          selected-class="text-primary"
+          class="tw:gap-1"
+        >
+          <v-chip
+            v-for="fmt in resolvedFormats"
+            :key="fmt.id"
+            :value="fmt.id"
+            size="small"
+            variant="tonal"
+            class="tw:font-mono tw:text-xs"
+          >
+            {{ fmt.label }}
+          </v-chip>
+        </v-chip-group>
+      </div>
+
+      <!-- Data scope switch — only shown when both items AND meta exist -->
+      <div
+        v-if="showScopeSwitch"
+        class="tw:px-4 tw:py-1 tw:flex tw:items-center tw:justify-between tw:gap-2"
+      >
+        <span class="tw:text-xs tw:opacity-60 tw:uppercase tw:tracking-wide">
+          {{ $t("core.dataExporter.scopeLabel") }}
+        </span>
+        <v-btn-toggle v-model="selectedScope" divided density="compact" mandatory>
+          <v-btn value="combined" size="x-small">
+            {{ $t("core.dataExporter.scopeCombined") }}
+          </v-btn>
+          <v-btn value="items" size="x-small">
+            {{ $t("core.dataExporter.scopeItems") }}
+          </v-btn>
+          <v-btn value="meta" size="x-small">
+            {{ $t("core.dataExporter.scopeMeta") }}
+          </v-btn>
+        </v-btn-toggle>
+      </div>
+
+      <!-- No formats warning -->
+      <div v-if="resolvedFormats.length === 0" class="tw:px-4 tw:py-6 tw:text-center">
+        <v-icon icon="mdi-alert-circle-outline" color="warning" class="tw:mb-2" />
+        <p class="tw:text-sm tw:opacity-60">{{ $t("core.dataExporter.noValidFormats") }}</p>
+      </div>
+
+      <!-- Preview pane -->
+      <div v-else class="tw:px-4 tw:pt-1 tw:pb-4">
+        <!-- Preview toggle -->
+        <v-btn
+          variant="text"
+          density="compact"
+          class="tw:mb-1.5 tw:w-full tw:justify-start tw:normal-case tw:text-xs tw:opacity-60 hover:tw:opacity-90"
+          @click="previewOpen = !previewOpen"
+        >
+          <template #prepend>
+            <v-icon
+              :icon="previewOpen ? 'mdi-chevron-down' : 'mdi-chevron-right'"
+              size="14"
+            />
+          </template>
+          {{ $t("core.dataExporter.preview") }}
+        </v-btn>
+
+        <!-- Fixed-height container prevents width reflow when toggling -->
+        <div class="tw:overflow-hidden" :style="{ height: previewOpen ? 'auto' : '0px', minHeight: previewOpen ? '0px' : undefined }">
+          <v-expand-transition>
+            <div v-show="previewOpen">
+              <!-- Serialization error -->
+              <v-alert
+                v-if="!serializeResult.ok"
+                type="error"
+                variant="tonal"
+                density="compact"
+                class="tw:mb-2 tw:font-mono tw:text-xs"
+              >
+                <pre class="tw:whitespace-pre-wrap tw:break-all">{{ serializeResult.error }}</pre>
+              </v-alert>
+
+              <!-- Preview code block -->
+              <div
+                v-else
+                class="tw:rounded-lg tw:overflow-hidden tw:border tw:border-black/10 dark:tw:border-white/10"
+              >
+                <!-- Toolbar -->
+                <div
+                  class="tw:flex tw:items-center tw:justify-between tw:px-3 tw:py-1.5 tw:bg-black/5 dark:tw:bg-white/5 tw:border-b tw:border-black/10 dark:tw:border-white/10"
+                >
+                  <span class="tw:font-mono tw:text-[10px] tw:uppercase tw:tracking-widest tw:opacity-50">
+                    {{ activeFormatId }}
+                  </span>
+                  <span class="tw:font-mono tw:text-[10px] tw:opacity-40">
+                    {{ previewLines.lineCount }}
+                    {{ $t("core.dataExporter.lines") }}
+                  </span>
+                </div>
+
+                <!-- Code content -->
+                <pre
+                  class="tw:text-xs tw:font-mono tw:p-3 tw:max-h-52 tw:overflow-auto tw:leading-relaxed tw:bg-black/[0.03] dark:tw:bg-white/[0.03] tw:m-0"
+                >{{ previewLines.text }}</pre>
+
+                <!-- Truncation notice -->
+                <div
+                  v-if="previewLines.truncated"
+                  class="tw:text-[10px] tw:text-center tw:py-1 tw:opacity-40 tw:bg-black/5 dark:tw:bg-white/5 tw:border-t tw:border-black/10 dark:tw:border-white/10"
+                >
+                  {{ $t("core.dataExporter.previewTruncatedAt", { count: PREVIEW_LINE_LIMIT }) }}
+                </div>
+              </div>
+            </div>
+          </v-expand-transition>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="tw:flex tw:gap-2 tw:mt-3">
+          <v-btn
+            v-if="clipboardSupported"
+            :disabled="!serializeResult.ok"
+            :color="copyState === 'success' ? 'success' : copyState === 'error' ? 'error' : 'primary'"
+            variant="tonal"
+            size="small"
+            class="tw:flex-1 tw:font-medium"
+            :prepend-icon="
+              copyState === 'success' ? 'mdi-check'
+              : copyState === 'error' ? 'mdi-alert-circle'
+              : 'mdi-content-copy'
+            "
+            @click="copyToClipboard"
+          >
+            {{
+              copyState === "success" ? $t("core.dataExporter.copied")
+              : copyState === "error" ? $t("core.dataExporter.copyFailed")
+              : $t("core.dataExporter.copy")
+            }}
+          </v-btn>
+          <v-btn
+            :disabled="!serializeResult.ok"
+            color="primary"
+            variant="flat"
+            size="small"
+            class="tw:flex-1 tw:font-medium"
+            prepend-icon="mdi-download"
+            @click="downloadFile"
+          >
+            {{ $t("core.dataExporter.download") }}
+          </v-btn>
+        </div>
+      </div>
+    </v-card>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue"
+import type {
+  RacletteExportProps,
+  FormatEntry,
+  ExportSuccessPayload,
+  ExportErrorPayload,
+  TriggerSlotProps,
+  ExportDataScope,
+} from "@racletteOrchestrator/composables/useExport/types"
+import { useExport } from "@racletteOrchestrator/composables/useExport"
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<RacletteExportProps>(), {
+  filename: "export",
+  formats: () => ["json", "yaml", "csv", "text"] as FormatEntry[],
+  buttonLabel: "Export",
+  disabled: false,
+  previewCollapsed: true,
+  showDataScopeSwitch: true,
+})
+
+const emit = defineEmits<{
+  "export-success": [payload: ExportSuccessPayload]
+  "export-error": [payload: ExportErrorPayload]
+}>()
+
+// ─── Popover State ────────────────────────────────────────────────────────────
+
+const isOpen = ref(false)
+const previewOpen = ref(!props.previewCollapsed)
+
+const hasItems = computed(() => props.data.items !== undefined)
+const hasMeta = computed(() => props.data.meta !== undefined)
+
+// Only show the toggle when BOTH sources exist and the prop allows it
+const showScopeSwitch = computed(
+  () => props.showDataScopeSwitch && hasItems.value && hasMeta.value,
+)
+
+// Derive the correct default: items if available, else meta, else combined
+const defaultScope = computed<ExportDataScope>(() => {
+  if (hasItems.value) return "items"
+  if (hasMeta.value) return "meta"
+  return "combined"
+})
+
+const selectedScope = ref<ExportDataScope>(defaultScope.value)
+
+// Keep scope valid when data shape changes at runtime
+watch(defaultScope, (next) => {
+  selectedScope.value = next
+})
+
+const scopedData = computed(() => {
+  if (selectedScope.value === "items") return props.data.items
+  if (selectedScope.value === "meta") return props.data.meta ?? {}
+  return props.data
+})
+
+const open = () => {
+  if (!props.disabled) isOpen.value = true
+}
+
+// ─── Export Logic ─────────────────────────────────────────────────────────────
+
+const {
+  resolvedFormats,
+  activeFormatId,
+  serializeResult,
+  copyToClipboard,
+  downloadFile,
+  copyState,
+  clipboardSupported,
+} = useExport({
+  data: () => scopedData.value,
+  formats: () => props.formats,
+  defaultFormat: () => props.defaultFormat,
+  filename: () => props.filename,
+  enabled: () => isOpen.value,
+  onSuccess: (p) => emit("export-success", p),
+  onError: (p) => emit("export-error", p),
+})
+
+// ─── Trigger Slot Props ───────────────────────────────────────────────────────
+
+const triggerSlotProps = computed<TriggerSlotProps>(() => ({
+  open,
+  isOpen: isOpen.value,
+  disabled: props.disabled,
+}))
+
+// ─── Preview lines ────────────────────────────────────────────────────────────
+
+const PREVIEW_LINE_LIMIT = 200
+
+const previewLines = computed<{ text: string; lineCount: number; truncated: boolean }>(() => {
+  if (!serializeResult.value.ok) return { text: "", lineCount: 0, truncated: false }
+  const lines = serializeResult.value.value.split("\n")
+  const truncated = lines.length > PREVIEW_LINE_LIMIT
+  return {
+    text: truncated ? lines.slice(0, PREVIEW_LINE_LIMIT).join("\n") : serializeResult.value.value,
+    lineCount: lines.length,
+    truncated,
+  }
+})
+</script>

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

@@ -0,0 +1,169 @@
+<template>
+  <v-dialog v-model="dialog" max-width="760" scrollable>
+    <v-card>
+      <v-card-title class="tw:flex tw:justify-between tw:items-center 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">
+        <div class="tw:flex tw:justify-between tw:items-center tw:mb-4 tw:gap-2">
+          <v-checkbox
+            :model-value="selectAll"
+            @update:model-value="toggleSelectAll"
+            :label="$t('core.selectAll')"
+            hide-details
+            density="compact"
+          />
+
+          <v-chip color="primary" variant="flat" size="small">
+            {{ selectedCount }} / {{ items.length }} {{ $t("core.selected") }}
+          </v-chip>
+        </div>
+
+        <v-list class="tw:max-h-96 tw:overflow-y-auto tw:border tw:rounded-md tw:py-0">
+          <v-list-item
+            v-for="item in items"
+            :key="item._id"
+            @click="toggleSelection(String(item._id))"
+            class="tw:cursor-pointer"
+          >
+            <template #prepend>
+              <v-checkbox-btn
+                :model-value="selected.includes(String(item._id))"
+                @update:model-value="(checked) => setSelection(String(item._id), checked)"
+                @click.stop
+              />
+            </template>
+
+            <v-list-item-title class="tw:text-sm">
+              {{ getDisplayValue(item) }}
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+
+        <v-alert
+          v-if="selectedCount === 0"
+          type="warning"
+          variant="tonal"
+          density="compact"
+          class="tw:mt-4"
+        >
+          {{ $t("core.noItemsSelected") }}
+        </v-alert>
+      </v-card-text>
+
+      <v-divider />
+
+      <v-card-actions class="tw:px-4 tw:py-3">
+        <v-spacer />
+        <v-btn variant="text" @click="close">
+          {{ $t("core.cancel") }}
+        </v-btn>
+
+        <v-btn
+          v-if="selectedCount"
+          @click="confirm"
+          :disabled="selectedCount === 0"
+          color="primary"
+          variant="flat"
+        >
+          {{ confirmText }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue"
+
+interface Props {
+  modelValue: boolean
+  items: any[]
+  displayAttribute: string
+  title: string
+  confirmText: string
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean]
+  confirm: [selectedIds: string[]]
+}>()
+
+const dialog = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+})
+
+const selected = ref<string[]>([])
+const selectAll = ref(false)
+
+const selectedCount = computed(() => selected.value.length)
+
+const getDisplayValue = (item: any) => {
+  return item[props.displayAttribute] || item._id
+}
+
+const toggleSelection = (id: string) => {
+  const index = selected.value.indexOf(id)
+  if (index > -1) {
+    selected.value.splice(index, 1)
+  } else {
+    selected.value.push(id)
+  }
+  updateSelectAllState()
+}
+
+const setSelection = (id: string, checked: boolean | null) => {
+  const isChecked = Boolean(checked)
+  const exists = selected.value.includes(id)
+  if (isChecked && !exists) {
+    selected.value.push(id)
+  } else if (!isChecked && exists) {
+    selected.value = selected.value.filter((selectedId) => selectedId !== id)
+  }
+  updateSelectAllState()
+}
+
+const toggleSelectAll = (value: boolean | null) => {
+  const enabled = Boolean(value)
+  if (enabled) {
+    selected.value = props.items.map((item) => String(item._id))
+  } else {
+    selected.value = []
+  }
+  selectAll.value = enabled
+}
+
+const updateSelectAllState = () => {
+  selectAll.value =
+    selected.value.length === props.items.length && props.items.length > 0
+}
+
+const close = () => {
+  dialog.value = false
+  selected.value = []
+  selectAll.value = false
+}
+
+const confirm = () => {
+  if (selectedCount.value > 0) {
+    emit("confirm", selected.value)
+    close()
+  }
+}
+
+// Initialize selectAll state when items change
+watch(
+  () => props.items,
+  () => {
+    updateSelectAllState()
+  },
+  { immediate: true },
+)
+</script>

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>