@raclettejs/core 0.1.37 → 0.1.39

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
@@ -220,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
@@ -246,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"
@@ -283,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
@@ -290,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>
@@ -353,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
 
   /**
@@ -394,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>>(), {
@@ -409,6 +519,8 @@ const props = withDefaults(defineProps<BaseDataTableProps<T>>(), {
   showSearch: true,
   showLoading: true,
   filterMaxSelectOptions: 300,
+  filterDrawerAttach: "auto",
+  toolbarIndicators: () => [],
   itemValue: "_id",
   groupBy: undefined,
   actionsHeaderTitle: "",
@@ -424,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<{
@@ -431,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
   }
-  if (groupBy.length === 0) return undefined
-  if (typeof groupBy[0] === "string") {
-    return groupBy.map((key) => ({ key, order: "asc" as const }))
+  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 groupBy as readonly VuetifyGroupByItem[]
+  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 (props.getDeleteConfirmMessage) {
+    return props.getDeleteConfirmMessage(item)
+  }
+  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",
@@ -505,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
   })
@@ -520,6 +739,8 @@ const showTopToolbar = computed(
     Boolean(props.onFileLoaded) ||
     hasSlotContent("toolbar-start") ||
     hasSlotContent("toolbar-leading") ||
+    hasSlotContent("toolbar-indicators") ||
+    hasToolbarIndicators.value ||
     hasSlotContent("toolbar-end"),
 )
 
@@ -561,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,
@@ -578,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,
@@ -793,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
   }
@@ -941,6 +1174,10 @@ const filterDrawerFooterSlotProps = computed(() => ({
   filters: draftFilterPayload.value,
   context: actionContext(),
 }))
+
+const toolbarIndicatorsSlotProps = computed(() => ({
+  indicators: props.toolbarIndicators ?? [],
+}))
 </script>
 
 <style lang="css">
@@ -1005,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>

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

@@ -0,0 +1,72 @@
+<template>
+  <v-navigation-drawer
+    v-if="!contained"
+    :model-value="modelValue"
+    location="right"
+    temporary
+    :width="width"
+    :aria-label="ariaLabel"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <slot />
+  </v-navigation-drawer>
+
+  <template v-else>
+    <div
+      v-if="modelValue"
+      class="base-data-table-filter-scrim"
+      aria-hidden="true"
+      @click="emit('update:modelValue', false)"
+    />
+    <aside
+      v-if="modelValue"
+      class="base-data-table-filter-panel"
+      :class="{ 'base-data-table-filter-panel--contained': contained }"
+      :style="contained ? undefined : { width: `${width}px` }"
+      :aria-label="ariaLabel"
+    >
+      <slot />
+    </aside>
+  </template>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  modelValue: boolean
+  contained: boolean
+  width: number
+  ariaLabel: string
+}>()
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean]
+}>()
+</script>
+
+<style scoped>
+.base-data-table-filter-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.base-data-table-filter-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 4;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  box-sizing: border-box;
+  background: rgb(var(--v-theme-surface));
+  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
+}
+
+.base-data-table-filter-panel--contained {
+  width: min(100%, 360px);
+  max-width: 100%;
+}
+</style>

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

@@ -3,6 +3,7 @@ import DefaultModal from "./modal/DefaultModal.vue"
 import DraggableElement from "./dragAndDrop/DraggableElement.vue"
 import DropzoneElement from "./dragAndDrop/DropzoneElement.vue"
 import ErrorWidgetState from "./ErrorWidgetState.vue"
+import CompositionLoadingState from "./CompositionLoadingState.vue"
 import LoadingWidgetState from "./LoadingWidgetState.vue"
 import LoginForm from "./authentication/LoginForm.vue"
 import PageNavigationSidebar from "./navigation/PageNavigationSidebar.vue"
@@ -18,13 +19,16 @@ 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 BaseDataTableConfirmDeleteBtn from "./dataTable/BaseDataTableConfirmDeleteBtn.vue"
 import FileUpload from "./input/FileUpload.vue"
 
 export {
   ImportSelectionDialog,
   ImportSummaryDialog,
   BaseDataTable,
+  BaseDataTableConfirmDeleteBtn,
   FileUpload,
+  CompositionLoadingState,
   CompositionOverlay,
   DataExporter,
   DefaultModal,

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

@@ -5,3 +5,4 @@ export * from "./useWidgets"
 export * from "./useInteractionLinks"
 export * from "./useWidgetLifecycle"
 export * from "./useExport"
+export * from "./useBaseDataTableDeleteConfirm"

package/services/frontend/src/orchestrator/composables/useBaseDataTableDeleteConfirm.ts

@@ -0,0 +1,23 @@
+import { inject, type InjectionKey } from "vue"
+
+export type RequestDeleteFn = <T>(
+  item: T,
+  onConfirm: () => void | Promise<void>,
+) => void
+
+export const BASE_DATA_TABLE_REQUEST_DELETE_KEY: InjectionKey<RequestDeleteFn> =
+  Symbol("baseDataTableRequestDelete")
+
+/**
+ * Call from `#row-actions` (or descendants) inside `BaseDataTable` to run delete
+ * through the table's optional confirmation dialog.
+ */
+export const useBaseDataTableDeleteConfirm = () => {
+  const requestDelete = inject(BASE_DATA_TABLE_REQUEST_DELETE_KEY)
+  if (!requestDelete) {
+    throw new Error(
+      "useBaseDataTableDeleteConfirm must be used within BaseDataTable",
+    )
+  }
+  return { requestDelete }
+}