portalicious: payment and registration page review

e2e/portalicious/pages/RegistrationsPage.ts

@@ -101,7 +101,6 @@ interface ExportExcelFspData {
 class RegistrationsPage extends BasePage {
   readonly page: Page;
   readonly table: TableComponent;
-  readonly goToProfileOption: Locator;
   readonly sendMessageDialogPreview: Locator;
   readonly exportButton: Locator;
   readonly proceedButton: Locator;
@@ -110,7 +109,6 @@ class RegistrationsPage extends BasePage {
     super(page);
     this.page = page;
     this.table = new TableComponent(page);
-    this.goToProfileOption = this.page.getByText('Go to profile');
     this.sendMessageDialogPreview = this.page.getByTestId(
       'send-message-dialog-preview',
     );
@@ -194,8 +192,7 @@ class RegistrationsPage extends BasePage {
         (registrationName && isRequestedFullName) ||
         (!registrationName && !isRequestedFullName)
       ) {
-        await fullName.click({ button: 'right' });
-        await this.goToProfileOption.click();
+        await fullName.getByRole('link').click();
         return;
       }
     }
@@ -252,8 +249,7 @@ class RegistrationsPage extends BasePage {
     const randomIndex = Math.floor(Math.random() * rowCount);
     const fullName = await this.table.getCell(randomIndex, 2);
 
-    await fullName.click({ button: 'right' });
-    await this.goToProfileOption.click();
+    await fullName.click();
     return randomIndex;
   }
 

interfaces/Portalicious/src/app/components/data-list/data-list.component.html

@@ -6,7 +6,7 @@
 >
   @for (item of data(); track $index) {
     <p
-      class="trim space-x-1 border-b border-grey-300 py-3"
+      class="trim space-x-1 border-b border-grey-300 py-4"
       [ngClass]="{
         'col-span-2': item.fullWidth,
       }"

interfaces/Portalicious/src/app/components/page-layout/page-layout.component.html

@@ -13,12 +13,12 @@
     @if (projectId()) {
       <app-project-menu [projectId]="projectId()!" />
     }
-    <div class="flex-1 px-6 py-8 lg:px-24">
+    <div class="flex-1 px-6 py-6 lg:px-24">
       @if (pageTitle()) {
         @let parentTitle = parentPageTitle();
         @let parentLink = parentPageLink();
 
-        <div class="flex items-start justify-between pb-9 pt-1">
+        <div class="flex items-center justify-between pb-6 pt-1">
           <h1 class="min-w-48">
             @if (isPending()) {
               <p-skeleton

interfaces/Portalicious/src/app/components/query-table/query-table.component.ts

@@ -401,12 +401,12 @@ export class QueryTableComponent<TData extends { id: PropertyKey }, TContext> {
     if ('selectAll' in selection && !this.serverSideFiltering()) {
       const filteredValue = this.table.filteredValue;
 
-      if (!filteredValue) {
-        this.toastService.showGenericError();
-        return;
+      if (this.table.filteredValue) {
+        selection = [...(filteredValue as TData[])];
+      } else {
+        // no filters are applied, so we can select all items
+        selection = [...this.items()];
       }
-
-      selection = [...(filteredValue as TData[])];
     }
 
     if (Array.isArray(selection) && selection.length === 0) {

interfaces/Portalicious/src/app/components/registration-page-layout/components/add-note-form/add-note-form.component.ts

@@ -18,6 +18,7 @@ import { InputTextareaModule } from 'primeng/inputtextarea';
 import { FormSidebarComponent } from '~/components/form/form-sidebar.component';
 import { FormFieldWrapperComponent } from '~/components/form-field-wrapper/form-field-wrapper.component';
 import { ProjectApiService } from '~/domains/project/project.api.service';
+import { RegistrationApiService } from '~/domains/registration/registration.api.service';
 import { ToastService } from '~/services/toast.service';
 import {
   generateFieldErrors,
@@ -42,10 +43,12 @@ type AddNoteFormGroup = (typeof AddNoteFormComponent)['prototype']['formGroup'];
 })
 export class AddNoteFormComponent {
   private projectApiService = inject(ProjectApiService);
+  private registrationApiService = inject(RegistrationApiService);
   private toastService = inject(ToastService);
 
   formVisible = model.required<boolean>();
   projectId = input.required<string>();
+  registrationId = input.required<string>();
   registrationReferenceId = input.required<string>();
   registrationName = input<null | string>();
 
@@ -73,6 +76,10 @@ export class AddNoteFormComponent {
       this.toastService.showToast({
         detail: $localize`Note successfully added.`,
       });
+      void this.registrationApiService.invalidateCache(
+        this.projectId,
+        this.registrationId,
+      );
       this.formVisible.set(false);
     },
   }));

interfaces/Portalicious/src/app/components/registration-page-layout/registration-page-layout.component.html

@@ -22,6 +22,7 @@
         <app-add-note-form
           [(formVisible)]="addNoteFormVisible"
           [projectId]="projectId()"
+          [registrationId]="registrationId()"
           [registrationReferenceId]="registration.data().referenceId"
           [registrationName]="registration.data().name"
         />

interfaces/Portalicious/src/app/pages/project-payment/components/retry-transfers-dialog/retry-transfers-dialog.component.ts

@@ -45,12 +45,6 @@ export class RetryTransfersDialogComponent {
       }),
     onSuccess: () =>
       this.paymentApiService.invalidateCache(this.projectId, this.paymentId),
-    onError: (error) => {
-      this.toastService.showToast({
-        severity: 'error',
-        detail: error.message,
-      });
-    },
   }));
 
   public retryFailedTransfers({

interfaces/Portalicious/src/app/pages/project-payment/project-payment.page.html

@@ -39,12 +39,14 @@
         i18n-chipLabel
         chipIcon="pi pi-spinner"
         chipVariant="orange"
+        chipTooltip="The payment will be in progress while the number of transfers sent, total amount and registrations in the table below are loading."
+        i18n-chipTooltip
       />
     } @else {
       <app-metric-tile
         class="grid-in-metric1"
         [pending]="false"
-        [metricValue]="transactions.data()?.length"
+        [metricValue]="transactions.data()?.length | number"
         metricLabel="Registrations included"
         i18n-metricLabel
       />
@@ -58,6 +60,8 @@
       [chipLabel]="successfulPaymentsAmount()"
       chipIcon="pi pi-check-circle"
       chipVariant="green"
+      chipTooltip="Amount of money successfully transferred."
+      i18n-chipTooltip
       metricTooltip="The total payment amount is calculated by summing up the transfer values of each included registration added to the payment."
       i18n-metricTooltip
     />
@@ -103,7 +107,7 @@
       >
         <div
           table-actions
-          class="me-2 flex w-full"
+          class="me-2 flex grow"
         >
           <span
             i18n

interfaces/Portalicious/src/app/pages/project-payment/project-payment.page.ts

@@ -1,4 +1,4 @@
-import { CurrencyPipe, DatePipe } from '@angular/common';
+import { CurrencyPipe, DatePipe, DecimalPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -63,6 +63,7 @@ export interface TransactionsTableCellContext {
     PageLayoutComponent,
     CardModule,
     QueryTableComponent,
+    DecimalPipe,
     ButtonModule,
     MetricTileComponent,
     ProjectPaymentChartComponent,
@@ -73,7 +74,7 @@ export interface TransactionsTableCellContext {
   ],
   templateUrl: './project-payment.page.html',
   styles: ``,
-  providers: [CurrencyPipe, DatePipe, ToastService],
+  providers: [CurrencyPipe, DatePipe, DecimalPipe, ToastService],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectPaymentPageComponent {
@@ -263,15 +264,18 @@ export class ProjectPaymentPageComponent {
 
     return [
       {
-        label: $localize`Go to profile`,
+        label: $localize`Open in new tab`,
         icon: 'pi pi-user',
         command: () => {
-          void this.router.navigate(
-            registrationLink({
-              projectId: this.projectId(),
-              registrationId: transaction.registrationId,
-            }),
+          const url = this.router.serializeUrl(
+            this.router.createUrlTree(
+              registrationLink({
+                projectId: this.projectId(),
+                registrationId: transaction.registrationId,
+              }),
+            ),
           );
+          window.open(url, '_blank');
         },
       },
       {

interfaces/Portalicious/src/app/pages/project-payments/components/payment-summary-card/payment-summary-card.component.ts

@@ -1,4 +1,4 @@
-import { CurrencyPipe, DatePipe } from '@angular/common';
+import { CurrencyPipe, DatePipe, DecimalPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -28,7 +28,7 @@ import { Locale } from '~/utils/locale';
     CardWithLinkComponent,
     CardSummaryMetricsContainerComponent,
   ],
-  providers: [CurrencyPipe],
+  providers: [CurrencyPipe, DecimalPipe],
   templateUrl: './payment-summary-card.component.html',
   styles: ``,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -37,6 +37,7 @@ export class PaymentSummaryCardComponent {
   private locale = inject<Locale>(LOCALE_ID);
   private paymentApiService = inject(PaymentApiService);
   private currencyPipe = inject(CurrencyPipe);
+  private decimalPipe = inject(DecimalPipe);
   private projectApiService = inject(ProjectApiService);
 
   projectId = input.required<string>();
@@ -111,7 +112,7 @@ export class PaymentSummaryCardComponent {
 
     return [
       {
-        value: this.includedRegistrations(),
+        value: this.decimalPipe.transform(this.includedRegistrations()),
         label: $localize`Included reg.`,
       },
       {
@@ -124,7 +125,7 @@ export class PaymentSummaryCardComponent {
         label: $localize`Expected total amount`,
       },
       {
-        value: this.metrics.data()?.failed.count,
+        value: this.decimalPipe.transform(this.metrics.data()?.failed.count),
         label: $localize`Failed transfers`,
         showAlert: this.showFailedAlert(),
       },

interfaces/Portalicious/src/app/pages/project-registration-activity-log/components/table-cell-overview.component.ts

@@ -35,7 +35,9 @@ import { ActivityLogTableCellContext } from '~/pages/project-registration-activi
   template: `
     <div class="flex w-full content-between items-center">
       @if (!!overview()) {
-        <span class="me-auto">{{ overview() }}</span>
+        <span class="me-auto max-w-96 truncate text-ellipsis">{{
+          overview()
+        }}</span>
       }
 
       @let dialogData = voucherDialogData();

interfaces/Portalicious/src/app/pages/project-registrations/project-registrations.page.ts

@@ -167,7 +167,7 @@ export class ProjectRegistrationsPageComponent {
   contextMenuItems = computed<MenuItem[]>(() => {
     return [
       {
-        label: $localize`Go to profile`,
+        label: $localize`Open in new tab`,
         icon: 'pi pi-user',
         command: () => {
           const registration =
@@ -176,12 +176,15 @@ export class ProjectRegistrationsPageComponent {
             this.toastService.showGenericError();
             return;
           }
-          void this.router.navigate(
-            registrationLink({
-              projectId: this.projectId(),
-              registrationId: registration.id,
-            }),
+          const url = this.router.serializeUrl(
+            this.router.createUrlTree(
+              registrationLink({
+                projectId: this.projectId(),
+                registrationId: registration.id,
+              }),
+            ),
           );
+          window.open(url, '_blank');
         },
       },
       {

interfaces/Portalicious/src/app/pages/projects-overview/components/project-summary-card/project-summary-card.component.ts

@@ -1,4 +1,4 @@
-import { CommonModule, CurrencyPipe } from '@angular/common';
+import { CommonModule, CurrencyPipe, DecimalPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -12,7 +12,6 @@ import { injectQuery } from '@tanstack/angular-query-experimental';
 import { AppRoutes } from '~/app.routes';
 import { CardSummaryMetricsContainerComponent } from '~/components/card-summary-metrics-container/card-summary-metrics-container.component';
 import { CardWithLinkComponent } from '~/components/card-with-link/card-with-link.component';
-import { MetricContainerComponent } from '~/components/metric-container/metric-container.component';
 import { SkeletonInlineComponent } from '~/components/skeleton-inline/skeleton-inline.component';
 import { MetricApiService } from '~/domains/metric/metric.api.service';
 import { PaymentApiService } from '~/domains/payment/payment.api.service';
@@ -25,12 +24,11 @@ import { TranslatableStringPipe } from '~/pipes/translatable-string.pipe';
   imports: [
     TranslatableStringPipe,
     CommonModule,
-    MetricContainerComponent,
     SkeletonInlineComponent,
     CardWithLinkComponent,
     CardSummaryMetricsContainerComponent,
   ],
-  providers: [CurrencyPipe],
+  providers: [CurrencyPipe, DecimalPipe],
   templateUrl: './project-summary-card.component.html',
   styles: ``,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -40,6 +38,7 @@ export class ProjectSummaryCardComponent {
   private projectApiService = inject(ProjectApiService);
   private paymentApiService = inject(PaymentApiService);
   private currencyPipe = inject(CurrencyPipe);
+  private decimalPipe = inject(DecimalPipe);
 
   public id = input.required<number>();
 
@@ -73,11 +72,11 @@ export class ProjectSummaryCardComponent {
 
     return [
       {
-        value: this.metrics.data()?.targetedPeople,
+        value: this.decimalPipe.transform(this.metrics.data()?.targetedPeople),
         label: $localize`Target registrations`,
       },
       {
-        value: this.metrics.data()?.includedPeople,
+        value: this.decimalPipe.transform(this.metrics.data()?.includedPeople),
         label: $localize`Included registrations`,
       },
       {

interfaces/Portalicious/src/locale/messages.nl.xlf

@@ -521,10 +521,6 @@
         <source>Scope</source>
         <target>Connectie</target>
       </trans-unit>
-      <trans-unit id="5635594227422805947" datatype="html">
-        <source>Go to profile</source>
-        <target>Ga naar profiel</target>
-      </trans-unit>
       <trans-unit id="5641945527911431559" datatype="html">
         <source>Error: <x equiv-text="{{ versionInfo.error()?.message }}" id="INTERPOLATION"/></source>
         <target>Fout: <x equiv-text="{{ versionInfo.error()?.message }}" id="INTERPOLATION"/></target>
@@ -1708,6 +1704,18 @@
         <source>Registration Status</source>
         <target state="new">Registration Status</target>
       </trans-unit>
+      <trans-unit id="4067653603451364018" datatype="html">
+        <source>The payment will be in progress while the number of transfers sent, total amount and registrations in the table below are loading.</source>
+        <target state="new">The payment will be in progress while the number of transfers sent, total amount and registrations in the table below are loading.</target>
+      </trans-unit>
+      <trans-unit id="2276030451798485888" datatype="html">
+        <source>Amount of money successfully transferred.</source>
+        <target state="new">Amount of money successfully transferred.</target>
+      </trans-unit>
+      <trans-unit id="6371588679924903737" datatype="html">
+        <source>Open in new tab</source>
+        <target state="new">Open in new tab</target>
+      </trans-unit>
     </body>
   </file>
 </xliff>