feat: enhance mail sending functionality with subject handling

tacxou · tacxou · commit 342ebb0b7f97 · 2026-05-26T11:31:47.000+02:00
- Added subject field to mail sending API, ensuring it is required for sending emails.
- Updated MailSendService and MailSendController to incorporate subject validation and usage.
- Modified mail template modal to include input for subject, improving user experience.
- Adjusted related components to support subject management in email sending processes.
diff --git a/apps/api/defaults/mail/mail_templates.yml b/apps/api/defaults/mail/mail_templates.yml
@@ -2,12 +2,6 @@ mailTemplates:
   # Déclare les variables disponibles côté UI pour construire le payload `variables`.
   # Les valeurs peuvent contenir des placeholders Liquid `{{ ... }}` résolus via `resolveConfigVariables`.
   variables:
-    - key: subject
-      label: Sujet du mail
-      description: Sujet affiché par le client mail.
-      example: "Bienvenue sur Sesame"
-      defaultValue: "Notification"
-
     - key: appName
       label: Nom de l'application
       description: Nom affiché dans certains templates.
diff --git a/apps/api/src/management/mail/_dto/mail-send-many.dto.ts b/apps/api/src/management/mail/_dto/mail-send-many.dto.ts
@@ -1,6 +1,6 @@
 import { ApiProperty } from '@nestjs/swagger';
 import { Types } from 'mongoose';
