@genesislcap/pbc-notify-ui 1.0.64 → 14.309.0

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

@@ -0,0 +1,320 @@
+import { Auth } from '@genesislcap/foundation-comms';
+import {
+  CriteriaBuilder,
+  Expression,
+  ExpressionBuilder,
+  Join,
+  Serialiser,
+  Serialisers,
+} 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 dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import debounce from 'lodash.debounce';
+import { AlertService } from '../../../services/alert.service';
+import { FoundationInboxService, SubscribeCallback } from '../../../services/inbox.service';
+import { RuleService } from '../../../services/rule.service';
+import { TemplateService } from '../../../services/template.service';
+import { logger } from '../../../utils';
+import { showNotificationError } from '../../foundation-notification-dashboard/notification-dashboard.utils';
+import {
+  Alert,
+  InboxTab,
+  NotificationRuleTemplateReply,
+  Rule,
+  RuleStatus,
+  RuleTemplate,
+} from '../inbox.types';
+
+dayjs.extend(utc);
+
+const criteriaBuilder = (): CriteriaBuilder => new CriteriaBuilder();
+
+const expressionBuilder = (field: string, value: unknown, serialiser: Serialiser): Expression => {
+  return new ExpressionBuilder()
+    .withField(field)
+    .withValue(value)
+    .withSerialiser(serialiser)
+    .build();
+};
+
+const DEBOUNCE_TIME = 500;
+
+export class FoundationInboxBase extends GenesisElement {
+  @Auth auth: Auth;
+
+  @AlertService alertService: AlertService;
+  @FoundationInboxService inboxService: FoundationInboxService;
+
+  private alertSubscription: SubscribeCallback;
+
+  @observable private alerts: Alert[] = [];
+  @observable alertsFilter: Alert[] = [];
+
+  @RuleService ruleService: RuleService;
+  @observable rules: Rule[] = [];
+  @observable rulesFilter: Rule[] = [];
+
+  @TemplateService templateService: TemplateService;
+  @observable templates: RuleTemplate[] = [];
+  @observable templatesFilter: RuleTemplate[] = [];
+
+  @observable searchAlertLog: string = null;
+  @observable titleSearchValue: string = null;
+  @observable bodySearchValue: string = null;
+
+  @observable searchSubscribe: string = null;
+  @observable ruleTemplateDetails: NotificationRuleTemplateReply = null;
+  @observable selectedTab: InboxTab = InboxTab.ALERTS_NEW;
+
+  @observable fromDatePickerValue: string = null;
+  @observable toDatePickerValue: string = null;
+
+  @observable criteriaMatchAlertStatus: Expression;
+  @observable reverse: boolean = false;
+  @observable showLoadingIndicator: boolean = false;
+
+  @observable severityType = [];
+
+  public tabs: Tabs;
+
+  async connectedCallback() {
+    super.connectedCallback();
+
+    this.criteriaMatchAlertStatus = expressionBuilder('ALERT_STATUS', 'NEW', Serialisers.equals);
+
+    this.alertSubscription = ({ store }) => {
+      this.alerts = store?.items || [];
+      this.showLoadingIndicator = false;
+    };
+
+    this.inboxService.subscribe(
+      this.alertSubscription,
+      false,
+      criteriaBuilder().withExpression(this.criteriaMatchAlertStatus).build(),
+    );
+
+    this.rules = await this.ruleService.getRules();
+    this.templates = await this.templateService.getRuleTemplates();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.inboxService.unsubscribe(this.alertSubscription);
+  }
+
+  // #region Tabs
+  async inboxTabChanged(inboxTab: InboxTab) {
+    this.selectedTab = inboxTab;
+    this.ruleTemplateDetails = null;
+
+    switch (inboxTab) {
+      case InboxTab.ALERTS_NEW:
+        this.criteriaMatchAlertStatus = expressionBuilder(
+          'ALERT_STATUS',
+          'NEW',
+          Serialisers.equals,
+        );
+        this.filterSearchAlertLog();
+        break;
+      case InboxTab.ALERT_HISTORY:
+        this.criteriaMatchAlertStatus = expressionBuilder('ALERT_STATUS', 'NEW', Serialisers.NE);
+        this.filterSearchAlertLog();
+        break;
+      case InboxTab.MY_ALERTS:
+        this.rules = await this.ruleService.getRules();
+        break;
+      case InboxTab.SUBSCRIBE:
+        this.templates = await this.templateService.getRuleTemplates();
+        break;
+      default:
+        logger.error('Unexpected inboxTab:', inboxTab);
+        break;
+    }
+  }
+  // #endregion
+
+  // #region Changed Events
+  alertsChanged = () => (this.alertsFilter = this.alerts);
+
+  rulesChanged = () => (this.rulesFilter = this.rules);
+
+  templatesChanged = () => (this.templatesFilter = this.templates);
+
+  debouncedFilterSearchAlertLog = debounce(this.filterSearchAlertLog, DEBOUNCE_TIME);
+
+  filterSearchAlertLog() {
+    this.showLoadingIndicator = true;
+    const filterCriteria = criteriaBuilder();
+
+    filterCriteria.withExpression(this.criteriaMatchAlertStatus);
+
+    if (this.titleSearchValue) {
+      filterCriteria.withExpression(
+        expressionBuilder('HEADER', this.titleSearchValue, Serialisers.containsIgnoreCase),
+      );
+    }
+
+    if (this.bodySearchValue) {
+      filterCriteria.withExpression(
+        expressionBuilder('MESSAGE', this.bodySearchValue, Serialisers.containsIgnoreCase),
+      );
+    }
+
+    if (this.severityType.length > 0) {
+      const severityExpressions = this.severityType.map((severity) =>
+        expressionBuilder('NOTIFY_SEVERITY', severity, Serialisers.equals),
+      );
+      filterCriteria.withExpression(severityExpressions, { join: Join.Or() });
+    }
+
+    if (this.fromDatePickerValue) {
+      filterCriteria.withExpression(
+        expressionBuilder(
+          'CREATED_AT',
+          this.formatDateStrForMatchCriteria(this.fromDatePickerValue),
+          Serialisers.dateIsGreaterEqual,
+        ),
+      );
+    }
+
+    if (this.toDatePickerValue) {
+      filterCriteria.withExpression(
+        expressionBuilder(
+          'CREATED_AT',
+          this.formatDateStrForMatchCriteria(this.toDatePickerValue),
+          Serialisers.dateIsLessEqual,
+        ),
+      );
+    } else {
+      // if no toDate is set, then force it to be today
+      filterCriteria.withExpression(
+        expressionBuilder(
+          'CREATED_AT',
+          this.formatDateStrForMatchCriteria(),
+          Serialisers.dateIsLessEqual,
+        ),
+      );
+    }
+
+    // Refresh the data subscription
+    this.inboxService.unsubscribe(this.alertSubscription);
+
+    this.inboxService.subscribe(this.alertSubscription, this.reverse, filterCriteria.build());
+  }
+
+  reverseOrder(reverse: boolean) {
+    if (this.reverse != reverse) {
+      this.reverse = reverse;
+      this.filterSearchAlertLog();
+    }
+  }
+
+  filterSearchSubscribe() {
+    if (!this.searchSubscribe) {
+      this.templatesFilter = this.templates;
+      return;
+    }
+
+    this.templatesFilter = this.templates.filter((item) =>
+      item.NAME.toLowerCase().startsWith(this.searchSubscribe.toLowerCase()),
+    );
+  }
+
+  clearSearch() {
+    this.titleSearchValue = '';
+    this.bodySearchValue = '';
+    this.severityType = [];
+    this.fromDatePickerValue = undefined;
+    this.toDatePickerValue = undefined;
+
+    this.filterSearchAlertLog();
+  }
+
+  // #endregion
+
+  // #region New and History
+  dismissAlert(alertId: string) {
+    this.alertService.dismissNotifyAlert(alertId);
+  }
+
+  validateResponse(response) {
+    if (response.MESSAGE_TYPE === 'EVENT_ACK') {
+      this.alertsFilter.splice(0, this.alertsFilter.length);
+      return;
+    }
+
+    showNotificationError(response.ERROR);
+  }
+
+  dismissAllAlerts() {
+    showNotificationDialog(
+      {
+        title: 'Confirm Clear All',
+        body: `Do you really want to clear all the alerts? This action can't be undone.`,
+        dialog: {
+          dismissingAction: {
+            label: 'Dismiss',
+            action: () => null,
+          },
+          confirmingActions: [
+            {
+              label: 'Confirm',
+              action: () =>
+                this.alertService
+                  .dismissAllNotifyAlerts()
+                  .then((response) => this.validateResponse(response)),
+            },
+          ],
+        },
+      },
+      'rapid',
+    );
+  }
+  // #endregion
+
+  // #region Subscriptions
+  // TODO:
+  editAlert() {}
+
+  async playPauseAlert(ruleClicked: Rule) {
+    switch (ruleClicked.RULE_STATUS) {
+      case RuleStatus.ENABLED:
+        await this.ruleService.disableRule(ruleClicked.ID);
+        break;
+      case RuleStatus.DISABLED:
+        await this.ruleService.enableRule(ruleClicked.ID);
+        break;
+      default:
+        logger.error('Unexpected ruleStatus:', ruleClicked.RULE_STATUS);
+        break;
+    }
+
+    this.rules = await this.ruleService.getRules();
+  }
+
+  async deleteAlert(ruleClicked: Rule) {
+    await this.ruleService.unsubscribeRule(ruleClicked.ID);
+    this.rules = await this.ruleService.getRules();
+  }
+  // #endregion
+
+  // #region Subscribe
+  async openTemplateSubscription(ruleTemplate: any) {
+    if (this.ruleTemplateDetails) {
+      // Close
+      this.ruleTemplateDetails = null;
+      return;
+    }
+
+    // Open
+    this.ruleTemplateDetails = await this.templateService.getRuleTemplateDetails(ruleTemplate.ID);
+  }
+  // #endregion
+
+  formatDateStrForMatchCriteria(date?: string) {
+    return dayjs.utc(date).format('YYYYMMDD');
+  }
+}

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

