@antelopejs/dms 0.7.15 → 0.7.16

package/frontend-vue/layers/dms-ui/app/build/composables/period/periodDisplay.ts

@@ -53,6 +53,55 @@ export function calendarToRange(range: CalendarRange): PeriodRange {
   };
 }
 
+/** Which bound of a range stays put when the range has to shrink. */
+export type CalendarRangeAnchor = "start" | "end";
+
+const RANGE_SHRINKERS: Record<
+  CalendarRangeAnchor,
+  (range: CalendarRange, span: number) => CalendarRange
+> = {
+  start: (range, span) => ({
+    start: range.start,
+    end: range.start.add({ days: span }),
+  }),
+  end: (range, span) => ({
+    start: range.end.subtract({ days: span }),
+    end: range.end,
+  }),
+};
+
+/** The number of days a range covers, both ends included. */
+export function calendarRangeDays(range: CalendarRange): number {
+  return range.end.compare(range.start) + 1;
+}
+
+/**
+ * Shrinks a range to at most `maxDays` days, keeping its `anchor` bound and
+ * moving the other one. Without a limit, or within it, the range is returned
+ * as is.
+ */
+export function limitCalendarRange(
+  range: CalendarRange,
+  maxDays: number | undefined,
+  anchor: CalendarRangeAnchor,
+): CalendarRange {
+  if (!maxDays || calendarRangeDays(range) <= maxDays) return range;
+  return RANGE_SHRINKERS[anchor](range, maxDays - 1);
+}
+
+/**
+ * Whether a range starting (or ending) on `pickedDay` and reaching `date`
+ * would cover more than `maxDays` days.
+ */
+export function isBeyondMaxDays(
+  date: CalendarDate,
+  pickedDay: CalendarDate,
+  maxDays: number | undefined,
+): boolean {
+  if (!maxDays) return false;
+  return Math.abs(date.compare(pickedDay)) >= maxDays;
+}
+
 function isStartOfDay(date: Date): boolean {
   return (
     date.getHours() === 0 &&

package/frontend-vue/layers/dms-ui/app/build/composables/period/usePeriodLocation.ts

@@ -63,15 +63,23 @@ function selectionText(selection: PeriodSelection): string {
   return JSON.stringify(writePeriodQuery(selection, STORED_KEYS));
 }
 
+type DmsRouteState = ReturnType<typeof useDmsRoute>;
+
+function browserQuery(): PeriodQuery {
+  return Object.fromEntries(new URLSearchParams(window.location.search));
+}
+
 /**
  * Writes the period into the URL: the history entry is replaced, and no
  * request reloads the page. The browser's URL is written at once, so a
- * second selector writing in the same tick merges into it; Inertia's
- * client-side replace then moves its page URL, which the DMS route follows,
- * so a component writing the query from the route (a tab, a quick action)
- * carries the period on instead of the one the page was opened with.
+ * second selector writing in the same tick merges into it, and so is the
+ * route's query: a component or a module building a query from the route
+ * (a tab, a quick action) carries the new period on at once, instead of the
+ * one the page was opened with. Inertia's client-side replace then moves its
+ * page URL, which the route follows, a few ticks later, to the same query.
  */
 function replacePeriodInUrl(
+  route: DmsRouteState,
   keys: PeriodQueryKeys,
   selection: PeriodSelection,
 ): string | null {
@@ -81,15 +89,29 @@ function replacePeriodInUrl(
   if (isPeriodQueryCurrent(query, keys, selection)) return null;
   url.search = mergePeriodSearch(url.search, keys, selection);
   const written = urlKeysText(Object.fromEntries(url.searchParams), keys);
+  const fullPath = `${url.pathname}${url.search}${url.hash}`;
   window.history.replaceState(window.history.state, "", url);
+  route.query = Object.fromEntries(url.searchParams);
+  route.fullPath = fullPath;
   inertiaRouter.replace({
-    url: `${url.pathname}${url.search}${url.hash}`,
+    url: fullPath,
     preserveState: true,
     preserveScroll: true,
   });
   return written;
 }
 
+/**
+ * Until Inertia's page catches up with a URL written in place, the route can
+ * still be set back to the page's previous query (a component reading the
+ * route meanwhile refreshes it from that page). The address bar is ahead of
+ * it, never behind: a route whose period keys differ from it is stale.
+ */
+function isRouteBehindBrowser(text: string, keys: PeriodQueryKeys): boolean {
+  if (typeof window === "undefined") return false;
+  return text !== urlKeysText(browserQuery(), keys);
+}
+
 /** The user's last choice of one selector, kept in the preferences. */
 function useRememberedPeriod(target: RememberedPeriodTarget) {
   const { getPreference, setPreference } = usePreferences();
@@ -113,11 +135,11 @@ function useRememberedPeriod(target: RememberedPeriodTarget) {
  * later, and a pick made meanwhile must not be undone by the URL of the one
  * before: `isEcho` tells a route naming a URL written here from a change.
  */
-function usePeriodUrlWriter(keys: PeriodQueryKeys) {
+function usePeriodUrlWriter(route: DmsRouteState, keys: PeriodQueryKeys) {
   const pending: string[] = [];
   return {
     write: (selection: PeriodSelection) => {
-      const written = replacePeriodInUrl(keys, selection);
+      const written = replacePeriodInUrl(route, keys, selection);
       if (written !== null) pending.push(written);
     },
     isEcho: (text: string) => {
@@ -142,8 +164,9 @@ function usePeriodUrlWriter(keys: PeriodQueryKeys) {
  * period, then on every change: the history entry is replaced instead of
  * pushed, so Back leaves the page rather than stepping through every pick,
  * and the page is not requested again, only the bound cards and tables
- * refetch. A route changed from outside (Back to the page with another
- * period, a link) moves the period.
+ * refetch. The route's query (`useDmsRoute().query`) follows each write at
+ * once. A route changed from outside (Back to the page with another period,
+ * a link) moves the period.
  */
 export function usePeriodLocation(
   period: UsePeriodReturn,
@@ -152,7 +175,7 @@ export function usePeriodLocation(
   const route = useDmsRoute();
   const urlKeys = periodQueryKeys(options.id);
   const remembered = useRememberedPeriod(options);
-  const writer = usePeriodUrlWriter(urlKeys);
+  const writer = usePeriodUrlWriter(route, urlKeys);
   const choices = {
     presets: period.presets.value,
     comparisons: period.comparisons.value,
@@ -186,7 +209,7 @@ export function usePeriodLocation(
   watch(
     () => urlKeysText(route.query as PeriodQuery, urlKeys),
     (text) => {
-      if (writer.isEcho(text)) return;
+      if (writer.isEcho(text) || isRouteBehindBrowser(text, urlKeys)) return;
       const current = readSelection(period);
       const next = resolvePeriodSelection([urlSource()], choices, current);
       if (selectionText(next) === selectionText(current)) return;

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableUrlTab.ts

@@ -0,0 +1,47 @@
+import { watch, type Ref } from "vue";
+import { readTableUrlKey, type TableUrlScope } from "./utils/views";
+
+const TAB_URL_KEY = "tab";
+
+/** The route fields the URL tab is read from. */
+export interface TableUrlTabRoute {
+  query: Record<string, unknown>;
+}
+
+/** What `useTableUrlTab` reads the tab from and drives. */
+export interface TableUrlTabOptions {
+  route: TableUrlTabRoute;
+  urlScope: TableUrlScope;
+  /** The open tab: set from the URL on arrival by the caller, then here. */
+  activeTabId: Ref<string>;
+  /** Whether the table has a tab of that id it can open in place. */
+  isOpenable: (tabId: string) => boolean;
+}
+
+/**
+ * The tab the URL names for a table (`?<tableId>.tab=`, or `?tab=` on a page
+ * carrying a single table view), as it reads on arrival.
+ */
+export function readTableUrlTab(
+  query: Record<string, unknown>,
+  urlScope: TableUrlScope,
+): string | undefined {
+  return readTableUrlKey(query, urlScope, TAB_URL_KEY).value;
+}
+
+/**
+ * Follows the URL's tab after arrival: a link or a `router.replace` naming
+ * another tab of the same page switches to it without remounting the page.
+ * A URL dropping the key, or naming a tab the table cannot open in place (an
+ * unknown id, a link tab), leaves the open tab alone.
+ */
+export function useTableUrlTab(options: TableUrlTabOptions): void {
+  watch(
+    () => readTableUrlTab(options.route.query, options.urlScope),
+    (tabId) => {
+      if (!tabId || tabId === options.activeTabId.value) return;
+      if (!options.isOpenable(tabId)) return;
+      options.activeTabId.value = tabId;
+    },
+  );
+}

package/frontend-vue/layers/dms-ui/app/components/period/PeriodSelector.vue

@@ -23,9 +23,11 @@ import { isRelativePreset } from "#dms-core/app/composables/period/presetResolve
 import { usePeriodLocation } from "../../build/composables/period/usePeriodLocation";
 import {
   type CalendarRange,
+  type CalendarRangeAnchor,
   calendarToRange,
   formatPeriodRange,
   formatRelativeInstant,
+  limitCalendarRange,
   periodDuration,
   rangeToCalendar,
 } from "../../build/composables/period/periodDisplay";
@@ -49,6 +51,7 @@ interface Props extends DefaultComponentProps {
   comparisonControl?: ComparisonControl;
   rememberKey?: string;
   variant?: "default" | "segmented";
+  maxDays?: number;
 }
 
 const CALENDAR_ICON = "i-ph-calendar-blank-light";
@@ -232,9 +235,18 @@ function setOpen(open: boolean) {
   isOpen.value = open;
 }
 
+// A custom range starts from the days on screen, which a long preset can
+// stretch past `maxDays`: it keeps its most recent days.
+function selectDraftPreset(preset: PeriodPreset) {
+  draft.selectPreset(preset);
+  const custom = draft.customRange.value;
+  if (preset !== CUSTOM_PRESET || !custom) return;
+  selectCalendarRange(rangeToCalendar(custom), "end");
+}
+
 function openCustom() {
   draft.reset();
-  draft.selectPreset(CUSTOM_PRESET);
+  selectDraftPreset(CUSTOM_PRESET);
   pendingStart.value = null;
   isOpen.value = true;
 }
@@ -253,9 +265,14 @@ const draftCompareCalendar = computed<CalendarRange | null>(() => {
   return compare ? rangeToCalendar(compare) : null;
 });
 
-function selectCalendarRange(range: CalendarRange) {
+function selectCalendarRange(
+  range: CalendarRange,
+  anchor: CalendarRangeAnchor = "start",
+) {
   if (!isCustomEnabled.value) return;
-  draft.selectRange(calendarToRange(range));
+  draft.selectRange(
+    calendarToRange(limitCalendarRange(range, props.maxDays, anchor)),
+  );
 }
 
 function updateStart(value: DateValue | null | undefined) {
@@ -273,6 +290,7 @@ function updateEnd(value: DateValue | null | undefined) {
   const start = draftCalendar.value.start;
   selectCalendarRange(
     end.compare(start) < 0 ? { start: end, end } : { start, end },
+    "end",
   );
 }
 
@@ -297,6 +315,12 @@ const draftDurationLabel = computed(() => {
   return t(`dms.period.popover.${unit}`, { count }, count);
 });
 
+const maxDaysHint = computed(() =>
+  props.maxDays && isCustomEnabled.value
+    ? t("dms.period.popover.max_days", { count: props.maxDays }, props.maxDays)
+    : null,
+);
+
 const draftCompareLabel = computed(() => {
   const compare = draft.compareRange.value;
   return compare ? formatPeriodRange(compare, locale.value) : null;
@@ -557,7 +581,7 @@ function onSegmentedClick(event: MouseEvent) {
                   role="option"
                   :aria-selected="draft.preset.value === entry.preset"
                   :class="presetItemClass(entry.preset)"
-                  @click="draft.selectPreset(entry.preset)"
+                  @click="selectDraftPreset(entry.preset)"
                 >
                   <span class="truncate">{{ entry.label }}</span>
                   <span
@@ -583,7 +607,7 @@ function onSegmentedClick(event: MouseEvent) {
                   role="option"
                   :aria-selected="draft.preset.value === CUSTOM_PRESET"
                   :class="presetItemClass(CUSTOM_PRESET)"
-                  @click="draft.selectPreset(CUSTOM_PRESET)"
+                  @click="selectDraftPreset(CUSTOM_PRESET)"
                 >
                   <UIcon :name="CALENDAR_ICON" class="size-4 shrink-0" />
                   {{ $t("dms.period.popover.custom_range", "Custom range") }}
@@ -662,7 +686,8 @@ function onSegmentedClick(event: MouseEvent) {
               :week-starts-on="weekStartsOn"
               :number-of-months="isWide ? 2 : 1"
               :readonly="!isCustomEnabled"
-              @update:model-value="selectCalendarRange"
+              :max-days="maxDays"
+              @update:model-value="selectCalendarRange($event)"
               @pending="pendingStart = $event"
             />
 
@@ -680,6 +705,7 @@ function onSegmentedClick(event: MouseEvent) {
                   </span>
                   {{ draftCompareLabel }}
                 </template>
+                <template v-if="maxDaysHint">· {{ maxDaysHint }}</template>
               </span>
               <UButton
                 color="neutral"

package/frontend-vue/layers/dms-ui/app/components/table-view/TableView.vue

@@ -151,7 +151,10 @@ import {
   groupedSorting,
   isGroupableColumn,
 } from "../../build/composables/table-view/utils/groupedRows";
-import { readTableUrlKey } from "../../build/composables/table-view/utils/views";
+import {
+  readTableUrlTab,
+  useTableUrlTab,
+} from "../../build/composables/table-view/useTableUrlTab";
 import TableViews, {
   type TableViewItem,
 } from "../../build/components/table/Views.vue";
@@ -606,11 +609,10 @@ const ALL_TAB_ID = "all";
 
 const { t, te } = useI18n();
 
-const TAB_URL_KEY = "tab";
-const urlTab = readTableUrlKey(useDmsRoute().query, urlScope, TAB_URL_KEY);
 // A tab named by the URL wins over the one kept from the last visit.
 const activeTabId = ref<string>(
-  urlTab.value ?? tablePreferences.get<string>("activeTab", ALL_TAB_ID),
+  readTableUrlTab(route.query, urlScope) ??
+    tablePreferences.get<string>("activeTab", ALL_TAB_ID),
 );
 
 interface ResolvedTab {
@@ -661,6 +663,14 @@ const activeTabFilters = computed<TableFilter[]>(() => {
   return tab?.filters || [];
 });
 
+useTableUrlTab({
+  route,
+  urlScope,
+  activeTabId,
+  isOpenable: (tabId) =>
+    resolvedTabs.value.some((tab) => !tab.to && tab.id === tabId),
+});
+
 watch(resolvedTabs, (next) => {
   if (next.length === 0) return;
   if (!next.some((tab) => !tab.to && tab.id === activeTabId.value)) {

package/frontend-vue/tests/header-action-page-query.test.ts

@@ -3,7 +3,8 @@
  * A page header's buttons follow the page URL: a target URL takes the
  * `{{params.X}}` / `{{query.X}}` tokens of a block's `fetchUrl`, and a
  * button whose availability reads the query is asked for again when the
- * query changes.
+ * query changes. The served buttons and a page's own actions
+ * (`usePageHeaderActions`) share one order.
  */
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
@@ -23,6 +24,11 @@ import {
   layoutUrlWithQuery,
   pageQueryValues,
 } from "../layers/dms-layout/app/utils/pageQuery";
+import {
+  providePageHeaderActions,
+  usePageHeaderActions,
+  type PageHeaderActionsOptions,
+} from "../layers/dms-layout/app/composables/layout/usePageHeaderActions";
 
 const handleCustomButton = vi.fn();
 vi.mock("#dms-ui/app/build/composables/actions/useActionTargets", () => ({
@@ -106,6 +112,7 @@ const mountBar = (actions: unknown[]) =>
   );
 
 const buttons = () => [...host.querySelectorAll("button")];
+const labels = () => buttons().map((button) => button.textContent);
 
 describe("resolveLinkVariables", () => {
   const context = {
@@ -277,6 +284,33 @@ describe("a header button's availability", () => {
     expect(buttons()[0]?.disabled).toBe(false);
   });
 
+  it("shows a button it hides only for the queries it does not hide it for", async () => {
+    const addKey = {
+      id: "add-key",
+      label: "Add key",
+      target: download(false).target,
+    };
+    authFetch.mockResolvedValue({
+      components: {},
+      layout: { options: { headerActions: [download(false)] } },
+    });
+    await mount(
+      "../layers/dms-layout/app/build/components/layout/PageHeaderActionsOutlet.vue",
+      { actions: [download(false), addKey], servedQuery: { workspace: "web" } },
+    );
+    expect(labels()).toEqual(["Download", "Add key"]);
+
+    route.query = { workspace: "modules" };
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve));
+    expect(authFetch).toHaveBeenCalledWith(`${LAYOUT_URL}?workspace=modules`);
+    expect(labels()).toEqual(["Download"]);
+
+    route.query = { workspace: "web" };
+    await nextTick();
+    expect(labels()).toEqual(["Download", "Add key"]);
+  });
+
   it("is never asked again when no button declares one", async () => {
     await mountOutlet(undefined);
     route.query = { workspace: "gone" };
@@ -284,3 +318,64 @@ describe("a header button's availability", () => {
     expect(authFetch).not.toHaveBeenCalled();
   });
 });
+
+describe("the order of the header's buttons", () => {
+  const served = (id: string, order?: number) => ({
+    id,
+    label: id,
+    target: { type: "page", url: `/${id}` },
+    order,
+  });
+
+  // A layout's page body: the outlet, then the page calling
+  // usePageHeaderActions, then the marker saying the page has rendered.
+  async function mountPage(
+    actions: unknown[],
+    options?: PageHeaderActionsOptions,
+  ) {
+    const { default: Outlet } = await import(
+      "../layers/dms-layout/app/build/components/layout/PageHeaderActionsOutlet.vue"
+    );
+    const Page = defineComponent({
+      setup() {
+        usePageHeaderActions(() => h("button", "Export"), options);
+        return () => null;
+      },
+    });
+    const Body = defineComponent({
+      setup() {
+        const pageHost = providePageHeaderActions();
+        const Rendered = defineComponent({
+          setup() {
+            pageHost.markSlotRendered();
+            return () => null;
+          },
+        });
+        return () => [h(Outlet, { actions }), h(Page), h(Rendered)];
+      },
+    });
+    app = createApp(Body);
+    app.component("UButton", ButtonStub);
+    app.component("UTooltip", SlotStub);
+    app.mount(host);
+    await nextTick();
+  }
+
+  it("puts the page's actions after the served buttons by default", async () => {
+    await mountPage([served("add-key"), served("add-language")]);
+    expect(labels()).toEqual(["add-key", "add-language", "Export"]);
+  });
+
+  it("puts them before the served buttons of a greater order", async () => {
+    await mountPage([served("add-key")], { order: -1 });
+    expect(labels()).toEqual(["Export", "add-key"]);
+  });
+
+  it("sorts the served buttons by order, the declared order breaking ties", async () => {
+    await mountPage(
+      [served("last", 2), served("first"), served("second"), served("mid", 1)],
+      { order: 1 },
+    );
+    expect(labels()).toEqual(["first", "second", "mid", "Export", "last"]);
+  });
+});

package/frontend-vue/tests/period-day-rollover.test.ts

@@ -0,0 +1,80 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ref } from "vue";
+import { usePeriod } from "../layers/dms-core/app/composables/period/usePeriod";
+import {
+  isCalendarPreset,
+  msUntilNextMidnight,
+} from "../layers/dms-core/app/composables/period/presetResolvers";
+
+const MS_PER_MINUTE = 60000;
+const MS_PER_DAY = 24 * 60 * MS_PER_MINUTE;
+const LATE_EVENING = new Date(2026, 9, 12, 23, 58);
+const NEXT_DAY = new Date(2026, 9, 13);
+
+describe("calendar presets at midnight", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(LATE_EVENING);
+    vi.stubGlobal("window", globalThis);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  });
+
+  it("classifies the day-bound presets as calendar presets", () => {
+    expect(isCalendarPreset("today")).toBe(true);
+    expect(isCalendarPreset("last-7-days")).toBe(true);
+    expect(isCalendarPreset("this-month")).toBe(true);
+    expect(isCalendarPreset("last-hour")).toBe(false);
+    expect(isCalendarPreset("custom")).toBe(false);
+    expect(isCalendarPreset("all")).toBe(false);
+  });
+
+  it("measures the time left until the next local midnight", () => {
+    expect(msUntilNextMidnight(LATE_EVENING)).toBe(2 * MS_PER_MINUTE);
+  });
+
+  it("moves `today` onto the new day once midnight passes", () => {
+    const period = usePeriod({ defaultPreset: "today" });
+    const initialKey = period.state.value.key;
+    vi.advanceTimersByTime(MS_PER_MINUTE);
+    expect(period.state.value.key).toBe(initialKey);
+    vi.advanceTimersByTime(MS_PER_MINUTE);
+    expect(period.state.value.range?.from).toEqual(NEXT_DAY);
+  });
+
+  it("keeps moving on the following midnights", () => {
+    const period = usePeriod({ defaultPreset: "last-7-days" });
+    vi.advanceTimersByTime(2 * MS_PER_MINUTE);
+    expect(period.state.value.range?.to.getDate()).toBe(13);
+    vi.advanceTimersByTime(MS_PER_DAY);
+    expect(period.state.value.range?.to.getDate()).toBe(14);
+  });
+
+  it("waits for the hold to end before moving", async () => {
+    const isHeld = ref(true);
+    const period = usePeriod({
+      defaultPreset: "today",
+      holdClock: () => isHeld.value,
+    });
+    const initialKey = period.state.value.key;
+    await vi.advanceTimersByTimeAsync(3 * MS_PER_MINUTE);
+    expect(period.state.value.key).toBe(initialKey);
+    isHeld.value = false;
+    await vi.advanceTimersByTimeAsync(0);
+    expect(period.state.value.range?.from).toEqual(NEXT_DAY);
+  });
+
+  it("leaves a custom range alone", async () => {
+    const period = usePeriod({ defaultPreset: "today" });
+    period.setCustomRange({
+      from: new Date(2026, 9, 1),
+      to: new Date(2026, 9, 2),
+    });
+    const initialKey = period.state.value.key;
+    await vi.advanceTimersByTimeAsync(3 * MS_PER_MINUTE);
+    expect(period.state.value.key).toBe(initialKey);
+  });
+});