@saasicat/ui-vue 0.19.0 → 0.22.0

package/src/pages-standard/EmailHistoryPage.vue

@@ -1,80 +1,80 @@
 <template>
-    <div class="sa-emh">
-        <header class="sa-emh__head">
-            <div>
-                <h1 class="sa-emh__title">{{ resolvedTitle }}</h1>
-                <p class="sa-emh__sub">{{ msg.history.subtitle }}</p>
-            </div>
-            <q-btn flat icon="refresh" :label="common.reload" @click="applyFilter" />
-        </header>
-
-        <div class="sa-emh__body">
-            <div class="sa-emh__filter">
-                <q-input
-                    v-model="filter.search"
-                    outlined
-                    dense
-                    clearable
-                    :label="msg.history.searchLabel"
-                    debounce="350"
-                    @keyup.enter="applyFilter"
-                    @update:model-value="applyFilter"
-                >
-                    <template #prepend><q-icon name="search" /></template>
-                </q-input>
-                <q-select
-                    v-model="filter.status"
-                    outlined
-                    dense
-                    clearable
-                    emit-value
-                    map-options
-                    :label="common.status"
-                    :options="statusOptions"
-                    @update:model-value="applyFilter"
-                />
-                <q-input
-                    v-model="filter.from"
-                    outlined
-                    dense
-                    clearable
-                    type="date"
-                    :label="common.from"
-                    @update:model-value="applyFilter"
-                />
-                <q-input
-                    v-model="filter.to"
-                    outlined
-                    dense
-                    clearable
-                    type="date"
-                    :label="common.to"
-                    @update:model-value="applyFilter"
-                />
-            </div>
-
-            <div class="sa-emh__card">
-                <q-table
-                    v-model:pagination="pagination"
-                    flat
-                    :rows="rows"
-                    :columns="columns"
-                    row-key="id"
-                    :loading="loading"
-                    :rows-number="pagination.rowsNumber"
-                    @request="onRequest"
-                    @row-click="(_evt, row) => openDetail(row)"
-                >
-                    <template #body-cell-status="{ row }">
-                        <q-td>
-                            <q-badge
-                                :color="statusColor(row.status)"
-                                :label="statusLabel(row.status)"
-                            />
-                        </q-td>
-                    </template>
-                    <template #body-cell-actions="{ row }">
-                        <q-td class="text-right">
+    <AdminPage class="sa-emh">
+        <AdminHero :title="resolvedTitle" :subtitle="msg.history.subtitle">
+            <template #actions>
+                <AdminRefreshBtn :loading="loading" @refresh="applyFilter" />
+            </template>
+        </AdminHero>
+
+        <AdminBody>
+            <AdminSection class="sa-emh__body">
+                <div class="sa-emh__filter">
+                    <q-input
+                        v-model="filter.search"
+                        outlined
+                        dense
+                        clearable
+                        :label="msg.history.searchLabel"
+                        debounce="350"
+                        @keyup.enter="applyFilter"
+                        @update:model-value="applyFilter"
+                    >
+                        <template #prepend><q-icon name="search" /></template>
+                    </q-input>
+                    <q-select
+                        v-model="filter.status"
+                        outlined
+                        dense
+                        clearable
+                        emit-value
+                        map-options
+                        :label="common.status"
+                        :options="statusOptions"
+                        @update:model-value="applyFilter"
+                    />
+                    <q-input
+                        v-model="filter.from"
+                        outlined
+                        dense
+                        clearable
+                        type="date"
+                        :label="common.from"
+                        @update:model-value="applyFilter"
+                    />
+                    <q-input
+                        v-model="filter.to"
+                        outlined
+                        dense
+                        clearable
+                        type="date"
+                        :label="common.to"
+                        @update:model-value="applyFilter"
+                    />
+                </div>
+
+                <div class="sa-emh__card">
+                    <AdminTable
+                        server-side
+                        :rows="rows"
+                        :columns="columns"
+                        :loading="loading"
+                        :page="pagination.page"
+                        :rows-per-page="pagination.rowsPerPage"
+                        :total="pagination.rowsNumber"
+                        storage-key="email-history"
+                        @row-click="(_evt: Event, row: EmailHistoryRow) => openDetail(row)"
+                        @update:page="onPageChange"
+                        @update:rows-per-page="onRowsPerPageChange"
+                    >
+                        <template #body-cell-status="{ row }">
+                            <q-td>
+                                <q-badge
+                                    :color="statusColor(row.status)"
+                                    :label="statusLabel(row.status)"
+                                />
+                            </q-td>
+                        </template>
+                        <template #row-actions="{ row }">
                             <q-btn
                                 flat
                                 dense
