eho/atomic-design-poc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mijn aanvragen (F2): document preview/download on completed uploads

Browse Source 
Re-opening a Concept wizard now lets the user preview/download what they already
uploaded (PRD 0001 goal 2).

- document-chip: optional previewUrl input → a "Voorbeeld / Download" link (opens
  the stored bytes; server serves inline for pdf/image, attachment otherwise).
- previewUrlFor callback threaded document-upload → document-category → single-upload
  (which builds the URL from a completed upload's documentId). Keeps URL-building out
  of the presentational atoms.
- registratie + herregistratie wizards supply previewUrlFor via UploadAdapter.contentUrl,
  returning undefined for dev-simulation `demo-*` ids (no stored bytes → no link).
- Story: DocumentChip/WithPreview.

Gates green: vitest 128, lint, ng build, check:tokens; backend dotnet 56.
(build-storybook has a pre-existing Compodoc/$localize issue in untouched files.)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Edwin van den Houdt
2026-07-01 14:50:40 +02:00
parent 0bef08e5b3
commit 168cf9786c
8 changed files with 15157 additions and 1665 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/herregistratie/ui/herregistratie-wizard/herregistratie-wizard.component.ts
View File

@@ -11,6 +11,7 @@ import { WizardState, WizardMsg, Draft, initial, reduce, hasProgress } from '@he
import { createDraftSync } from '@registratie/application/draft-sync';
import { DocumentUploadComponent } from '@shared/ui/upload/document-upload/document-upload.component';
import { createUploadController } from '@shared/upload/upload-controller';
import { UploadAdapter } from '@shared/upload/upload.adapter';
import { UploadState, initialUpload, deliveryRefs } from '@shared/upload/upload.machine';
/** Organism: multi-step herregistratie wizard. ALL state lives in one signal
@@ -57,6 +58,7 @@ import { UploadState, initialUpload, deliveryRefs } from '@shared/upload/upload.
@case (3) {
<app-document-upload
[state]="upload()"
[previewUrlFor]="previewUrlFor"
(fileSelected)="uploadCtl.onFileSelected($event.categoryId, $event.files)"
(removeUpload)="uploadCtl.onRemove($event)"
(retryUpload)="uploadCtl.onRetry($event)"
@@ -76,8 +78,14 @@ import { UploadState, initialUpload, deliveryRefs } from '@shared/upload/upload.
})
export class HerregistratieWizardComponent {
private profile = inject(BigProfileStore);
private uploadAdapter = inject(UploadAdapter);
private store = createStore<WizardState, WizardMsg>(initial, reduce);
/** Preview/download link for a completed upload; dev-simulation `demo-*` ids have
no stored bytes, so they get no link. */
protected previewUrlFor = (documentId: string): string | undefined =>
documentId.startsWith('demo-') ? undefined : this.uploadAdapter.contentUrl(documentId);
/** Optional seed so Storybook / the showcase can mount any state directly. */
seed = input<WizardState>(initial);

8
src/app/registratie/ui/registratie-wizard/registratie-wizard.component.ts
View File

@@ -31,6 +31,7 @@ import {
import { createDraftSync } from '@registratie/application/draft-sync';
import { DocumentUploadComponent } from '@shared/ui/upload/document-upload/document-upload.component';
import { createUploadController } from '@shared/upload/upload-controller';
import { UploadAdapter } from '@shared/upload/upload.adapter';
import { UploadState, initialUpload, deliveryRefs } from '@shared/upload/upload.machine';
const KANALEN = [
@@ -140,6 +141,7 @@ const HANDMATIG = '__handmatig__'; // sentinel option: "my diploma isn't listed"
<app-document-upload
class="app-section"
[state]="upload()"
[previewUrlFor]="previewUrlFor"
(fileSelected)="uploadCtl.onFileSelected($event.categoryId, $event.files)"
(removeUpload)="uploadCtl.onRemove($event)"
(retryUpload)="uploadCtl.onRetry($event)"
@@ -183,8 +185,14 @@ const HANDMATIG = '__handmatig__'; // sentinel option: "my diploma isn't listed"
export class RegistratieWizardComponent {
private brp = inject(BrpAdapter);
private duo = inject(DuoAdapter);
private uploadAdapter = inject(UploadAdapter);
private store = createStore<RegistratieState, RegistratieMsg>(initial, reduce);
/** Preview/download link for a completed upload; the dev-simulation `demo-*` ids
have no stored bytes, so they get no link. */
protected previewUrlFor = (documentId: string): string | undefined =>
documentId.startsWith('demo-') ? undefined : this.uploadAdapter.contentUrl(documentId);
protected adresRes = this.brp.adresResource();
private diplomasRes = this.duo.diplomasResource();

2
src/app/shared/ui/upload/document-category/document-category.component.ts
View File

@@ -51,6 +51,7 @@ import { SingleUploadComponent } from '../single-upload/single-upload.component'
@for (u of uploads(); track u.localId) {
<app-single-upload
[upload]="u"
[previewUrlFor]="previewUrlFor()"
(remove)="onRemove(u)"
(retry)="retryUpload.emit(u.localId)" />
}
@@ -67,6 +68,7 @@ export class DocumentCategoryComponent {
uploads = input.required<Upload[]>();
channel = input.required<DeliveryChannel>();
rejection = input<string>();
previewUrlFor = input<(documentId: string) => string | undefined>();
/** Accessible name for the file picker, e.g. "Bestand kiezen voor Diploma". */
protected fileInputLabel = computed(() => $localize`:@@upload.fileInput.labelFor:Bestand kiezen voor ${this.category().label}:category:`);

11
src/app/shared/ui/upload/document-chip/document-chip.component.ts
View File

@@ -29,10 +29,16 @@ import { UploadStatusIconComponent } from '../upload-status-icon/upload-status-i
text-decoration: underline;
}
.action:hover { color: var(--rhc-color-foreground-link-hover); }
a.action { display: inline-block; }
`],
template: `
<app-upload-status-icon [status]="status().type" />
<span class="name">{{ fileName() }}</span>
@if (previewUrl()) {
<a class="action" [href]="previewUrl()" target="_blank" rel="noopener" [attr.aria-label]="previewLabel">
<span i18n="@@upload.chip.preview">Voorbeeld / Download</span>
</a>
}
@if (status().type === 'failed') {
<button type="button" class="action" [attr.aria-label]="retryLabel" (click)="retry.emit()">
<span i18n="@@upload.chip.retry">Opnieuw</span>
@@ -48,6 +54,8 @@ import { UploadStatusIconComponent } from '../upload-status-icon/upload-status-i
export class DocumentChipComponent {
fileName = input.required<string>();
status = input.required<UploadStatus>();
/** When set, show a preview/download link (opens the stored bytes). */
previewUrl = input<string>();
remove = output<void>();
retry = output<void>();
@@ -55,6 +63,9 @@ export class DocumentChipComponent {
protected get removeLabel(): string {
return $localize`:@@upload.chip.removeAria:${this.fileName()}:fileName: verwijderen`;
}
protected get previewLabel(): string {
return $localize`:@@upload.chip.previewAria:${this.fileName()}:fileName: bekijken of downloaden`;
}
protected get retryLabel(): string {
return $localize`:@@upload.chip.retryAria:${this.fileName()}:fileName: opnieuw uploaden`;
}

6
src/app/shared/ui/upload/document-chip/document-chip.stories.ts
View File

@@ -7,7 +7,7 @@ const meta: Meta<DocumentChipComponent> = {
component: DocumentChipComponent,
render: (args) => ({
props: args,
template: `<app-document-chip [fileName]="fileName" [status]="status" />`,
template: `<app-document-chip [fileName]="fileName" [status]="status" [previewUrl]="previewUrl" />`,
}),
};
export default meta;
@@ -17,6 +17,10 @@ export const Complete: Story = {
args: { fileName: 'diploma.pdf', status: { type: 'complete', documentId: 'doc-1' } as UploadStatus },
};
export const WithPreview: Story = {
args: { fileName: 'diploma.pdf', status: { type: 'complete', documentId: 'doc-1' } as UploadStatus, previewUrl: '/api/v1/uploads/doc-1/content' },
};
export const Failed: Story = {
args: { fileName: 'diploma.pdf', status: { type: 'failed', reason: 'Netwerkfout' } as UploadStatus },
};

3
src/app/shared/ui/upload/document-upload/document-upload.component.ts
View File

@@ -25,6 +25,7 @@ import { UploadStatusBannerComponent } from '../upload-status-banner/upload-stat
[uploads]="uploadsFor(c.categoryId)"
[channel]="channelFor(c.categoryId)"
[rejection]="state().rejections[c.categoryId]"
[previewUrlFor]="previewUrlFor()"
(fileSelected)="fileSelected.emit({ categoryId: c.categoryId, files: $event })"
(removeUpload)="removeUpload.emit($event)"
(retryUpload)="retryUpload.emit($event)"
@@ -36,6 +37,8 @@ import { UploadStatusBannerComponent } from '../upload-status-banner/upload-stat
})
export class DocumentUploadComponent {
state = input.required<UploadState>();
/** Optional: builds a preview/download URL for a completed upload's documentId. */
previewUrlFor = input<(documentId: string) => string | undefined>();
fileSelected = output<{ categoryId: string; files: File[] }>();
removeUpload = output<string>();

8
src/app/shared/ui/upload/single-upload/single-upload.component.ts
View File

@@ -15,6 +15,7 @@ import { UploadProgressBarComponent } from '../upload-progress-bar/upload-progre
<app-document-chip
[fileName]="upload().fileName"
[status]="upload().status"
[previewUrl]="previewUrl()"
(remove)="remove.emit()"
(retry)="retry.emit()" />
@if (progressPct() !== null) {
@@ -24,6 +25,8 @@ import { UploadProgressBarComponent } from '../upload-progress-bar/upload-progre
})
export class SingleUploadComponent {
upload = input.required<Upload>();
/** Builds a preview URL for a completed upload's documentId (undefined = no link). */
previewUrlFor = input<(documentId: string) => string | undefined>();
/** Narrow the status union once, in TS, so the template stays type-safe. */
protected readonly progressPct = computed<number | null>(() => {
@@ -31,6 +34,11 @@ export class SingleUploadComponent {
return status.type === 'uploading' ? status.progressPct : null;
});
protected readonly previewUrl = computed<string | undefined>(() => {
const status = this.upload().status;
return status.type === 'complete' ? this.previewUrlFor()?.(status.documentId) : undefined;
});
remove = output<void>();
retry = output<void>();
}