Initial result display in create dialog

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

@@ -1,21 +1,36 @@
+import { Clipboard } from '@angular/cdk/clipboard'
 import { CommonModule } from '@angular/common'
 import { Component, Input, inject } from '@angular/core'
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms'
-import { ShareBundleCreatePayload } from 'src/app/data/share-bundle'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import {
+  ShareBundleCreatePayload,
+  ShareBundleSummary,
+} from 'src/app/data/share-bundle'
 import {
   FileVersion,
   SHARE_LINK_EXPIRATION_OPTIONS,
 } from 'src/app/data/share-link'
+import { FileSizePipe } from 'src/app/pipes/file-size.pipe'
+import { ToastService } from 'src/app/services/toast.service'
+import { environment } from 'src/environments/environment'
 import { ConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.component'
 
 @Component({
   selector: 'pngx-share-bundle-dialog',
   templateUrl: './share-bundle-dialog.component.html',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    NgxBootstrapIconsModule,
+    FileSizePipe,
+  ],
 })
 export class ShareBundleDialogComponent extends ConfirmDialogComponent {
   private formBuilder = inject(FormBuilder)
+  private clipboard = inject(Clipboard)
+  private toastService = inject(ToastService)
 
   private _documentIds: number[] = []
 
@@ -29,10 +44,25 @@ export class ShareBundleDialogComponent extends ConfirmDialogComponent {
 
   readonly expirationOptions = SHARE_LINK_EXPIRATION_OPTIONS
 
+  createdBundle: ShareBundleSummary | null = null
+  copied = false
+  onOpenManage?: () => void
+  readonly statusLabels: Record<ShareBundleSummary['status'], string> = {
+    pending: $localize`Pending`,
+    processing: $localize`Processing`,
+    ready: $localize`Ready`,
+    failed: $localize`Failed`,
+  }
+  readonly fileVersionLabels: Record<FileVersion, string> = {
+    [FileVersion.Archive]: $localize`Archive`,
+    [FileVersion.Original]: $localize`Original`,
+  }
+
   constructor() {
     super()
     this.loading = false
     this.title = $localize`Share Selected Documents`
+    this.btnCaption = $localize`Create`
   }
 
   @Input()
@@ -47,6 +77,7 @@ export class ShareBundleDialogComponent extends ConfirmDialogComponent {
   }
 
   submit() {
+    if (this.createdBundle) return
     this.payload = {
       document_ids: this.documentIds,
       file_version: this.form.value.shareArchiveVersion
@@ -54,6 +85,41 @@ export class ShareBundleDialogComponent extends ConfirmDialogComponent {
         : FileVersion.Original,
       expiration_days: this.form.value.expirationDays,
     }
+    this.buttonsEnabled = false
     super.confirm()
   }
+
+  getShareUrl(bundle: ShareBundleSummary): string {
+    const apiURL = new URL(environment.apiBaseUrl)
+    return `${apiURL.origin}${apiURL.pathname.replace(/\/api\/$/, '/share/')}${
+      bundle.slug
+    }`
+  }
+
+  copy(bundle: ShareBundleSummary): void {
+    const success = this.clipboard.copy(this.getShareUrl(bundle))
+    if (success) {
+      this.copied = true
+      this.toastService.showInfo($localize`Share link copied to clipboard.`)
+      setTimeout(() => {
+        this.copied = false
+      }, 3000)
+    }
+  }
+
+  openManage(): void {
+    if (this.onOpenManage) {
+      this.onOpenManage()
+    } else {
+      this.cancel()
+    }
+  }
+
+  statusLabel(status: ShareBundleSummary['status']): string {
+    return this.statusLabels[status] ?? status
+  }
+
+  fileVersionLabel(version: FileVersion): string {
+    return this.fileVersionLabels[version] ?? version
+  }
 }