@saasicat/ui-vue 0.19.0 → 0.22.0

package/src/pages-standard/PlatformEmailPage.vue

@@ -1,45 +1,41 @@
 <template>
-    <div class="sa-pemail">
-        <header class="sa-page-head">
-            <div>
-                <h1 class="sa-page-head__title">{{ resolvedTitle }}</h1>
-                <p class="sa-page-head__sub">{{ msg.provider.subtitle }}</p>
-            </div>
-            <div class="sa-page-head__actions">
-                <q-btn
+    <AdminPage class="sa-pemail">
+        <AdminHero :title="resolvedTitle" :subtitle="msg.provider.subtitle">
+            <template #actions>
+                <button
                     v-if="rows.length === 0"
-                    unelevated
-                    color="primary"
-                    icon="add"
-                    :label="msg.sender"
+                    class="sa-btn sa-btn--primary"
+                    type="button"
                     @click="openCreate"
-                />
-                <q-btn flat icon="refresh" :label="common.reload" @click="reload" />
-            </div>
-        </header>
+                >
+                    <q-icon name="add" size="16px" />
+                    <span>{{ msg.sender }}</span>
+                </button>
+                <AdminRefreshBtn :loading="loading" @refresh="reload" />
+            </template>
+        </AdminHero>
 
-        <div class="sa-pemail__card">
-            <q-table
-                flat
-                :rows="rows"
-                :columns="columns"
-                row-key="id"
-                :loading="loading"
-                :pagination="{ rowsPerPage: 0 }"
-                hide-pagination
-            >
-                <template #body-cell-active="{ row }">
-                    <q-td>
-                        <q-badge
-                            :color="row.active ? 'positive' : 'grey'"
-                            :label="
-                                row.active ? msg.provider.statusActive : msg.provider.statusInactive
-                            "
-                        />
-                    </q-td>
-                </template>
-                <template #body-cell-actions="{ row }">
-                    <q-td>
+        <AdminBody>
+            <AdminSection class="sa-pemail__card">
+                <AdminTable
+                    :rows="rows"
+                    :columns="columns"
+                    :loading="loading"
+                    storage-key="platform-email"
+                >
+                    <template #body-cell-active="{ row }">
+                        <q-td>
+                            <q-badge
+                                :color="row.active ? 'positive' : 'grey'"
+                                :label="
+                                    row.active
+                                        ? msg.provider.statusActive
+                                        : msg.provider.statusInactive
+                                "
+                            />
+                        </q-td>
+                    </template>
+                    <template #row-actions="{ row }">
                         <q-btn
                             flat
                             dense
@@ -64,10 +60,10 @@
                             :title="common.delete"
                             @click="onDelete(row)"
                         />
-                    </q-td>
-                </template>
-            </q-table>
-        </div>
+                    </template>
+                </AdminTable>
+            </AdminSection>
+        </AdminBody>
 
         <q-dialog v-model="showForm">
             <q-card class="sa-pemail__dialog">
@@ -185,19 +181,26 @@
 
         <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 { useQuasar } from 'quasar';
+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';
@@ -265,7 +268,6 @@ const columns = computed(() => [
         align: 'left' as const,
     },
     { name: 'active', label: common.value.status, field: 'active', align: 'left' as const },
-    { name: 'actions', label: '', field: 'id' as never, align: 'right' as 'left' },
 ]);
 
 const showForm = ref(false);
@@ -279,10 +281,7 @@ const testResult = ref<PlatformEmailTestResult | null>(null);
 const testing = ref(false);
 
 // MFA loop analogous to UsersPage (promise-resolver pattern).
