Frontend version info updates, checksum

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

@@ -1,25 +1,46 @@
 <pngx-page-header [(title)]="title" [id]="documentId">
 
   @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 [disabled]="!hasVersions">
-          <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)="versionFileInput.click()" [disabled]="!userIsOwner || !userCanEdit">
-        <i-bs name="file-earmark-plus"></i-bs><span class="visually-hidden" i18n>Upload new version</span>
+    <div class="btn-group" ngbDropdown role="group" autoClose="outside">
+      <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>
+        <div class="px-3 py-2">
+          <div class="input-group input-group-sm mb-2">
+            <span class="input-group-text" i18n>Label</span>
+            <input class="form-control" type="text" [(ngModel)]="newVersionLabel" i18n-placeholder placeholder="Optional" [disabled]="!userIsOwner || !userCanEdit" />
+          </div>
+          <input #versionFileInput type="file" class="visually-hidden" (change)="onVersionFileSelected($event)" />
+          <button class="btn btn-sm btn-outline-secondary w-100" (click)="versionFileInput.click()" [disabled]="!userIsOwner || !userCanEdit">
+            <i-bs name="file-earmark-plus"></i-bs><span class="ps-1" i18n>Add new version</span>
+          </button>
+        </div>
+        <div class="dropdown-divider"></div>
+        @for (version of document.versions; track version.id) {
+          <button ngbDropdownItem (click)="selectVersion(version.id)">
+            <div class="d-flex align-items-center w-100 version-item">
+              <span class="badge bg-light text-lowercase text-muted">
+                {{ version.checksum | slice:0:8 }}
+              </span>
+              <div class="flex-grow-1 ms-3 small">
+                <div class="small">
+                  @if (version.label) {
+                    {{ version.label }}
+                  } @else {
+                    <span i18n>ID</span> #{{version.id}}
+                  }
+                </div>
+                <div class="version-subtitle text-muted">
+                  {{ version.added | customDate:'short' }}
+                </div>
+              </div>
+              @if (selectedVersionId === version.id) { <span class="ms-2">✓</span> }
+            </div>
+          </button>
+        }
+      </div>
     </div>
   }
   @if (archiveContentRenderType === ContentRenderType.PDF && !useNativePdfViewer) {

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

@@ -1,4 +1,4 @@
-import { AsyncPipe, NgTemplateOutlet } from '@angular/common'
+import { AsyncPipe, NgTemplateOutlet, SlicePipe } from '@angular/common'
 import { HttpClient, HttpResponse } from '@angular/common/http'
 import { Component, inject, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import {
@@ -36,7 +36,7 @@ import { Correspondent } from 'src/app/data/correspondent'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import { CustomFieldInstance } from 'src/app/data/custom-field-instance'
 import { DataType } from 'src/app/data/datatype'
-import { Document } from 'src/app/data/document'
+import { Document, DocumentVersionInfo } from 'src/app/data/document'
 import { DocumentMetadata } from 'src/app/data/document-metadata'
 import { DocumentNote } from 'src/app/data/document-note'
 import { DocumentSuggestions } from 'src/app/data/document-suggestions'
@@ -176,6 +176,7 @@ enum ContentRenderType {
     TextAreaComponent,
     RouterModule,
     PngxPdfViewerComponent,
+    SlicePipe,
   ],
 })
 export class DocumentDetailComponent
@@ -230,6 +231,7 @@ export class DocumentDetailComponent
   thumbUrl: string
   // Versioning: which document ID to use for file preview/download
   selectedVersionId: number
+  newVersionLabel: string = ''
   previewText: string
   previewLoaded: boolean = false
   tiffURL: string
@@ -673,8 +675,9 @@ export class DocumentDetailComponent
   updateComponent(doc: Document) {
     this.document = doc
     // Default selected version is the newest version
-    this.selectedVersionId = doc.versions?.length
-      ? Math.max(...doc.versions)
+    const versions = doc.versions ?? []
+    this.selectedVersionId = versions.length
+      ? Math.max(...versions.map((version) => version.id))
       : doc.id
     this.requiresPassword = false
     this.updateFormForCustomFields()
@@ -734,8 +737,12 @@ export class DocumentDetailComponent
     }
   }
 
-  get hasVersions(): boolean {
-    return this.document?.versions?.length > 1
+  getVersionBadge(version: DocumentVersionInfo): string {
+    console.log(version)
+
+    const checksum = version?.checksum ?? ''
+    if (!checksum) return '----'
+    return checksum.slice(0, 4).toUpperCase()
   }
 
   // Update file preview and download target to a specific version (by document id)
@@ -1186,14 +1193,16 @@ export class DocumentDetailComponent
     const file = input.files[0]
     // Reset input to allow re-selection of the same file later
     input.value = ''
+    const label = this.newVersionLabel?.trim()
     this.documentsService
-      .uploadVersion(this.documentId, file)
+      .uploadVersion(this.documentId, file, label)
       .pipe(first())
       .subscribe({
         next: () => {
           this.toastService.showInfo(
             $localize`Uploading new version. Processing will happen in the background.`
           )
+          this.newVersionLabel = ''
           // Refresh metadata to reflect that versions changed (when ready)
           this.openDocumentService.refreshDocument(this.documentId)
         },

src-ui/src/app/data/document.ts

@@ -159,12 +159,19 @@ export interface Document extends ObjectWithPermissions {
 
   page_count?: number
 
+  duplicate_documents?: Document[]
+
   // Versioning
   head_version?: number
-  versions?: number[]
-
-  duplicate_documents?: Document[]
+  versions?: DocumentVersionInfo[]
 
   // Frontend only
   __changedFields?: string[]
 }
+
+export interface DocumentVersionInfo {
+  id: number
+  added?: Date
+  label?: string
+  checksum?: string
+}