@raclettejs/core 0.1.36 → 0.1.38

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

@@ -1,5 +1,11 @@
 <template>
-  <div>
+  <div
+    class="base-data-table-host tw:relative tw:min-h-0"
+    :class="{
+      'base-data-table-host--filter-open':
+        isFilterDrawerContained && isFilterDrawerOpen,
+    }"
+  >
     <v-data-table
       v-model="selected"
       :search="showSearch ? search : undefined"
@@ -43,6 +49,22 @@
               class="tw:flex tw:min-w-0 tw:w-full tw:flex-wrap tw:items-center tw:justify-end tw:gap-2"
             >
               <slot name="toolbar-leading" />
+              <slot
+                name="toolbar-indicators"
+                v-bind="toolbarIndicatorsSlotProps"
+              >
+                <v-chip
+                  v-for="indicator in toolbarIndicators"
+                  :key="indicator.id"
+                  :color="indicator.color"
+                  :prepend-icon="indicator.icon"
+                  label
+                  size="small"
+                  variant="tonal"
+                >
+                  {{ indicator.label }}
+                </v-chip>
+              </slot>
               <slot name="toolbar-end" />
               <slot
                 name="toolbar-filters-trigger"
@@ -68,11 +90,30 @@
                   <template #activator="{ props: menuProps }">
                     <v-btn
                       v-bind="menuProps"
-                      icon="mdi-dots-vertical"
                       variant="text"
                       density="comfortable"
                       :aria-label="$t('core.baseDataTable.actionsMenu')"
-                    />
+                    >
+                      <v-badge
+                        v-if="hasToolbarIndicators"
+                        dot
+                        :color="toolbarIndicators[0]?.color ?? 'primary'"
+                        :content="
+                          toolbarIndicators.length > 1
+                            ? toolbarIndicators.length
+                            : undefined
+                        "
+                      >
+                        <v-icon icon="mdi-dots-vertical" />
+                      </v-badge>
+                      <v-icon v-else icon="mdi-dots-vertical" />
+                      <v-tooltip
+                        v-if="hasToolbarIndicators"
+                        activator="parent"
+                        location="bottom"
+                        :text="activeModesTooltip"
+                      />
+                    </v-btn>
                   </template>
                   <v-list density="compact" nav min-width="260">
                     <slot
@@ -142,6 +183,7 @@
             :disabled="!selected.length"
             :formats="exportFormats"
             :default-format="exportDefaultFormat"
+            :show-data-scope-switch="exportShowDataScopeSwitch"
             :button-label="$t('core.export')"
           />
         </slot>
@@ -219,14 +261,14 @@
     <!-- Additional dialogs slot -->
     <slot name="dialogs" />
 
-    <v-navigation-drawer
+    <BaseDataTableFilterDrawerShell
+      v-if="showFilters"
       v-model="isFilterDrawerOpen"
-      location="right"
-      temporary
-      width="360"
+      :contained="isFilterDrawerContained"
+      :width="filterDrawerWidth"
       :aria-label="$t('core.baseDataTable.filters')"
     >
-      <div class="tw:flex tw:flex-col tw:h-full">
+      <div class="tw:flex tw:flex-col tw:h-full tw:min-h-0">
         <slot name="filters.summary" v-bind="filterSummarySlotProps" />
         <slot name="filters.drawer.header" v-bind="filterDrawerHeaderSlotProps">
           <div
@@ -245,35 +287,47 @@
           </div>
         </slot>
 
