fix(grid): move total row count refresh into the total label

Refs: #7520
This commit is contained in:
zipg authored and GitHub committed 2026-08-30 03:05:10 +08:00
1 parent 1e8c58b3df
commit 45fb7fb7e6
11 files changed
+34 -20

No files matched your search

+18 -14
View File
@@ -14109,26 +14109,30 @@ function openGridSnapshot() {
count: result.rows.length,
})
}}
<span v-if="typeof displayedTotalRowCount === 'number' && displayedTotalRowCount >= 0" class="text-muted-foreground/70">{{ t(totalRowCountLabelKey, { count: displayedTotalRowCount }) }}</span>
<i18n-t v-if="showRerunTotalCountAction && !(totalRowCountBusy && !manualTotalRowCountLoading)" keypath="grid.totalRowCountWithAction" tag="span" class="text-muted-foreground/70">
<template #button>
<button
type="button"
class="mr-1 inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-sm align-middle text-muted-foreground/70 hover:bg-gray-200 hover:text-foreground disabled:pointer-events-none disabled:opacity-50 dark:hover:bg-gray-800"
:disabled="manualTotalRowCountLoading"
:aria-busy="manualTotalRowCountLoading ? 'true' : undefined"
:title="manualTotalRowCountLoading ? t('grid.totalRowCountLoading') : t('grid.calculateTotalRows')"
:aria-label="manualTotalRowCountLoading ? t('grid.totalRowCountLoading') : t('grid.calculateTotalRows')"
@click="calculateTotalRowCount"
>
<Loader2 v-if="manualTotalRowCountLoading" aria-hidden="true" class="h-3 w-3 animate-spin" />
<RefreshCcw v-else aria-hidden="true" class="h-3 w-3" />
</button>
</template>
<template #count>{{ displayedTotalRowCount }}</template>
</i18n-t>
<span v-else-if="typeof displayedTotalRowCount === 'number' && displayedTotalRowCount >= 0" class="text-muted-foreground/70">{{ t(totalRowCountLabelKey, { count: displayedTotalRowCount }) }}</span>
<span v-if="totalRowCountBusy && !(showRerunTotalCountAction && manualTotalRowCountLoading)" class="text-muted-foreground/70">
{{ t("grid.totalRowCountLoading") }}
</span>
<button v-else-if="showExactTotalCountAction" type="button" class="text-muted-foreground/70 underline underline-offset-2 hover:text-foreground disabled:pointer-events-none" :disabled="manualTotalRowCountLoading" @click="calculateTotalRowCount">
{{ t("grid.calculateTotalRowsInline") }}
</button>
<button
v-else-if="showRerunTotalCountAction"
type="button"
class="ml-1 inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-sm align-middle text-muted-foreground/70 hover:bg-gray-200 hover:text-foreground disabled:pointer-events-none disabled:opacity-50 dark:hover:bg-gray-800"
:disabled="manualTotalRowCountLoading"
:aria-busy="manualTotalRowCountLoading ? 'true' : undefined"
:title="manualTotalRowCountLoading ? t('grid.totalRowCountLoading') : t('grid.calculateTotalRows')"
:aria-label="manualTotalRowCountLoading ? t('grid.totalRowCountLoading') : t('grid.calculateTotalRows')"
@click="calculateTotalRowCount"
>
<Loader2 v-if="manualTotalRowCountLoading" aria-hidden="true" class="h-3 w-3 animate-spin" />
<RefreshCcw v-else aria-hidden="true" class="h-3 w-3" />
</button>
</span>
<span v-if="showTruncationWarning" class="shrink-0 text-amber-500 text-xs">(truncated)</span>
<span v-if="!hasData" class="shrink-0">{{ t("grid.rowsAffected", { count: result.affected_rows }) }}</span>
@@ -12,7 +12,7 @@ const statusRenderSource = (() => {
})();
const rerunBranch = (() => {
const start = statusRenderSource.indexOf("} else if ($setup.showRerunTotalCountAction) {");
const start = statusRenderSource.indexOf("$setup.showRerunTotalCountAction && !($setup.totalRowCountBusy && !$setup.manualTotalRowCountLoading)");
return start === -1 ? "" : statusRenderSource.slice(start, statusRenderSource.indexOf("</button>", start));
})();
@@ -48,19 +48,21 @@ describe("DataGrid rerun total row count action", () => {
expect(showDataGridRerunTotalCountAction({ canCalculateTotalRowCount: true, displayedTotalRowCount: NaN, totalRowCountIsExact: true })).toBe(false);
});
it("keeps the numeric total outside the action chain and orders busy, inline link, then rerun icon", () => {
it("places the rerun icon before the numeric total and keeps the other actions ordered", () => {
const numericTotal = statusRenderSource.indexOf('typeof $setup.displayedTotalRowCount === "number" && $setup.displayedTotalRowCount >= 0');
const rerunAction = statusRenderSource.indexOf("$setup.showRerunTotalCountAction && !($setup.totalRowCountBusy && !$setup.manualTotalRowCountLoading)");
const busyBranch = statusRenderSource.indexOf("if ($setup.totalRowCountBusy && !($setup.showRerunTotalCountAction && $setup.manualTotalRowCountLoading)) {");
const inlineLink = statusRenderSource.indexOf("} else if ($setup.showExactTotalCountAction) {");
const rerunAction = statusRenderSource.indexOf("} else if ($setup.showRerunTotalCountAction) {");
expect(numericTotal).toBeGreaterThan(-1);
expect(rerunAction).toBeGreaterThan(-1);
expect(rerunAction).toBeLessThan(numericTotal);
expect(busyBranch).toBeGreaterThan(numericTotal);
expect(inlineLink).toBeGreaterThan(busyBranch);
expect(rerunAction).toBeGreaterThan(inlineLink);
});
it("renders a spaced rerun icon labelled for the total-count action and disabled while counting", () => {
expect(rerunBranch).toContain('<button type="button" class="ml-1 inline-flex h-3.5 w-3.5');
expect(statusRenderSource).toContain('keypath: "grid.totalRowCountWithAction"');
expect(rerunBranch).toContain('<button type="button" class="mr-1 inline-flex h-3.5 w-3.5');
expect(rerunBranch).toContain("disabled:pointer-events-none");
expect(rerunBranch).toContain("disabled:opacity-50");
// title/aria-label toggle between idle and busy copy