diff --git a/interfaces/Portalicious/eslint.config.js b/interfaces/Portalicious/eslint.config.js index 37ea40e7bb..42233549ca 100644 --- a/interfaces/Portalicious/eslint.config.js +++ b/interfaces/Portalicious/eslint.config.js @@ -128,6 +128,7 @@ module.exports = tseslint.config( 'p-table[stateKey]', 'p-table[stateStorage]', 'styleClass', + 'severity', 'th[pSortableColumn]', 'app-colored-chip[variant]', 'app-metric-tile[chipIcon]', diff --git a/interfaces/Portalicious/src/app/components/data-list/data-list.component.html b/interfaces/Portalicious/src/app/components/data-list/data-list.component.html index 08c8a11ab7..61dbd7f4d9 100644 --- a/interfaces/Portalicious/src/app/components/data-list/data-list.component.html +++ b/interfaces/Portalicious/src/app/components/data-list/data-list.component.html @@ -7,7 +7,9 @@ @for (item of data(); track $index) {

@if (item.loading) { - +

+ +
} @else { {{ item.label | translatableString }}: @if (item.tooltip) { diff --git a/interfaces/Portalicious/src/app/components/data-list/data-list.component.ts b/interfaces/Portalicious/src/app/components/data-list/data-list.component.ts index 0a73a2d856..6751d13dfe 100644 --- a/interfaces/Portalicious/src/app/components/data-list/data-list.component.ts +++ b/interfaces/Portalicious/src/app/components/data-list/data-list.component.ts @@ -1,7 +1,10 @@ import { CurrencyPipe, DatePipe, DecimalPipe, NgClass } from '@angular/common'; import { ChangeDetectionStrategy, Component, input } from '@angular/core'; +import { SkeletonModule } from 'primeng/skeleton'; + import { LocalizedString } from '@121-service/src/shared/types/localized-string.type'; +import { getRandomInt } from '@121-service/src/utils/getRandomValue.helper'; import { ChipVariant, @@ -50,6 +53,7 @@ export type DataListItem = { CurrencyPipe, DatePipe, DecimalPipe, + SkeletonModule, SkeletonInlineComponent, ColoredChipComponent, TranslatableStringPipe, @@ -62,4 +66,8 @@ export type DataListItem = { export class DataListComponent { data = input.required(); hideBottomBorder = input(); + + skeletonWidth() { + return `${getRandomInt(42, 98).toString()}%`; + } } diff --git a/interfaces/Portalicious/src/app/components/page-layout/components/page-layout-title-and-actions/page-layout-title-and-actions.component.html b/interfaces/Portalicious/src/app/components/page-layout/components/page-layout-title-and-actions/page-layout-title-and-actions.component.html new file mode 100644 index 0000000000..aad3609bdd --- /dev/null +++ b/interfaces/Portalicious/src/app/components/page-layout/components/page-layout-title-and-actions/page-layout-title-and-actions.component.html @@ -0,0 +1,7 @@ +
+

+ +

+ + +
diff --git a/interfaces/Portalicious/src/app/components/page-layout/components/page-layout-title-and-actions/page-layout-title-and-actions.component.ts b/interfaces/Portalicious/src/app/components/page-layout/components/page-layout-title-and-actions/page-layout-title-and-actions.component.ts new file mode 100644 index 0000000000..c241ad1c35 --- /dev/null +++ b/interfaces/Portalicious/src/app/components/page-layout/components/page-layout-title-and-actions/page-layout-title-and-actions.component.ts @@ -0,0 +1,11 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'app-page-layout-title-and-actions', + standalone: true, + imports: [], + templateUrl: './page-layout-title-and-actions.component.html', + styles: ``, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class PageLayoutTitleAndActionsComponent {} diff --git a/interfaces/Portalicious/src/app/components/page-layout/components/registration-header/registration-header.component.html b/interfaces/Portalicious/src/app/components/page-layout/components/registration-header/registration-header.component.html index 84ebe6da47..c591123f28 100644 --- a/interfaces/Portalicious/src/app/components/page-layout/components/registration-header/registration-header.component.html +++ b/interfaces/Portalicious/src/app/components/page-layout/components/registration-header/registration-header.component.html @@ -1,8 +1,24 @@ - -
-

{{ registration.data()?.name }}

+ + + @if (registration.isPending()) { + + } @else { + All Registrations + + Reg. #{{ registration.data()?.registrationProgramId }} - + {{ registration.data()?.name }} + } + + @if (canUpdatePersonalData() && !registration.isError()) { {{ registration.data()?.name }} /> } } -
+ + + +
@if (registration.isPending()) { - } - Registered: - @if (registration.data()?.registrationCreatedDate) { - {{ registration.data()?.registrationCreatedDate | date: 'dd-MM-yyyy' }} } @else { - — + Registered: + @if (registration.data()?.registrationCreatedDate) { + {{ + registration.data()?.registrationCreatedDate | date: 'dd-MM-yyyy' + }} + } @else { + — + } }
diff --git a/interfaces/Portalicious/src/app/components/page-layout/components/registration-header/registration-header.component.ts b/interfaces/Portalicious/src/app/components/page-layout/components/registration-header/registration-header.component.ts index e7c26c9425..c7b24985c1 100644 --- a/interfaces/Portalicious/src/app/components/page-layout/components/registration-header/registration-header.component.ts +++ b/interfaces/Portalicious/src/app/components/page-layout/components/registration-header/registration-header.component.ts @@ -11,15 +11,18 @@ import { import { injectQuery } from '@tanstack/angular-query-experimental'; import { ButtonModule } from 'primeng/button'; import { CardModule } from 'primeng/card'; +import { SkeletonModule } from 'primeng/skeleton'; import { TabMenuModule } from 'primeng/tabmenu'; import { PermissionEnum } from '@121-service/src/user/enum/permission.enum'; +import { AppRoutes } from '~/app.routes'; import { getChipDataByRegistrationStatus } from '~/components/colored-chip/colored-chip.helper'; import { DataListComponent, DataListItem, } from '~/components/data-list/data-list.component'; +import { PageLayoutTitleAndActionsComponent } from '~/components/page-layout/components/page-layout-title-and-actions/page-layout-title-and-actions.component'; import { AddNoteFormComponent } from '~/components/page-layout/components/registration-header/add-note-form/add-note-form.component'; import { SkeletonInlineComponent } from '~/components/skeleton-inline/skeleton-inline.component'; import { ProjectApiService } from '~/domains/project/project.api.service'; @@ -36,7 +39,9 @@ import { AuthService } from '~/services/auth.service'; ButtonModule, DatePipe, SkeletonInlineComponent, + SkeletonModule, AddNoteFormComponent, + PageLayoutTitleAndActionsComponent, ], templateUrl: './registration-header.component.html', changeDetection: ChangeDetectionStrategy.OnPush, @@ -96,6 +101,10 @@ export class RegistrationHeaderComponent { })); }); + allRegistrationsLink = computed(() => [ + `/${AppRoutes.project}/${this.projectId().toString()}/${AppRoutes.projectRegistrations}`, + ]); + addNoteFormVisible = signal(false); private getPaymentCountString( diff --git a/interfaces/Portalicious/src/app/components/page-layout/page-layout.component.html b/interfaces/Portalicious/src/app/components/page-layout/page-layout.component.html index eb5b710101..619304ee4c 100644 --- a/interfaces/Portalicious/src/app/components/page-layout/page-layout.component.html +++ b/interfaces/Portalicious/src/app/components/page-layout/page-layout.component.html @@ -1,37 +1,57 @@
-
- @if (projectId()) { - - } - @if (registrationId()) { -
- + @if (project.isError()) { +
+ - - - -
} @else { -
- @if (pageTitle()) { -
-

- {{ pageTitle() }} -

+ @if (projectId()) { + + } +
+ @if (registration.isError()) { + + } @else { + @if (registrationId()) { + + + + + + } @else { + @if (pageTitle()) { + + + {{ pageTitle() }} + + + + + + } - -
+ + } } -
} +
-
diff --git a/interfaces/Portalicious/src/app/components/page-layout/page-layout.component.ts b/interfaces/Portalicious/src/app/components/page-layout/page-layout.component.ts index 82e57e6e50..06afbe74c0 100644 --- a/interfaces/Portalicious/src/app/components/page-layout/page-layout.component.ts +++ b/interfaces/Portalicious/src/app/components/page-layout/page-layout.component.ts @@ -1,12 +1,22 @@ -import { ChangeDetectionStrategy, Component, input } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + inject, + input, +} from '@angular/core'; +import { injectQuery } from '@tanstack/angular-query-experimental'; import { CardModule } from 'primeng/card'; +import { MessageModule } from 'primeng/message'; import { FooterComponent } from '~/components/page-layout/components/footer/footer.component'; import { HeaderComponent } from '~/components/page-layout/components/header/header.component'; +import { PageLayoutTitleAndActionsComponent } from '~/components/page-layout/components/page-layout-title-and-actions/page-layout-title-and-actions.component'; import { ProjectMenuComponent } from '~/components/page-layout/components/project-menu/project-menu.component'; import { RegistrationHeaderComponent } from '~/components/page-layout/components/registration-header/registration-header.component'; import { RegistrationMenuComponent } from '~/components/page-layout/components/registration-menu/registration-menu.component'; +import { ProjectApiService } from '~/domains/project/project.api.service'; +import { RegistrationApiService } from '~/domains/registration/registration.api.service'; @Component({ selector: 'app-page-layout', @@ -18,13 +28,27 @@ import { RegistrationMenuComponent } from '~/components/page-layout/components/r RegistrationHeaderComponent, RegistrationMenuComponent, CardModule, + PageLayoutTitleAndActionsComponent, + MessageModule, ], templateUrl: './page-layout.component.html', styles: ``, changeDetection: ChangeDetectionStrategy.OnPush, }) export class PageLayoutComponent { + readonly registrationApiService = inject(RegistrationApiService); + readonly projectApiService = inject(ProjectApiService); + pageTitle = input(); projectId = input(); registrationId = input(); + + project = injectQuery(this.projectApiService.getProject(this.projectId)); + + registration = injectQuery( + this.registrationApiService.getRegistrationById( + this.projectId, + this.registrationId, + ), + ); } diff --git a/interfaces/Portalicious/src/app/domains/registration/registration.api.service.ts b/interfaces/Portalicious/src/app/domains/registration/registration.api.service.ts index cc88ad1642..1a65bb2fd3 100644 --- a/interfaces/Portalicious/src/app/domains/registration/registration.api.service.ts +++ b/interfaces/Portalicious/src/app/domains/registration/registration.api.service.ts @@ -54,11 +54,12 @@ export class RegistrationApiService extends DomainApiService { } getRegistrationById( - projectId: Signal, - registrationId: Signal, + projectId: Signal, + registrationId: Signal, ) { return this.generateQueryOptions({ - path: [...BASE_ENDPOINT(projectId), registrationId], + path: [...BASE_ENDPOINT(projectId as Signal), registrationId], + enabled: () => !!projectId() && !!registrationId(), }); } diff --git a/interfaces/Portalicious/src/locale/messages.nl.xlf b/interfaces/Portalicious/src/locale/messages.nl.xlf index 32db50328c..dcd99f3d0c 100644 --- a/interfaces/Portalicious/src/locale/messages.nl.xlf +++ b/interfaces/Portalicious/src/locale/messages.nl.xlf @@ -857,4 +857,4 @@ - \ No newline at end of file + diff --git a/interfaces/Portalicious/src/locale/messages.xlf b/interfaces/Portalicious/src/locale/messages.xlf index 975cfa7eb9..6187869694 100644 --- a/interfaces/Portalicious/src/locale/messages.xlf +++ b/interfaces/Portalicious/src/locale/messages.xlf @@ -646,4 +646,4 @@ - \ No newline at end of file +