@genesislcap/pbc-notify-ui 1.0.64 → 14.308.0

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

@@ -0,0 +1,317 @@
+import { classNames, html, ref, repeat, when } from '@genesislcap/web-core';
+import { NotifyPermission } from '../../utils/notifyPermissions';
+import { ALL_SEVERITIES } from '../foundation-notification-dashboard/types/severity';
+import type { FoundationInbox } from './inbox';
+import { Alert, AlertStatus, InboxTab } from './inbox.types';
+import { getFormattedDate, getIcon, getSeverityColor, getStatus } from './inbox.utils';
+
+const alertsTab = (tab: InboxTab) => html<FoundationInbox>`
+  <rapid-tab-panel
+    slot="alert-log-tab"
+    class="alert-log-tab-panel"
+    id=${tab}
+    style=${(x) => (x.selectedTab === tab ? '' : 'display: none;')}
+  >
+    <div class="search">
+      <div style="display:flex;align-items:center;justify-content:space-between;">
+        <div style="display: flex; align-items: center;">
+          <label part="label" for="control" class="search-label">
+            <slot>Severity ...</slot>
+          </label>
+          <rapid-multiselect
+            class="select-input"
+            :selectedOptions=${(x) => x.severityType}
+            @selectionChange=${(x, c) => {
+              x.severityType = (c.event as CustomEvent).detail;
+              x.filterSearchAlertLog();
+            }}
+            :options=${() =>
+              ALL_SEVERITIES.map((value) => ({
+                value: value.text,
+                label: value.text,
+                labelStyle: `color:${getSeverityColor(value.type)}`,
+              }))}
+            search="false"
+            all="false"
+          ></rapid-multiselect>
+        </div>
+
+        <div style="display: flex; align-items: center;">
+          <label part="label" for="control" class="search-label">
+            <slot>From ...</slot>
+          </label>
+          <rapid-text-field
+            class="date-input"
+            type="date"
+            :value=${(x) => x.fromDatePickerValue}
+            @input=${(x, c) => {
+              x.fromDatePickerValue = (c.event.target as HTMLInputElement).value;
+              x.filterSearchAlertLog();
+            }}
+          ></rapid-text-field>
+
+          <label part="label" for="control" class="search-label" style="padding-left: 5px">
+            <slot>To ...</slot>
+          </label>
+          <rapid-text-field
+            class="date-input"
+            type="date"
+            :value=${(x) => x.toDatePickerValue}
+            @input=${(x, c) => {
+              x.toDatePickerValue = (c.event.target as HTMLInputElement).value;
+              x.filterSearchAlertLog();
+            }}
+          ></rapid-text-field>
+        </div>
+      </div>
+
+      <rapid-text-field
+        class="search-input"
+        :value=${(x) => x.titleSearchValue}
+        @input=${(x, c) => {
+          x.titleSearchValue = (c.event.target as HTMLInputElement).value;
+          x.debouncedFilterSearchAlertLog();
+        }}
+        placeholder="Search by Title..."
+        autocomplete="off"
+      ></rapid-text-field>
+
+      <rapid-text-field
+        class="search-input"
+        :value=${(x) => x.bodySearchValue}
+        @input=${(x, c) => {
+          x.bodySearchValue = (c.event.target as HTMLInputElement).value;
+          x.debouncedFilterSearchAlertLog();
+        }}
+        placeholder="Search by Body ..."
+        autocomplete="off"
+      ></rapid-text-field>
+
+      <div style="display:flex; align-items: center; justify-content: flex-end;">
+        ${when(
+          () => tab === InboxTab.ALERTS_NEW,
+          html`
+            <rapid-button
+              class="clear-all"
+              appearance="primary"
+              @click=${(x) => x.dismissAllAlerts()}
+            >
+              Clear All Alerts
+            </rapid-button>
+          `,
+        )}
+        <a
+          href="#"
+          class="${(x) => classNames('sort-button', ['sort-button-selected', x.reverse])}"
+          @click="${(x) => x.reverseOrder(true)}"
+        >
+          Asc
+        </a>
+        <a
+          href="#"
+          class="${(x) => classNames('sort-button', ['sort-button-selected', !x.reverse])}"
+          @click="${(x) => x.reverseOrder(false)}"
+        >
+          Desc
+        </a>
+      </div>
+    </div>
+
+    <div class="alert-log-tab-content" part="alert-log">
+      ${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="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>
+                `,
+              )}
+              <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>
+        `,
+      )}
+      ${when(
+        (x) => x.alertsFilter.length === 0 && !x.showLoadingIndicator,
+        html`
+          <div class="no-row-container">No Rows To Show</div>
+        `,
+      )}
+      ${when(
+        (x) => x.showLoadingIndicator,
+        html`
+          <div class="no-row-container">
+            <div class="loading-indicator">Loading...</div>
+          </div>
+        `,
+      )}
+    </div>
+  </rapid-tab-panel>
+`;
+
+/**
+ * @public
+ */
+export const FoundationInboxTemplate = html<FoundationInbox>`
+  <div class="inbox-content">
+    <rapid-tabs ${ref('tabs')} appearance="secondary" activeid=${(x) => InboxTab.ALERTS_NEW}>
+      <rapid-tab
+        slot="alert-log-tab"
+        id=${InboxTab.ALERTS_NEW}
+        @click=${(x) => x.inboxTabChanged(InboxTab.ALERTS_NEW)}
+        appearance="secondary"
+      >
+        Alerts
+      </rapid-tab>
+      <rapid-tab
+        slot="alert-log-tab"
+        id=${InboxTab.ALERT_HISTORY}
+        @click=${(x) => x.inboxTabChanged(InboxTab.ALERT_HISTORY)}
+        appearance="secondary"
+      >
+        Alert History
+      </rapid-tab>
+      ${when(
+        (x) => x.auth.currentUser?.hasPermission(NotifyPermission.NotificationRuleView),
+        html`
+          <rapid-tab
+            slot="my-alerts-tab"
+            id=${InboxTab.MY_ALERTS}
+            @click=${(x) => x.inboxTabChanged(InboxTab.MY_ALERTS)}
+            appearance="secondary"
+          >
+            Subscriptions
+          </rapid-tab>
+        `,
+      )}
+      ${when(
+        (x) => x.auth.currentUser?.hasPermission(NotifyPermission.NotificationRuleTemplateView),
+        html`
+          <rapid-tab
+            slot="subscribe-tab"
+            id=${InboxTab.SUBSCRIBE}
+            @click=${(x) => x.inboxTabChanged(InboxTab.SUBSCRIBE)}
+            appearance="secondary"
+          >
+            Subscribe
+          </rapid-tab>
+        `,
+      )}
+
+      <!-- Alerts -->
+      ${(_) => alertsTab(InboxTab.ALERTS_NEW)} ${(_) => alertsTab(InboxTab.ALERT_HISTORY)}
+      ${when(
+        (x) => x.auth.currentUser?.hasPermission(NotifyPermission.NotificationRuleView),
+        html`
+          <!-- Rules -->
+          <rapid-tab-panel
+            slot="my-alerts-tab"
+            class="my-alerts-tab-panel"
+            id=${InboxTab.MY_ALERTS}
+            style=${(x) => (x.selectedTab === InboxTab.MY_ALERTS ? '' : 'display: none;')}
+          >
+            <div class="my-alerts-tab-content">
+              ${repeat(
+                (x) => x.rulesFilter,
+                html<any>`
+                  <div class="rule">
+                    <div class="rule-name">${(x) => x.NAME}</div>
+                    <div class="rule-expression">${(x) => x.RULE_EXPRESSION}</div>
+                    <div class="rule-datetime">${(x, c) => getFormattedDate(x.DATETIME)}</div>
+                    <div class="rule-status-actions">
+                      <div class="rule-status ${(x) => getStatus(x.RULE_STATUS).toLowerCase()}">
+                        ${(x, c) => getStatus(x.RULE_STATUS)}
+                      </div>
+                      <div class="rule-actions">
+                        <!--
+                        <span class="rule-action-edit" @click=${(x, c) => c.parent.editAlert(x)}}>
+                          <rapid-icon name="gear"></rapid-icon>
+                        </span>
+                        -->
+                        <span
+                          class="rule-action-enable-disable"
+                          @click=${(x, c) => c.parent.playPauseAlert(x)}
+                        >
+                          <rapid-icon name=${(x) => getIcon(x.RULE_STATUS)}></rapid-icon>
+                        </span>
+                        <span
+                          class="rule-action-delete"
+                          @click=${(x, c) => c.parent.deleteAlert(x)}
+                        >
+                          <rapid-icon name="trash"></rapid-icon>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                `,
+              )}
+            </div>
+          </rapid-tab-panel>
+        `,
+      )}
+      ${when(
+        (x) => x.auth.currentUser?.hasPermission(NotifyPermission.NotificationRuleTemplateView),
+        html`
+          <!-- Templates -->
+          <rapid-tab-panel
+            slot="subscribe-tab"
+            class="subscribe-tab-panel"
+            id=${InboxTab.SUBSCRIBE}
+            style=${(x) => (x.selectedTab === InboxTab.SUBSCRIBE ? '' : 'display: none;')}
+          >
+            <div class="search">
+              <rapid-text-field
+                class="search-input"
+                @input=${(x, c) => {
+                  x.searchSubscribe = (c.event.target as HTMLInputElement).value;
+                  x.filterSearchSubscribe();
+                }}
+                placeholder="Search Templates..."
+                autocomplete="off"
+              ></rapid-text-field>
+            </div>
+            <div class="subscribe-tab-content">
+              ${repeat(
+                (x) => x.templatesFilter,
+                html`
+                  <div
+                    class="template"
+                    @click=${(x, c) => c.parent.openTemplateSubscription(x)}
+                    id=${(x) => x.ID}
+                  >
+                    <div class="template-name">${(x) => x.NAME}</div>
+                    <div class="template-description">${(x) => x.DESCRIPTION}</div>
+                    <div class="template-datetime">${(x, c) => getFormattedDate(x.DATETIME)}</div>
+                  </div>
+                `,
+              )}
+            </div>
+            ${when(
+              (x) => x.ruleTemplateDetails,
+              html`
+                <inbox-subscription
+                  :template=${(x) => x.ruleTemplateDetails}
+                  @templateSubscribed=${(x) => (x.ruleTemplateDetails = null)}
+                ></inbox-subscription>
+              `,
+            )}
+          </rapid-tab-panel>
+        `,
+      )}
+    </rapid-tabs>
+  </div>
+`;

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

