portalicious: send messages review

AB#30741 AB#30920
global-121 · Oct 25, 2024 · 6d41eed · 6d41eed
1 parent 2dd8361
commit 6d41eed
Show file tree

Hide file tree

Showing 11 changed files with 115 additions and 52 deletions.
diff --git a/e2e/portalicious/pages/BasePage.ts b/e2e/portalicious/pages/BasePage.ts
@@ -64,7 +64,9 @@ class BasePage {
   async validateToastMessage(message: string) {
     await expect(this.toast).toBeVisible();
     expect(await this.toast.textContent()).toContain(message);
-    await expect(this.toast).toBeHidden();
+    await expect(this.toast).toBeHidden({
+      timeout: 6000, // by default, toasts are visible for 5s
+    });
   }
 
   async validateFormError({ errorText }: { errorText: string }) {

diff --git a/interfaces/Portalicious/src/app/components/query-table/query-table.component.html b/interfaces/Portalicious/src/app/components/query-table/query-table.component.html
@@ -9,6 +9,7 @@
   [totalRecords]="totalRecords()"
   [filterDelay]="serverSideFiltering() ? 500 : 0"
   [filterLocale]="locale"
+  (onFilter)="selectAll.set(false)"
   [rowHover]="contextMenuItems()"
   [sortField]="initialSortField()"
   [contextMenu]="contextMenu"
@@ -19,7 +20,7 @@
   [rows]="10"
   [rowsPerPageOptions]="[10, 20, 40, 80, 100]"
   [showCurrentPageReport]="true"
-  [currentPageReportTemplate]="currentPageReportTemplate"
+  [currentPageReportTemplate]="currentPageReportTemplate()"
   stateStorage="local"
   [stateKey]="localStorageKey()"
   [expandedRowKeys]="expandedRowKeys()"

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
@@ -246,6 +246,7 @@ export class QueryTableComponent<TData extends { id: PropertyKey }, TContext> {
     localStorage.removeItem(this.localStorageKey());
     this.globalFilterVisible.set(false);
     this.tableFilters.set({});
+    this.selectAll.set(false);
   }
 
   globalFilterValue = computed(() => {
@@ -372,6 +373,12 @@ export class QueryTableComponent<TData extends { id: PropertyKey }, TContext> {
     }
   }
 
+  selectedItemsCount = computed(() =>
+    this.selectAll()
+      ? this.serverSideTotalRecords()
+      : this.selectedItems().length,
+  );
+
   /**
    *  EXPANDABLE ROWS
    */
@@ -394,9 +401,23 @@ export class QueryTableComponent<TData extends { id: PropertyKey }, TContext> {
   /**
    *  PAGINATION
    */
-  currentPageReportTemplate =
-    $localize`:The contents of the square brackets should not be touched/changed:Showing [first] to [last] of [totalRecords] records`
-      // this is a workaround because the i18n compiler does not support curly braces in the template
-      .replaceAll('[', '{')
-      .replaceAll(']', '}');
+  currentPageReportTemplate = computed(() => {
+    const baseTemplate =
+      $localize`:The contents of the square brackets should not be touched/changed:Showing [first] to [last] of [totalRecords] records`
+        // this is a workaround because the i18n compiler does not support curly braces in the template
+        .replaceAll('[', '{')
+        .replaceAll(']', '}');
+
+    const selectedItemsCount = this.selectedItemsCount();
+
+    if (!selectedItemsCount) {
+      return baseTemplate;
+    }
+
+    return (
+      baseTemplate +
+      ' ' +
+      $localize`(${selectedItemsCount.toString()} selected)`
+    );
+  });
 }
diff --git a/...icious/src/app/pages/project-monitoring/components/metric-tile/metric-tile.component.html b/...icious/src/app/pages/project-monitoring/components/metric-tile/metric-tile.component.html
@@ -17,7 +17,7 @@
     }
   </dt>
   <dd
-    class="txt-metric"
+    class="txt-system-bold-l"
     data-testid="metric-tile-component"
   >
     @if (pending()) {

diff --git a/...ect-registrations/components/custom-message-control/custom-message-control.component.html b/...ect-registrations/components/custom-message-control/custom-message-control.component.html
@@ -12,9 +12,19 @@
     />
   </p>
 
-  <p i18n>
-    Use &commat; to add personalized fields.
-    <a href="https://manual.121.global/">Learn more</a>
+  <p>
+    <ng-container i18n>Use &commat; to add personalized fields. </ng-container>
+    <a
+      href="https://manual.121.global/"
+      target="_blank"
+      title="Opens in a new window"
+      i18n-title="@@generic-opens-in-new-window"
+    >
+      <ng-container i18n>Learn more</ng-container>
+      <span
+        class="p-button-icon p-button-icon-right pi pi-external-link ml-2 text-sm"
+      ></span>
+    </a>
   </p>
 
   <div>
@@ -31,16 +41,15 @@
       }"
     ></textarea>
 
-    @if (error()) {
-      <app-form-error [error]="error()" />
-    } @else {
-      <p
-        i18n
-        class="w-full text-end txt-body-s"
-      >
-        (>20) characters.
-      </p>
-    }
+    <p class="w-full text-end txt-body-s">
+      @if (customMessageInternalModel().length > 20) {
+        {{ customMessageInternalModel().length }}
+      } @else {
+        (>20)
+      }
+      <ng-container i18n> characters.</ng-container>
+    </p>
+    <app-form-error [error]="error()" />
   </div>
 
   <p i18n>

diff --git a/...oject-registrations/components/custom-message-control/custom-message-control.component.ts b/...oject-registrations/components/custom-message-control/custom-message-control.component.ts
@@ -53,8 +53,8 @@ export class CustomMessageControlComponent implements ControlValueAccessor {
   customMessageInternalModel = model<string>('');
   customMessageDisabled = model<boolean>(false);
 
-  writeValue(value: string) {
-    this.customMessageInternalModel.set(value);
+  writeValue(value: string | undefined) {
+    this.customMessageInternalModel.set(value ?? '');
   }
 
   registerOnChange(fn: (value: string) => void) {

diff --git a/interfaces/Portalicious/src/app/pages/project-registrations/project-registrations.page.html b/interfaces/Portalicious/src/app/pages/project-registrations/project-registrations.page.html
@@ -60,12 +60,7 @@
               (click)="changeStatus(RegistrationStatusEnum.paused)"
             />
           }
-          @if (
-            authService.hasPermission({
-              projectId: projectId(),
-              requiredPermission: PermissionEnum.RegistrationNotificationREAD,
-            })
-          ) {
+          @if (canSendMessage()) {
             <p-button
               label="Message"
               i18n-label
@@ -75,12 +70,16 @@
               (click)="sendMessage()"
             />
           }
-          <p-button
-            i18n-label
-            icon="pi pi-ellipsis-v"
-            outlined
-            rounded
-          />
+          @if (canChangeStatus(RegistrationStatusEnum.deleted)) {
+            <p-button
+              label="Delete"
+              i18n-label
+              icon="pi pi-trash"
+              rounded
+              outlined
+              (click)="changeStatus(RegistrationStatusEnum.deleted)"
+            />
+          }
         </p-buttonGroup>
       </div>
     </app-query-table>

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
@@ -184,6 +184,7 @@ export class ProjectRegistrationsPageComponent {
   canChangeStatus(
     status:
       | RegistrationStatusEnum.declined
+      | RegistrationStatusEnum.deleted
       | RegistrationStatusEnum.included
       | RegistrationStatusEnum.paused
       | RegistrationStatusEnum.validated,
@@ -195,6 +196,7 @@ export class ProjectRegistrationsPageComponent {
         PermissionEnum.RegistrationStatusIncludedUPDATE,
       [RegistrationStatusEnum.declined]:
         PermissionEnum.RegistrationStatusMarkAsDeclinedUPDATE,
+      [RegistrationStatusEnum.deleted]: PermissionEnum.RegistrationDELETE,
       [RegistrationStatusEnum.paused]:
         PermissionEnum.RegistrationStatusPausedUPDATE,
     };
@@ -203,4 +205,11 @@ export class ProjectRegistrationsPageComponent {
       requiredPermission: statusToPermissionMap[status],
     });
   }
+
+  canSendMessage = computed(() =>
+    this.authService.hasPermission({
+      projectId: this.projectId(),
+      requiredPermission: PermissionEnum.RegistrationNotificationCREATE,
+    }),
+  );
 }
diff --git a/interfaces/Portalicious/src/app/services/toast.service.ts b/interfaces/Portalicious/src/app/services/toast.service.ts
@@ -15,6 +15,7 @@ export class ToastService {
   showToast(message: Message) {
     this.messageService.add({
       ...message,
+      life: message.life ?? 5000,
       severity: message.severity ?? 'success',
       summary: message.summary
         ? message.summary

diff --git a/interfaces/Portalicious/src/locale/messages.nl.xlf b/interfaces/Portalicious/src/locale/messages.nl.xlf
@@ -999,14 +999,6 @@
         <source>Message:</source>
         <target state="new">Message:</target>
       </trans-unit>
-      <trans-unit id="1214152571980875649" datatype="html">
-        <source>Use @ to add personalized fields. <x ctype="x-a" equiv-text="&lt;a href=&quot;https://manual.121.global/&quot;&gt;" id="START_LINK"/>Learn more<x ctype="x-a" equiv-text="&lt;/a&gt;" id="CLOSE_LINK"/></source>
-        <target state="new">Use @ to add personalized fields. <x ctype="x-a" equiv-text="&lt;a href=&quot;https://manual.121.global/&quot;&gt;" id="START_LINK"/>Learn more<x ctype="x-a" equiv-text="&lt;/a&gt;" id="CLOSE_LINK"/></target>
-      </trans-unit>
-      <trans-unit id="6356396558080396957" datatype="html">
-        <source>(&gt;20) characters.</source>
-        <target state="new">(&gt;20) characters.</target>
-      </trans-unit>
       <trans-unit id="3900182075447065445" datatype="html">
         <source>*Please make sure registration data is available for all used personalized fields.</source>
         <target state="new">*Please make sure registration data is available for all used personalized fields.</target>
@@ -1095,6 +1087,26 @@
         <source>Are you sure you want to send this message?</source>
         <target state="new">Are you sure you want to send this message?</target>
       </trans-unit>
+      <trans-unit id="7781301631011863993" datatype="html">
+        <source>(<x equiv-text="selectedItemsCount.toString()" id="PH"/> selected)</source>
+        <target state="new">(<x equiv-text="selectedItemsCount.toString()" id="PH"/> selected)</target>
+      </trans-unit>
+      <trans-unit id="2221378397919016725" datatype="html">
+        <source>characters.</source>
+        <target state="new">characters.</target>
+      </trans-unit>
+      <trans-unit id="7022070615528435141" datatype="html">
+        <source>Delete</source>
+        <target state="new">Delete</target>
+      </trans-unit>
+      <trans-unit id="3273287482679757457" datatype="html">
+        <source>Use @ to add personalized fields.</source>
+        <target state="new">Use @ to add personalized fields.</target>
+      </trans-unit>
+      <trans-unit id="819996403327805209" datatype="html">
+        <source>Learn more</source>
+        <target state="new">Learn more</target>
+      </trans-unit>
     </body>
   </file>
-</xliff>
+</xliff>
diff --git a/interfaces/Portalicious/src/locale/messages.xlf b/interfaces/Portalicious/src/locale/messages.xlf
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<?xml version="1.0" encoding="UTF-8" ?>
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
   <file source-language="en-GB" datatype="plaintext" original="ng2.template">
     <body>
@@ -746,9 +746,6 @@
       <trans-unit id="activity-log-item-type-fsp-change" datatype="html">
         <source>FSP change</source>
       </trans-unit>
-      <trans-unit id="1214152571980875649" datatype="html">
-        <source>Use @ to add personalized fields. <x ctype="x-a" equiv-text="&lt;a href=&quot;https://manual.121.global/&quot;&gt;" id="START_LINK"/>Learn more<x ctype="x-a" equiv-text="&lt;/a&gt;" id="CLOSE_LINK"/></source>
-      </trans-unit>
       <trans-unit id="2290401575085388784" datatype="html">
         <source>You are about to send a message to <x equiv-text="{{ actionData()?.count }}" id="INTERPOLATION"/> registration(s).</source>
       </trans-unit>
@@ -773,9 +770,6 @@
       <trans-unit id="5397829192667702490" datatype="html">
         <source>Sending messages</source>
       </trans-unit>
-      <trans-unit id="6356396558080396957" datatype="html">
-        <source>(&gt;20) characters.</source>
-      </trans-unit>
       <trans-unit id="6562860910125244453" datatype="html">
         <source>Use the &apos;Last Message Status&apos; column to check the progress of messages. Closing this notification will not cancel message sending.</source>
       </trans-unit>
@@ -824,6 +818,21 @@
       <trans-unit id="loading" datatype="html">
         <source>Loading...</source>
       </trans-unit>
+      <trans-unit id="2221378397919016725" datatype="html">
+        <source>characters.</source>
+      </trans-unit>
+      <trans-unit id="7022070615528435141" datatype="html">
+        <source>Delete</source>
+      </trans-unit>
+      <trans-unit id="7781301631011863993" datatype="html">
+        <source>(<x equiv-text="selectedItemsCount.toString()" id="PH"/> selected)</source>
+      </trans-unit>
+      <trans-unit id="3273287482679757457" datatype="html">
+        <source>Use @ to add personalized fields.</source>
+      </trans-unit>
+      <trans-unit id="819996403327805209" datatype="html">
+        <source>Learn more</source>
+      </trans-unit>
     </body>
   </file>
-</xliff>
+</xliff>