Skeleton bundle component some more

src-ui/src/app/components/common/share-bundle-dialog/share-bundle-dialog.component.html

@@ -1,6 +1,6 @@
 <div class="modal-header">
-  <h4 class="modal-title" i18n>Share Selected Documents</h4>
+  <h4 class="modal-title">{{ title }}</h4>
-  <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
+  <button type="button" class="btn-close" aria-label="Close" (click)="cancel()"></button>
 </div>
 <div class="modal-body">
   <form [formGroup]="form" class="d-flex flex-column gap-3">
@@ -29,44 +29,47 @@
     </div>
 
     <div class="d-flex align-items-center justify-content-between">
-      <div class="form-check form-switch">
+      <div class="input-group">
+        <label class="input-group-text" for="expirationDays"><ng-container i18n>Expires</ng-container>:</label>
+        <select class="form-select" id="expirationDays" formControlName="expirationDays">
+          @for (option of expirationOptions; track option.value) {
+            <option [ngValue]="option.value">{{ option.label }}</option>
+          }
+        </select>
+      </div>
+      <div class="form-check form-switch w-100 ms-3">
         <input
           class="form-check-input"
           type="checkbox"
           role="switch"
           id="shareArchiveSwitch"
           formControlName="shareArchiveVersion"
-          [disabled]="archiveOptionDisabled"
         />
-        <label class="form-check-label" for="shareArchiveSwitch" i18n>Share archive version</label>
+        <label class="form-check-label" for="shareArchiveSwitch" i18n>Share archive version (if available)</label>
       </div>
     </div>
-    @if (archiveOptionDisabled && selectionCount > 0) {
-      <p class="small text-muted mb-0">
-        <ng-container i18n>Archive versions are available only when every selected document has one. Missing archive versions: {{ missingArchiveCount }}.</ng-container>
-      </p>
-    }
 
-    <div class="input-group">
-      <label class="input-group-text" for="expirationDays"><ng-container i18n>Expires</ng-container>:</label>
-      <select class="form-select" id="expirationDays" formControlName="expirationDays">
-        @for (option of expirationOptions; track option.value) {
-          <option [ngValue]="option.value">{{ option.label }}</option>
-        }
-      </select>
-    </div>
 
     <div class="alert alert-info mb-0" role="alert">
-      <ng-container i18n>Bulk share link creation is still being prototyped. Saving will close this dialog and return the selected options only.</ng-container>
+      <ng-container i18n>Bulk share link creation is experimental. Saving will attempt to start the process and show the result as a notification.</ng-container>
     </div>
   </form>
 </div>
-<div class="modal-footer flex-column align-items-stretch">
+<div class="modal-footer">
-  <div class="d-flex justify-content-end gap-2 w-100">
+  <div class="d-flex align-items-center gap-2 w-100">
-    <button type="button" class="btn btn-outline-secondary btn-sm" (click)="close()" i18n>Close</button>
+    <div class="text-light fst-italic small">
-    <button type="button" class="btn btn-primary btn-sm" (click)="submit()" i18n>Save options</button>
+      <ng-container i18n>Large bundles can take significant time to prepare and / or download.</ng-container>
-  </div>
+    </div>
-  <div class="text-muted fst-italic small mt-2">
+    <button type="button" class="btn btn-outline-secondary btn-sm ms-auto" (click)="cancel()">{{ cancelBtnCaption }}</button>
-    <ng-container i18n>Large bundles can take significant time to prepare and / or download.</ng-container>
+    <button
+      type="button"
+      class="btn btn-primary btn-sm d-inline-flex align-items-center gap-2"
+      (click)="submit()"
+      [disabled]="loading || !buttonsEnabled">
+      @if (loading) {
+        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+      }
+      <span>{{ btnCaption }}</span>
+    </button>
   </div>
 </div>

src-ui/src/app/components/common/share-bundle-dialog/share-bundle-dialog.component.ts

@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common'
 import { Component, Input, inject } from '@angular/core'
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { ShareBundleCreatePayload } from 'src/app/data/share-bundle'
 import {
   FileVersion,
   SHARE_LINK_EXPIRATION_OPTIONS,
 } from 'src/app/data/share-link'
