portalicious: payment and registration page review

global-121 · Dec 20, 2024 · a559978 · a559978
1 parent e0f93b3
commit a559978
Show file tree

Hide file tree

Showing 13 changed files with 58 additions and 42 deletions.
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
@@ -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,
       }"

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
@@ -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

diff --git a/interfaces/Portalicious/src/app/components/query-table/query-table.component.ts b/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) {

diff --git a/...p/components/registration-page-layout/components/add-note-form/add-note-form.component.ts b/...p/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);
     },
   }));

diff --git a/...cious/src/app/components/registration-page-layout/registration-page-layout.component.html b/...cious/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"
         />

diff --git a/...ges/project-payment/components/retry-transfers-dialog/retry-transfers-dialog.component.ts b/...ges/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({

diff --git a/interfaces/Portalicious/src/app/pages/project-payment/project-payment.page.html b/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

diff --git a/interfaces/Portalicious/src/app/pages/project-payment/project-payment.page.ts b/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 profile 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');
         },
       },
       {

diff --git a/.../pages/project-payments/components/payment-summary-card/payment-summary-card.component.ts b/.../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(),
       },

diff --git a/...c/app/pages/project-registration-activity-log/components/table-cell-overview.component.ts b/...c/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();

diff --git a/interfaces/Portalicious/src/app/pages/project-registrations/project-registrations.page.ts b/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 profile 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');
         },
       },
       {

diff --git a/...pages/projects-overview/components/project-summary-card/project-summary-card.component.ts b/...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`,
       },
       {

diff --git a/interfaces/Portalicious/src/styles.scss b/interfaces/Portalicious/src/styles.scss
@@ -47,7 +47,8 @@ body {
     @apply font-semibold;
   }
 
-  p a {
+  p a,
+  p .p-button-link {
     @apply text-blue-500;
     @apply underline;
   }