@@ -0,0 +1,26 @@
+import { customElement } from '@genesislcap/web-core';
+import { loadRemotes } from '../components';
+import { FoundationInboxBase } from './inbox-base/inbox-base';
+import { FoundationInboxStyles } from './inbox.styles';
+import { FoundationInboxTemplate } from './inbox.template';
+
+/**
+ * Foundation inbox component for displaying notifies list.
+ * Allow searching, filtering and deleting notifies
+ * @beta
+ */
+@customElement({
+  name: 'foundation-inbox',
+  template: FoundationInboxTemplate,
+  styles: FoundationInboxStyles,
+})
+export class FoundationInbox extends FoundationInboxBase {
+  async connectedCallback() {
+    super.connectedCallback();
+    await loadRemotes();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+}

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

@@ -0,0 +1,84 @@
+export interface Alert {
+  ALERT_ID: string;
+  ALERT_STATUS: AlertStatus;
+  CREATED_AT: number;
+  HEADER: string;
+  MESSAGE: string;
+  USER_NAME: string;
+  EXPIRY: number;
+  NOTIFY_SEVERITY: string;
+  TABLE_ENTITY_ID: string;
+  TOPIC: string;
+}
+
+export enum AlertStatus {
+  NEW = 'NEW',
+  DISMISSED = 'DISMISSED',
+}
+
+export interface Rule {
+  ID: string;
+  NAME: string;
+  DESCRIPTION: string;
+  RULE_EXPRESSION: string;
+  RULE_EXECUTION_STRATEGY: string;
+  RULE_STATUS: string;
+  RULE_TABLE: string;
+  PROCESS_NAME: string;
+  TABLE_OPERATION: string;
+}
+
+export interface RuleParameterEntity {
+  DYNAMIC_RULE_ID;
+  PARAM_LABEL;
+  PARAM_NAME;
+  PARAM_OPERATOR;
+  PARAM_SOURCE;
+  PARAM_SOURCE_TYPE;
+  PARAM_TYPE;
+}
+
+export interface RuleTemplate {
+  ID: string;
+  NAME: string;
+  DESCRIPTION: string;
+  USER_NAME: string;
+  RULE_TABLE: string;
+  RULE_STATUS: string;
+  RULE_EXPRESSION: string;
+  PROCESS_NAME: string;
+  MESSAGE_TYPE: string;
+  RESULT_EXPRESSION: string;
+  TABLE_OPERATION: string;
+  IS_TEMPLATE: boolean;
+  RULE_EXECUTION_STRATEGY: string;
+  RULE_TYPE: string;
+}
+
+export interface NotificationRuleTemplateReply {
+  DYNAMIC_RULE_ID: string;
+  RULE_NAME: string;
+  RULE_DESCRIPTION: string;
+  RULE_TABLE: string;
+  RULE_EXECUTION_STRATEGY: string;
+  RULE_EXPRESSION: {
+    CONDITIONS: Array<any>;
+  };
+  RAW_RULE_EXPRESSION: string;
+  RESULT_EXPRESSION: {
+    ASSIGNMENTS: Array<any>;
+  };
+  PARAMETERS: any;
+}
+
+export enum RuleStatus {
+  ENABLED = 'ENABLED',
+  DISABLED = 'DISABLED',
+}
+
+export enum InboxTab {
+  ALERTS_NEW,
+  ALERT_HISTORY,
+  MY_ALERTS,
+  SUBSCRIBE,
+}

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

@@ -0,0 +1,33 @@
+import {
+  SEVERITY_CRITICAL,
+  SEVERITY_INFORMATION,
+  SEVERITY_SERIOUS,
+  SEVERITY_WARNING,
+} from '../foundation-notification-dashboard/types/severity';
+
+export const getStatus = (ruleStatus) => (ruleStatus == 'ENABLED' ? 'Active' : 'Paused');
+
+export const getIcon = (ruleStatus) => (ruleStatus === 'ENABLED' ? 'pause' : 'play');
+
+export const getFormattedDate = (dateTimeInMills) => {
+  const dateTime = new Date(dateTimeInMills);
+  return `${dateTime.toLocaleDateString()} ${dateTime.toLocaleTimeString()}`;
+};
+
+export function getSeverityColor(severity: string) {
+  if (severity) {
+    switch (severity.toUpperCase()) {
+      case SEVERITY_INFORMATION:
+        return 'var(--info-color, #11C9FC)';
+      case SEVERITY_CRITICAL:
+        return 'var(--error-color)';
+      case SEVERITY_SERIOUS:
+        return 'var(--serious-notify-color, #F9644D)';
+      case SEVERITY_WARNING:
+        return 'var(--warning-color)';
+      default:
+        console.error('Unexpected severity:', severity);
+        return 'var(--neutral-foreground-rest)';
+    }
+  }
+}

package/src/components/foundation-notification-dashboard/components/notify-audit/notify-audit-management.ts

@@ -0,0 +1,96 @@
+import { css, customElement, GenesisElement, html } from '@genesislcap/web-core';
+import { managementGridStyles } from '../../styles/management.styles';
+
+const NOTIFY_AUDIT_MANAGEMENT_COLUMNS = [
+  {
+    field: 'ALERT_ID',
+    headerName: 'Alert',
+    flex: 1,
+  },
+  {
+    field: 'MESSAGE',
+    headerName: 'Message',
+    flex: 1,
+  },
+  {
+    field: 'HEADER',
+    headerName: 'Header',
+    flex: 1,
+  },
+  {
+    field: 'USER_NAME',
+    headerName: 'User Name',
+    flex: 1,
+  },
+  {
+    field: 'EXPIRY',
+    headerName: 'Expiry',
+    flex: 1,
+  },
+  {
+    field: 'NOTIFY_SEVERITY',
+    headerName: 'Notify Serverity',
+    flex: 1,
+  },
+  {
+    field: 'CREATED_AT',
+    headerName: 'Created At',
+    flex: 1,
+  },
+  {
+    field: 'TABLE_ENTITY_ID',
+    headerName: 'Table Entity Id',
+    flex: 1,
+  },
+  {
+    field: 'TOPIC',
+    headerName: 'Topic',
+    flex: 1,
+  },
+  {
+    field: 'NOTIFY_ALERT_AUDIT_ID',
+    headerName: 'Table Entity Id',
+    flex: 1,
+  },
+  {
+    field: 'AUDIT_EVENT_TYPE',
+    headerName: 'Audit Event Type',
+    flex: 1,
+  },
+  {
+    field: 'AUDIT_EVENT_DATETIME',
+    headerName: 'Audit Event Datetime',
+    flex: 1,
+  },
+  {
+    field: 'AUDIT_EVENT_TEXT',
+    headerName: 'Audit Event Text',
+    flex: 1,
+  },
+  {
+    field: 'AUDIT_EVENT_USER',
+    headerName: 'Audit Event User',
+    flex: 1,
+  },
+];
+
+@customElement({
+  name: 'notify-audit-management',
+  template: html<NotifyAuditManagement>`
+    <div class="grid">
+      <entity-management
+        design-system-prefix="rapid"
+        resourceName="ALL_NOTIFY_AUDIT"
+        :columns=${() => [...NOTIFY_AUDIT_MANAGEMENT_COLUMNS]}
+      ></entity-management>
+    </div>
+  `,
+  styles: css`
+    ${managementGridStyles}
+
+    entity-management::part(header) {
+      display: none;
+    }
+  `,
+})
+export class NotifyAuditManagement extends GenesisElement {}

package/src/components/foundation-notification-dashboard/components/routes/route-management.ts

@@ -0,0 +1,56 @@
+import { css, customElement, GenesisElement, html } from '@genesislcap/web-core';
+
+@customElement({
+  name: 'route-management',
+  template: html<RouteManagement>`
+    <rapid-tabs appearance="secondary">
+      <rapid-tab appearance="secondary">Screen Routes</rapid-tab>
+      <rapid-tab appearance="secondary">Email Distribution Routes</rapid-tab>
+      <rapid-tab appearance="secondary">Email User Routes</rapid-tab>
+      <rapid-tab appearance="secondary">Log Routes</rapid-tab>
+      <rapid-tab appearance="secondary">MS Teams Routes</rapid-tab>
+
+      <rapid-tab-panel>
+        <screen-route-management></screen-route-management>
+      </rapid-tab-panel>
+      <rapid-tab-panel>
+        <email-distribution-route-management></email-distribution-route-management>
+      </rapid-tab-panel>
+      <rapid-tab-panel>
+        <email-user-route-management></email-user-route-management>
+      </rapid-tab-panel>
+      <rapid-tab-panel>
+        <log-route-management></log-route-management>
+      </rapid-tab-panel>
+      <rapid-tab-panel>
+        <ms-teams-route-management></ms-teams-route-management>
+      </rapid-tab-panel>
+    </rapid-tabs>
+  `,
+  styles: css`
+    rapid-tabs {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+
+    rapid-tabs::part(tablist) {
+      grid-template-columns: none;
+      flex: 0;
+      align-self: start;
+    }
+
+    rapid-tabs::part(tabpanel) {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-height: 0;
+    }
+
+    rapid-tabs,
+    rapid-tab-panel {
+      height: 100%;
+    }
+  `,
+})
+export class RouteManagement extends GenesisElement {}

package/src/components/foundation-notification-dashboard/components/routes/tabs/email-distribution-route-management.ts

@@ -0,0 +1,58 @@
+import { customElement, GenesisElement, html } from '@genesislcap/web-core';
+import { managementGridStyles } from '../../../styles/management.styles';
+
+const EMAIL_DISTRIBUTION_ROUTE_MANAGEMENT_COLUMNS = [
+  {
+    field: 'NOTIFY_ROUTE_ID',
+    headerName: 'Notify Route Id',
+    flex: 1,
+  },
+  {
+    field: 'TOPIC_MATCH',
+    headerName: 'Topic Match',
+    flex: 1,
+  },
+  {
+    field: 'GATEWAY_ID',
+    headerName: 'Gateway Id',
+    flex: 1,
+  },
+  {
+    field: 'ROUTE_ENABLED',
+    headerName: 'Route Enabled',
+    flex: 1,
+  },
+  {
+    field: 'EMAIL_TO',
+    headerName: 'Email To',
+    flex: 1,
+  },
+  {
+    field: 'EMAIL_CC',
+    headerName: 'Email Cc',
+    flex: 1,
+  },
+  {
+    field: 'EMAIL_BCC',
+    headerName: 'Email Bcc',
+    flex: 1,
+  },
+];
+
+@customElement({
+  name: 'email-distribution-route-management',
+  template: html<EmailDistributionRouteManagement>`
+    <div class="grid">
+      <entity-management
+        design-system-prefix="rapid"
+        resourceName="ALL_EMAIL_DISTRIBUTION_ROUTES"
+        createEvent="EVENT_EMAIL_DISTRIBUTION_ROUTE_CREATE"
+        updateEvent="EVENT_EMAIL_DISTRIBUTION_ROUTE_UPDATE"
+        deleteEvent="EVENT_EMAIL_DISTRIBUTION_ROUTE_DELETE"
+        :columns=${() => [...EMAIL_DISTRIBUTION_ROUTE_MANAGEMENT_COLUMNS]}
+      ></entity-management>
+    </div>
+  `,
+  styles: managementGridStyles,
+})
+export class EmailDistributionRouteManagement extends GenesisElement {}