@raclettejs/core 0.1.34 → 0.1.36-canary.0

package/services/frontend/src/orchestrator/ProductOrchestrator.vue

@@ -65,15 +65,28 @@
     <v-main
       class="tw:flex tw:flex-col tw:min-h-0 tw:overflow-y-auto tw:h-screen"
       id="appMainContent"
+      :aria-busy="loading"
     >
       <div class="tw:w-full tw-h-1 tw:top-[49px]">
         <v-progress-linear
           :height="2"
           :indeterminate="loading"
           color="primary"
+          role="progressbar"
+          :aria-hidden="!loading"
+          :aria-label="$t('core.app_loading')"
         />
       </div>
 
+      <span
+        v-if="loading"
+        class="tw:sr-only"
+        role="status"
+        aria-live="polite"
+      >
+        {{ $t("core.app_loading") }}
+      </span>
+
       <component v-if="showWelcomeScreen" :is="welcomeScreenComponent" />
 
       <template v-else>
@@ -81,6 +94,7 @@
           v-if="widgetsLayout"
           class="tw:min-h-0 tw:pb-0"
           :class="{ '!tw:invisible': loading }"
+          :aria-hidden="loading"
           :widgets-layout="widgetsLayout"
           slot-type="page"
           :slot-layout="slotLayout"
