mirror of
https://github.com/paperless-ngx/paperless-ngx.git
synced 2026-10-06 00:00:32 +00:00
Enhancement: centralized management of share links + bundles (#14115)
This commit is contained in:
shamoon
+172
@@ -0,0 +1,172 @@
|
||||
<div class="border border-top-0 rounded-bottom p-3">
|
||||
@if (!loading() && error()) {
|
||||
<div class="alert alert-danger mb-0" role="alert">
|
||||
{{ error() }}
|
||||
</div>
|
||||
}
|
||||
@if (!loading() && !error()) {
|
||||
@if (bundles().length === 0) {
|
||||
<p class="mb-0 text-muted fst-italic" i18n>No share link bundles currently exist.</p>
|
||||
}
|
||||
@if (bundles().length > 0) {
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm align-middle mb-0 bg-body">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="fw-normal" pngxSortable="created" [currentSortField]="sortField()" [currentSortReverse]="sortReverse()" (sort)="onSort($event)" i18n>Created</th>
|
||||
<th scope="col" class="fw-normal" pngxSortable="status" [currentSortField]="sortField()" [currentSortReverse]="sortReverse()" (sort)="onSort($event)" i18n>Status</th>
|
||||
<th scope="col" i18n>Size</th>
|
||||
<th scope="col" class="fw-normal" pngxSortable="expiration" [currentSortField]="sortField()" [currentSortReverse]="sortReverse()" (sort)="onSort($event)" i18n>Expires</th>
|
||||
<th scope="col" i18n>Documents</th>
|
||||
<th scope="col" i18n>File version</th>
|
||||
<th scope="col" class="text-end" i18n>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (bundle of bundles(); track bundle.id) {
|
||||
<tr>
|
||||
<td>
|
||||
<div>{{ bundle.created | date: 'short' }}</div>
|
||||
@if (bundle.built_at) {
|
||||
<div class="small text-muted">
|
||||
<ng-container i18n>Built:</ng-container> {{ bundle.built_at | date: 'short' }}
|
||||
</div>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
@if (bundle.status === statuses.Failed && bundle.last_error) {
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-link p-0 text-danger"
|
||||
[ngbPopover]="errorDetail"
|
||||
popoverClass="popover-sm"
|
||||
triggers="mouseover:mouseleave"
|
||||
placement="auto"
|
||||
aria-label="View error details"
|
||||
i18n-aria-label
|
||||
>
|
||||
<span class="badge text-bg-warning text-uppercase me-2">{{ statusLabel(bundle.status) }}</span>
|
||||
<i-bs name="exclamation-triangle-fill" class="text-warning"></i-bs>
|
||||
</button>
|
||||
<ng-template #errorDetail>
|
||||
@if (bundle.last_error.timestamp) {
|
||||
<div class="text-muted small mb-1">
|
||||
{{ bundle.last_error.timestamp | date: 'short' }}
|
||||
</div>
|
||||
}
|
||||
<h6>{{ bundle.last_error.exception_type || ($localize`Unknown error`) }}</h6>
|
||||
@if (bundle.last_error.message) {
|
||||
<pre class="text-muted small"><code>{{ bundle.last_error.message }}</code></pre>
|
||||
}
|
||||
</ng-template>
|
||||
}
|
||||
@if (bundle.status === statuses.Processing || bundle.status === statuses.Pending) {
|
||||
<span class="spinner-border spinner-border-sm" role="status"></span>
|
||||
}
|
||||
@if (bundle.status !== statuses.Failed) {
|
||||
<span class="badge text-bg-secondary text-uppercase">{{ statusLabel(bundle.status) }}</span>
|
||||
}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
@if (bundle.size_bytes !== undefined && bundle.size_bytes !== null) {
|
||||
{{ bundle.size_bytes | fileSize }}
|
||||
}
|
||||
@if (bundle.size_bytes === undefined || bundle.size_bytes === null) {
|
||||
<span class="text-muted">—</span>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
@if (bundle.expiration) {
|
||||
{{ bundle.expiration | date: 'short' }}
|
||||
@if (isExpired(bundle.expiration)) {
|
||||
<span class="badge text-bg-danger ms-2" i18n>Expired</span>
|
||||
}
|
||||
}
|
||||
@if (!bundle.expiration) {
|
||||
<span i18n>Never</span>
|
||||
}
|
||||
</td>
|
||||
<td>{{ bundle.document_count }}</td>
|
||||
<td>{{ fileVersionLabel(bundle.file_version) }}</td>
|
||||
<td class="text-end">
|
||||
<div class="d-inline-block position-relative">
|
||||
<span
|
||||
class="badge bg-primary small fade position-absolute top-50 end-100 translate-middle-y me-2 pe-none z-3 text-nowrap"
|
||||
[class.show]="copiedSlug() === bundle.slug"
|
||||
i18n
|
||||
>Copied!</span>
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-primary"
|
||||
[disabled]="bundle.status !== statuses.Ready"
|
||||
(click)="copy(bundle)"
|
||||
title="Copy share link"
|
||||
i18n-title
|
||||
>
|
||||
@if (copiedSlug() === bundle.slug) {
|
||||
<i-bs name="clipboard-check"></i-bs>
|
||||
}
|
||||
@if (copiedSlug() !== bundle.slug) {
|
||||
<i-bs name="clipboard"></i-bs>
|
||||
}
|
||||
<span class="visually-hidden" i18n>Copy share link</span>
|
||||
</button>
|
||||
@if (bundle.status === statuses.Failed) {
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-warning"
|
||||
[disabled]="loading()"
|
||||
(click)="retry(bundle)"
|
||||
>
|
||||
<i-bs name="arrow-clockwise"></i-bs>
|
||||
<span class="visually-hidden" i18n>Retry</span>
|
||||
</button>
|
||||
}
|
||||
<pngx-confirm-button
|
||||
buttonClasses="btn btn-sm btn-outline-danger"
|
||||
[disabled]="loading()"
|
||||
(confirm)="delete(bundle)"
|
||||
iconName="trash"
|
||||
>
|
||||
<span class="visually-hidden" i18n>Delete share link bundle</span>
|
||||
</pngx-confirm-button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap justify-content-end align-items-center gap-3 mt-3 ms-auto">
|
||||
<div class="d-flex flex-wrap justify-content-end align-items-center gap-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<label class="small text-muted me-2" for="shareLinkBundlePageSize" i18n>Show:</label>
|
||||
<select id="shareLinkBundlePageSize" class="form-select form-select-sm w-auto" [(ngModel)]="pageSize">
|
||||
<option [ngValue]="25">25</option>
|
||||
<option [ngValue]="50">50</option>
|
||||
<option [ngValue]="100">100</option>
|
||||
</select>
|
||||
<span class="small text-muted ms-2 d-none d-md-inline" i18n>per page</span>
|
||||
</div>
|
||||
@if (total() > pageSize) {
|
||||
<ngb-pagination
|
||||
class="mb-0"
|
||||
[pageSize]="pageSize"
|
||||
[collectionSize]="total()"
|
||||
[page]="page()"
|
||||
[maxSize]="5"
|
||||
(pageChange)="setPage($event)"
|
||||
size="sm"
|
||||
aria-label="Share link bundles pagination"
|
||||
i18n-aria-label
|
||||
></ngb-pagination>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
:host ::ng-deep .popover {
|
||||
min-width: 300px;
|
||||
max-width: 400px;
|
||||
}
|
||||
+287
@@ -0,0 +1,287 @@
|
||||
import { Clipboard } from '@angular/cdk/clipboard'
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing'
|
||||
import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
|
||||
import { of, throwError } from 'rxjs'
|
||||
import { FileVersion } from 'src/app/data/share-link'
|
||||
import {
|
||||
ShareLinkBundleStatus,
|
||||
ShareLinkBundleSummary,
|
||||
} from 'src/app/data/share-link-bundle'
|
||||
import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
|
||||
import { ShareLinkBundleService } from 'src/app/services/rest/share-link-bundle.service'
|
||||
import { SettingsService } from 'src/app/services/settings.service'
|
||||
import { ToastService } from 'src/app/services/toast.service'
|
||||
import { environment } from 'src/environments/environment'
|
||||
import { ShareLinkBundleListComponent } from './share-link-bundle-list.component'
|
||||
|
||||
class MockShareLinkBundleService {
|
||||
list = jest.fn()
|
||||
delete = jest.fn()
|
||||
rebuildBundle = jest.fn()
|
||||
}
|
||||
|
||||
class MockToastService {
|
||||
showInfo = jest.fn()
|
||||
showError = jest.fn()
|
||||
}
|
||||
|
||||
describe('ShareLinkBundleListComponent', () => {
|
||||
let component: ShareLinkBundleListComponent
|
||||
let fixture: ComponentFixture<ShareLinkBundleListComponent>
|
||||
let service: MockShareLinkBundleService
|
||||
let toastService: MockToastService
|
||||
let clipboard: Clipboard
|
||||
let originalApiBaseUrl: string
|
||||
|
||||
beforeEach(() => {
|
||||
service = new MockShareLinkBundleService()
|
||||
toastService = new MockToastService()
|
||||
originalApiBaseUrl = environment.apiBaseUrl
|
||||
|
||||
service.list.mockReturnValue(of({ count: 0, results: [] }))
|
||||
service.delete.mockReturnValue(of(true))
|
||||
service.rebuildBundle.mockReturnValue(of(sampleBundle()))
|
||||
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
ShareLinkBundleListComponent,
|
||||
NgxBootstrapIconsModule.pick(allIcons),
|
||||
],
|
||||
providers: [
|
||||
{ provide: ShareLinkBundleService, useValue: service },
|
||||
{ provide: ToastService, useValue: toastService },
|
||||
],
|
||||
})
|
||||
|
||||
fixture = TestBed.createComponent(ShareLinkBundleListComponent)
|
||||
component = fixture.componentInstance
|
||||
clipboard = TestBed.inject(Clipboard)
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
component.ngOnDestroy()
|
||||
fixture.destroy()
|
||||
environment.apiBaseUrl = originalApiBaseUrl
|
||||
jest.clearAllMocks()
|
||||
jest.useRealTimers()
|
||||
})
|
||||
|
||||
const sampleBundle = (overrides: Partial<ShareLinkBundleSummary> = {}) =>
|
||||
({
|
||||
id: 1,
|
||||
slug: 'bundle-slug',
|
||||
created: new Date().toISOString(),
|
||||
document_count: 1,
|
||||
documents: [1],
|
||||
status: ShareLinkBundleStatus.Pending,
|
||||
file_version: FileVersion.Archive,
|
||||
last_error: undefined,
|
||||
...overrides,
|
||||
}) as ShareLinkBundleSummary
|
||||
|
||||
it('loads bundles on init and polls periodically', () => {
|
||||
jest.useFakeTimers()
|
||||
const bundles = [sampleBundle({ status: ShareLinkBundleStatus.Ready })]
|
||||
service.list.mockReset()
|
||||
service.list
|
||||
.mockReturnValueOnce(of({ count: bundles.length, results: bundles }))
|
||||
.mockReturnValue(of({ count: bundles.length, results: bundles }))
|
||||
|
||||
fixture.detectChanges()
|
||||
|
||||
expect(service.list).toHaveBeenCalledWith(1, 25, 'created', true)
|
||||
expect(component.bundles()).toEqual(bundles)
|
||||
expect(component.loading()).toBe(false)
|
||||
expect(component.error()).toBeNull()
|
||||
|
||||
jest.advanceTimersByTime(5000)
|
||||
expect(service.list).toHaveBeenCalledTimes(2)
|
||||
})
|
||||
|
||||
it('handles errors when loading bundles', () => {
|
||||
jest.useFakeTimers()
|
||||
service.list.mockReset()
|
||||
service.list
|
||||
.mockReturnValueOnce(throwError(() => new Error('load fail')))
|
||||
.mockReturnValue(of({ count: 0, results: [] }))
|
||||
|
||||
fixture.detectChanges()
|
||||
|
||||
expect(component.error()).toContain('Failed to load share link bundles.')
|
||||
expect(toastService.showError).toHaveBeenCalled()
|
||||
expect(component.loading()).toBe(false)
|
||||
|
||||
jest.advanceTimersByTime(5000)
|
||||
expect(service.list).toHaveBeenCalledTimes(2)
|
||||
})
|
||||
|
||||
it('loads another page', () => {
|
||||
fixture.detectChanges()
|
||||
|
||||
component.setPage(2)
|
||||
|
||||
expect(service.list).toHaveBeenLastCalledWith(2, 25, 'created', true)
|
||||
})
|
||||
|
||||
it('sorts bundles and returns to the first page', () => {
|
||||
fixture.detectChanges()
|
||||
component.page.set(2)
|
||||
|
||||
component.onSort({ column: 'status', reverse: false })
|
||||
|
||||
expect(component.page()).toBe(1)
|
||||
expect(service.list).toHaveBeenLastCalledWith(1, 25, 'status', false)
|
||||
})
|
||||
|
||||
it('marks expired share link bundles', () => {
|
||||
service.list.mockReturnValue(
|
||||
of({
|
||||
count: 1,
|
||||
results: [sampleBundle({ expiration: '2000-01-01T00:00:00.000Z' })],
|
||||
})
|
||||
)
|
||||
|
||||
fixture.detectChanges()
|
||||
|
||||
expect(fixture.nativeElement.textContent).toContain('Expired')
|
||||
})
|
||||
|
||||
it('stores a changed page size and reloads from the first page', () => {
|
||||
fixture.detectChanges()
|
||||
const settingsService = TestBed.inject(SettingsService)
|
||||
jest
|
||||
.spyOn(settingsService, 'get')
|
||||
.mockReturnValueOnce({ share_link_bundles: 25 })
|
||||
const setSpy = jest.spyOn(settingsService, 'set')
|
||||
jest.spyOn(settingsService, 'storeSettings').mockReturnValue(of({}))
|
||||
component.page.set(2)
|
||||
|
||||
component.pageSize = 100
|
||||
|
||||
expect(setSpy).toHaveBeenCalledWith(SETTINGS_KEYS.OBJECT_LIST_SIZES, {
|
||||
share_link_bundles: 100,
|
||||
})
|
||||
expect(component.page()).toBe(1)
|
||||
expect(service.list).toHaveBeenLastCalledWith(1, 100, 'created', true)
|
||||
})
|
||||
|
||||
it('copies bundle links when ready', () => {
|
||||
jest.useFakeTimers()
|
||||
jest.spyOn(clipboard, 'copy').mockReturnValue(true)
|
||||
fixture.detectChanges()
|
||||
|
||||
const readyBundle = sampleBundle({
|
||||
slug: 'ready-slug',
|
||||
status: ShareLinkBundleStatus.Ready,
|
||||
})
|
||||
component.bundles.set([readyBundle])
|
||||
fixture.detectChanges()
|
||||
component.copy(readyBundle)
|
||||
|
||||
expect(clipboard.copy).toHaveBeenCalledWith(
|
||||
component.getShareUrl(readyBundle)
|
||||
)
|
||||
expect(component.copiedSlug()).toBe('ready-slug')
|
||||
expect(toastService.showInfo).not.toHaveBeenCalled()
|
||||
fixture.detectChanges()
|
||||
expect(
|
||||
fixture.nativeElement.querySelector('.badge.show').textContent
|
||||
).toContain('Copied!')
|
||||
|
||||
jest.advanceTimersByTime(3000)
|
||||
expect(component.copiedSlug()).toBeNull()
|
||||
fixture.detectChanges()
|
||||
expect(fixture.nativeElement.querySelector('.badge.show')).toBeNull()
|
||||
})
|
||||
|
||||
it('ignores copy requests for non-ready bundles', () => {
|
||||
const copySpy = jest.spyOn(clipboard, 'copy')
|
||||
fixture.detectChanges()
|
||||
component.copy(sampleBundle({ status: ShareLinkBundleStatus.Pending }))
|
||||
expect(copySpy).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('deletes bundles and refreshes list', () => {
|
||||
service.list.mockReturnValue(of({ count: 0, results: [] }))
|
||||
service.delete.mockReturnValue(of(true))
|
||||
|
||||
fixture.detectChanges()
|
||||
|
||||
component.delete(sampleBundle())
|
||||
|
||||
expect(service.delete).toHaveBeenCalled()
|
||||
expect(toastService.showInfo).toHaveBeenCalledWith(
|
||||
expect.stringContaining('deleted.')
|
||||
)
|
||||
expect(service.list).toHaveBeenCalledTimes(2)
|
||||
expect(component.loading()).toBe(false)
|
||||
})
|
||||
|
||||
it('handles delete errors gracefully', () => {
|
||||
service.list.mockReturnValue(of({ count: 0, results: [] }))
|
||||
service.delete.mockReturnValue(throwError(() => new Error('delete fail')))
|
||||
|
||||
fixture.detectChanges()
|
||||
|
||||
component.delete(sampleBundle())
|
||||
|
||||
expect(toastService.showError).toHaveBeenCalled()
|
||||
expect(component.loading()).toBe(false)
|
||||
})
|
||||
|
||||
it('retries bundle build and replaces existing entry', () => {
|
||||
service.list.mockReturnValue(of({ count: 0, results: [] }))
|
||||
const updated = sampleBundle({ status: ShareLinkBundleStatus.Ready })
|
||||
service.rebuildBundle.mockReturnValue(of(updated))
|
||||
|
||||
fixture.detectChanges()
|
||||
|
||||
component.bundles.set([sampleBundle()])
|
||||
component.retry(component.bundles()[0])
|
||||
|
||||
expect(service.rebuildBundle).toHaveBeenCalledWith(updated.id)
|
||||
expect(component.bundles()[0].status).toBe(ShareLinkBundleStatus.Ready)
|
||||
expect(toastService.showInfo).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('adds new bundle when retry returns unknown entry', () => {
|
||||
service.list.mockReturnValue(of({ count: 0, results: [] }))
|
||||
service.rebuildBundle.mockReturnValue(
|
||||
of(sampleBundle({ id: 99, slug: 'new-slug' }))
|
||||
)
|
||||
|
||||
fixture.detectChanges()
|
||||
|
||||
component.bundles.set([sampleBundle()])
|
||||
component.retry({ id: 99 } as ShareLinkBundleSummary)
|
||||
|
||||
expect(component.bundles().find((bundle) => bundle.id === 99)).toBeTruthy()
|
||||
})
|
||||
|
||||
it('handles retry errors', () => {
|
||||
service.list.mockReturnValue(of({ count: 0, results: [] }))
|
||||
service.rebuildBundle.mockReturnValue(throwError(() => new Error('fail')))
|
||||
|
||||
fixture.detectChanges()
|
||||
|
||||
component.retry(sampleBundle())
|
||||
|
||||
expect(toastService.showError).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('maps status and file version helpers', () => {
|
||||
service.list.mockReturnValue(of({ count: 0, results: [] }))
|
||||
fixture.detectChanges()
|
||||
|
||||
expect(component.statusLabel(ShareLinkBundleStatus.Processing)).toContain(
|
||||
'Processing'
|
||||
)
|
||||
expect(component.fileVersionLabel(FileVersion.Original)).toContain(
|
||||
'Original'
|
||||
)
|
||||
|
||||
environment.apiBaseUrl = 'https://example.com/api/'
|
||||
const url = component.getShareUrl(sampleBundle({ slug: 'sluggy' }))
|
||||
expect(url).toBe('https://example.com/share/sluggy')
|
||||
})
|
||||
})
|
||||
+238
@@ -0,0 +1,238 @@
|
||||
import { Clipboard } from '@angular/cdk/clipboard'
|
||||
import { CommonModule } from '@angular/common'
|
||||
import { Component, OnDestroy, OnInit, inject, signal } from '@angular/core'
|
||||
import { FormsModule } from '@angular/forms'
|
||||
import {
|
||||
NgbPaginationModule,
|
||||
NgbPopoverModule,
|
||||
} from '@ng-bootstrap/ng-bootstrap'
|
||||
import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
|
||||
import { Subject, catchError, of, switchMap, takeUntil, timer } from 'rxjs'
|
||||
import { FileVersion } from 'src/app/data/share-link'
|
||||
import {
|
||||
SHARE_LINK_BUNDLE_FILE_VERSION_LABELS,
|
||||
SHARE_LINK_BUNDLE_STATUS_LABELS,
|
||||
ShareLinkBundleStatus,
|
||||
ShareLinkBundleSummary,
|
||||
} from 'src/app/data/share-link-bundle'
|
||||
import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
|
||||
import {
|
||||
SortEvent,
|
||||
SortableDirective,
|
||||
} from 'src/app/directives/sortable.directive'
|
||||
import { FileSizePipe } from 'src/app/pipes/file-size.pipe'
|
||||
import { ShareLinkBundleService } from 'src/app/services/rest/share-link-bundle.service'
|
||||
import { SettingsService } from 'src/app/services/settings.service'
|
||||
import { ToastService } from 'src/app/services/toast.service'
|
||||
import { environment } from 'src/environments/environment'
|
||||
import { ConfirmButtonComponent } from 'src/app/components/common/confirm-button/confirm-button.component'
|
||||
import { LoadingComponentWithPermissions } from 'src/app/components/loading-component/loading.component'
|
||||
|
||||
@Component({
|
||||
selector: 'pngx-share-link-bundle-list',
|
||||
templateUrl: './share-link-bundle-list.component.html',
|
||||
styleUrls: ['./share-link-bundle-list.component.scss'],
|
||||
imports: [
|
||||
ConfirmButtonComponent,
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
NgbPaginationModule,
|
||||
NgbPopoverModule,
|
||||
NgxBootstrapIconsModule,
|
||||
SortableDirective,
|
||||
FileSizePipe,
|
||||
],
|
||||
})
|
||||
export class ShareLinkBundleListComponent
|
||||
extends LoadingComponentWithPermissions
|
||||
implements OnInit, OnDestroy
|
||||
{
|
||||
private readonly shareLinkBundleService = inject(ShareLinkBundleService)
|
||||
private readonly settingsService = inject(SettingsService)
|
||||
private readonly toastService = inject(ToastService)
|
||||
private readonly clipboard = inject(Clipboard)
|
||||
|
||||
readonly bundles = signal<ShareLinkBundleSummary[]>([])
|
||||
readonly error = signal<string | null>(null)
|
||||
readonly copiedSlug = signal<string | null>(null)
|
||||
readonly total = signal(0)
|
||||
readonly page = signal(1)
|
||||
readonly sortField = signal('created')
|
||||
readonly sortReverse = signal(true)
|
||||
|
||||
readonly statuses = ShareLinkBundleStatus
|
||||
readonly fileVersions = FileVersion
|
||||
|
||||
get pageSize(): number {
|
||||
return (
|
||||
this.settingsService.get(SETTINGS_KEYS.OBJECT_LIST_SIZES)
|
||||
?.share_link_bundles || 25
|
||||
)
|
||||
}
|
||||
|
||||
set pageSize(pageSize: number) {
|
||||
this.settingsService.set(SETTINGS_KEYS.OBJECT_LIST_SIZES, {
|
||||
...this.settingsService.get(SETTINGS_KEYS.OBJECT_LIST_SIZES),
|
||||
share_link_bundles: pageSize,
|
||||
})
|
||||
this.settingsService.storeSettings().subscribe({
|
||||
next: () => {
|
||||
this.page.set(1)
|
||||
this.triggerRefresh(false)
|
||||
},
|
||||
error: (error) => {
|
||||
this.toastService.showError($localize`Error saving settings`, error)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
private readonly refresh$ = new Subject<boolean>()
|
||||
|
||||
ngOnInit(): void {
|
||||
this.refresh$
|
||||
.pipe(
|
||||
switchMap((silent) => {
|
||||
if (!silent) {
|
||||
this.loading.set(true)
|
||||
}
|
||||
this.error.set(null)
|
||||
return this.shareLinkBundleService
|
||||
.list(
|
||||
this.page(),
|
||||
this.pageSize,
|
||||
this.sortField(),
|
||||
this.sortReverse()
|
||||
)
|
||||
.pipe(
|
||||
catchError((error) => {
|
||||
if (!silent) {
|
||||
this.loading.set(false)
|
||||
}
|
||||
this.error.set($localize`Failed to load share link bundles.`)
|
||||
this.toastService.showError(
|
||||
$localize`Error retrieving share link bundles.`,
|
||||
error
|
||||
)
|
||||
return of(null)
|
||||
})
|
||||
)
|
||||
}),
|
||||
takeUntil(this.unsubscribeNotifier)
|
||||
)
|
||||
.subscribe((results) => {
|
||||
if (results) {
|
||||
this.bundles.set(results.results)
|
||||
this.total.set(results.count)
|
||||
this.copiedSlug.set(null)
|
||||
}
|
||||
this.loading.set(false)
|
||||
})
|
||||
|
||||
this.triggerRefresh(false)
|
||||
timer(5000, 5000)
|
||||
.pipe(takeUntil(this.unsubscribeNotifier))
|
||||
.subscribe(() => this.triggerRefresh(true))
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
super.ngOnDestroy()
|
||||
}
|
||||
|
||||
getShareUrl(bundle: ShareLinkBundleSummary): string {
|
||||
const apiURL = new URL(environment.apiBaseUrl)
|
||||
return `${apiURL.origin}${apiURL.pathname.replace(/\/api\/$/, '/share/')}${
|
||||
bundle.slug
|
||||
}`
|
||||
}
|
||||
|
||||
setPage(page: number): void {
|
||||
this.page.set(page)
|
||||
this.triggerRefresh(false)
|
||||
}
|
||||
|
||||
onSort(event: SortEvent): void {
|
||||
this.sortField.set(event.column || 'created')
|
||||
this.sortReverse.set(event.column ? event.reverse : true)
|
||||
this.page.set(1)
|
||||
this.triggerRefresh(false)
|
||||
}
|
||||
|
||||
copy(bundle: ShareLinkBundleSummary): void {
|
||||
if (bundle.status !== ShareLinkBundleStatus.Ready) {
|
||||
return
|
||||
}
|
||||
const success = this.clipboard.copy(this.getShareUrl(bundle))
|
||||
if (success) {
|
||||
this.copiedSlug.set(bundle.slug)
|
||||
setTimeout(() => {
|
||||
this.copiedSlug.set(null)
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
|
||||
delete(bundle: ShareLinkBundleSummary): void {
|
||||
this.error.set(null)
|
||||
this.loading.set(true)
|
||||
this.shareLinkBundleService.delete(bundle).subscribe({
|
||||
next: () => {
|
||||
if (this.bundles().length === 1 && this.page() > 1) {
|
||||
this.page.update((page) => page - 1)
|
||||
}
|
||||
this.toastService.showInfo($localize`Share link bundle deleted.`)
|
||||
this.triggerRefresh(false)
|
||||
},
|
||||
error: (e) => {
|
||||
this.loading.set(false)
|
||||
this.toastService.showError(
|
||||
$localize`Error deleting share link bundle.`,
|
||||
e
|
||||
)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
retry(bundle: ShareLinkBundleSummary): void {
|
||||
this.error.set(null)
|
||||
this.shareLinkBundleService.rebuildBundle(bundle.id).subscribe({
|
||||
next: (updated) => {
|
||||
this.toastService.showInfo(
|
||||
$localize`Share link bundle rebuild requested.`
|
||||
)
|
||||
this.replaceBundle(updated)
|
||||
},
|
||||
error: (e) => {
|
||||
this.toastService.showError($localize`Error requesting rebuild.`, e)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
statusLabel(status: ShareLinkBundleStatus): string {
|
||||
return SHARE_LINK_BUNDLE_STATUS_LABELS[status] ?? status
|
||||
}
|
||||
|
||||
fileVersionLabel(version: FileVersion): string {
|
||||
return SHARE_LINK_BUNDLE_FILE_VERSION_LABELS[version] ?? version
|
||||
}
|
||||
|
||||
isExpired(expiration?: string): boolean {
|
||||
return !!expiration && Date.parse(expiration) <= Date.now()
|
||||
}
|
||||
|
||||
private replaceBundle(updated: ShareLinkBundleSummary): void {
|
||||
const bundles = this.bundles()
|
||||
const index = bundles.findIndex((bundle) => bundle.id === updated.id)
|
||||
if (index >= 0) {
|
||||
this.bundles.set([
|
||||
...bundles.slice(0, index),
|
||||
updated,
|
||||
...bundles.slice(index + 1),
|
||||
])
|
||||
} else {
|
||||
this.bundles.set([updated, ...bundles])
|
||||
}
|
||||
}
|
||||
|
||||
private triggerRefresh(silent: boolean): void {
|
||||
this.refresh$.next(silent)
|
||||
}
|
||||
}
|
||||
+110
@@ -0,0 +1,110 @@
|
||||
<div class="border border-top-0 rounded-bottom p-3">
|
||||
@if (!loading() && error()) {
|
||||
<div class="alert alert-danger mb-0" role="alert">{{ error() }}</div>
|
||||
}
|
||||
@if (!loading() && !error() && links().length === 0) {
|
||||
<p class="mb-0 text-muted fst-italic" i18n>
|
||||
No document share links currently exist.
|
||||
</p>
|
||||
}
|
||||
@if (!loading() && !error() && links().length > 0) {
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm align-middle mb-0 bg-body">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="fw-normal" pngxSortable="document__title" [currentSortField]="sortField()" [currentSortReverse]="sortReverse()" (sort)="onSort($event)" i18n>Document</th>
|
||||
<th scope="col" class="fw-normal" pngxSortable="created" [currentSortField]="sortField()" [currentSortReverse]="sortReverse()" (sort)="onSort($event)" i18n>Created</th>
|
||||
<th scope="col" class="fw-normal" pngxSortable="expiration" [currentSortField]="sortField()" [currentSortReverse]="sortReverse()" (sort)="onSort($event)" i18n>Expires</th>
|
||||
<th scope="col" i18n>File version</th>
|
||||
<th scope="col" class="text-end" i18n>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (link of links(); track link.id) {
|
||||
<tr>
|
||||
<td>
|
||||
<a routerLink="/documents/{{ link.document }}">{{ link.document_title | documentTitle }}</a>
|
||||
<span class="badge bg-primary text-primary-text-contrast ms-3 small fs-normal cursor-pointer" (click)="copyDocumentID(link.document)">
|
||||
@if (copiedDocumentID() === link.document) {
|
||||
<i-bs width="1em" height="1em" name="clipboard-check" class="me-1"></i-bs><ng-container i18n>Copied!</ng-container>
|
||||
} @else {
|
||||
ID: {{link.document}}
|
||||
}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ link.created | date: 'short' }}</td>
|
||||
<td>
|
||||
@if (link.expiration) {
|
||||
{{ link.expiration | date: 'short' }}
|
||||
@if (isExpired(link.expiration)) {
|
||||
<span class="badge text-bg-danger ms-2" i18n>Expired</span>
|
||||
}
|
||||
} @else {
|
||||
<span i18n>Never</span>
|
||||
}
|
||||
</td>
|
||||
<td>{{ fileVersionLabel(link.file_version) }}</td>
|
||||
<td class="text-end">
|
||||
<div class="d-inline-block position-relative">
|
||||
<span
|
||||
class="badge bg-primary small fade position-absolute top-50 end-100 translate-middle-y me-2 pe-none z-3 text-nowrap"
|
||||
[class.show]="copiedID() === link.id"
|
||||
i18n
|
||||
>Copied!</span>
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-primary"
|
||||
(click)="copy(link)"
|
||||
title="Copy share link"
|
||||
i18n-title
|
||||
>
|
||||
@if (copiedID() === link.id) {
|
||||
<i-bs name="clipboard-check"></i-bs>
|
||||
} @else {
|
||||
<i-bs name="clipboard"></i-bs>
|
||||
}
|
||||
<span class="visually-hidden" i18n>Copy share link</span>
|
||||
</button>
|
||||
<pngx-confirm-button
|
||||
*pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.ShareLink }"
|
||||
buttonClasses="btn btn-sm btn-outline-danger"
|
||||
(confirm)="delete(link)"
|
||||
iconName="trash"
|
||||
>
|
||||
<span class="visually-hidden" i18n>Delete share link</span>
|
||||
</pngx-confirm-button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap justify-content-end align-items-center gap-3 mt-3 ms-auto">
|
||||
<div class="d-flex align-items-center">
|
||||
<label class="small text-muted me-2" for="shareLinkPageSize" i18n>Show:</label>
|
||||
<select id="shareLinkPageSize" class="form-select form-select-sm w-auto" [(ngModel)]="pageSize">
|
||||
<option [ngValue]="25">25</option>
|
||||
<option [ngValue]="50">50</option>
|
||||
<option [ngValue]="100">100</option>
|
||||
</select>
|
||||
<span class="small text-muted ms-2 d-none d-md-inline" i18n>per page</span>
|
||||
</div>
|
||||
@if (total() > pageSize) {
|
||||
<ngb-pagination
|
||||
class="mb-0"
|
||||
[pageSize]="pageSize"
|
||||
[collectionSize]="total()"
|
||||
[page]="page()"
|
||||
[maxSize]="5"
|
||||
(pageChange)="setPage($event)"
|
||||
size="sm"
|
||||
aria-label="Share links pagination"
|
||||
i18n-aria-label
|
||||
></ngb-pagination>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
+155
@@ -0,0 +1,155 @@
|
||||
import { Clipboard } from '@angular/cdk/clipboard'
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing'
|
||||
import { RouterTestingModule } from '@angular/router/testing'
|
||||
import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
|
||||
import { of, throwError } from 'rxjs'
|
||||
import { FileVersion, ShareLink } from 'src/app/data/share-link'
|
||||
import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
|
||||
import { ShareLinkService } from 'src/app/services/rest/share-link.service'
|
||||
import { SettingsService } from 'src/app/services/settings.service'
|
||||
import { ToastService } from 'src/app/services/toast.service'
|
||||
import { ShareLinkListComponent } from './share-link-list.component'
|
||||
|
||||
describe('ShareLinkListComponent', () => {
|
||||
let component: ShareLinkListComponent
|
||||
let fixture: ComponentFixture<ShareLinkListComponent>
|
||||
let service: jest.Mocked<Pick<ShareLinkService, 'list' | 'delete'>>
|
||||
let clipboard: Clipboard
|
||||
let toastService: jest.Mocked<Pick<ToastService, 'showInfo' | 'showError'>>
|
||||
|
||||
const link = {
|
||||
id: 1,
|
||||
document: 42,
|
||||
document_title: 'Test document',
|
||||
slug: 'share-slug',
|
||||
created: new Date().toISOString(),
|
||||
expiration: null,
|
||||
file_version: FileVersion.Archive,
|
||||
} as ShareLink
|
||||
|
||||
beforeEach(() => {
|
||||
service = {
|
||||
list: jest.fn().mockReturnValue(of({ count: 1, results: [link] })),
|
||||
delete: jest.fn().mockReturnValue(of(true)),
|
||||
}
|
||||
toastService = {
|
||||
showInfo: jest.fn(),
|
||||
showError: jest.fn(),
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
ShareLinkListComponent,
|
||||
NgxBootstrapIconsModule.pick(allIcons),
|
||||
RouterTestingModule,
|
||||
],
|
||||
providers: [
|
||||
{ provide: ShareLinkService, useValue: service },
|
||||
{ provide: ToastService, useValue: toastService },
|
||||
],
|
||||
})
|
||||
|
||||
fixture = TestBed.createComponent(ShareLinkListComponent)
|
||||
component = fixture.componentInstance
|
||||
clipboard = TestBed.inject(Clipboard)
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllTimers()
|
||||
jest.useRealTimers()
|
||||
})
|
||||
|
||||
it('loads and renders document share links', () => {
|
||||
fixture.detectChanges()
|
||||
|
||||
expect(service.list).toHaveBeenCalledWith(1, 25, 'created', true)
|
||||
expect(component.links()).toEqual([link])
|
||||
expect(fixture.nativeElement.textContent).toContain('Test document')
|
||||
expect(fixture.nativeElement.textContent).toContain('ID: 42')
|
||||
})
|
||||
|
||||
it('loads another page', () => {
|
||||
fixture.detectChanges()
|
||||
component.setPage(2)
|
||||
|
||||
expect(service.list).toHaveBeenLastCalledWith(2, 25, 'created', true)
|
||||
})
|
||||
|
||||
it('sorts links and returns to the first page', () => {
|
||||
fixture.detectChanges()
|
||||
component.page.set(2)
|
||||
|
||||
component.onSort({ column: 'expiration', reverse: false })
|
||||
|
||||
expect(component.page()).toBe(1)
|
||||
expect(service.list).toHaveBeenLastCalledWith(1, 25, 'expiration', false)
|
||||
})
|
||||
|
||||
it('marks expired share links', () => {
|
||||
service.list.mockReturnValue(
|
||||
of({
|
||||
count: 1,
|
||||
results: [
|
||||
{
|
||||
...link,
|
||||
expiration: '2000-01-01T00:00:00.000Z',
|
||||
},
|
||||
],
|
||||
})
|
||||
)
|
||||
|
||||
fixture.detectChanges()
|
||||
|
||||
expect(fixture.nativeElement.textContent).toContain('Expired')
|
||||
})
|
||||
|
||||
it('stores a changed page size and reloads from the first page', () => {
|
||||
const settingsService = TestBed.inject(SettingsService)
|
||||
jest.spyOn(settingsService, 'get').mockReturnValueOnce({ share_links: 25 })
|
||||
const setSpy = jest.spyOn(settingsService, 'set')
|
||||
jest.spyOn(settingsService, 'storeSettings').mockReturnValue(of({}))
|
||||
const reloadSpy = jest.spyOn(component, 'reload')
|
||||
component.page.set(2)
|
||||
|
||||
component.pageSize = 50
|
||||
|
||||
expect(setSpy).toHaveBeenCalledWith(SETTINGS_KEYS.OBJECT_LIST_SIZES, {
|
||||
share_links: 50,
|
||||
})
|
||||
expect(component.page()).toBe(1)
|
||||
expect(reloadSpy).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('shows local copy feedback without a toast', () => {
|
||||
jest.useFakeTimers()
|
||||
jest.spyOn(clipboard, 'copy').mockReturnValue(true)
|
||||
fixture.detectChanges()
|
||||
|
||||
component.copy(link)
|
||||
fixture.detectChanges()
|
||||
|
||||
expect(component.copiedID()).toBe(link.id)
|
||||
expect(fixture.nativeElement.querySelector('.badge.show')).not.toBeNull()
|
||||
expect(toastService.showInfo).not.toHaveBeenCalled()
|
||||
|
||||
jest.advanceTimersByTime(3000)
|
||||
expect(component.copiedID()).toBeNull()
|
||||
})
|
||||
|
||||
it('deletes a link and reloads the list', () => {
|
||||
fixture.detectChanges()
|
||||
component.delete(link)
|
||||
|
||||
expect(service.delete).toHaveBeenCalledWith(link)
|
||||
expect(service.list).toHaveBeenCalledTimes(2)
|
||||
expect(toastService.showInfo).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('shows an error when loading fails', () => {
|
||||
service.list.mockReturnValue(throwError(() => new Error('load failed')))
|
||||
fixture.detectChanges()
|
||||
|
||||
expect(component.error()).toContain('Failed to load share links.')
|
||||
expect(toastService.showError).toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
+172
@@ -0,0 +1,172 @@
|
||||
import { Clipboard } from '@angular/cdk/clipboard'
|
||||
import { CommonModule } from '@angular/common'
|
||||
import { Component, OnInit, inject, signal } from '@angular/core'
|
||||
import { FormsModule } from '@angular/forms'
|
||||
import { RouterModule } from '@angular/router'
|
||||
import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap'
|
||||
import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
|
||||
import { takeUntil } from 'rxjs'
|
||||
import { ConfirmButtonComponent } from 'src/app/components/common/confirm-button/confirm-button.component'
|
||||
import { LoadingComponentWithPermissions } from 'src/app/components/loading-component/loading.component'
|
||||
import { FileVersion, ShareLink } from 'src/app/data/share-link'
|
||||
import { SHARE_LINK_BUNDLE_FILE_VERSION_LABELS } from 'src/app/data/share-link-bundle'
|
||||
import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
|
||||
import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
|
||||
import {
|
||||
SortEvent,
|
||||
SortableDirective,
|
||||
} from 'src/app/directives/sortable.directive'
|
||||
import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
|
||||
import {
|
||||
PermissionAction,
|
||||
PermissionType,
|
||||
} from 'src/app/services/permissions.service'
|
||||
import { ShareLinkService } from 'src/app/services/rest/share-link.service'
|
||||
import { SettingsService } from 'src/app/services/settings.service'
|
||||
import { ToastService } from 'src/app/services/toast.service'
|
||||
import { environment } from 'src/environments/environment'
|
||||
|
||||
@Component({
|
||||
selector: 'pngx-share-link-list',
|
||||
templateUrl: './share-link-list.component.html',
|
||||
imports: [
|
||||
CommonModule,
|
||||
ConfirmButtonComponent,
|
||||
DocumentTitlePipe,
|
||||
FormsModule,
|
||||
IfPermissionsDirective,
|
||||
NgbPaginationModule,
|
||||
NgxBootstrapIconsModule,
|
||||
RouterModule,
|
||||
SortableDirective,
|
||||
],
|
||||
})
|
||||
export class ShareLinkListComponent
|
||||
extends LoadingComponentWithPermissions
|
||||
implements OnInit
|
||||
{
|
||||
private readonly clipboard = inject(Clipboard)
|
||||
private readonly shareLinkService = inject(ShareLinkService)
|
||||
private readonly settingsService = inject(SettingsService)
|
||||
private readonly toastService = inject(ToastService)
|
||||
|
||||
readonly links = signal<ShareLink[]>([])
|
||||
readonly total = signal(0)
|
||||
readonly page = signal(1)
|
||||
readonly sortField = signal('created')
|
||||
readonly sortReverse = signal(true)
|
||||
readonly copiedID = signal<number | null>(null)
|
||||
readonly copiedDocumentID = signal<number | null>(null)
|
||||
readonly error = signal<string | null>(null)
|
||||
readonly PermissionAction = PermissionAction
|
||||
readonly PermissionType = PermissionType
|
||||
|
||||
get pageSize(): number {
|
||||
return (
|
||||
this.settingsService.get(SETTINGS_KEYS.OBJECT_LIST_SIZES)?.share_links ||
|
||||
25
|
||||
)
|
||||
}
|
||||
|
||||
set pageSize(pageSize: number) {
|
||||
this.settingsService.set(SETTINGS_KEYS.OBJECT_LIST_SIZES, {
|
||||
...this.settingsService.get(SETTINGS_KEYS.OBJECT_LIST_SIZES),
|
||||
share_links: pageSize,
|
||||
})
|
||||
this.settingsService.storeSettings().subscribe({
|
||||
next: () => {
|
||||
this.page.set(1)
|
||||
this.reload()
|
||||
},
|
||||
error: (error) => {
|
||||
this.toastService.showError($localize`Error saving settings`, error)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.reload()
|
||||
}
|
||||
|
||||
reload(): void {
|
||||
this.loading.set(true)
|
||||
this.error.set(null)
|
||||
this.shareLinkService
|
||||
.list(this.page(), this.pageSize, this.sortField(), this.sortReverse())
|
||||
.pipe(takeUntil(this.unsubscribeNotifier))
|
||||
.subscribe({
|
||||
next: (results) => {
|
||||
this.links.set(results.results)
|
||||
this.total.set(results.count)
|
||||
this.loading.set(false)
|
||||
},
|
||||
error: (error) => {
|
||||
this.loading.set(false)
|
||||
this.error.set($localize`Failed to load share links.`)
|
||||
this.toastService.showError(
|
||||
$localize`Error retrieving share links.`,
|
||||
error
|
||||
)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
setPage(page: number): void {
|
||||
this.page.set(page)
|
||||
this.reload()
|
||||
}
|
||||
|
||||
onSort(event: SortEvent): void {
|
||||
this.sortField.set(event.column || 'created')
|
||||
this.sortReverse.set(event.column ? event.reverse : true)
|
||||
this.page.set(1)
|
||||
this.reload()
|
||||
}
|
||||
|
||||
getShareUrl(link: ShareLink): string {
|
||||
const apiURL = new URL(environment.apiBaseUrl)
|
||||
return `${apiURL.origin}${apiURL.pathname.replace(/\/api\/$/, '/share/')}${
|
||||
link.slug
|
||||
}`
|
||||
}
|
||||
|
||||
fileVersionLabel(version: FileVersion): string {
|
||||
return SHARE_LINK_BUNDLE_FILE_VERSION_LABELS[version] ?? version
|
||||
}
|
||||
|
||||
isExpired(expiration?: string): boolean {
|
||||
return !!expiration && Date.parse(expiration) <= Date.now()
|
||||
}
|
||||
|
||||
copy(link: ShareLink): void {
|
||||
if (this.clipboard.copy(this.getShareUrl(link))) {
|
||||
this.copiedID.set(link.id)
|
||||
setTimeout(() => this.copiedID.set(null), 3000)
|
||||
}
|
||||
}
|
||||
|
||||
delete(link: ShareLink): void {
|
||||
this.shareLinkService.delete(link).subscribe({
|
||||
next: () => {
|
||||
if (this.links().length === 1 && this.page() > 1) {
|
||||
this.page.update((page) => page - 1)
|
||||
}
|
||||
this.toastService.showInfo($localize`Share link deleted.`)
|
||||
this.reload()
|
||||
},
|
||||
error: (error) => {
|
||||
this.toastService.showError(
|
||||
$localize`Error deleting share link.`,
|
||||
error
|
||||
)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
copyDocumentID(documentID: number): void {
|
||||
if (this.clipboard.copy(documentID.toString())) {
|
||||
this.copiedDocumentID.set(documentID)
|
||||
setTimeout(() => this.copiedDocumentID.set(null), 3000)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
<pngx-page-header
|
||||
title="Share links"
|
||||
i18n-title
|
||||
info="Manage public links to individual documents and document bundles."
|
||||
i18n-info
|
||||
[loading]="loading()"
|
||||
></pngx-page-header>
|
||||
|
||||
<ul
|
||||
ngbNav
|
||||
#nav="ngbNav"
|
||||
class="nav-tabs"
|
||||
[activeId]="activeNavID()"
|
||||
(activeIdChange)="selectTab($event)"
|
||||
>
|
||||
@if (canViewDocumentLinks) {
|
||||
<li [ngbNavItem]="ShareLinksNavIDs.DocumentLinks">
|
||||
<button ngbNavLink i18n>Document links</button>
|
||||
<ng-template ngbNavContent>
|
||||
<pngx-share-link-list></pngx-share-link-list>
|
||||
</ng-template>
|
||||
</li>
|
||||
}
|
||||
@if (canViewBundles) {
|
||||
<li [ngbNavItem]="ShareLinksNavIDs.Bundles">
|
||||
<button ngbNavLink i18n>Bundles</button>
|
||||
<ng-template ngbNavContent>
|
||||
<pngx-share-link-bundle-list></pngx-share-link-bundle-list>
|
||||
</ng-template>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
|
||||
<div class="bg-body" [ngbNavOutlet]="nav"></div>
|
||||
@@ -0,0 +1,102 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing'
|
||||
import { ActivatedRoute, convertToParamMap, Router } from '@angular/router'
|
||||
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
|
||||
import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
|
||||
import { of } from 'rxjs'
|
||||
import {
|
||||
PermissionAction,
|
||||
PermissionsService,
|
||||
PermissionType,
|
||||
} from 'src/app/services/permissions.service'
|
||||
import { ShareLinkBundleService } from 'src/app/services/rest/share-link-bundle.service'
|
||||
import { ShareLinkService } from 'src/app/services/rest/share-link.service'
|
||||
import { ToastService } from 'src/app/services/toast.service'
|
||||
import { PageHeaderComponent } from '../../common/page-header/page-header.component'
|
||||
import { ShareLinksComponent, ShareLinksNavIDs } from './share-links.component'
|
||||
|
||||
describe('ShareLinksComponent', () => {
|
||||
let fixture: ComponentFixture<ShareLinksComponent>
|
||||
let permissionsService: PermissionsService
|
||||
let router: Router
|
||||
|
||||
const configure = async (type: string = null) => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [
|
||||
ShareLinksComponent,
|
||||
NgbNavModule,
|
||||
NgxBootstrapIconsModule.pick(allIcons),
|
||||
PageHeaderComponent,
|
||||
],
|
||||
providers: [
|
||||
PermissionsService,
|
||||
{
|
||||
provide: ActivatedRoute,
|
||||
useValue: {
|
||||
snapshot: { queryParamMap: convertToParamMap({ type }) },
|
||||
},
|
||||
},
|
||||
{
|
||||
provide: Router,
|
||||
useValue: { navigate: jest.fn().mockResolvedValue(true) },
|
||||
},
|
||||
{
|
||||
provide: ShareLinkBundleService,
|
||||
useValue: {
|
||||
list: jest.fn().mockReturnValue(of({ count: 0, results: [] })),
|
||||
rebuildBundle: jest.fn(),
|
||||
delete: jest.fn(),
|
||||
},
|
||||
},
|
||||
{
|
||||
provide: ShareLinkService,
|
||||
useValue: {
|
||||
list: jest.fn().mockReturnValue(of({ count: 0, results: [] })),
|
||||
delete: jest.fn(),
|
||||
},
|
||||
},
|
||||
{
|
||||
provide: ToastService,
|
||||
useValue: { showInfo: jest.fn(), showError: jest.fn() },
|
||||
},
|
||||
],
|
||||
}).compileComponents()
|
||||
|
||||
permissionsService = TestBed.inject(PermissionsService)
|
||||
router = TestBed.inject(Router)
|
||||
}
|
||||
|
||||
afterEach(() => TestBed.resetTestingModule())
|
||||
|
||||
it('uses the requested bundles tab when permitted', async () => {
|
||||
await configure(ShareLinksNavIDs.Bundles)
|
||||
jest
|
||||
.spyOn(permissionsService, 'currentUserCan')
|
||||
.mockImplementation(
|
||||
(action, type) =>
|
||||
action === PermissionAction.View &&
|
||||
type === PermissionType.ShareLinkBundle
|
||||
)
|
||||
|
||||
fixture = TestBed.createComponent(ShareLinksComponent)
|
||||
fixture.detectChanges()
|
||||
|
||||
expect(fixture.componentInstance.activeNavID()).toBe(
|
||||
ShareLinksNavIDs.Bundles
|
||||
)
|
||||
expect(fixture.nativeElement.textContent).not.toContain('Document links')
|
||||
})
|
||||
|
||||
it('updates the URL when a tab is selected', async () => {
|
||||
await configure()
|
||||
jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
|
||||
|
||||
fixture = TestBed.createComponent(ShareLinksComponent)
|
||||
fixture.componentInstance.selectTab(ShareLinksNavIDs.Bundles)
|
||||
|
||||
expect(router.navigate).toHaveBeenCalledWith([], {
|
||||
relativeTo: TestBed.inject(ActivatedRoute),
|
||||
queryParams: { type: ShareLinksNavIDs.Bundles },
|
||||
queryParamsHandling: 'merge',
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,78 @@
|
||||
import { Component, computed, inject, signal, viewChild } from '@angular/core'
|
||||
import { ActivatedRoute, Router } from '@angular/router'
|
||||
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
|
||||
import {
|
||||
PermissionAction,
|
||||
PermissionsService,
|
||||
PermissionType,
|
||||
} from 'src/app/services/permissions.service'
|
||||
import { PageHeaderComponent } from '../../common/page-header/page-header.component'
|
||||
import { ShareLinkBundleListComponent } from './share-link-bundle-list/share-link-bundle-list.component'
|
||||
import { ShareLinkListComponent } from './share-link-list/share-link-list.component'
|
||||
|
||||
export enum ShareLinksNavIDs {
|
||||
DocumentLinks = 'documents',
|
||||
Bundles = 'bundles',
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'pngx-share-links',
|
||||
templateUrl: './share-links.component.html',
|
||||
imports: [
|
||||
NgbNavModule,
|
||||
PageHeaderComponent,
|
||||
ShareLinkBundleListComponent,
|
||||
ShareLinkListComponent,
|
||||
],
|
||||
})
|
||||
export class ShareLinksComponent {
|
||||
private readonly route = inject(ActivatedRoute)
|
||||
private readonly router = inject(Router)
|
||||
private readonly permissionsService = inject(PermissionsService)
|
||||
|
||||
readonly ShareLinksNavIDs = ShareLinksNavIDs
|
||||
readonly activeNavID = signal(this.getInitialNavID())
|
||||
private readonly documentLinks = viewChild(ShareLinkListComponent)
|
||||
private readonly bundles = viewChild(ShareLinkBundleListComponent)
|
||||
readonly loading = computed(() => {
|
||||
const activeList =
|
||||
this.activeNavID() === ShareLinksNavIDs.DocumentLinks
|
||||
? this.documentLinks()
|
||||
: this.bundles()
|
||||
return activeList?.loading() ?? true
|
||||
})
|
||||
|
||||
get canViewDocumentLinks(): boolean {
|
||||
return this.permissionsService.currentUserCan(
|
||||
PermissionAction.View,
|
||||
PermissionType.ShareLink
|
||||
)
|
||||
}
|
||||
|
||||
get canViewBundles(): boolean {
|
||||
return this.permissionsService.currentUserCan(
|
||||
PermissionAction.View,
|
||||
PermissionType.ShareLinkBundle
|
||||
)
|
||||
}
|
||||
|
||||
selectTab(tab: ShareLinksNavIDs): void {
|
||||
this.activeNavID.set(tab)
|
||||
void this.router.navigate([], {
|
||||
relativeTo: this.route,
|
||||
queryParams: { type: tab },
|
||||
queryParamsHandling: 'merge',
|
||||
})
|
||||
}
|
||||
|
||||
private getInitialNavID(): ShareLinksNavIDs {
|
||||
const requestedTab = this.route.snapshot.queryParamMap.get('type')
|
||||
if (requestedTab === ShareLinksNavIDs.Bundles && this.canViewBundles) {
|
||||
return ShareLinksNavIDs.Bundles
|
||||
}
|
||||
if (this.canViewDocumentLinks) {
|
||||
return ShareLinksNavIDs.DocumentLinks
|
||||
}
|
||||
return ShareLinksNavIDs.Bundles
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user