@@ -91,14 +91,14 @@
                                 :title="msg.history.removeFromHistory"
                                 @click.stop="askDelete(row.id)"
                             />
-                        </q-td>
-                    </template>
-                    <template #no-data>
-                        <div class="sa-emh__empty">{{ msg.history.empty }}</div>
-                    </template>
-                </q-table>
-            </div>
-        </div>
+                        </template>
+                        <template #no-data>
+                            <div class="sa-emh__empty">{{ msg.history.empty }}</div>
+                        </template>
+                    </AdminTable>
+                </div>
+            </AdminSection>
+        </AdminBody>
 
         <q-dialog v-model="detailOpen">
             <q-card class="sa-emh__detail">
@@ -206,18 +206,25 @@
 
         <MfaPromptDialog
             v-if="requireMfaForWrite"
-            :model-value="showMfa"
-            :description="mfaDescription"
-            :error="mfaError"
+            :model-value="mfa.show.value"
+            :description="mfa.description.value"
+            :error="mfa.error.value"
             :setup-hint="mfaSetupHint"
-            @update:model-value="onMfaDialogVisibility"
-            @confirm="onMfaConfirm"
+            @update:model-value="mfa.onVisibility"
+            @confirm="mfa.onConfirm"
         />
-    </div>
+    </AdminPage>
 </template>
 
 <script setup lang="ts">
+import AdminTable from '../components/admin-page/AdminTable.vue';
 import { computed, reactive, ref } from 'vue';
+import { useMfaPrompt } from '../vue/use-mfa-prompt.js';
+import AdminRefreshBtn from '../components/admin-page/AdminRefreshBtn.vue';
+import AdminBody from '../components/admin-page/AdminBody.vue';
+import AdminHero from '../components/admin-page/AdminHero.vue';
+import AdminSection from '../components/admin-page/AdminSection.vue';
+import AdminPage from '../components/admin-page/AdminPage.vue';
 import { useSuperAdminNotify } from '../quasar/notify.js';
 import MfaPromptDialog from '../components/MfaPromptDialog.vue';
 import { formatMessage } from '../client/i18n/format.js';
@@ -306,7 +313,6 @@ const columns = computed(() => [
         field: (r: EmailHistoryRow) => formatTs(r.sentAt),
         align: 'left' as const,
     },
-    { name: 'actions', label: '', field: 'id' as never, align: 'right' as const },
 ]);
 
 const detailOpen = ref(false);
@@ -317,10 +323,7 @@ const confirmDeleteOpen = ref(false);
 const pendingDeleteId = ref<string | null>(null);
 
 // MFA loop analogous to PlatformEmailPage (promise-resolver pattern).
-const showMfa = ref(false);
-const mfaError = ref('');
-const mfaDescription = ref('');
-let pendingMfaResolve: ((code: string | null) => void) | null = null;
+const mfa = useMfaPrompt();
 
 // Sequence guard: with rapidly changing filters a stale (out-of-order)
 // response must not overwrite the newest.
