diff --git a/src-ui/src/app/components/common/share-bundle-dialog/share-bundle-dialog.component.html b/src-ui/src/app/components/common/share-bundle-dialog/share-bundle-dialog.component.html index 8ff362687..a1995706b 100644 --- a/src-ui/src/app/components/common/share-bundle-dialog/share-bundle-dialog.component.html +++ b/src-ui/src/app/components/common/share-bundle-dialog/share-bundle-dialog.component.html @@ -3,57 +3,107 @@
-
-
-

- This dialog gathers the options for sending a single link to multiple documents. -

-

- Selected documents: - {{ selectionCount }} -

- @if (documentPreview.length > 0) { -
    - @for (docId of documentPreview; track docId) { -
  • - {{ docId }} -
    • - } - @if (selectionCount > documentPreview.length) { -
  • - + {{ selectionCount - documentPreview.length }} more… -
    • - } -
- } -
- -
-
- - + @if (!createdBundle) { + +
+

+ This dialog gathers the options for sending a single link to multiple documents. +

+

+ Selected documents: + {{ selectionCount }} +

+ @if (documentPreview.length > 0) { +
    + @for (docId of documentPreview; track docId) { +
  • + {{ docId }} +
    • + } + @if (selectionCount > documentPreview.length) { +
  • + + {{ selectionCount - documentPreview.length }} more… +
    • + } +
+ }
-
- - + +
+
+ + +
+
+ + +
+ + } @else { +
+
+
Share link requested
+

+ You can copy the link below or open the management screen to monitor its progress. The link will start working once it is ready. +

+
+
+
Status
+
+ {{ statusLabel(createdBundle.status) }} +
+
Slug
+
{{ createdBundle.slug }}
+
Link
+
+
+ + +
+
+
Documents
+
{{ createdBundle.document_count }}
+
Expires
+
+ @if (createdBundle.expiration) { + {{ createdBundle.expiration | date: 'short' }} + } + @if (!createdBundle.expiration) { + Never + } +
+
File version
+
{{ fileVersionLabel(createdBundle.file_version) }}
+ @if (createdBundle.size_bytes !== undefined && createdBundle.size_bytes !== null) { +
Size
+
{{ createdBundle.size_bytes | fileSize }}
+ } +
- - - - + }
@@ -61,15 +111,21 @@ Large bundles can take significant time to prepare and / or download.
- + @if (createdBundle) { + + } + + @if (!createdBundle) { + + }
diff --git a/src-ui/src/app/components/common/share-bundle-dialog/share-bundle-dialog.component.ts b/src-ui/src/app/components/common/share-bundle-dialog/share-bundle-dialog.component.ts index 56a20cb91..58f3db592 100644 --- a/src-ui/src/app/components/common/share-bundle-dialog/share-bundle-dialog.component.ts +++ b/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 = { + pending: $localize`Pending`, + processing: $localize`Processing`, + ready: $localize`Ready`, + failed: $localize`Failed`, + } + readonly fileVersionLabels: Record = { + [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 + } } diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts index 8f47ac020..1e1a1369a 100644 --- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts +++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts @@ -935,10 +935,16 @@ export class BulkEditorComponent .createBundle(payload) .pipe(first()) .subscribe({ - next: () => { + next: (result) => { dialog.loading = false - dialog.buttonsEnabled = true - modal.close() + dialog.buttonsEnabled = false + dialog.createdBundle = result + dialog.copied = false + dialog.payload = null + dialog.onOpenManage = () => { + modal.close() + this.manageShareLinks() + } this.toastService.showInfo( $localize`Bulk share link creation requested.` )