@@ -259,7 +273,7 @@ const setTheme = (theme: "dark" | "light") => {
 onMounted(async () => {
   setTheme(theme.value)
   vuetifyLocale.current.value = locale.value
-  isDevelopment.value = true || isDevelopmentMode()
+  isDevelopment.value = isDevelopmentMode()
   logoExists.value = await checkImageExists(logoSrc.value)
   // check if we have a message from checkToken to display as a snackbar
   loginUserNotifications()

package/services/frontend/src/orchestrator/assets/styles/layers.css

@@ -1,8 +1,11 @@
+@layer tailwind-theme;
+@layer tailwind-reset;
+
 @layer vuetify-core;
 @layer vuetify-components;
 @layer vuetify-overrides;
 @layer vuetify-utilities;
 
-@layer tailwind; /* <-- our new utilities */
+@layer tailwind-utilities;
 
 @layer vuetify-final;

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

@@ -2,22 +2,26 @@
   <div>
     <v-data-table
       v-model="selected"
-      v-model:search="search"
+      :search="showSearch ? search : undefined"
       density="compact"
       :items-per-page="itemsPerPage"
       sticky
       fixed-header
       :headers="computedHeaders"
       :items="filteredItems"
-      :loading="loading"
+      :loading="showLoading ? loading : false"
+      :row-props="resolveRowProps"
       @click:row="handleRowClick"
       @update:current-items="(items) => emit('update:currentItems', items)"
       :class="{ itemsDeleted }"
-      :show-select="showExport && isExportMode"
+      :show-select="showSelectColumn"
       :item-value
+      :group-by="resolvedGroupBy"
+      :sort-by="sortBy"
     >
       <template #top>
         <v-toolbar
+          v-if="showTopToolbar"
           flat
           density="compact"
           class="base-data-table-toolbar tw:pr-2"
@@ -105,7 +109,7 @@
           </template>
         </v-toolbar>
 
-        <slot name="toolbar-search">
+        <slot v-if="showSearch" name="toolbar-search">
           <v-text-field
             v-model="search"
             :label="
@@ -192,8 +196,25 @@
         />
       </template>
 
-      <!-- Additional table slots (this caused the table to be empty) -->
-      <!-- <slot name="table-slots" /> -->
+      <!-- Always bridge tbody summary slots so v-data-table receives a stable slot (dynamic v-for is not reliable here). -->
+      <template #body.prepend="slotProps">
+        <slot name="body.prepend" v-bind="slotProps ?? {}" />
+      </template>
+      <template #body.append="slotProps">
+        <slot name="body.append" v-bind="slotProps ?? {}" />
+      </template>
+      <template #tfoot="slotProps">
+        <slot name="tfoot" v-bind="slotProps ?? {}" />
+      </template>
+
+      <!-- Forward remaining v-data-table slots (e.g. bottom, thead). -->
+      <template
+        v-for="slotName in vDataTablePassthroughSlots"
+        :key="slotName"
+        #[slotName]="slotProps"
+      >
+        <slot :name="slotName" v-bind="slotProps ?? {}" />
+      </template>
     </v-data-table>
     <!-- Additional dialogs slot -->
     <slot name="dialogs" />
@@ -226,17 +247,29 @@
 
         <slot name="filters.drawer.body" v-bind="filterDrawerBodySlotProps">
           <div class="tw:px-4 tw:pb-4 tw:flex tw:flex-col tw:gap-3">
-            <v-text-field
-              v-for="header in filterableHeaders"
-              :key="String(header.key)"
-              v-model="columnFilters[String(header.key)]"
-              @update:model-value="notifyFilterStateChange"
-              :label="header.title"
-              clearable
-              hide-details
-              density="compact"
-              variant="outlined"
-            />
+            <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>
 
@@ -266,7 +299,7 @@
 </template>
 
 <script setup lang="ts" generic="T extends Record<string, any>">
-import { computed, ref, useSlots, useTemplateRef } from "vue"
+import { Comment, computed, ref, useSlots, useTemplateRef, watch } from "vue"
 import DataExporter from "@racletteOrchestrator/components/dataExport/DataExporter.vue"
 import FileUpload from "@racletteOrchestrator/components/input/FileUpload.vue"
 import type {
@@ -296,19 +329,33 @@ export interface BaseDataTableProps<T> {
     width?: string | number
   }>
   itemsPerPage?: number
+  /** Initial / default column sort (Vuetify `{ key, order }[]`). */
+  sortBy?: ReadonlyArray<{ key: string; order: "asc" | "desc" }>
 
   // Row actions
   showActionsColumn?: boolean
 
   // Item processing
   rowClickHandler?: (item: T, context?: BaseDataTableActionContext<T>) => void
+  /** When set with `rowClickHandler`, only matching rows are clickable and show a pointer cursor. */
+  isRowClickable?: (item: T) => boolean
 
   dataName: string
 
   showExport?: boolean
+  /** Checkbox column for row selection (independent of export mode). */
+  showSelect?: boolean
   showFilters?: boolean
+  /** Show the search field above the table (default true). */
+  showSearch?: boolean
+  /** Pass loading state through to v-data-table (default true). */
+  showLoading?: boolean
+  /** Max distinct values per column before filter falls back to a text field. */
+  filterMaxSelectOptions?: number
 
   itemValue?: string
+  /** Vuetify group-by key(s), e.g. `"project"` for project-grouped rows. */
+  groupBy?: string | readonly string[]
   actionsHeaderTitle?: string
 
   /**
@@ -345,11 +392,17 @@ const props = withDefaults(defineProps<BaseDataTableProps<T>>(), {
   uuid: undefined,
   items: () => [],
   itemsDeleted: false,
-  itemsPerPage: 50,
+  itemsPerPage: 10,
+  sortBy: undefined,
   showActionsColumn: true,
   showExport: true,
+  showSelect: false,
   showFilters: false,
+  showSearch: true,
+  showLoading: true,
+  filterMaxSelectOptions: 300,
   itemValue: "_id",
+  groupBy: undefined,
   actionsHeaderTitle: "",
   exportableItems: undefined,
   exportMeta: undefined,
@@ -368,8 +421,65 @@ const emit = defineEmits<{
   "update:currentItems": [items: readonly DataTableItem<T>[]]
 }>()
 
+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-end",
+  "toolbar-filters-trigger",
+  "toolbar-actions-trigger",
+  "action.export-mode",
+  "action.import",
+  "toolbar-actions-menu",
+  "toolbar-search",
+  "importer",
+  "exporter",
+  "prepend-row-actions",
+  "row-actions",
+  "append-row-actions",
+  "dialogs",
+  "filters.summary",
+  "filters.drawer.header",
+  "filters.drawer.body",
+  "filters.drawer.footer",
+])
+
+const V_DATA_TABLE_BRIDGED_SLOTS = new Set([
+  "body.prepend",
+  "body.append",
+  "tfoot",
+])
+
+/** v-data-table slots supplied by the parent (e.g. bottom), excluding built-in handling. */
+const vDataTablePassthroughSlots = computed(() =>
+  Object.keys(slots).filter(
+    (name) =>
+      !BASE_DATA_TABLE_RESERVED_SLOTS.has(name) &&
+      !V_DATA_TABLE_BRIDGED_SLOTS.has(name) &&
+      !name.startsWith("item.") &&
+      name !== "loader" &&
+      name !== "top",
+  ),
+)
+
 /** Hide ⋮ when the menu would be empty (no export toggle, import, or slot content). */
 const showActionsOverflowMenu = computed(
   () =>
@@ -380,17 +490,58 @@ const showActionsOverflowMenu = computed(
     Boolean(slots["action.import"]),
 )
 
+const hasSlotContent = (name: string) => {
+  const slot = slots[name]
+  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 (Array.isArray(vnode.children)) return vnode.children.length > 0
+    return true
+  })
+}
+
+/** Toolbar hidden when no title, filters, export menu, import, or custom slot content. */
+const showTopToolbar = computed(
+  () =>
+    Boolean(props.dataName?.length) ||
+    Boolean(props.showFilters) ||
+    showActionsOverflowMenu.value ||
+    Boolean(props.onFileLoaded) ||
+    hasSlotContent("toolbar-start") ||
+    hasSlotContent("toolbar-leading") ||
+    hasSlotContent("toolbar-end"),
+)
+
 const importFileUploadRef = useTemplateRef<{
   openPicker: () => void
 }>("importFileUploadRef")
 
 // Reactive data
 const search = ref("")
-const selected = ref<Array<string | number>>([])
+const selected = defineModel<Array<string | number>>("selected", {
+  default: () => [],
+})
 const isExportMode = ref(false)
+const showSelectColumn = computed(
+  () => props.showSelect || (props.showExport && isExportMode.value),
+)
 const isActionsMenuOpen = ref(false)
 const isFilterDrawerOpen = ref(false)
+/** Draft values edited in the filter drawer (applied only on Apply). */
 const columnFilters = ref<Record<string, string>>({})
+/** Values currently filtering the table. */
+const appliedColumnFilters = ref<Record<string, string>>({})
+
+const syncDraftFiltersFromApplied = () => {
+  columnFilters.value = { ...appliedColumnFilters.value }
+}
+
+watch(isFilterDrawerOpen, (open) => {
+  if (open) {
+    syncDraftFiltersFromApplied()
+  }
+})
 
 const computedHeaders = computed(() => {
   if (!props.headers || !props.headers?.length) {
@@ -400,7 +551,8 @@ const computedHeaders = computed(() => {
   const headers = [...props.headers].map((header) => {
     const key = String(header.key)
     const hasFilter =
-      props.showFilters && columnFilters.value[key]?.trim()?.length > 0
+      props.showFilters &&
+      appliedColumnFilters.value[key]?.trim()?.length > 0
     return {
       ...header,
       title: header.title,
@@ -449,13 +601,42 @@ const filterableHeaders = computed(() =>
   }),
 )
 
+const filterOptionsByKey = computed(() => {
+  const rows = props.items ?? []
+  const options: Record<string, string[]> = {}
+
+  for (const header of filterableHeaders.value) {
+    const key = String(header.key)
+    const values = new Set<string>()
+    for (const row of rows) {
+      const raw = row[key as keyof T]
+      if (raw === undefined || raw === null) {
+        continue
+      }
+      const text = String(raw)
+      if (text.length === 0) {
+        continue
+      }
+      values.add(text)
+    }
+    options[key] = [...values].sort((a, b) => a.localeCompare(b))
+  }
+
+  return options
+})
+
+const columnUsesComboboxFilter = (key: string) => {
+  const count = filterOptionsByKey.value[key]?.length ?? 0
+  return count <= props.filterMaxSelectOptions
+}
+
 const filteredItems = computed(() => {
   const rows = props.items ?? []
   if (!props.showFilters) {
     return rows
   }
 
-  const activeFilters = Object.entries(columnFilters.value).filter(
+  const activeFilters = Object.entries(appliedColumnFilters.value).filter(
     ([, value]) => value?.trim().length > 0,
   )
   if (!activeFilters.length) {
@@ -468,7 +649,11 @@ const filteredItems = computed(() => {
       if (raw === undefined || raw === null) {
         return false
       }
-      return String(raw).toLowerCase().includes(filterValue.toLowerCase())
+      const cell = String(raw)
+      if (columnUsesComboboxFilter(key)) {
+        return cell.toLowerCase() === filterValue.toLowerCase()
+      }
+      return cell.toLowerCase().includes(filterValue.toLowerCase())
     }),
   )
 })
@@ -551,20 +736,57 @@ const exportPayloadData = computed<ExportPayload>(() => {
 // Methods
 const toggleExportMode = () => {
   isExportMode.value = !isExportMode.value
-  if (!isExportMode.value) {
+  if (!isExportMode.value && !props.showSelect) {
     selected.value = []
   }
 }
 
 const toggleFilterDrawer = () => {
+  if (!isFilterDrawerOpen.value) {
+    syncDraftFiltersFromApplied()
+  }
   isFilterDrawerOpen.value = !isFilterDrawerOpen.value
 }
 
 const openFilters = () => {
+  syncDraftFiltersFromApplied()
   isFilterDrawerOpen.value = true
 }
 
-const handleRowClick = (_: PointerEvent, row: { item: T }) => {
+const isItemRowClickable = (item: T) =>
+  props.isRowClickable ? props.isRowClickable(item) : true
+
+const resolveRowProps = (data: { item: T }) => {
+  if (!props.rowClickHandler) {
+    return {}
+  }
+
+  return {
+    class: isItemRowClickable(data.item)
+      ? "tw:cursor-pointer"
+      : "tw:cursor-default",
+  }
+}
+
+const isSelectionControlClick = (event: PointerEvent) => {
+  const target = event.target
+  if (!(target instanceof Element)) return false
+  return Boolean(
+    target.closest(
+      ".v-selection-control, .v-data-table__checkbox, .v-data-table-column--select",
+    ),
+  )
+}
+
+const handleRowClick = (event: PointerEvent, row: { item: T }) => {
+  if (showSelectColumn.value && isSelectionControlClick(event)) {
+    return
+  }
+
+  if (props.rowClickHandler && !isItemRowClickable(row.item)) {
+    return
+  }
+
   const context = actionContext(row.item)
   if (props.rowClickHandler) {
     props.rowClickHandler(row.item, context)
@@ -573,31 +795,39 @@ const handleRowClick = (_: PointerEvent, row: { item: T }) => {
   emit("rowClick", row.item)
 }
 
-const filterPayload = computed(() => ({ ...columnFilters.value }))
+const draftFilterPayload = computed(() => ({ ...columnFilters.value }))
+const appliedFilterPayload = computed(() => ({
+  ...appliedColumnFilters.value,
+}))
 const actionContext = (item?: T): BaseDataTableActionContext<T> => ({
   item,
-  filters: filterPayload.value,
+  filters: appliedFilterPayload.value,
   selectedIds: [...selected.value],
 })
 
 const notifyFilterStateChange = () => {
   if (props.onFilterStateChange) {
-    props.onFilterStateChange(filterPayload.value, actionContext())
+    props.onFilterStateChange(draftFilterPayload.value, {
+      ...actionContext(),
+      filters: draftFilterPayload.value,
+    })
   } else {
-    console.log("[BaseDataTable] filter-state-change", filterPayload.value)
+    console.log("[BaseDataTable] filter-state-change", draftFilterPayload.value)
   }
 }
 
 const applyFilters = () => {
+  appliedColumnFilters.value = { ...columnFilters.value }
   if (props.onFilterApply) {
-    props.onFilterApply(filterPayload.value, actionContext())
+    props.onFilterApply(appliedFilterPayload.value, actionContext())
   } else {
-    console.log("[BaseDataTable] filter-apply", filterPayload.value)
+    console.log("[BaseDataTable] filter-apply", appliedFilterPayload.value)
   }
 }
 
 const resetFilters = () => {
   columnFilters.value = {}
+  appliedColumnFilters.value = {}
   if (props.onFilterReset) {
     props.onFilterReset({}, actionContext())
   } else {
@@ -658,8 +888,8 @@ const importerSlotProps = computed(() => ({
 }))
 
 const filterSummarySlotProps = computed(() => ({
-  filters: filterPayload.value,
-  activeCount: Object.values(columnFilters.value).filter(
+  filters: appliedFilterPayload.value,
+  activeCount: Object.values(appliedColumnFilters.value).filter(
     (value) => value?.trim().length > 0,
   ).length,
 }))
@@ -668,12 +898,14 @@ const filterDrawerHeaderSlotProps = computed(() => ({
   close: () => {
     isFilterDrawerOpen.value = false
   },
-  filters: filterPayload.value,
+  filters: draftFilterPayload.value,
 }))
 
 const filterDrawerBodySlotProps = computed(() => ({
   filters: columnFilters.value,
   headers: filterableHeaders.value,
+  filterOptionsByKey: filterOptionsByKey.value,
+  columnUsesComboboxFilter,
   setFilter: (key: string, value: string) => {
     columnFilters.value[key] = value
     notifyFilterStateChange()
@@ -683,7 +915,7 @@ const filterDrawerBodySlotProps = computed(() => ({
 const filterDrawerFooterSlotProps = computed(() => ({
   applyFilters,
   resetFilters,
-  filters: filterPayload.value,
+  filters: draftFilterPayload.value,
   context: actionContext(),
 }))
 </script>

package/services/frontend/src/orchestrator/components/menu/ServerStatus.vue

@@ -10,6 +10,7 @@
         v-bind="props"
         :icon="currentState.icon"
         :color="currentState.color"
+        :aria-label="serverStatusLabel"
       />
     </template>
 
@@ -64,13 +65,21 @@ const theme = computed(() =>
   vuetifyTheme.global.name.value === "light" ? "dark" : "light",
 )
 
+const socketStatus = computed(
+  () => backend.value?.socket?.status ?? 2,
+)
+
+const serverStatusLabel = computed(() =>
+  i18n.t(`core.socket_status_${socketStatus.value || 0}`),
+)
+
 const currentState = computed(() => {
-  const status = backend.value?.socket?.status ?? 2 // default to "some fucked"
+  const status = socketStatus.value
 
   const stateMapping = [
     { icon: "mdi-alert-circle", color: "error" }, // status 0
     { icon: "mdi-checkbox-marked-circle", color: "success" }, // status 1
-    { icon: "mdi-alert-circle", color: "warning" }, // status 2 or anything else
+    { icon: "mdi-alert-circle", color: "warning" }, // status 2 — connecting
   ]
 
   return stateMapping[status] ?? stateMapping[2]

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

@@ -1,11 +1,12 @@
 import { computed, ref, watch, onUnmounted } from "vue"
 import { useObservable } from "@vueuse/rxjs"
 import { $queryApi } from "@racletteCore/lib/data/dataApi"
+import type { QueryApiQuery, QueryMethods } from "@racletteCore/types"
 import type {
-  CustomStoreActionsPayload,
-  QueryApiQuery,
-  QueryMethods,
-} from "@racletteCore/types"
+  VueQueryParamsInput,
+  VueStoreActionsPayload,
+} from "../types/DataApi"
+import { toQueryParamsSource } from "../lib/queryParamsSource"
 import { difference } from "ramda"
 import getStateObservable from "@racletteCore/lib/observableHelpers/getStateObservable"
 import type { Observable } from "rxjs"
@@ -16,8 +17,9 @@ const subscriberCounter = {}
 export const useVueQueryObservableHelper = (
   instanceActionId,
   target,
-  { params = {}, options = {} }: CustomStoreActionsPayload = {},
+  { params = {}, options = {} }: VueStoreActionsPayload = {},
 ): QueryMethods => {
+  const paramsSource = toQueryParamsSource(params)
   const dataObservable$ = ref<Observable<unknown>>()
 
   const data = computed(() => {
@@ -36,7 +38,7 @@ export const useVueQueryObservableHelper = (
     coreQuery = subscriber$[instanceActionId]
   } else {
     subscriberCounter[instanceActionId] = 1
-    coreQuery = $queryApi(instanceActionId, target, { params, options })
+    coreQuery = $queryApi(instanceActionId, target, { params: paramsSource, options })
   }
   subscriber$[instanceActionId] = coreQuery
   const queryRef = useObservable<QueryApiQuery>(coreQuery.query$)
@@ -77,7 +79,10 @@ export const useVueQueryObservableHelper = (
       return data.value ? Object.values(data.value) : []
     }),
     response: responseRef,
-    execute: coreQuery.execute,
+    execute: (executeParams?: VueQueryParamsInput) =>
+      executeParams === undefined
+        ? coreQuery.execute()
+        : coreQuery.execute(toQueryParamsSource(executeParams)),
     uuids: coreQuery.uuids$,
     remove: coreQuery.remove,
     clear: coreQuery.clear,

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

@@ -1,10 +1,12 @@
 import { computed, ref, watch, onUnmounted } from "vue"
 import { useObservable } from "@vueuse/rxjs"
 import { $writeDataApi } from "@racletteCore/lib/data/dataApi"
+import type { DataApiMethods } from "@racletteCore/types"
 import type {
-  CustomStoreActionsPayload,
-  DataApiMethods,
-} from "@racletteCore/types"
+  VueQueryParamsInput,
+  VueStoreActionsPayload,
+} from "../types/DataApi"
+import { toQueryParamsSource } from "../lib/queryParamsSource"
 import getStateObservable from "@racletteCore/lib/observableHelpers/getStateObservable"
 import type { Observable } from "rxjs"
 
@@ -14,8 +16,9 @@ const subscriberCounter = {}
 export const useVueWriteOperationHelper = (
   instanceActionId,
   operationDefinition,
-  { params = {}, options = {} }: CustomStoreActionsPayload = {},
+  { params = {}, options = {} }: VueStoreActionsPayload = {},
 ): DataApiMethods => {
+  const paramsSource = toQueryParamsSource(params)
   let writeOperation
   const dataStoreObservable$ = ref<Observable<any>>()
 
@@ -34,7 +37,7 @@ export const useVueWriteOperationHelper = (
   } else {
     subscriberCounter[instanceActionId] = 1
     writeOperation = $writeDataApi(instanceActionId, operationDefinition, {
-      params,
+      params: paramsSource,
       options,
     })
   }
@@ -84,7 +87,10 @@ export const useVueWriteOperationHelper = (
       return data.value ? Object.values(data.value) : []
     }),
     response: responseRef,
-    execute: writeOperation.execute,
+    execute: (executeParams?: VueQueryParamsInput) =>
+      executeParams === undefined
+        ? writeOperation.execute()
+        : writeOperation.execute(toQueryParamsSource(executeParams)),
     remove: writeOperation.remove,
     clear: writeOperation.clear,
     error: computed(() => {