-        <slot name="filters.drawer.body" v-bind="filterDrawerBodySlotProps">
-          <div class="tw:px-4 tw:pb-4 tw:flex tw:flex-col tw:gap-3">
-            <template v-for="header in filterableHeaders" :key="String(header.key)">
-              <v-autocomplete
-                v-if="columnUsesComboboxFilter(String(header.key))"
-                v-model="columnFilters[String(header.key)]"
-                @update:model-value="notifyFilterStateChange"
-                :items="filterOptionsByKey[String(header.key)] ?? []"
-                :label="header.title"
-                clearable
-                hide-details
-                density="compact"
-                variant="outlined"
-              />
-              <v-text-field
-                v-else
-                v-model="columnFilters[String(header.key)]"
-                @update:model-value="notifyFilterStateChange"
-                :label="header.title"
-                clearable
-                hide-details
-                density="compact"
-                variant="outlined"
-              />
-            </template>
-          </div>
-        </slot>
+        <div class="tw:flex-1 tw:min-h-0 tw:overflow-y-auto">
+          <slot name="filters.drawer.body" v-bind="filterDrawerBodySlotProps">
+            <div class="tw:px-4 tw:pb-4 tw:flex tw:flex-col tw:gap-3">
+              <template
+                v-for="header in filterableHeaders"
+                :key="String(header.key)"
+              >
+                <v-autocomplete
+                  v-if="columnUsesComboboxFilter(String(header.key))"
+                  v-model="columnFilters[String(header.key)]"
+                  @update:model-value="notifyFilterStateChange"
+                  :items="filterOptionsByKey[String(header.key)] ?? []"
+                  :label="header.title"
+                  clearable
+                  hide-details
+                  density="compact"
+                  variant="outlined"
+                />
+                <v-text-field
+                  v-else
+                  v-model="columnFilters[String(header.key)]"
+                  @update:model-value="notifyFilterStateChange"
+                  :label="header.title"
+                  clearable
+                  hide-details
+                  density="compact"
+                  variant="outlined"
+                />
+              </template>
+            </div>
+          </slot>
+        </div>
 
-        <div class="tw:mt-auto tw:px-4 tw:pb-4 tw:pt-2 tw:flex tw:gap-2">
+        <div
+          class="base-data-table-filter-drawer-footer tw:mt-auto tw:px-4 tw:pt-2 tw:flex tw:gap-2 tw:bg-surface tw:z-10"
+          :class="{
+            'base-data-table-filter-drawer-footer--contained':
+              isFilterDrawerContained,
+          }"
+          :style="filterDrawerFooterStyle"
+        >
           <slot
             name="filters.drawer.footer"
             v-bind="filterDrawerFooterSlotProps"
@@ -282,6 +336,7 @@
               variant="outlined"
               prepend-icon="mdi-filter-remove"
               :text="$t('core.baseDataTable.resetFilters')"
+              class="base-data-table-filter-drawer-footer-btn"
               @click="resetFilters"
             />
             <v-btn
@@ -289,25 +344,66 @@
               variant="flat"
               prepend-icon="mdi-check"
               :text="$t('core.baseDataTable.applyFilters')"
+              class="base-data-table-filter-drawer-footer-btn"
               @click="applyFilters"
             />
           </slot>
         </div>
       </div>
