Delete version ui

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

@@ -19,12 +19,12 @@
         </div>
         <div class="dropdown-divider"></div>
         @for (version of document.versions; track version.id) {
-          <button ngbDropdownItem (click)="selectVersion(version.id)">
+          <div class="dropdown-item">
             <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">
+              <button type="button" class="version-entry flex-grow-1 ms-3 small text-start" (click)="selectVersion(version.id)">
                 <div class="small">
                   @if (version.label) {
                     {{ version.label }}
@@ -35,10 +35,20 @@
                 <div class="version-subtitle text-muted">
                   {{ version.added | customDate:'short' }}
                 </div>
-              </div>
+              </button>
               @if (selectedVersionId === version.id) { <span class="ms-2">✓</span> }
+              <pngx-confirm-button
+                buttonClasses="btn-link btn-sm text-danger ms-2"
+                iconName="trash"
+                confirmMessage="Delete this version?"
+                i18n-confirmMessage
+                [disabled]="!userIsOwner || !userCanEdit"
+                (confirm)="deleteVersion(version.id)"
+              >
+                <span class="visually-hidden" i18n>Delete version</span>
+              </pngx-confirm-button>
             </div>
-          </button>
+          </div>
         }
       </div>
     </div>

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

@@ -85,3 +85,9 @@ textarea.rtl {
     object-position: top;
   }
 }
+
+.version-entry {
+  border: 0;
+  background: transparent;
+  padding: 0;
+}

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

@@ -84,6 +84,7 @@ import { getFilenameFromContentDisposition } from 'src/app/utils/http'
 import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter'
 import * as UTIF from 'utif'
 import { DocumentDetailFieldID } from '../admin/settings/settings.component'
+import { ConfirmButtonComponent } from '../common/confirm-button/confirm-button.component'
 import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component'
 import { PasswordRemovalConfirmDialogComponent } from '../common/confirm-dialog/password-removal-confirm-dialog/password-removal-confirm-dialog.component'
 import { CustomFieldsDropdownComponent } from '../common/custom-fields-dropdown/custom-fields-dropdown.component'
@@ -176,6 +177,7 @@ enum ContentRenderType {
     TextAreaComponent,
     RouterModule,
     PngxPdfViewerComponent,
+    ConfirmButtonComponent,
     SlicePipe,
   ],
 })
@@ -771,6 +773,24 @@ export class DocumentDetailComponent
       })
   }
 
+  deleteVersion(versionId: number) {
+    const wasSelected = this.selectedVersionId === versionId
+    this.documentsService
+      .deleteVersion(this.documentId, versionId)
+      .pipe(first(), takeUntil(this.unsubscribeNotifier))
+      .subscribe({
+        next: (result) => {
+          if (wasSelected && result?.current_version_id) {
+            this.selectVersion(result.current_version_id)
+          }
+          this.openDocumentService.refreshDocument(this.documentId)
+        },
+        error: (error) => {
+          this.toastService.showError($localize`Error deleting version`, error)
+        },
+      })
+  }
+
   get customFieldFormFields(): FormArray {
     return this.documentForm.get('custom_fields') as FormArray
   }