Fix frontend versions switching

[ci skip]

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

@@ -1,7 +1,30 @@
 <pngx-page-header [(title)]="title">
+
+  @if (document?.versions?.length > 0) {
+    <div class="btn-group" ngbDropdown role="group">
+      <div class="btn-group" ngbDropdown role="group">
+        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" ngbDropdownToggle>
+          <i-bs name="layers"></i-bs>
+          <span class="d-none d-lg-inline ps-1" i18n>Version</span>
+        </button>
+        <div class="dropdown-menu shadow" ngbDropdownMenu>
+          @for (vid of document.versions; track vid) {
+            <button ngbDropdownItem (click)="selectVersion(vid)">
+              <span i18n>Version</span> {{vid}}
+              @if (selectedVersionId === vid) { <span>&nbsp;✓</span> }
+            </button>
+          }
+        </div>
+      </div>
+      <input #versionFileInput type="file" class="visually-hidden" (change)="onVersionFileSelected($event)" />
+      <button class="btn btn-sm btn-outline-secondary" title="Upload new version" i18n-title (click)="triggerUploadVersion()" [disabled]="!userIsOwner || !userCanEdit">
+        <i-bs name="file-earmark-plus"></i-bs><span class="visually-hidden" i18n>Upload new version</span>
+      </button>
+    </div>
+  }
   @if (archiveContentRenderType === ContentRenderType.PDF && !useNativePdfViewer) {
     @if (previewNumPages) {
-      <div class="input-group input-group-sm d-none d-md-flex">
+      <div class="input-group input-group-sm ms-2 d-none d-md-flex">
         <div class="input-group-text" i18n>Page</div>
           <input class="form-control flex-grow-0 w-auto" type="number" min="1" [max]="previewNumPages" [(ngModel)]="previewCurrentPage" />
         <div class="input-group-text" i18n>of {{previewNumPages}}</div>
@@ -44,27 +67,6 @@
     }
   </div>
 
-  @if (document?.versions?.length > 0) {
-    <div class="btn-group ms-2" ngbDropdown role="group">
-      <button class="btn btn-sm btn-outline-secondary dropdown-toggle" ngbDropdownToggle>
-        <i-bs name="layers"></i-bs>
-        <span class="d-none d-lg-inline ps-1" i18n>Version</span>
-      </button>
-      <div class="dropdown-menu shadow" ngbDropdownMenu>
-        <button ngbDropdownItem (click)="selectVersion(document.id)">
-          <span i18n>Current</span>
-          @if (selectedVersionId === document.id) { <span>&nbsp;✓</span> }
-        </button>
-        @for (vid of document.versions; track vid) {
-          <button ngbDropdownItem (click)="selectVersion(vid)">
-            <span i18n>Version</span> {{vid}}
-            @if (selectedVersionId === vid) { <span>&nbsp;✓</span> }
-          </button>
-        }
-      </div>
-    </div>
-  }
-
   <div class="ms-auto" ngbDropdown>
     <button class="btn btn-sm btn-outline-primary" id="actionsDropdown" ngbDropdownToggle>
       <i-bs name="three-dots"></i-bs>
@@ -82,12 +84,6 @@
       <button ngbDropdownItem (click)="editPdf()" [disabled]="!userIsOwner || !userCanEdit || originalContentRenderType !== ContentRenderType.PDF">
         <i-bs name="pencil"></i-bs>&nbsp;<ng-container i18n>PDF Editor</ng-container>
       </button>
-
-      <div class="dropdown-divider"></div>
-      <button ngbDropdownItem (click)="triggerUploadVersion()" [disabled]="!userIsOwner || !userCanEdit">
-        <i-bs name="file-earmark-plus"></i-bs>&nbsp;<ng-container i18n>Upload new version</ng-container>
-      </button>
-      <input #versionFileInput type="file" class="visually-hidden" (change)="onVersionFileSelected($event)" />
     </div>
   </div>
 

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

@@ -638,8 +638,10 @@ export class DocumentDetailComponent
 
   updateComponent(doc: Document) {
     this.document = doc
-    // Default selected version is the head document
-    this.selectedVersionId = doc.id
+    // Default selected version is the newest version
+    this.selectedVersionId = doc.versions?.length
+      ? Math.max(...doc.versions)
+      : doc.id
     this.requiresPassword = false
     this.updateFormForCustomFields()
     if (this.archiveContentRenderType === ContentRenderType.TIFF) {
@@ -708,6 +710,8 @@ export class DocumentDetailComponent
   selectVersion(versionId: number) {
     this.selectedVersionId = versionId
     this.previewUrl = this.documentsService.getPreviewUrl(
+      this.documentId,
+      false,
       this.selectedVersionId
     )
     this.thumbUrl = this.documentsService.getThumbUrl(this.selectedVersionId)

src-ui/src/app/services/rest/document.service.ts

@@ -163,12 +163,19 @@ export class DocumentService extends AbstractPaperlessService<Document> {
     })
   }
 
-  getPreviewUrl(id: number, original: boolean = false): string {
+  getPreviewUrl(
+    id: number,
+    original: boolean = false,
+    versionID: number = null
+  ): string {
     let url = new URL(this.getResourceUrl(id, 'preview'))
     if (this._searchQuery) url.hash = `#search="${this.searchQuery}"`
     if (original) {
       url.searchParams.append('original', 'true')
     }
+    if (versionID) {
+      url.searchParams.append('version', versionID.toString())
+    }
     return url.toString()
   }
 

src-ui/src/main.ts

@@ -77,6 +77,7 @@ import {
   fileEarmarkFill,
   fileEarmarkLock,
   fileEarmarkMinus,
+  fileEarmarkPlus,
   fileEarmarkRichtext,
   fileText,
   files,
@@ -286,6 +287,7 @@ const icons = {
   fileEarmarkFill,
   fileEarmarkLock,
   fileEarmarkMinus,
+  fileEarmarkPlus,
   fileEarmarkRichtext,
   files,
   fileText,

src/documents/serialisers.py

@@ -957,6 +957,10 @@ class DocumentSerializer(
             request.version if request else settings.REST_FRAMEWORK["DEFAULT_VERSION"],
         )
 
+        if doc.get("versions") is not None:
+            doc["versions"] = sorted(doc["versions"], reverse=True)
+            doc["versions"].append(doc["id"])
+
         if api_version < 9:
             # provide created as a datetime for backwards compatibility
             from django.utils import timezone