@saasicat/ui-vue 0.4.0 → 0.6.0

package/src/pages-standard/PlatformEmailPage.vue

@@ -2,10 +2,8 @@
     <div class="sa-pemail">
         <header class="sa-page-head">
             <div>
-                <h1 class="sa-page-head__title">{{ title }}</h1>
-                <p class="sa-page-head__sub">
-                    Zentraler Absender für Registrierungs- und System-Mails dieser Plattform.
-                </p>
+                <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
@@ -13,10 +11,10 @@
                     unelevated
                     color="primary"
                     icon="add"
-                    label="Absender"
+                    :label="msg.sender"
                     @click="openCreate"
                 />
-                <q-btn flat icon="refresh" label="Neu laden" @click="reload" />
+                <q-btn flat icon="refresh" :label="common.reload" @click="reload" />
             </div>
         </header>
 
@@ -34,7 +32,9 @@
                     <q-td>
                         <q-badge
                             :color="row.active ? 'positive' : 'grey'"
-                            :label="row.active ? 'aktiv' : 'inaktiv'"
+                            :label="
+                                row.active ? msg.provider.statusActive : msg.provider.statusInactive
+                            "
                         />
                     </q-td>
                 </template>
@@ -45,7 +45,7 @@
                             dense
                             icon="send"
                             color="primary"
-                            title="Test-Mail senden"
+                            :title="msg.provider.sendTestMail"
                             @click="openTest(row)"
                         />
                         <q-btn
@@ -53,7 +53,7 @@
                             dense
                             icon="edit"
                             color="grey-7"
-                            title="Bearbeiten"
+                            :title="common.edit"
                             @click="openEdit(row)"
                         />
                         <q-btn
@@ -61,7 +61,7 @@
                             dense
                             icon="delete"
                             color="negative"
-                            title="Löschen"
+                            :title="common.delete"
                             @click="onDelete(row)"
                         />
                     </q-td>
@@ -73,41 +73,72 @@
             <q-card class="sa-pemail__dialog">
                 <q-card-section>
                     <div class="text-h6">
-                        {{ editing ? 'Absender bearbeiten' : 'Absender anlegen' }}
+                        {{
+                            editing ? msg.provider.dialogEditTitle : msg.provider.dialogCreateTitle
+                        }}
                     </div>
                 </q-card-section>
                 <q-card-section class="q-gutter-sm">
-                    <q-input v-model="form.name" outlined dense label="Name" />
-                    <q-input v-model="form.smtpHost" outlined dense label="SMTP-Host" />
+                    <q-input v-model="form.name" outlined dense :label="common.name" />
+                    <q-input
+                        v-model="form.smtpHost"
+                        outlined
+                        dense
+                        :label="msg.provider.fieldSmtpHost"
+                    />
                     <q-input
                         v-model.number="form.smtpPort"
                         outlined
                         dense
                         type="number"
-                        label="SMTP-Port"
+                        :label="msg.provider.fieldSmtpPort"
+                    />
+                    <q-input
+                        v-model="form.smtpUser"
+                        outlined
+                        dense
+                        :label="msg.provider.fieldSmtpUser"
                     />
-                    <q-input v-model="form.smtpUser" outlined dense label="SMTP-Benutzer" />
                     <q-input
                         v-model="form.smtpPassword"
                         outlined
                         dense
                         type="password"
-                        :label="editing ? 'SMTP-Passwort (leer = unverändert)' : 'SMTP-Passwort'"
+                        :label="
+                            editing
+                                ? msg.provider.fieldSmtpPasswordEdit
+                                : msg.provider.fieldSmtpPassword
+                        "
                     />
                     <q-select
                         v-model="form.encryption"
                         outlined
                         dense
-                        label="Verschlüsselung"
+                        :label="msg.provider.fieldEncryption"
                         :options="encryptionOptions"
                     />
-                    <q-input v-model="form.fromEmail" outlined dense label="Absender-Adresse" />
-                    <q-input v-model="form.fromName" outlined dense label="Absender-Name" />
-                    <q-toggle v-if="editing" v-model="form.active" label="Aktiv" />
+                    <q-input
+                        v-model="form.fromEmail"
+                        outlined
+                        dense
+                        :label="msg.provider.fieldFromEmail"
+                    />
+                    <q-input
+                        v-model="form.fromName"
+                        outlined
+                        dense
+                        :label="msg.provider.fieldFromName"
+                    />
+                    <q-toggle v-if="editing" v-model="form.active" :label="common.active" />
                 </q-card-section>
                 <q-card-actions align="right">
