@genesislcap/pbc-notify-ui 15.0.0 → 15.1.0

package/src/components/foundation-inbox/inbox-base/inbox-base.ts

@@ -9,7 +9,7 @@ import {
 } from '@genesislcap/foundation-criteria';
 import { showNotificationDialog } from '@genesislcap/foundation-notifications';
 import type { Tabs } from '@genesislcap/foundation-ui';
-import { GenesisElement, observable } from '@genesislcap/web-core';
+import { attr, GenesisElement, observable, ViewTemplate } from '@genesislcap/web-core';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import debounce from 'lodash.debounce';
@@ -26,6 +26,7 @@ import { TemplateService } from '../../../services/template.service';
 import { logger } from '../../../utils';
 import { NotifyPermission } from '../../../utils/notifyPermissions';
 import { showNotificationError } from '../../foundation-notification-dashboard/notification-dashboard.utils';
+import type { FoundationInbox } from '../inbox';
 import { Alert, InboxTab, NotificationRuleTemplateReply, Rule, RuleTemplate } from '../inbox.types';
 import { extractTopic } from '../inbox.utils';
 
@@ -54,6 +55,47 @@ export class FoundationInboxBase extends GenesisElement {
   @observable alertsFilter: Alert[] = [];
   @observable moreAlerts: boolean = false;
 
+  /**
+   * Optional per-row template for the Alerts / Alert History lists. When set, it replaces the
+   * default alert row (the `.toast` element) and is rendered with the alert as its source (`x`)
+   * and the inbox host as `c.parent`, mirroring the internal `html<Alert, FoundationInbox>` row.
+   * When unset, the built-in row is used, so existing consumers are unaffected.
+   *
+   * @public
+   */
+  @observable renderAlert: ViewTemplate<Alert, FoundationInbox> | undefined = undefined;
+
+  /**
+   * Hide the Severity filter block in the search bar. Set via the `hide-severity-filter`
+   * attribute or property. @public
+   */
+  @attr({ mode: 'boolean' }) hideSeverityFilter: boolean = false;
+
+  /**
+   * Hide the Date Range filter block in the search bar. Set via the `hide-date-range`
+   * attribute or property. @public
+   */
+  @attr({ mode: 'boolean' }) hideDateRange: boolean = false;
+
+  /**
+   * Hide the Search-by-Title field in the search bar. Set via the `hide-title-search`
+   * attribute or property. @public
+   */
+  @attr({ mode: 'boolean' }) hideTitleSearch: boolean = false;
+
+  /**
+   * Hide the Search-by-Body field in the search bar. Set via the `hide-body-search`
+   * attribute or property. @public
+   */
+  @attr({ mode: 'boolean' }) hideBodySearch: boolean = false;
+
+  /**
+   * Optional click handler for an alert row, fired with the clicked alert so consumers can open
+   * the related record. Interactive elements inside a custom {@link renderAlert} template should
+   * call `event.stopPropagation()` to avoid triggering this. @public
+   */
+  @observable onAlertClick: ((alert: Alert) => void) | undefined = undefined;
+
   @RuleService ruleService: RuleService;
   @observable rules: Rule[] = [];
 
@@ -85,7 +127,7 @@ export class FoundationInboxBase extends GenesisElement {
 
   @observable criteriaMatchAlertStatus: Expression;
   @observable reverse: boolean = false;
-  @observable sortDirection: string = 'Asc';
+  @observable sortDirection: 'Asc' | 'Desc' = 'Desc';
   @observable showLoadingIndicator: boolean = false;
 
   @observable severityType = [];

package/src/components/foundation-inbox/inbox.template.ts

@@ -1,4 +1,4 @@
-import { html, ref, repeat, sync, when } from '@genesislcap/web-core';
+import { html, ref, repeat, sync, when, whenElse } from '@genesislcap/web-core';
 import { eventDetail } from '../../utils';
 import { NotifyPermission } from '../../utils/notifyPermissions';
 import type { FoundationInbox } from './inbox';
@@ -13,7 +13,10 @@ const alertsTab = (tab: InboxTab) => html<FoundationInbox>`
     style=${(x) => (x.selectedTab === tab ? '' : 'display: none;')}
   >
     <div class="search">
-      <div style="display: flex; flex-direction: column;">
+      <div
+        style=${(x) =>
+          x.hideSeverityFilter ? 'display: none;' : 'display: flex; flex-direction: column;'}
+      >
         <label part="label" for="control" class="search-label">
           <slot>Severity</slot>
         </label>
@@ -65,7 +68,10 @@ const alertsTab = (tab: InboxTab) => html<FoundationInbox>`
         </div>
       </div>
 
-      <div style="display: flex; flex-direction: column;">
+      <div
+        style=${(x) =>
+          x.hideDateRange ? 'display: none;' : 'display: flex; flex-direction: column;'}
+      >
         <label part="label" for="control" class="search-label">
           <slot>Date Range</slot>
         </label>
@@ -94,6 +100,7 @@ const alertsTab = (tab: InboxTab) => html<FoundationInbox>`
 
       <rapid-text-field
         class="search-input"
+        style=${(x) => (x.hideTitleSearch ? 'display: none;' : '')}
         :value=${(x) => x.titleSearchValue}
         @input=${(x, c) => {
           x.titleSearchValue = (c.event.target as HTMLInputElement).value;
@@ -105,6 +112,7 @@ const alertsTab = (tab: InboxTab) => html<FoundationInbox>`
 
       <rapid-text-field
         class="search-input"
+        style=${(x) => (x.hideBodySearch ? 'display: none;' : '')}
         :value=${(x) => x.bodySearchValue}
         @input=${(x, c) => {
           x.bodySearchValue = (c.event.target as HTMLInputElement).value;
@@ -120,8 +128,8 @@ const alertsTab = (tab: InboxTab) => html<FoundationInbox>`
             <slot>Sort By</slot>
           </label>
           <rapid-segmented-control :value=${sync((x) => x.sortDirection)}>
-            <rapid-segmented-item checked value="Asc">Asc</rapid-segmented-item>
-            <rapid-segmented-item value="Desc">Desc</rapid-segmented-item>
+            <rapid-segmented-item value="Asc">Asc</rapid-segmented-item>
+            <rapid-segmented-item checked value="Desc">Desc</rapid-segmented-item>
           </rapid-segmented-control>
         </div>
         ${when(
@@ -144,27 +152,49 @@ const alertsTab = (tab: InboxTab) => html<FoundationInbox>`
       ${repeat(
         (x) => x.alertsFilter,
         html<Alert, FoundationInbox>`
-          <div class="toast" id=${(x) => x.ALERT_ID}>
-            <div
-              class="toast-severity"
-              style="background-color: ${(x) => getSeverityColor(x.NOTIFY_SEVERITY)}"
-            ></div>
+          <div
+            class="alert-row"
+            style=${(x, c) => (c.parent.onAlertClick ? 'cursor: pointer;' : '')}
+            @click=${(x, c) => c.parent.onAlertClick?.(x)}
+          >
+            ${whenElse(
+              (x, c) => !!c.parent.renderAlert,
+              html<Alert, FoundationInbox>`
+                ${(x, c) => c.parent.renderAlert}
+              `,
+              html<Alert, FoundationInbox>`
+                <div class="toast" id=${(x) => x.ALERT_ID}>
+                  <div
+                    class="toast-severity"
+                    style="background-color: ${(x) => getSeverityColor(x.NOTIFY_SEVERITY)}"
+                  ></div>
 
-            <div class="toast-content">
-              ${when(
-                (x) => x.ALERT_STATUS === AlertStatus.NEW,
-                html`
-                  <div class="close-icon" @click=${(x, c) => c.parent.dismissAlert(x.ALERT_ID)}>
-                    <rapid-icon name="times"></rapid-icon>
+                  <div class="toast-content">
+                    ${when(
+                      (x) => x.ALERT_STATUS === AlertStatus.NEW,
+                      html`
+                        <div
+                          class="close-icon"
+                          @click=${(x, c) => {
+                            c.event.stopPropagation();
+                            c.parent.dismissAlert(x.ALERT_ID);
+                          }}
+                        >
+                          <rapid-icon name="times"></rapid-icon>
+                        </div>
+                      `,
+                    )}
+                    <span class="toast-header">${(x) => x.HEADER}</span>
+                    <span class="toast-message">${(x) => x.MESSAGE}</span>
+                    <div class="toast-bottom" slot="bottom">
+                      <span class="toast-date" slot="date">
+                        ${(x) => getFormattedDate(x.CREATED_AT)}
+                      </span>
+                    </div>
                   </div>
-                `,
-              )}
-              <span class="toast-header">${(x) => x.HEADER}</span>
-              <span class="toast-message">${(x) => x.MESSAGE}</span>
-              <div class="toast-bottom" slot="bottom">
-                <span class="toast-date" slot="date">${(x) => getFormattedDate(x.CREATED_AT)}</span>
-              </div>
-            </div>
+                </div>
+              `,
+            )}
           </div>
         `,
       )}

package/src/index.ts

@@ -3,8 +3,10 @@ export * from './components/foundation-inbox/components/foundation-inbox-flyout/
 export * from './components/foundation-inbox/components/foundation-inbox-counter/foundation-inbox-counter';
 export * from './components/foundation-notification-dashboard';
 export type {
+  Alert,
   ParameterEditedEventDetail,
   RuleParameterEntity,
 } from './components/foundation-inbox/inbox.types';
+export { AlertStatus } from './components/foundation-inbox/inbox.types';
 export type { ConditionBuilderEntity } from './notify.types';
 export type { ParameterBuilderEntity } from './components/foundation-notification-dashboard/components/templates/template-dialog/template-dialog.types';