-    </v-navigation-drawer>
+    </BaseDataTableFilterDrawerShell>
+
+    <v-dialog v-model="deleteDialogOpen" max-width="400">
+      <v-card>
+        <v-card-title>{{ resolvedDeleteConfirmTitle }}</v-card-title>
+        <v-card-text>{{ deleteConfirmMessageText }}</v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="cancelDelete">
+            {{ $t("core.cancel") }}
+          </v-btn>
+          <v-btn color="error" @click="confirmDeleteAction">
+            {{ $t("core.baseDataTable.delete") }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
 <script setup lang="ts" generic="T extends Record<string, any>">
-import { Comment, computed, ref, useSlots, useTemplateRef, watch } from "vue"
+import {
+  Comment,
+  computed,
+  inject,
+  provide,
+  ref,
+  useSlots,
+  useTemplateRef,
+  watch,
+} from "vue"
+import { useI18n } from "vue-i18n"
 import DataExporter from "@racletteOrchestrator/components/dataExport/DataExporter.vue"
 import FileUpload from "@racletteOrchestrator/components/input/FileUpload.vue"
+import BaseDataTableFilterDrawerShell from "@racletteOrchestrator/components/dataTable/BaseDataTableFilterDrawerShell.vue"
+import {
+  WIDGET_SLOT_TYPE_KEY,
+  type WidgetSlotType,
+} from "@racletteOrchestrator/constants/widgetSlotType"
+import { BASE_DATA_TABLE_REQUEST_DELETE_KEY } from "@racletteOrchestrator/composables/useBaseDataTableDeleteConfirm"
+import configService from "@racletteCore/lib/configService"
 import type {
   ExportPayload,
   FormatEntry,
 } from "@racletteOrchestrator/composables/useExport/types"
 import type { DataTableItem } from "vuetify/lib/components/VDataTable/types"
 
+export interface BaseDataTableToolbarIndicator {
+  id: string
+  label: string
+  color?: string
+  icon?: string
+}
+
 export interface BaseDataTableActionContext<T> {
   item?: T
   filters: Record<string, string>
@@ -352,10 +448,18 @@ export interface BaseDataTableProps<T> {
   showLoading?: boolean
   /** Max distinct values per column before filter falls back to a text field. */
   filterMaxSelectOptions?: number
+  /**
+   * Where the filter drawer attaches: `auto` uses parent containment when
+   * `WidgetsLayoutLoader` slotType is `modal`, otherwise full viewport.
+   */
+  filterDrawerAttach?: "auto" | "viewport" | "parent"
+  /** Generic toolbar mode indicators (badge on ⋮ menu, optional chips). */
+  toolbarIndicators?: BaseDataTableToolbarIndicator[]
 
   itemValue?: string
   /** Vuetify group-by key(s), e.g. `"project"` for project-grouped rows. */
   groupBy?: string | readonly string[]
+  /** Overrides `core.baseDataTable.actions` for the row-actions column header. */
   actionsHeaderTitle?: string
 
   /**
@@ -364,6 +468,13 @@ export interface BaseDataTableProps<T> {
    */
   exportableItems?: Record<string, unknown>[]
   exportMeta?: Record<string, unknown>
+  /**
+   * `visible-columns` (default): export only keys present in `headers`.
+   * `full-records`: export matched rows as-is (for round-trip import of canonical records).
+   */
+  exportRowShape?: "visible-columns" | "full-records"
+  /** When false, hides the DataExporter items/meta/combined scope toggle. */
+  exportShowDataScopeSwitch?: boolean
 
   /** Formats offered in the export menu (workbench list tables default to JSON only). */
   exportFormats?: FormatEntry[]
@@ -386,6 +497,13 @@ export interface BaseDataTableProps<T> {
     payload: Record<string, string>,
     context: BaseDataTableActionContext<T>,
   ) => void
+
+  /** When true (default), row deletes via `requestDelete` show a confirmation dialog. */
+  confirmDelete?: boolean
+  deleteConfirmTitle?: string
+  getDeleteConfirmMessage?: (item: T) => string
+  /** Used when `itemsDeleted` is true (hard-delete mode). Falls back to soft-delete message. */
+  getHardDeleteConfirmMessage?: (item: T) => string
 }
 
 const props = withDefaults(defineProps<BaseDataTableProps<T>>(), {
@@ -401,11 +519,15 @@ const props = withDefaults(defineProps<BaseDataTableProps<T>>(), {
   showSearch: true,
   showLoading: true,
   filterMaxSelectOptions: 300,
+  filterDrawerAttach: "auto",
+  toolbarIndicators: () => [],
   itemValue: "_id",
   groupBy: undefined,
   actionsHeaderTitle: "",
   exportableItems: undefined,
   exportMeta: undefined,
+  exportRowShape: "visible-columns",
+  exportShowDataScopeSwitch: true,
   exportFormats: () => ["json"] as FormatEntry[],
   exportDefaultFormat: "json",
   onFileLoaded: undefined,
@@ -414,6 +536,10 @@ const props = withDefaults(defineProps<BaseDataTableProps<T>>(), {
   onFilterStateChange: undefined,
   onFilterApply: undefined,
   onFilterReset: undefined,
+  confirmDelete: true,
+  deleteConfirmTitle: undefined,
+  getDeleteConfirmMessage: undefined,
+  getHardDeleteConfirmMessage: undefined,
 })
 
 const emit = defineEmits<{
@@ -421,28 +547,130 @@ const emit = defineEmits<{
   "update:currentItems": [items: readonly DataTableItem<T>[]]
 }>()
 
-type VuetifyGroupByItem = { key: string; order?: "asc" | "desc" }
+const { t } = useI18n()
 
-/** Vuetify expects `{ key }[]`; accept plain column key(s) from callers. */
-const resolvedGroupBy = computed((): readonly VuetifyGroupByItem[] | undefined => {
-  const groupBy = props.groupBy
-  if (!groupBy) return undefined
-  if (typeof groupBy === "string") {
-    return [{ key: groupBy, order: "asc" }]
+const widgetSlotType = inject(WIDGET_SLOT_TYPE_KEY, ref<WidgetSlotType>("page"))
+
+const resolvedFilterDrawerAttach = computed(() => {
+  if (props.filterDrawerAttach !== "auto") {
+    return props.filterDrawerAttach
+  }
+  return widgetSlotType.value === "modal" ? "parent" : "viewport"
+})
+
+const isFilterDrawerContained = computed(
+  () => resolvedFilterDrawerAttach.value === "parent",
+)
+
+const filterDrawerWidth = computed(() =>
+  isFilterDrawerContained.value ? 320 : 360,
+)
+
+const showRacletteFooterAdvert = computed(() =>
+  configService.getPleaseLetUsAdvertiseOurselves(),
+)
+
+const filterDrawerFooterStyle = computed(() => {
+  const style: Record<string, string> = {
+    paddingBottom: "1rem",
+  }
+  if (!isFilterDrawerContained.value && showRacletteFooterAdvert.value) {
+    style.paddingBottom = "4.5rem"
+  }
+  return style
+})
+
+const hasToolbarIndicators = computed(
+  () => (props.toolbarIndicators?.length ?? 0) > 0,
+)
+
+const activeModesTooltip = computed(() => {
+  if (!hasToolbarIndicators.value) {
+    return ""
+  }
+  return t("core.baseDataTable.activeModesTooltip", {
+    modes: (props.toolbarIndicators ?? []).map((indicator) => indicator.label).join(", "),
+  })
+})
+
+const deleteDialogOpen = ref(false)
+const pendingDeleteItem = ref<T | null>(null)
+let pendingDeleteCallback: (() => void | Promise<void>) | null = null
+
+const resolvedDeleteConfirmTitle = computed(
+  () => props.deleteConfirmTitle ?? t("core.baseDataTable.confirmDeleteTitle"),
+)
+
+const deleteConfirmMessageText = computed(() => {
+  const item = pendingDeleteItem.value
+  if (!item) return ""
+  if (props.itemsDeleted && props.getHardDeleteConfirmMessage) {
+    return props.getHardDeleteConfirmMessage(item)
   }
-  if (groupBy.length === 0) return undefined
-  if (typeof groupBy[0] === "string") {
-    return groupBy.map((key) => ({ key, order: "asc" as const }))
+  if (props.getDeleteConfirmMessage) {
+    return props.getDeleteConfirmMessage(item)
   }
-  return groupBy as readonly VuetifyGroupByItem[]
+  const name = String((item as Record<string, unknown>)._id ?? "")
+  const key = props.itemsDeleted
+    ? "core.baseDataTable.confirmHardDeleteMessage"
+    : "core.baseDataTable.confirmDeleteMessage"
+  return t(key, { name })
 })
 
+const requestDelete = <Item,>(
+  item: Item,
+  onConfirm: () => void | Promise<void>,
+) => {
+  if (!props.confirmDelete) {
+    void onConfirm()
+    return
+  }
+  pendingDeleteItem.value = item as T
+  pendingDeleteCallback = onConfirm
+  deleteDialogOpen.value = true
+}
+
+const cancelDelete = () => {
+  deleteDialogOpen.value = false
+  pendingDeleteItem.value = null
+  pendingDeleteCallback = null
+}
+
+const confirmDeleteAction = () => {
+  const callback = pendingDeleteCallback
+  cancelDelete()
+  if (callback) {
+    void callback()
+  }
+}
+
+provide(BASE_DATA_TABLE_REQUEST_DELETE_KEY, requestDelete)
+
+type VuetifyGroupByItem = { key: string; order?: "asc" | "desc" }
+
+/** Vuetify expects `{ key }[]`; accept plain column key(s) from callers. */
+const resolvedGroupBy = computed(
+  (): readonly VuetifyGroupByItem[] | undefined => {
+    const groupBy = props.groupBy
+    if (!groupBy) return undefined
+    if (typeof groupBy === "string") {
+      return [{ key: groupBy, order: "asc" }]
+    }
+    if (groupBy.length === 0) return undefined
+    if (typeof groupBy[0] === "string") {
+      return groupBy.map((key) => ({ key, order: "asc" as const }))
+    }
+    return groupBy as readonly VuetifyGroupByItem[]
+  },
+)
+
 const slots = useSlots()
 
 /** Slots owned by BaseDataTable chrome (toolbar, filters drawer, row actions, export). */
 const BASE_DATA_TABLE_RESERVED_SLOTS = new Set([
   "toolbar-start",
   "toolbar-leading",
+  "toolbar-indicators",
   "toolbar-end",
   "toolbar-filters-trigger",
   "toolbar-actions-trigger",
@@ -495,7 +723,8 @@ const hasSlotContent = (name: string) => {
   if (!slot) return false
   return slot().some((vnode) => {
     if (vnode.type === Comment) return false
-    if (typeof vnode.children === "string") return vnode.children.trim().length > 0
+    if (typeof vnode.children === "string")
+      return vnode.children.trim().length > 0
     if (Array.isArray(vnode.children)) return vnode.children.length > 0
     return true
   })
@@ -510,6 +739,8 @@ const showTopToolbar = computed(
     Boolean(props.onFileLoaded) ||
     hasSlotContent("toolbar-start") ||
     hasSlotContent("toolbar-leading") ||
+    hasSlotContent("toolbar-indicators") ||
+    hasToolbarIndicators.value ||
     hasSlotContent("toolbar-end"),
 )
 
@@ -551,8 +782,7 @@ const computedHeaders = computed(() => {
   const headers = [...props.headers].map((header) => {
     const key = String(header.key)
     const hasFilter =
-      props.showFilters &&
-      appliedColumnFilters.value[key]?.trim()?.length > 0
+      props.showFilters && appliedColumnFilters.value[key]?.trim()?.length > 0
     return {
       ...header,
       title: header.title,
@@ -568,11 +798,10 @@ const computedHeaders = computed(() => {
         : {}),
     }
   })
-
   // Add actions column if needed
   if (props.showActionsColumn) {
     headers.push({
-      title: props.actionsHeaderTitle || "Actions",
+      title: props.actionsHeaderTitle || t("core.baseDataTable.actions"),
       key: "actions",
       align: "end" as const,
       sortable: false,
@@ -676,6 +905,11 @@ const projectRowsToVisibleColumns = <TRow extends Record<string, unknown>>(
   })
 }
 
+const shapeExportRows = <TRow extends Record<string, unknown>>(rows: TRow[]) =>
+  props.exportRowShape === "full-records"
+    ? rows
+    : projectRowsToVisibleColumns(rows)
+
 /** Rows passed to DataExporter when something is selected. */
 const exportPayloadData = computed<ExportPayload>(() => {
   const idKey = props.itemValue as keyof T
@@ -709,7 +943,7 @@ const exportPayloadData = computed<ExportPayload>(() => {
       .filter((row): row is Record<string, unknown> => row !== undefined)
 
     return {
-      items: projectRowsToVisibleColumns(selectedExportRows),
+      items: shapeExportRows(selectedExportRows),
       ...(props.exportMeta ? { meta: props.exportMeta } : {}),
     }
   }
@@ -728,7 +962,7 @@ const exportPayloadData = computed<ExportPayload>(() => {
   }) as Record<string, unknown>[]
 
   return {
-    items: projectRowsToVisibleColumns(selectedRows),
+    items: shapeExportRows(selectedRows),
     ...(props.exportMeta ? { meta: props.exportMeta } : {}),
   }
 })
@@ -778,11 +1012,25 @@ const isSelectionControlClick = (event: PointerEvent) => {
   )
 }
 
+const isInteractiveRowClick = (event: PointerEvent) => {
+  const target = event.target
+  if (!(target instanceof Element)) return false
+  return Boolean(
+    target.closest(
+      "button, a, input, textarea, select, label, [role='button'], .v-btn, .v-btn-group",
+    ),
+  )
+}
+
 const handleRowClick = (event: PointerEvent, row: { item: T }) => {
   if (showSelectColumn.value && isSelectionControlClick(event)) {
     return
   }
 
+  if (isInteractiveRowClick(event)) {
+    return
+  }
+
   if (props.rowClickHandler && !isItemRowClickable(row.item)) {
     return
   }
@@ -816,8 +1064,14 @@ const notifyFilterStateChange = () => {
   }
 }
 
+/** Selection is tied to visible rows; clear when applied filters change. */
+const clearExportSelection = () => {
+  selected.value = []
+}
+
 const applyFilters = () => {
   appliedColumnFilters.value = { ...columnFilters.value }
+  clearExportSelection()
   if (props.onFilterApply) {
     props.onFilterApply(appliedFilterPayload.value, actionContext())
   } else {
@@ -828,6 +1082,7 @@ const applyFilters = () => {
 const resetFilters = () => {
   columnFilters.value = {}
   appliedColumnFilters.value = {}
+  clearExportSelection()
   if (props.onFilterReset) {
     props.onFilterReset({}, actionContext())
   } else {
@@ -876,6 +1131,7 @@ const exporterSlotProps = computed(() => ({
   disabled: !selected.value.length,
   formats: props.exportFormats,
   defaultFormat: props.exportDefaultFormat,
+  showDataScopeSwitch: props.exportShowDataScopeSwitch,
   isExportMode: isExportMode.value,
   selectedCount: selected.value.length,
 }))
@@ -918,6 +1174,10 @@ const filterDrawerFooterSlotProps = computed(() => ({
   filters: draftFilterPayload.value,
   context: actionContext(),
 }))
+
+const toolbarIndicatorsSlotProps = computed(() => ({
+  indicators: props.toolbarIndicators ?? [],
+}))
 </script>
 
 <style lang="css">
@@ -982,4 +1242,24 @@ const filterDrawerFooterSlotProps = computed(() => ({
 .filtered-column-cell {
   background-color: rgba(var(--v-theme-info), 0.1);
 }
+
+.base-data-table-host--filter-open {
+  overflow: hidden;
+}
+
+.base-data-table-filter-drawer-footer {
+  position: sticky;
+  bottom: 0;
+}
+
+.base-data-table-filter-drawer-footer--contained {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.base-data-table-filter-drawer-footer--contained
+  :deep(.base-data-table-filter-drawer-footer-btn) {
+  width: 100%;
+  max-width: 100%;
+}
 </style>

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

@@ -0,0 +1,27 @@
+<template>
+  <v-btn
+    icon="mdi-delete"
+    size="small"
+    variant="text"
+    color="error"
+    @click.stop.prevent="handleClick"
+  />
+</template>
+
+<script setup lang="ts" generic="T">
+import { useBaseDataTableDeleteConfirm } from "@racletteOrchestrator/composables/useBaseDataTableDeleteConfirm"
+
+const props = defineProps<{
+  item: T
+}>()
+
+const emit = defineEmits<{
+  delete: [item: T]
+}>()
+
+const { requestDelete } = useBaseDataTableDeleteConfirm()
+
+const handleClick = () => {
+  requestDelete(props.item, () => emit("delete", props.item))
+}
+</script>