@@ -0,0 +1,309 @@
+import { css } from '@genesislcap/web-core';
+import { scrollbarStyles } from '../../styles/scrollbar.styles';
+
+const tabs = css`
+  rapid-tabs {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  rapid-tabs::part(tablist) {
+    grid-template-columns: none;
+    flex: 0;
+    width: 100%;
+  }
+
+  rapid-tabs::part(tabpanel) {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+  }
+
+  rapid-tab-panel {
+    padding: 0;
+  }
+`;
+
+const search = css`
+  .search {
+    display: flex;
+    flex-direction: column;
+    flex: 0;
+    padding: calc(var(--design-unit) * 3px) calc(var(--design-unit) * 3px);
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    gap: calc(var(--design-unit) * 2px);
+  }
+
+  .search-input {
+    display: flex;
+    margin: 0;
+    width: 100%;
+  }
+
+  .select-input {
+    min-width: 155px;
+    margin-right: 5px;
+  }
+
+  .search-input::part(root) {
+    width: 100%;
+  }
+
+  .clear-all {
+    min-width: 100px;
+    margin-right: 10px;
+  }
+
+  .search-label {
+    color: var(--neutral-foreground-hint);
+    padding-right: 5px;
+    min-width: fit-content;
+  }
+
+  .date-input {
+    margin-bottom: 0;
+    max-width: fit-content;
+  }
+
+  .date-input::part(control) {
+    min-width: 120px;
+    width: 120px;
+  }
+
+  .sort-button {
+    color: var(--accent-foreground-rest);
+    font-size: calc(var(--design-unit) * 3px);
+    padding-right: 10px;
+    text-decoration: none;
+  }
+
+  .sort-button:active {
+    color: var(--neutral-foreground-hint);
+  }
+
+  .sort-button-selected {
+    text-decoration: underline var(--neutral-foreground-hint);
+  }
+`;
+
+export const inboxHeader = css`
+  .inbox-header {
+    display: flex;
+    flex: 0;
+    align-items: center;
+    justify-content: space-between;
+    padding: calc(var(--design-unit) * 3px) calc(var(--design-unit) * 3px);
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+  }
+
+  .inbox-header-title {
+    font-size: calc(var(--design-unit) * 4px);
+    font-weight: 700;
+    padding: 0;
+    margin: 0 auto 0 0;
+  }
+
+  .inbox-header-close {
+    text-align: center;
+    min-width: 30px;
+    height: 30px;
+  }
+
+  .inbox-header-close::part(control) {
+    padding: 0;
+    margin: 0;
+  }
+
+  .inbox-header-close::part(start) {
+    margin-inline-end: 0;
+  }
+`;
+
+export const alertsNewAndAlertsHistory = css`
+  .alert-log-tab-panel {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    flex: 1;
+  }
+
+  .alert-log-tab-content {
+    flex: 1;
+    overflow: auto;
+  }
+
+  .toast {
+    display: flex;
+    flex-direction: row;
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+  }
+
+  .toast-severity {
+    width: calc(var(--design-unit) * 1px);
+    background-color: white;
+    margin: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 0px)
+      calc(var(--design-unit) * 2px) calc(var(--design-unit) * 2px);
+  }
+
+  .toast-header {
+    font-weight: bold;
+  }
+
+  .toast-bottom {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .toast-content {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    width: 100%;
+    margin: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 0px)
+      calc(var(--design-unit) * 2px) calc(var(--design-unit) * 2px);
+  }
+
+  .toast-date {
+    color: var(--neutral-foreground-hint);
+    font-size: calc(var(--design-unit) * 3px);
+  }
+
+  .no-row-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    color: var(--neutral-stroke-rest);
+  }
+
+  .loading-indicator {
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-fill-input-rest);
+    background: var(--neutral-layer-3);
+    color: var(--neutral-foreground-rest);
+    padding: calc(var(--design-unit) * 2px);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    font-size: var(--type-ramp-minus-1-font-size);
+  }
+`;
+
+export const subscriptions = css`
+  .my-alerts-tab-panel {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    flex: 1;
+  }
+
+  .my-alerts-tab-content {
+    flex: 1;
+    overflow: auto;
+  }
+`;
+
+export const subscribe = css`
+  .subscribe-tab-panel {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    flex: 1;
+  }
+
+  .subscribe-tab-content {
+    flex: 1;
+    overflow: auto;
+  }
+`;
+
+export const ruleAndTemplate = css`
+  .template {
+    cursor: pointer;
+  }
+
+  .rule,
+  .template {
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    padding: calc(var(--design-unit) * 2px);
+  }
+
+  .rule-status-actions {
+    display: flex;
+    flex-direction: row;
+    gap: calc(var(--design-unit) * 2px);
+  }
+
+  .rule:hover,
+  .template:hover {
+    background-color: #2e3034;
+  }
+
+  .rule-actions {
+    margin-left: auto;
+    display: flex;
+    gap: calc(var(--design-unit) * 3px);
+    justify-content: space-between;
+    visibility: hidden;
+  }
+
+  .rule:hover > .rule-status-actions > .rule-actions {
+    visibility: visible;
+  }
+
+  .active {
+    color: #7acc79;
+  }
+
+  .paused {
+    color: #ffb660;
+  }
+
+  .rule-datetime,
+  .template-datetime {
+    color: #879ba6;
+  }
+
+  .rule-action-edit,
+  .rule-action-enable-disable,
+  .rule-action-delete {
+    cursor: pointer;
+  }
+
+  .close-icon {
+    position: absolute;
+    right: calc(var(--design-unit) * 2px);
+    cursor: pointer;
+  }
+`;
+
+/**
+ * @public
+ */
+export const FoundationInboxStyles = css`
+  ${scrollbarStyles}
+
+  :host {
+    display: flex;
+    min-height: 0;
+    height: 100%;
+    width: 96%;
+  }
+
+  ${tabs}
+  ${search}
+  ${inboxHeader}
+  ${alertsNewAndAlertsHistory}
+
+  .inbox-content {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+  }
+
+  ${alertsNewAndAlertsHistory}
+  ${subscriptions}
+  ${subscribe}
+  ${ruleAndTemplate}
+`;