-                    <q-btn flat label="Abbrechen" @click="showForm = false" />
-                    <q-btn unelevated color="primary" :label="editing ? 'Speichern' : 'Anlegen'" @click="onSubmit" />
+                    <q-btn flat :label="common.cancel" @click="showForm = false" />
+                    <q-btn
+                        unelevated
+                        color="primary"
+                        :label="editing ? common.save : common.create"
+                        @click="onSubmit"
+                    />
                 </q-card-actions>
             </q-card>
         </q-dialog>
@@ -115,22 +146,36 @@
         <q-dialog v-model="showTest">
             <q-card class="sa-pemail__dialog">
                 <q-card-section>
-                    <div class="text-h6">Test-Mail senden</div>
+                    <div class="text-h6">{{ msg.provider.sendTestMail }}</div>
                     <div class="text-caption text-grey-7">{{ testTarget?.name }}</div>
                 </q-card-section>
                 <q-card-section class="q-gutter-sm">
-                    <q-input v-model="testForm.toEmail" outlined dense label="Empfänger" type="email" />
-                    <q-input v-model="testForm.subject" outlined dense label="Betreff (optional)" />
-                    <q-banner v-if="testResult" :class="testResult.success ? 'bg-green-1' : 'bg-red-1'">
+                    <q-input
+                        v-model="testForm.toEmail"
+                        outlined
+                        dense
+                        :label="msg.recipient"
+                        type="email"
+                    />
+                    <q-input
+                        v-model="testForm.subject"
+                        outlined
+                        dense
+                        :label="msg.provider.fieldSubject"
+                    />
+                    <q-banner
+                        v-if="testResult"
+                        :class="testResult.success ? 'bg-green-1' : 'bg-red-1'"
+                    >
                         {{ testResult.message }}
                     </q-banner>
                 </q-card-section>
                 <q-card-actions align="right">
-                    <q-btn flat label="Schließen" @click="showTest = false" />
+                    <q-btn flat :label="common.close" @click="showTest = false" />
                     <q-btn
                         unelevated
                         color="primary"
-                        label="Senden"
+                        :label="msg.provider.send"
                         :loading="testing"
                         @click="onTest"
                     />
@@ -151,9 +196,12 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from 'vue';
+import { computed, reactive, ref } from 'vue';
 import { useQuasar } from 'quasar';
+import { useSuperAdminNotify } from '../quasar/notify.js';
 import MfaPromptDialog from '../components/MfaPromptDialog.vue';
+import { formatMessage } from '../client/i18n/format.js';
+import { useSaMessages } from '../vue/use-super-admin-i18n.js';
 import type {
     PlatformEmailProvider,
     PlatformEmailWriteInput,
@@ -176,36 +224,49 @@ const props = withDefaults(
             mfaCode?: string,
         ) => Promise<unknown>;
         deleteProvider: (id: string, mfaCode?: string) => Promise<unknown>;
-        testProvider: (id: string, input: PlatformEmailTestInput) => Promise<PlatformEmailTestResult>;
+        testProvider: (
+            id: string,
+            input: PlatformEmailTestInput,
+        ) => Promise<PlatformEmailTestResult>;
         title?: string;
         requireMfaForWrite?: boolean;
         mfaSetupHint?: string;
     }>(),
     {
-        title: 'Plattform-E-Mail',
         requireMfaForWrite: false,
     },
 );
 
 const q = useQuasar();
+const notify = useSuperAdminNotify();
+const msg = useSaMessages('email');
+const common = useSaMessages('common');
+const shell = useSaMessages('shell');
 const rows = ref<PlatformEmailProvider[]>([]);
 const loading = ref(false);
 
+const resolvedTitle = computed(() => props.title ?? msg.value.provider.title);
+
 const encryptionOptions = ['NONE', 'SSL', 'TLS', 'STARTTLS'];
 
