custom report name for direct print

Author: usingtechnology

app/frontend/src/components/forms/DirectPrintButton.vue

@@ -40,6 +40,23 @@ const { isRTL, form } = storeToRefs(formStore);
 
 const formId = computed(() => (properties.f ? properties.f : form.value.id));
 
+async function getReportName(printConfig, formValue, formIdValue) {
+  // If custom name is specified, use it
+  if (printConfig.reportNameOption === 'custom' && printConfig.reportName) {
+    return printConfig.reportName;
+  }
+
+  // Fetch form data if form name is missing
+  let formData = formValue;
+  if (!formData?.name) {
+    await formStore.fetchForm(formIdValue);
+    formData = form.value;
+  }
+
+  // Default: use form name only
+  return formData?.name || '';
+}
+
 function createBody(content, contentFileType, outputFileName, outputFileType) {
   return {
     options: {
@@ -55,6 +72,16 @@ function createBody(content, contentFileType, outputFileName, outputFileType) {
   };
 }
 
+async function generateDocument(submissionId, body, submission) {
+  if (submissionId?.length > 0) {
+    return await formService.docGen(submissionId, body);
+  }
+  return await utilsService.draftDocGen({
+    template: body,
+    submission: submission,
+  });
+}
+
 async function generateDirectPrint() {
   try {
     loading.value = true;
@@ -67,26 +94,35 @@ async function generateDirectPrint() {
 
     // Extract template content
     const temp = templateResponse.data.template.data;
-    const base64String = temp.map((code) => String.fromCharCode(code)).join('');
+    const base64String = temp
+      .map((code) => String.fromCodePoint(code))
+      .join('');
 
-    // Get template filename and extension
-    const { name, extension } = splitFileName(templateResponse.data.filename);
+    // Get template extension
+    const { extension } = splitFileName(templateResponse.data.filename);
     const outputFileType = properties.printConfig.outputFileType || 'pdf';
 
+    // Build report name based on printConfig options (fetches versions if needed)
+    const reportName = await getReportName(
+      properties.printConfig,
+      form.value,
+      formId.value
+    );
+
     // Create the request body
-    const body = createBody(base64String, extension, name, outputFileType);
+    const body = createBody(
+      base64String,
+      extension,
+      reportName,
+      outputFileType
+    );
 
     // Generate document
-    let response = null;
-    if (properties.submissionId?.length > 0) {
-      response = await formService.docGen(properties.submissionId, body);
-    } else {
-      const draftData = {
-        template: body,
-        submission: properties.submission,
-      };
-      response = await utilsService.draftDocGen(draftData);
-    }
+    const response = await generateDocument(
+      properties.submissionId,
+      body,
+      properties.submission
+    );
 
     // Create file to download
     const filename = getDisposition(response.headers['content-disposition']);

app/frontend/src/components/forms/manage/PrintConfig.vue

@@ -15,6 +15,8 @@ const printConfig = ref(null);
 const localConfig = ref({
   code: 'default',
   templateId: null,
+  reportNameOption: 'formName',
+  reportName: null,
 });
 const loading = ref(true);
 const saving = ref(false);
@@ -62,12 +64,16 @@ async function fetchPrintConfig() {
       localConfig.value = {
         code: response.data.code || 'default',
         templateId: response.data.templateId || null,
+        reportNameOption: response.data.reportNameOption || 'formName',
+        reportName: response.data.reportName || null,
       };
     } else {
       // No config exists, use defaults
       localConfig.value = {
         code: 'default',
         templateId: null,
+        reportNameOption: 'formName',
+        reportName: null,
       };
     }
   } catch (e) {
@@ -80,6 +86,8 @@ async function fetchPrintConfig() {
     localConfig.value = {
       code: 'default',
       templateId: null,
+      reportNameOption: 'formName',
+      reportName: null,
     };
   }
 }
@@ -125,9 +133,19 @@ async function handleSave() {
     if (localConfig.value.code === 'direct') {
       data.templateId = localConfig.value.templateId;
       data.outputFileType = 'pdf';
+      // Include reportNameOption and reportName
+      data.reportNameOption = localConfig.value.reportNameOption || 'formName';
+      // Only include reportName if custom option is selected
+      if (localConfig.value.reportNameOption === 'custom') {
+        data.reportName = localConfig.value.reportName || form.value.name;
+      } else {
+        data.reportName = null;
+      }
     } else {
       data.templateId = null;
       data.outputFileType = null;
+      data.reportNameOption = null;
+      data.reportName = null;
     }
 
     await printConfigService.upsertPrintConfig(form.value.id, data);
@@ -195,7 +213,7 @@ async function handleSave() {
 
     <!-- Template Selection (when Direct is selected) -->
     <v-expand-transition>
-      <div v-if="isDirectPrint" class="mb-4">
+      <div v-if="isDirectPrint" class="mb-4 pl-12 pr-12">
         <v-alert
           v-if="!hasTemplates"
           type="warning"
@@ -214,7 +232,70 @@ async function handleSave() {
           :lang="locale"
           :disabled="!hasTemplates"
           clearable
+          class="mb-4"
         />
+
+        <!-- Output File Name Options (when Direct is selected) -->
+        <div class="mb-4">
+          <v-radio-group v-model="localConfig.reportNameOption" :lang="locale">
+            <template #label>
+              <div class="font-weight-bold">
+                {{ $t('trans.printConfig.reportNameLabel') }}
+              </div>
+            </template>
+            <v-radio
+              value="formName"
+              :label="$t('trans.printConfig.reportNameOptionFormName')"
+            >
+              <template #label>
+                <div>
+                  <div class="font-weight-medium">
+                    {{ $t('trans.printConfig.reportNameOptionFormName') }}
+                  </div>
+                  <div class="text-caption text-medium-emphasis">
+                    {{
+                      $t(
+                        'trans.printConfig.reportNameOptionFormNameDescription'
+                      )
+                    }}
+                  </div>
+                </div>
+              </template>
+            </v-radio>
+            <v-radio
+              value="custom"
+              :label="$t('trans.printConfig.reportNameOptionCustom')"
+            >
+              <template #label>
+                <div>
+                  <div class="font-weight-medium">
+                    {{ $t('trans.printConfig.reportNameOptionCustom') }}
+                  </div>
+                  <div class="text-caption text-medium-emphasis">
+                    {{
+                      $t('trans.printConfig.reportNameOptionCustomDescription')
+                    }}
+                  </div>
+                </div>
+              </template>
+            </v-radio>
+          </v-radio-group>
+
+          <!-- Custom Name Input (shown only when custom option is selected) -->
+          <v-expand-transition>
+            <v-text-field
+              v-if="localConfig.reportNameOption === 'custom'"
+              v-model="localConfig.reportName"
+              :label="$t('trans.printConfig.reportNameCustomInput')"
+              :hint="$t('trans.printConfig.reportNameCustomInputHint')"
+              :placeholder="form.name"
+              variant="outlined"
+              :lang="locale"
+              persistent-hint
+              class="mt-2"
+            />
+          </v-expand-transition>
+        </div>
       </div>
     </v-expand-transition>
 

app/frontend/src/internationalization/trans/chefs/en/en.json

@@ -120,7 +120,14 @@
     "templateDeleted": "The previously selected template has been deleted. Please select a new template.",
     "currentConfig": "Current Configuration",
     "type": "Type",
-    "template": "Template"
+    "template": "Template",
+    "reportNameLabel": "Output File Name",
+    "reportNameOptionFormName": "Use Form Name",
+    "reportNameOptionFormNameDescription": "Output file will be named using the form name",
+    "reportNameOptionCustom": "Use Custom Name",
+    "reportNameOptionCustomDescription": "Enter a custom name for the output file",
+    "reportNameCustomInput": "Custom File Name",
+    "reportNameCustomInputHint": "Enter the custom name for the generated document"
   },
   "encryptionKey": {
     "info": "Configure Encryption Keys for your form.",