ehoandClaude Sonnet 5
43dc3210cd
The folder now equals the layer, as CLAUDE.md decision 2 requires. 33 directories move by git mv (25 flat, plus upload/'s 8 subfolders split across all three layers). 28 distinct @shared/ui/* specifiers rewrite across 73 files, longest-first. Five relative imports inside upload/ become @shared/ui aliases because their sibling now lives in a different layer; two stay relative because both ends stay in the same layer. Four .mdx docs get their seven broken story imports fixed; atomic-design.mdx's page-shell import is untouched, because layout/ does not move. No component, template, story title, or layer-tag comment changes. That is RD-28's job. Verified against the ticket's acceptance commands: the 26 flat directories become exactly 3 layer folders with the counts the ticket names, only three @shared/ui/* prefixes remain (atoms, molecules, organisms), the .mdx import count holds at 7, and the relative-import count inside ui/ drops from 7 to 2 as decision 4 requires. The @shared/ui/ occurrence count moves from 200 to 205: decision 4 mandates turning 5 of those 7 relative imports into @shared/ui/* aliases, which decision 3's "200 before, 200 after" check does not account for. The 5-occurrence gap is exactly the 5 conversions decision 4 names, not a lost or duplicated specifier. npm run ci --full passes: lint, typecheck, dep:check, format, tokens, seam, both apps' + both libraries' tests, both apps' localized build, audit, backend tests, all three generated-artifact drift checks, and both Storybook instances' build + axe-core a11y suite (67+45 suites, 198+112 tests, all green). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
96 lines
3.2 KiB
TypeScript
96 lines
3.2 KiB
TypeScript
import { Component, computed, input, output } from '@angular/core';
|
|
import type { Upload } from '@shared/domain/upload.machine';
|
|
import { DocumentChipComponent } from '@shared/ui/atoms/upload/document-chip/document-chip.component';
|
|
import { UploadProgressBarComponent } from '@shared/ui/atoms/upload/upload-progress-bar/upload-progress-bar.component';
|
|
|
|
/** Molecule: one row in a CIBG Bestand-upload file list — a `.file-container` `<li>`
|
|
with the `.file` block (via document-chip), the `.actions` (retry/remove), and a
|
|
progress bar while uploading. Used on an `<li>` so `ul.file-list`'s direct child is
|
|
a native `<li>`. Pure UI: emits `remove`/`retry`; the container decides what they mean. */
|
|
@Component({
|
|
selector: 'li[app-single-upload]',
|
|
host: { class: 'file-container' },
|
|
imports: [DocumentChipComponent, UploadProgressBarComponent],
|
|
styles: [
|
|
`
|
|
:host {
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
.upload-progress {
|
|
flex: 1 0 100%;
|
|
margin-block-start: var(--rhc-space-max-sm);
|
|
}
|
|
.actions .btn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
.actions .btn-retry {
|
|
color: var(--rhc-color-foreground-link);
|
|
text-decoration: underline;
|
|
font: inherit;
|
|
}
|
|
`,
|
|
],
|
|
template: `
|
|
<app-document-chip
|
|
[fileName]="upload().fileName"
|
|
[status]="upload().status"
|
|
[fileSizeMb]="upload().fileSizeMb"
|
|
[previewUrl]="previewUrl()"
|
|
/>
|
|
<div class="actions">
|
|
@if (upload().status.type === 'failed') {
|
|
<button
|
|
type="button"
|
|
class="btn btn-retry"
|
|
[attr.aria-label]="retryLabel"
|
|
(click)="retry.emit()"
|
|
i18n="@@upload.chip.retry"
|
|
>
|
|
Opnieuw
|
|
</button>
|
|
}
|
|
@if (upload().status.type !== 'deleting') {
|
|
<button
|
|
type="button"
|
|
class="btn icon-remove"
|
|
[attr.aria-label]="removeLabel"
|
|
(click)="remove.emit()"
|
|
></button>
|
|
}
|
|
</div>
|
|
@if (progressPct() !== null) {
|
|
<app-upload-progress-bar class="upload-progress" [progressPct]="progressPct()!" />
|
|
}
|
|
`,
|
|
})
|
|
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>(() => {
|
|
const status = this.upload().status;
|
|
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>();
|
|
|
|
protected get removeLabel(): string {
|
|
return $localize`:@@upload.chip.removeAria:${this.upload().fileName}:fileName: verwijderen`;
|
|
}
|
|
protected get retryLabel(): string {
|
|
return $localize`:@@upload.chip.retryAria:${this.upload().fileName}:fileName: opnieuw uploaden`;
|
|
}
|
|
}
|