Enhancment: Formatted filename for single document downloads (#12095)

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -44,14 +44,21 @@
       <span class="d-none d-lg-inline ps-1" i18n>Download</span>
     </button>
 
-    @if (metadata?.has_archive_version) {
-      <div class="btn-group" ngbDropdown role="group">
-        <button class="btn btn-sm btn-outline-primary dropdown-toggle" [disabled]="downloading" ngbDropdownToggle></button>
-        <div class="dropdown-menu shadow" ngbDropdownMenu>
+    <div class="btn-group" ngbDropdown role="group">
+      <button class="btn btn-sm btn-outline-primary dropdown-toggle" [disabled]="downloading" ngbDropdownToggle></button>
+      <div class="dropdown-menu shadow" ngbDropdownMenu>
+        @if (metadata?.has_archive_version) {
           <button ngbDropdownItem (click)="download(true)" [disabled]="downloading" i18n>Download original</button>
-        </div>
+          <div class="dropdown-divider"></div>
+        }
+        <form class="px-3 py-1">
+          <div class="form-check">
+            <input type="checkbox" class="form-check-input" id="downloadUseFormatting" [(ngModel)]="useFormattedFilename" [ngModelOptions]="{standalone: true}" />
+            <label class="form-check-label" for="downloadUseFormatting" i18n>Use formatted filename</label>
+          </div>
+        </form>
       </div>
-    }
+    </div>
   </div>
 
   <div class="ms-auto" ngbDropdown>

src-ui/src/app/components/document-detail/document-detail.component.spec.ts

@@ -1813,7 +1813,13 @@ describe('DocumentDetailComponent', () => {
 
     component.selectedVersionId = 10
     component.download()
-    expect(getDownloadUrlSpy).toHaveBeenNthCalledWith(1, doc.id, false, null)
+    expect(getDownloadUrlSpy).toHaveBeenNthCalledWith(
+      1,
+      doc.id,
+      false,
+      null,
+      false
+    )
     httpTestingController
       .expectOne('download-latest')
       .error(new ProgressEvent('failed'))
@@ -1826,7 +1832,13 @@ describe('DocumentDetailComponent', () => {
 
     component.selectedVersionId = doc.id
     component.download()
-    expect(getDownloadUrlSpy).toHaveBeenNthCalledWith(3, doc.id, false, doc.id)
+    expect(getDownloadUrlSpy).toHaveBeenNthCalledWith(
+      3,
+      doc.id,
+      false,
+      doc.id,
+      false
+    )
     httpTestingController
       .expectOne('download-non-latest')
       .error(new ProgressEvent('failed'))
@@ -1849,7 +1861,13 @@ describe('DocumentDetailComponent', () => {
       .mockReturnValueOnce('print-no-version')
 
     component.download()
-    expect(getDownloadUrlSpy).toHaveBeenNthCalledWith(1, doc.id, false, null)
+    expect(getDownloadUrlSpy).toHaveBeenNthCalledWith(
+      1,
+      doc.id,
+      false,
+      null,
+      false
+    )
     httpTestingController
       .expectOne('download-no-version')
       .error(new ProgressEvent('failed'))

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -276,6 +276,7 @@ export class DocumentDetailComponent
   customFields: CustomField[]
 
   public downloading: boolean = false
+  public useFormattedFilename: boolean = false
 
   public readonly CustomFieldDataType = CustomFieldDataType
 
@@ -1289,7 +1290,8 @@ export class DocumentDetailComponent
     const downloadUrl = this.documentsService.getDownloadUrl(
       this.documentId,
       original,
-      selectedVersionId
+      selectedVersionId,
+      this.useFormattedFilename
     )
     this.http
       .get(downloadUrl, { observe: 'response', responseType: 'blob' })