-const columns = [
-    { name: 'name', label: 'Name', field: 'name', align: 'left' as const },
+const columns = computed(() => [
+    { name: 'name', label: common.value.name, field: 'name', align: 'left' as const },
     {
         name: 'host',
-        label: 'Host',
+        label: msg.value.provider.columnHost,
         field: (r: PlatformEmailProvider) => `${r.smtpHost}:${r.smtpPort}`,
         align: 'left' as const,
     },
-    { name: 'fromEmail', label: 'Absender', field: 'fromEmail', align: 'left' as const },
-    { name: 'encryption', label: 'Krypto', field: 'encryption', align: 'left' as const },
-    { name: 'active', label: 'Status', field: 'active', align: 'left' as const },
+    { name: 'fromEmail', label: msg.value.sender, field: 'fromEmail', align: 'left' as const },
+    {
+        name: 'encryption',
+        label: msg.value.provider.columnEncryption,
+        field: 'encryption',
+        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);
 const editing = ref<PlatformEmailProvider | null>(null);
@@ -264,7 +325,7 @@ function errMsg(err: unknown): string {
     return (
         (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
         (err as Error)?.message ??
-        'Aktion fehlgeschlagen'
+        msg.value.errorAction
     );
 }
 
@@ -274,7 +335,7 @@ async function reload(): Promise<void> {
         rows.value = await props.loadProviders();
     } catch (err) {
         rows.value = [];
-        q.notify({ type: 'negative', message: errMsg(err), position: 'top' });
+        notify('negative', errMsg(err));
     } finally {
         loading.value = false;
     }
@@ -306,13 +367,16 @@ function openEdit(row: PlatformEmailProvider): void {
 }
 
 // MFA loop: on 401 the dialog stays open and asks again.
-async function runWrite(label: string, invoke: (code: string) => Promise<unknown>): Promise<boolean> {
+async function runWrite(
+    label: string,
+    invoke: (code: string) => Promise<unknown>,
+): Promise<boolean> {
     if (!props.requireMfaForWrite) {
         try {
             await invoke('');
             return true;
         } catch (err) {
-            q.notify({ type: 'negative', message: errMsg(err), position: 'top' });
+            notify('negative', errMsg(err));
             return false;
         }
     }
@@ -326,11 +390,11 @@ async function runWrite(label: string, invoke: (code: string) => Promise<unknown
         } catch (err) {
             const status = (err as { response?: { status?: number } })?.response?.status;
             if (status === 401) {
-                mfaError.value = 'TOTP-Code ungültig oder MFA nicht eingerichtet.';
+                mfaError.value = shell.value.mfa.invalidCode;
                 continue;
             }
             showMfa.value = false;
-            q.notify({ type: 'negative', message: errMsg(err), position: 'top' });
+            notify('negative', errMsg(err));
             return false;
         }
     }
@@ -360,7 +424,9 @@ async function onSubmit(): Promise<void> {
     const current = editing.value;
     const input = buildWriteInput();
     const ok = await runWrite(
-        current ? `Absender "${input.name}" speichern.` : `Absender "${input.name}" anlegen.`,
+        formatMessage(current ? msg.value.provider.mfaSave : msg.value.provider.mfaCreate, {
+            name: input.name,
+        }),
         (code) =>
             current
                 ? props.updateProvider(current.id, input, code || undefined)
@@ -368,23 +434,24 @@ async function onSubmit(): Promise<void> {
     );
     if (ok) {
         showForm.value = false;
-        q.notify({ type: 'positive', message: 'Gespeichert.', position: 'top' });
+        notify('positive', msg.value.provider.saved);
         void reload();
     }
 }
 
 function onDelete(row: PlatformEmailProvider): void {
     q.dialog({
-        title: 'Absender löschen',
-        message: `"${row.name}" wirklich löschen?`,
-        cancel: 'Abbrechen',
-        ok: { label: 'Löschen', color: 'negative' },
+        title: msg.value.provider.deleteDialogTitle,
+        message: formatMessage(msg.value.provider.deleteDialogMessage, { name: row.name }),
+        cancel: common.value.cancel,
+        ok: { label: common.value.delete, color: 'negative' },
     }).onOk(async () => {
-        const ok = await runWrite(`Absender "${row.name}" löschen.`, (code) =>
-            props.deleteProvider(row.id, code || undefined),
+        const ok = await runWrite(
+            formatMessage(msg.value.provider.mfaDelete, { name: row.name }),
+            (code) => props.deleteProvider(row.id, code || undefined),
         );
         if (ok) {
-            q.notify({ type: 'positive', message: 'Gelöscht.', position: 'top' });
+            notify('positive', msg.value.provider.deleted);
             void reload();
         }
     });

package/src/pages-standard/PromoCodeDetailPage.vue

@@ -6,11 +6,11 @@
                     flat
                     dense
                     icon="arrow_back"
-                    :label="backLabel"
+                    :label="labels.back"
                     :to="backRoute"
                     class="sa-promo-detail__back"
                 />
-                <h1 class="sa-page-head__title">{{ data?.promo.code ?? promoCodeLabel }}</h1>
+                <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 }} ·
@@ -28,7 +28,7 @@
                     color="primary"
                     unelevated
                     icon="edit"
-                    :label="editLabel"
+                    :label="labels.edit"
                     @click="openEdit"
                 />
                 <slot name="header-actions" />
@@ -37,20 +37,20 @@
 
         <div class="sa-promo-detail__body">
             <div v-if="loading" class="sa-promo-detail__state">
-                <q-spinner size="32px" /> wird geladen…
+                <q-spinner size="32px" /> {{ msg.detail.loading }}
             </div>
-            <div v-else-if="!data" class="sa-promo-detail__state">{{ emptyLabel }}</div>
+            <div v-else-if="!data" class="sa-promo-detail__state">{{ labels.empty }}</div>
 
             <template v-else>
                 <div class="sa-card sa-promo-detail__section">
-                    <div class="sa-promo-detail__section-head">{{ configLabel }}</div>
+                    <div class="sa-promo-detail__section-head">{{ labels.config }}</div>
                     <slot name="config" :promo="data.promo">
                         <pre class="sa-promo-detail__kv">{{ resolveFormatPromo(data.promo) }}</pre>
                     </slot>
                 </div>
 
                 <div class="sa-card sa-promo-detail__section">
-                    <div class="sa-promo-detail__section-head">{{ statsLabel }}</div>
+                    <div class="sa-promo-detail__section-head">{{ labels.stats }}</div>
                     <slot name="stats" :stats="data.stats">
                         <pre class="sa-promo-detail__kv">{{
                             JSON.stringify(data.stats, null, 2)
@@ -60,13 +60,13 @@
 
                 <div class="sa-card sa-promo-detail__section">
                     <div class="sa-promo-detail__section-head">
-                        {{ redemptionsLabel }} ({{ data.redemptions.length }})
+                        {{ labels.redemptions }} ({{ data.redemptions.length }})
                     </div>
                     <slot name="redemptions" :redemptions="data.redemptions">
                         <q-table
                             flat
                             :rows="data.redemptions"
-                            :columns="redemptionsColumns ?? DEFAULT_COLUMNS"
+                            :columns="redemptionsColumns ?? defaultColumns"
                             row-key="id"
                             :pagination="{ rowsPerPage: 0 }"
                             hide-pagination
@@ -97,6 +97,7 @@ import PromoCodeEditDialog, {
     type PromoCodeEditRow,
 } from '../components/dialogs/PromoCodeEditDialog.vue';
 import type { PromoCodePlanOption, PromoCodeUpdatePayload } from '../components/dialogs/types.js';
+import { useSaMessages } from '../vue/use-super-admin-i18n.js';
 
 export interface PromoDetailData {
     promo: Record<string, unknown> & {
@@ -109,53 +110,55 @@ export interface PromoDetailData {
     redemptions: Array<Record<string, unknown> & { id: string }>;
 }
 
-const props = withDefaults(
-    defineProps<{
-        loadDetail: () => Promise<PromoDetailData>;
-        backRoute: RouteLocationRaw;
-        backLabel?: string;
-        promoCodeLabel?: string;
-        configLabel?: string;
-        statsLabel?: string;
-        redemptionsLabel?: string;
-        emptyLabel?: string;
-        redemptionsColumns?: QTableColumn[];
-        /**
-         * Maps a status string to a Quasar color name. Default: ACTIVE→positive,
-         * PAUSED→amber-7, EXPIRED→grey, else negative.
-         */
-        statusColor?: (status: string) => string;
-        /**
-         * Optional formatter for the Konfiguration JSON block. Default:
-         * `JSON.stringify(promo, null, 2)` — the consumer can pass a curated
-         * subset (e.g. only marketing-relevant fields).
-         */
-        formatPromo?: (promo: Record<string, unknown>) => string;
-        /**
-         * When set: enables the "Edit" button in the header and opens the
-         * {@link PromoCodeEditDialog}. The consumer provides the app-specific
-         * PATCH function (e.g. `adminApi.promoCodes.update`). After a
-         * successful save, the detail page automatically reloads via
-         * `loadDetail()` — the consumer needs to trigger nothing further.
-         */
-        editSubmit?: (id: string, payload: PromoCodeUpdatePayload) => Promise<void>;
-        editLabel?: string;
-        /**
-         * Plan list for the plan picker in the edit dialog. When empty, the
-         * dialog hides the plan selection.
-         */
-        editPlans?: readonly PromoCodePlanOption[];
-    }>(),
-    {
-        backLabel: 'Zurück',
-        promoCodeLabel: 'Promo-Code',
-        configLabel: 'Konfiguration',
-        statsLabel: 'Statistik',
-        redemptionsLabel: 'Einlösungen',
-        emptyLabel: 'Code nicht gefunden.',
-        editLabel: 'Bearbeiten',
-    },
-);
+const props = defineProps<{
+    loadDetail: () => Promise<PromoDetailData>;
+    backRoute: RouteLocationRaw;
+    backLabel?: string;
+    promoCodeLabel?: string;
+    configLabel?: string;
+    statsLabel?: string;
+    redemptionsLabel?: string;
+    emptyLabel?: string;
+    redemptionsColumns?: QTableColumn[];
+    /**
+     * Maps a status string to a Quasar color name. Default: ACTIVE→positive,
+     * PAUSED→amber-7, EXPIRED→grey, else negative.
+     */
+    statusColor?: (status: string) => string;
+    /**
+     * Optional formatter for the Konfiguration JSON block. Default:
+     * `JSON.stringify(promo, null, 2)` — the consumer can pass a curated
+     * subset (e.g. only marketing-relevant fields).
+     */
+    formatPromo?: (promo: Record<string, unknown>) => string;
+    /**
+     * When set: enables the "Edit" button in the header and opens the
+     * {@link PromoCodeEditDialog}. The consumer provides the app-specific
+     * PATCH function (e.g. `adminApi.promoCodes.update`). After a
+     * successful save, the detail page automatically reloads via
+     * `loadDetail()` — the consumer needs to trigger nothing further.
+     */
+    editSubmit?: (id: string, payload: PromoCodeUpdatePayload) => Promise<void>;
+    editLabel?: string;
+    /**
+     * Plan list for the plan picker in the edit dialog. When empty, the
+     * dialog hides the plan selection.
+     */
+    editPlans?: readonly PromoCodePlanOption[];
+}>();
+
+const msg = useSaMessages('promos');
+const common = useSaMessages('common');
+
+const labels = computed(() => ({
+    back: props.backLabel ?? common.value.back,
+    promoCode: props.promoCodeLabel ?? msg.value.detail.promoCodeLabel,
+    config: props.configLabel ?? msg.value.detail.configLabel,
+    stats: props.statsLabel ?? msg.value.detail.statsLabel,
+    redemptions: props.redemptionsLabel ?? msg.value.detail.redemptionsLabel,
+    empty: props.emptyLabel ?? msg.value.detail.emptyLabel,
+    edit: props.editLabel ?? common.value.edit,
+}));
 
 const data = ref<PromoDetailData | null>(null);
 const loading = ref(false);
@@ -243,24 +246,24 @@ function resolveFormatPromo(promo: Record<string, unknown>): string {
     return JSON.stringify(promo, null, 2);
 }
 
-const DEFAULT_COLUMNS: QTableColumn[] = [
+const defaultColumns = computed<QTableColumn[]>(() => [
     {
         name: 'tenant',
-        label: 'Tenant',
+        label: msg.value.detail.columnTenant,
         field: (r: unknown) =>
             ((r as Record<string, unknown>).tenant as { slug?: string } | undefined)?.slug ?? '—',
         align: 'left',
     },
-    { name: 'status', label: 'Status', field: 'status', align: 'left' },
+    { name: 'status', label: common.value.status, field: 'status', align: 'left' },
     {
         name: 'startsAt',
-        label: 'Start',
+        label: msg.value.detail.columnStart,
         field: (r: unknown) => String((r as Record<string, unknown>).startsAt ?? '').slice(0, 10),
         align: 'left',
     },
     {
         name: 'endsAt',
-        label: 'Ende',
+        label: msg.value.detail.columnEnd,
         field: (r: unknown) => {
             const v = (r as Record<string, unknown>).endsAt;
             return v ? String(v).slice(0, 10) : '∞';
@@ -269,14 +272,14 @@ const DEFAULT_COLUMNS: QTableColumn[] = [
     },
     {
         name: 'redeemedAt',
-        label: 'Eingelöst',
+        label: msg.value.detail.columnRedeemedAt,
         field: (r: unknown) =>
             String((r as Record<string, unknown>).redeemedAt ?? '')
                 .slice(0, 19)
                 .replace('T', ' '),
         align: 'left',
     },
-];
+]);
 </script>
 
 <style scoped>