-const showMfa = ref(false);
-const mfaError = ref('');
-const mfaDescription = ref('');
-let pendingMfaResolve: ((code: string | null) => void) | null = null;
+const mfa = useMfaPrompt();
 
 function emptyForm(): PlatformEmailWriteInput {
     return {
@@ -298,29 +297,6 @@ function emptyForm(): PlatformEmailWriteInput {
     };
 }
 
-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 errMsg(err: unknown): string {
     return (
         (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
@@ -381,19 +357,19 @@ async function runWrite(
         }
     }
     for (;;) {
-        const code = await promptMfa(label);
+        const code = await mfa.prompt(label);
         if (code === null) return false;
         try {
             await invoke(code);
-            showMfa.value = false;
+            mfa.show.value = false;
             return true;
         } 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 false;
         }
@@ -484,17 +460,6 @@ async function onTest(): Promise<void> {
 </script>
 
 <style scoped>
-.sa-pemail {
-    min-height: calc(100vh - 56px);
-    background: var(--sa-bg-app, #f1f5f9);
-    padding: 20px 28px 28px;
-}
-.sa-pemail__card {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 12px;
-    overflow: hidden;
-}
 .sa-pemail__dialog {
     min-width: 420px;
 }

package/src/pages-standard/PromoCodeDetailPage.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="sa-promo-detail">
-        <header class="sa-page-head">
-            <div>
+    <AdminPage class="sa-promo-detail">
+        <AdminHero :title="data?.promo.code ?? labels.promoCode">
+            <template #before-title>
                 <q-btn
                     flat
                     dense
@@ -10,73 +10,65 @@
                     :to="backRoute"
                     class="sa-promo-detail__back"
                 />
-                <h1 class="sa-page-head__title">{{ data?.promo.code ?? labels.promoCode }}</h1>
-                <p class="sa-page-head__sub">
-                    <template v-if="data">
-                        {{ data.promo.valueType }} · {{ data.promo.value }} ·
-                        <q-badge
-                            :color="resolveStatusColor(String(data.promo.status))"
-                            :label="String(data.promo.status)"
-                        />
-                    </template>
-                    <template v-else>—</template>
-                </p>
-            </div>
-            <div class="sa-promo-detail__head-actions">
-                <q-btn
+            </template>
+            <template #subtitle>
+                <template v-if="data">
+                    {{ data.promo.valueType }} · {{ data.promo.value }} ·
+                    <q-badge
+                        :color="resolveStatusColor(String(data.promo.status))"
+                        :label="String(data.promo.status)"
+                    />
+                </template>
+                <template v-else>—</template>
+            </template>
+            <template #actions>
+                <button
                     v-if="editSubmit && data"
-                    color="primary"
-                    unelevated
-                    icon="edit"
-                    :label="labels.edit"
+                    class="sa-btn sa-btn--primary"
+                    type="button"
                     @click="openEdit"
-                />
+                >
+                    <q-icon name="edit" size="16px" />
+                    <span>{{ labels.edit }}</span>
+                </button>
                 <slot name="header-actions" />
-            </div>
-        </header>
-
-        <div class="sa-promo-detail__body">
-            <div v-if="loading" class="sa-promo-detail__state">
-                <q-spinner size="32px" /> {{ msg.detail.loading }}
-            </div>
-            <div v-else-if="!data" class="sa-promo-detail__state">{{ labels.empty }}</div>
+            </template>
+        </AdminHero>
 
-            <template v-else>
-                <div class="sa-card sa-promo-detail__section">
-                    <div class="sa-promo-detail__section-head">{{ labels.config }}</div>
+        <AdminBody
+            :loading="loading"
+            :empty="!data"
+            :loading-text="msg.detail.loading"
+            :empty-text="labels.empty"
+        >
+            <template v-if="data">
+                <AdminSection :title="labels.config">
                     <slot name="config" :promo="data.promo">
                         <pre class="sa-promo-detail__kv">{{ resolveFormatPromo(data.promo) }}</pre>
                     </slot>
-                </div>
+                </AdminSection>
 
-                <div class="sa-card sa-promo-detail__section">
-                    <div class="sa-promo-detail__section-head">{{ labels.stats }}</div>
+                <AdminSection :title="labels.stats">
                     <slot name="stats" :stats="data.stats">
                         <pre class="sa-promo-detail__kv">{{
                             JSON.stringify(data.stats, null, 2)
                         }}</pre>
                     </slot>
-                </div>
+                </AdminSection>
 
-                <div class="sa-card sa-promo-detail__section">
-                    <div class="sa-promo-detail__section-head">
-                        {{ labels.redemptions }} ({{ data.redemptions.length }})
-                    </div>
+                <AdminSection :title="`${labels.redemptions} (${data.redemptions.length})`">
                     <slot name="redemptions" :redemptions="data.redemptions">
-                        <q-table
-                            flat
-                            :rows="data.redemptions"
+                        <AdminTable
+                            :rows="redemptionRows"
                             :columns="redemptionsColumns ?? defaultColumns"
-                            row-key="id"
-                            :pagination="{ rowsPerPage: 0 }"
-                            hide-pagination
+                            storage-key="promo-code-redemptions"
                         />
                     </slot>
-                </div>
+                </AdminSection>
 
                 <slot name="extra-sections" :data="data" />
             </template>
-        </div>
+        </AdminBody>
 
         <PromoCodeEditDialog
             v-if="editSubmit"
@@ -86,11 +78,16 @@
             :submit="editSubmit"
             @updated="onEditUpdated"
         />
-    </div>
+    </AdminPage>
 </template>
 
 <script setup lang="ts">
+import AdminTable from '../components/admin-page/AdminTable.vue';
 import { computed, onMounted, ref } from '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 type { RouteLocationRaw } from 'vue-router';
 import type { QTableColumn } from 'quasar';
 import PromoCodeEditDialog, {
@@ -280,13 +277,11 @@ const defaultColumns = computed<QTableColumn[]>(() => [
         align: 'left',
     },
 ]);
+
+const redemptionRows = computed(() => data.value?.redemptions ?? []);
 </script>
 
 <style scoped>
-.sa-promo-detail {
-    min-height: calc(100vh - 56px);
-    background: var(--sa-bg-app);
-}
 .sa-promo-detail__back {
     margin-bottom: 6px;
 }
@@ -297,23 +292,10 @@ const defaultColumns = computed<QTableColumn[]>(() => [
     margin-left: auto;
 }
 .sa-promo-detail__body {
-    padding: 12px 28px 28px;
     display: flex;
     flex-direction: column;
     gap: 14px;
 }
-.sa-promo-detail__section {
-    padding: 16px 18px;
-}
-.sa-promo-detail__section-head {
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    color: var(--sa-muted);
-    text-transform: uppercase;
-    margin-bottom: 10px;
-    font-family: var(--sa-font-head);
-}
 .sa-promo-detail__kv {
     background: #fafbfc;
     border: 1px solid var(--sa-border);
@@ -324,11 +306,4 @@ const defaultColumns = computed<QTableColumn[]>(() => [
     overflow-x: auto;
     font-family: var(--sa-font-mono);
 }
-.sa-promo-detail__state {
-    padding: 24px;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    color: var(--sa-muted);
-}
 </style>