@@ -354,12 +357,17 @@ async function reload(): Promise<void> {
 void reload();
 defineExpose({ reload });
 
-async function onRequest(req: {
-    pagination: { page: number; rowsPerPage: number };
-}): Promise<void> {
-    pagination.value.page = req.pagination.page;
-    pagination.value.rowsPerPage = req.pagination.rowsPerPage;
-    await reload();
+// The pager owns page and size; both need a fetch, and a size change starts
+// over at page 1 — the row it would land on otherwise is arbitrary.
+function onPageChange(page: number): void {
+    pagination.value.page = page;
+    void reload();
+}
+
+function onRowsPerPageChange(rows: number): void {
+    pagination.value.rowsPerPage = rows;
+    pagination.value.page = 1;
+    void reload();
 }
 
 function applyFilter(): void {
@@ -428,48 +436,25 @@ async function runWrite<T>(
         }
     }
     for (;;) {
-        const code = await promptMfa(label);
+        const code = await mfa.prompt(label);
         if (code === null) return { ok: false };
         try {
             const result = await invoke(code);
-            showMfa.value = false;
+            mfa.show.value = false;
             return { ok: true, result };
         } catch (err) {
             const status = (err as { response?: { status?: number } })?.response?.status;
             if (status === 401) {
-                mfaError.value = shell.value.mfa.invalidCode;
+                mfa.error.value = shell.value.mfa.invalidCode;
                 continue;
             }
-            showMfa.value = false;
+            mfa.show.value = false;
             notify('negative', errMsg(err));
             return { ok: false };
         }
     }
 }
 
-function promptMfa(description: string): Promise<string | null> {
-    return new Promise((resolve) => {
-        mfaDescription.value = description;
-        mfaError.value = '';
-        showMfa.value = true;
-        pendingMfaResolve = (code) => {
-            pendingMfaResolve = null;
-            resolve(code);
-        };
-    });
-}
-
-function onMfaConfirm(code: string): void {
-    pendingMfaResolve?.(code);
-}
-
-function onMfaDialogVisibility(open: boolean): void {
-    showMfa.value = open;
-    if (!open && pendingMfaResolve) {
-        pendingMfaResolve(null);
-    }
-}
-
 function statusColor(status: EmailHistoryStatus): string {
     switch (status) {
         case 'SENT':
@@ -521,32 +506,6 @@ function formatTs(iso: string | null | undefined): string {
 </script>
 
 <style scoped>
-.sa-emh {
-    min-height: calc(100vh - 56px);
-    background: var(--sa-bg-app, #f1f5f9);
-}
-.sa-emh__head {
-    padding: 20px 28px 8px;
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 16px;
-}
-.sa-emh__title {
-    margin: 0;
-    font-family: var(--sa-font-head, system-ui, sans-serif);
-    font-weight: 700;
-    font-size: 22px;
-    color: var(--sa-heading, #0f172a);
-}
-.sa-emh__sub {
-    margin: 4px 0 0;
-    color: var(--sa-muted-dark, #475569);
-    font-size: 13.5px;
-}
-.sa-emh__body {
-    padding: 12px 28px 28px;
-}
 .sa-emh__filter {
     display: flex;
     gap: 10px;
@@ -559,7 +518,7 @@ function formatTs(iso: string | null | undefined): string {
 }
 .sa-emh__card {
     background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
+    border: 1px solid var(--sa-border, var(--sa-border));
     border-radius: 12px;
     overflow: hidden;
     padding: 8px 0;
@@ -567,7 +526,7 @@ function formatTs(iso: string | null | undefined): string {
 .sa-emh__empty {
     width: 100%;
     text-align: center;
-    color: var(--sa-muted-dark, #64748b);
+    color: var(--sa-muted-dark, var(--sa-muted));
     padding: 24px 0;
 }
 .sa-emh__detail {
@@ -585,14 +544,14 @@ function formatTs(iso: string | null | undefined): string {
     width: 100%;
     min-height: 320px;
     max-height: 60vh;
-    border: 1px solid var(--sa-border, #e2e8f0);
+    border: 1px solid var(--sa-border, var(--sa-border));
     border-radius: 8px;
     background: #fff;
 }
 .sa-emh__text,
 .sa-emh__smtp {
-    background: #f8fafc;
-    border: 1px solid var(--sa-border, #e2e8f0);
+    background: var(--sa-bg-surface-2);
+    border: 1px solid var(--sa-border, var(--sa-border));
     border-radius: 8px;
     padding: 12px;
     font-size: 12px;