+import { ConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.component'
 
 @Component({
   selector: 'pngx-share-bundle-dialog',
@@ -13,12 +14,10 @@ import {
   standalone: true,
   imports: [CommonModule, ReactiveFormsModule],
 })
-export class ShareBundleDialogComponent {
+export class ShareBundleDialogComponent extends ConfirmDialogComponent {
-  private activeModal = inject(NgbActiveModal)
   private formBuilder = inject(FormBuilder)
 
   private _documentIds: number[] = []
-  private _documentsWithArchive = 0
 
   selectionCount = 0
   documentPreview: number[] = []
@@ -26,73 +25,35 @@ export class ShareBundleDialogComponent {
     shareArchiveVersion: [true],
     expirationDays: [7],
   })
+  payload: ShareBundleCreatePayload | null = null
 
   readonly expirationOptions = SHARE_LINK_EXPIRATION_OPTIONS
 
+  constructor() {
+    super()
+    this.loading = false
+    this.title = $localize`Share Selected Documents`
+  }
+
   @Input()
   set documentIds(ids: number[]) {
     this._documentIds = ids ?? []
     this.selectionCount = this._documentIds.length
     this.documentPreview = this._documentIds.slice(0, 10)
-    this.syncArchiveOption()
   }
 
   get documentIds(): number[] {
     return this._documentIds
   }
 
-  @Input()
-  set documentsWithArchive(count: number) {
-    this._documentsWithArchive = count ?? 0
-    this.syncArchiveOption()
-  }
-
-  get documentsWithArchive(): number {
-    return this._documentsWithArchive
-  }
-
-  get archiveOptionDisabled(): boolean {
-    return (
-      this.selectionCount === 0 ||
-      this._documentsWithArchive !== this.selectionCount
-    )
-  }
-
-  get missingArchiveCount(): number {
-    return Math.max(this.selectionCount - this._documentsWithArchive, 0)
-  }
-
-  close() {
-    this.activeModal.close()
-  }
-
   submit() {
-    // Placeholder until the backend workflow is wired up.
+    this.payload = {
-    this.activeModal.close({
+      document_ids: this.documentIds,
-      documentIds: this.documentIds,
+      file_version: this.form.value.shareArchiveVersion
-      options: {
+        ? FileVersion.Archive
-        fileVersion: this.form.value.shareArchiveVersion
+        : FileVersion.Original,
-          ? FileVersion.Archive
+      expiration_days: this.form.value.expirationDays,
-          : FileVersion.Original,
-        expirationDays: this.form.value.expirationDays,
-      },
-    })
-  }
-
-  private syncArchiveOption() {
-    const control = this.form.get('shareArchiveVersion')
-    if (!control) return
-
-    const canUseArchive =
-      this.selectionCount > 0 &&
-      this._documentsWithArchive === this.selectionCount
-
-    if (canUseArchive) {
-      control.enable({ emitEvent: false })
-      control.patchValue(true, { emitEvent: false })
-    } else {
-      control.disable({ emitEvent: false })
-      control.patchValue(false, { emitEvent: false })
     }
+    super.confirm()
   }
 }

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts

@@ -33,6 +33,7 @@ import {
   SelectionDataItem,
 } from 'src/app/services/rest/document.service'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
+import { ShareBundleService } from 'src/app/services/rest/share-bundle.service'
 import { StoragePathService } from 'src/app/services/rest/storage-path.service'
 import { TagService } from 'src/app/services/rest/tag.service'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -88,6 +89,7 @@ export class BulkEditorComponent
   private customFieldService = inject(CustomFieldsService)
   private permissionService = inject(PermissionsService)
   private savedViewService = inject(SavedViewService)
+  private shareBundleService = inject(ShareBundleService)
 
   tagSelectionModel = new FilterableDropdownSelectionModel(true)
   correspondentSelectionModel = new FilterableDropdownSelectionModel()
@@ -913,16 +915,46 @@ export class BulkEditorComponent
     const selectedDocuments = this.list.documents.filter((d) =>
       this.list.selected.has(d.id)
     )
-    const documentsWithArchive = selectedDocuments.filter(
-      (doc) => !!doc.archived_file_name
-    ).length
-
     const modal = this.modalService.open(ShareBundleDialogComponent, {
       backdrop: 'static',
       size: 'lg',
     })
-    modal.componentInstance.documentIds = Array.from(this.list.selected)
+    const dialog = modal.componentInstance as ShareBundleDialogComponent
-    modal.componentInstance.documentsWithArchive = documentsWithArchive
+    dialog.documentIds = Array.from(this.list.selected)
+    dialog.confirmClicked
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        const payload = dialog.payload
+        if (!payload || !payload.document_ids.length) {
+          this.toastService.showInfo(
+            $localize`No documents selected for sharing.`
+          )
+          return
+        }
+        dialog.loading = true
+        dialog.buttonsEnabled = false
+        this.shareBundleService
+          .createBundle(payload)
+          .pipe(first())
+          .subscribe({
+            next: () => {
+              dialog.loading = false
+              dialog.buttonsEnabled = true
+              modal.close()
+              this.toastService.showInfo(
+                $localize`Bulk share link creation requested.`
+              )
+            },
+            error: (error) => {
+              dialog.loading = false
+              dialog.buttonsEnabled = true
+              this.toastService.showError(
+                $localize`Bulk share link creation is not available yet.`,
+                error
+              )
+            },
+          })
+      })
   }
 
   manageShareLinks() {

src-ui/src/app/data/share-bundle.ts

@@ -0,0 +1,26 @@
+import { FileVersion } from './share-link'
+
+export enum ShareBundleStatus {
+  Pending = 'pending',
+  Processing = 'processing',
+  Ready = 'ready',
+  Failed = 'failed',
+}
+
+export interface ShareBundleSummary {
+  id: number
+  slug: string
+  created: string // Date
+  expiration?: string // Date
+  document_count: number
+  file_version: FileVersion
+  status: ShareBundleStatus
+  size_bytes?: number
+  last_error?: string
+}
+
+export interface ShareBundleCreatePayload {
+  document_ids: number[]
+  file_version: FileVersion
+  expiration_days: number | null
+}

src-ui/src/app/services/rest/share-bundle.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core'
+import { Observable } from 'rxjs'
+import {
+  ShareBundleCreatePayload,
+  ShareBundleSummary,
+} from 'src/app/data/share-bundle'
+import { AbstractNameFilterService } from './abstract-name-filter-service'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ShareBundleService extends AbstractNameFilterService<ShareBundleSummary> {
+  constructor() {
+    super()
+    this.resourceName = 'share_bundles'
+  }
+
+  createBundle(
+    payload: ShareBundleCreatePayload
+  ): Observable<ShareBundleSummary> {
+    this.clearCache()
+    return this.http.post<ShareBundleSummary>(this.getResourceUrl(), payload)
+  }
+
+  listBundlesForDocuments(
+    documentIds: number[]
+  ): Observable<ShareBundleSummary[]> {
+    const params = { documents: documentIds.join(',') }
+    return this.http.get<ShareBundleSummary[]>(this.getResourceUrl(), {
+      params,
+    })
+  }
+}