-import { IsArray, IsIn, IsObject, IsOptional, IsString } from 'class-validator';
+import { IsArray, IsIn, IsNotEmpty, IsObject, IsOptional, IsString } from 'class-validator';
 
 export class MailSendManyDto {
   @ApiProperty({ description: 'Ids des identities destinataires' })
@@ -11,6 +11,11 @@ export class MailSendManyDto {
   @IsString()
   public template: string;
 
+  @ApiProperty({ description: "Sujet du mail (en-tête SMTP, distinct des variables du template)" })
+  @IsString()
+  @IsNotEmpty()
+  public subject: string;
+
   @ApiProperty({ required: false, description: 'Variables additionnelles injectées dans le template' })
   @IsOptional()
   @IsObject()
diff --git a/apps/api/src/management/mail/mail-send.controller.ts b/apps/api/src/management/mail/mail-send.controller.ts
@@ -23,6 +23,7 @@ export class MailSendController {
     const result = await this.mailSend.sendTemplateToIdentities({
       ids: (body.ids || []).map((id) => String(id)),
       template: body.template,
+      subject: body.subject,
       variables: body.variables,
       recipientAddressSource: body.recipientAddressSource,
     });
diff --git a/apps/api/src/management/mail/mail-send.service.ts b/apps/api/src/management/mail/mail-send.service.ts
@@ -20,17 +20,23 @@ export class MailSendService {
   public async sendTemplateToIdentities(args: {
     ids: string[];
     template: string;
+    subject: string;
     variables?: Record<string, string>;
     recipientAddressSource?: 'principal' | 'personnel';
   }): Promise<{ sent: number; skipped: number }> {
     const template = String(args.template || '').trim();
     if (!template) {
       throw new BadRequestException('Template requis');
     }
+    const subject = String(args.subject || '').trim();
+    if (!subject) {
+      throw new BadRequestException('Sujet requis');
+    }
     const variables = (args.variables && typeof args.variables === 'object' ? args.variables : {}) as Record<
       string,
       any
     >;
+    const { subject: _subjectVar, ...templateVariables } = variables;
 
     const smtp = await this.mailadmService.getParams();
     const principalPath = String(smtp?.recipientJsonPathEmailPrincipal || '').trim();
@@ -81,11 +87,12 @@ export class MailSendService {
       try {
         await this.mailer.sendMail({
           to,
-          subject: variables?.subject || 'Notification',
+          subject,
           template,
           context: {
             identity,
-            ...variables,
+            subject,
+            ...templateVariables,
           },
         });
         sent++;
diff --git a/apps/web/src/components/pages/identities/modals/mail-template.vue b/apps/web/src/components/pages/identities/modals/mail-template.vue
@@ -36,6 +36,15 @@ q-dialog(
               :loading="templatesLoading"
               color="teal-7"
             )
+            q-input.q-mt-md(
+              v-model="mailSubject"
+              label="Sujet du mail"
+              hint="Sujet affiché par le client mail (obligatoire)"
+              outlined
+              dense
+              color="teal-7"
+              autocomplete="off"
+            )
             q-banner.q-mt-md(
               v-if="mailPathsReady && recipientSourceOptions.length === 0"
               rounded
@@ -195,6 +204,15 @@ q-dialog(
             :loading="templatesLoading"
             color="teal-7"
           )
+          q-input.q-mt-md(
+            v-model="mailSubject"
+            label="Sujet du mail"
+            hint="Sujet affiché par le client mail (obligatoire)"
+            outlined
+            dense
+            color="teal-7"
+            autocomplete="off"
+          )
           q-banner.q-mt-md(
             v-if="mailPathsReady && recipientSourceOptions.length === 0"
             rounded
@@ -336,6 +354,7 @@ q-dialog(
 
 <script lang="ts" setup>
 import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
+import { watchDebounced } from '@vueuse/core'
 import { useDialogPluginComponent, useQuasar } from 'quasar'
 
 const props = defineProps({
@@ -463,6 +482,7 @@ const showSendAll = computed(() => {
 
 const initAllIdentities = ref(false)
 const templateName = ref<string>('')
+const mailSubject = ref<string>('')
 const templates = ref<{ label: string; value: string }[]>([])
 const templatesLoading = ref(false)
 const previewHtml = ref('')
@@ -489,6 +509,7 @@ const recipientSourceOptions = computed(() => {
 const canSendMailTemplate = computed(
   () =>
     mailPathsReady.value &&
+    String(mailSubject.value || '').trim().length > 0 &&
     (recipientAddressSource.value === 'principal' || recipientAddressSource.value === 'personnel'),
 )
 
@@ -499,6 +520,9 @@ const sendButtonTitle = computed(() => {
   if (!mailPathsReady.value) {
     return 'Chargement des paramètres SMTP…'
   }
+  if (String(mailSubject.value || '').trim().length === 0) {
+    return 'Renseignez le sujet du mail.'
+  }
   if (recipientSourceOptions.value.length === 0) {
     return 'Configurez au moins un chemin JSON (e-mail personnel ou principal) dans Paramètres → Serveur SMTP.'
   }
@@ -517,7 +541,7 @@ const variablesObject = computed(() => {
   const out: Record<string, string> = {}
   for (const row of variablesRows.value) {
     const k = String(row.key || '').trim()
-    if (!k) continue
+    if (!k || k === 'subject') continue
     out[k] = String(row.value ?? '')
   }
   return out
@@ -529,7 +553,7 @@ const variablesToSend = computed(() => {
   // Toujours envoyer les variables déclarées dans la config (avec leur défaut)
   for (const v of availableVariables.value) {
     const key = String(v?.key || '').trim()
-    if (!key) continue
+    if (!key || key === 'subject') continue
     base[key] = v.defaultValue !== undefined && v.defaultValue !== null ? String(v.defaultValue) : ''
   }
 
@@ -582,7 +606,7 @@ async function fetchTemplatesConfig() {
   try {
     const res = await (useNuxtApp() as any).$http.get('/management/mail/templates/config', { method: 'GET' })
     const vars = res?._data?.data?.variables || []
-    availableVariables.value = Array.isArray(vars) ? vars : []
+    availableVariables.value = Array.isArray(vars) ? vars.filter((v: { key?: string }) => String(v?.key || '').trim() !== 'subject') : []
   } catch {
     availableVariables.value = []
   }
@@ -597,6 +621,7 @@ async function refreshPreview() {
         template: templateName.value,
         variables: {
           ...variablesToSend.value,
+          subject: String(mailSubject.value || '').trim(),
           identity,
         },
       },
@@ -617,12 +642,13 @@ onMounted(async () => {
   await refreshPreview()
 })
 
-watch(
-  () => [templateName.value, variablesToSend.value],
-  async () => {
-    await refreshPreview()
+// Ne pas watcher variablesToSend (nouvel objet à chaque lecture) : boucle de re-renders + perte de focus/valeur sur q-input.
+watchDebounced(
+  [templateName, mailSubject, variablesRows, availableVariables],
+  () => {
+    void refreshPreview()
   },
-  { deep: true },
+  { debounce: 400, deep: true },
 )
 
 watch(
@@ -650,6 +676,7 @@ const syncIdentities = () => {
   onDialogOK({
     initAllIdentities: initAllIdentities.value,
     template: templateName.value,
+    subject: String(mailSubject.value || '').trim(),
     variables: variablesToSend.value,
     recipientAddressSource: recipientAddressSource.value,
   })
diff --git a/apps/web/src/pages/identities/table.vue b/apps/web/src/pages/identities/table.vue
@@ -550,13 +550,17 @@ export default defineNuxtComponent({
       }
     },
 
-    async sendTemplateMailToIdentities(identities, data: { template?: string; variables?: Record<string, string> }) {
+    async sendTemplateMailToIdentities(
+      identities,
+      data: { template?: string; subject?: string; variables?: Record<string, string>; recipientAddressSource?: string },
+    ) {
       const ids = this.bulkIdsFromIdentities(identities)
       try {
         const result = await this.$http.post('/management/mail/sendmany', {
           body: {
             ids,
             template: data?.template,
+            subject: data?.subject,
             variables: data?.variables,
             ...(data?.recipientAddressSource ? { recipientAddressSource: data.recipientAddressSource } : {}),
           },
diff --git a/apps/web/src/pages/identities/table/[_id]/index.vue b/apps/web/src/pages/identities/table/[_id]/index.vue
@@ -438,6 +438,7 @@ export default defineNuxtComponent({
               body: {
                 ids: [this.identity._id],
                 template: data?.template,
+                subject: data?.subject,
                 variables: data?.variables,
                 ...(data?.recipientAddressSource ? { recipientAddressSource: data.recipientAddressSource } : {}),
               },
