@genesislcap/pbc-notify-ui 1.0.64 → 14.308.0

package/src/components/components.ts

@@ -0,0 +1,54 @@
+import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
+import * as rapidDesignSystem from '@genesislcap/rapid-design-system';
+import { rapidGridComponents } from '@genesislcap/rapid-grid-pro';
+import { FoundationInboxCounter } from './foundation-inbox/components/foundation-inbox-counter/foundation-inbox-counter';
+import { InboxSubscription } from './foundation-inbox/components/inbox-subscription/inbox-subscription';
+import { RuleParameter } from './foundation-inbox/components/inbox-subscription/rule-parameter/rule-parameter';
+import { NotifyAuditManagement } from './foundation-notification-dashboard/components/notify-audit/notify-audit-management';
+import { RouteManagement } from './foundation-notification-dashboard/components/routes/route-management';
+import { EmailDistributionRouteManagement } from './foundation-notification-dashboard/components/routes/tabs/email-distribution-route-management';
+import { EmailUserRouteManagement } from './foundation-notification-dashboard/components/routes/tabs/email-user-route-management';
+import { LogRouteManagement } from './foundation-notification-dashboard/components/routes/tabs/log-route-management';
+import { MSTeamsRouteManagement } from './foundation-notification-dashboard/components/routes/tabs/ms-teams-route-management';
+import { ScreenRouteManagement } from './foundation-notification-dashboard/components/routes/tabs/screen-route-management';
+import { RuleConditionBuilder } from './foundation-notification-dashboard/components/rules/rule-dialog/rule-condition-builder/rule-condition-builder';
+import { RuleDialog } from './foundation-notification-dashboard/components/rules/rule-dialog/rule-dialog';
+import { RuleManagement } from './foundation-notification-dashboard/components/rules/rule-management';
+import { ParameterBuilder } from './foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder';
+import { TemplateConditionBuilder } from './foundation-notification-dashboard/components/templates/template-dialog/template-condition-builder/template-condition-builder';
+import { TemplateDialog } from './foundation-notification-dashboard/components/templates/template-dialog/template-dialog';
+import { TemplateManagement } from './foundation-notification-dashboard/components/templates/template-management';
+
+// Components
+
+// #region Inbox
+FoundationInboxCounter;
+InboxSubscription;
+RuleParameter;
+// #endregion Inbox
+
+// #region Notification Dashboard
+RuleManagement;
+RuleDialog;
+RuleConditionBuilder;
+
+TemplateManagement;
+TemplateDialog;
+ParameterBuilder;
+TemplateConditionBuilder;
+
+RouteManagement;
+ScreenRouteManagement;
+EmailDistributionRouteManagement;
+EmailUserRouteManagement;
+LogRouteManagement;
+MSTeamsRouteManagement;
+
+NotifyAuditManagement;
+// #endregion Notification Dashboard
+
+export async function loadRemotes() {
+  rapidDesignSystem
+    .provideDesignSystem()
+    .register(rapidGridComponents, rapidDesignSystem.baseComponents, foundationLayoutComponents);
+}

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

@@ -0,0 +1,30 @@
+import { css } from '@genesislcap/web-core';
+
+const BACKGROUND_COLOR = '#EF5547';
+
+/** Class to use when there are no items */
+export const noItemsClass = 'no-items';
+
+export const FoundationInboxCounterStyles = css`
+  :host {
+    display: inline-block;
+    min-width: 16px;
+    height: 16px;
+    border-radius: 9px;
+    text-align: center;
+    color: #fff;
+    line-height: 16px;
+    font-size: 9px;
+    font-weight: 700;
+    background: ${BACKGROUND_COLOR};
+    pointer-events: none;
+  }
+
+  .hidden {
+    visibility: hidden;
+  }
+
+  :host(.${noItemsClass}) {
+    display: none;
+  }
+`;

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

@@ -0,0 +1,16 @@
+import { classNames, html, when } from '@genesislcap/web-core';
+import type { FoundationInboxCounter } from './foundation-inbox-counter';
+import { noItemsClass } from './foundation-inbox-counter.styles';
+
+const MAX_NUMBER_TO_DISPLAY = 99;
+
+export const FoundationInboxCounterTemplate = html<FoundationInboxCounter>`
+  <template class="${(x) => classNames([noItemsClass, x.value < 1])}">
+    ${when(
+      (x) => x.value > 0,
+      html`
+        ${(x) => (x.value > MAX_NUMBER_TO_DISPLAY ? `${MAX_NUMBER_TO_DISPLAY}+` : x.value)}
+      `,
+    )}
+  </template>
+`;

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

@@ -0,0 +1,33 @@
+import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
+import { FoundationInboxService } from '../../../../services/inbox.service';
+import { AlertStatus } from '../../inbox.types';
+import { FoundationInboxCounterStyles } from './foundation-inbox-counter.styles';
+import { FoundationInboxCounterTemplate } from './foundation-inbox-counter.template';
+
+@customElement({
+  name: 'foundation-inbox-counter',
+  template: FoundationInboxCounterTemplate,
+  styles: FoundationInboxCounterStyles,
+})
+export class FoundationInboxCounter extends GenesisElement {
+  @observable value: number = 0;
+  @FoundationInboxService inboxService: FoundationInboxService;
+  private subscriptionHandler: (any) => void;
+
+  async connectedCallback() {
+    super.connectedCallback();
+    this.subscriptionHandler = ({ store }) => {
+      this.value = (store?.items || []).length;
+    };
+    this.inboxService.subscribe(
+      this.subscriptionHandler,
+      false,
+      `ALERT_STATUS=='${AlertStatus.NEW}'`,
+    );
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.inboxService.unsubscribe(this.subscriptionHandler);
+  }
+}

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

@@ -0,0 +1,18 @@
+import { css } from '@genesislcap/web-core';
+import { FoundationInboxStyles } from '../../inbox.styles';
+
+export const FoundationInboxFlyoutStyles = css`
+  rapid-flyout::part(flyout) {
+    width: 30%;
+    min-width: 320px;
+    padding: 0;
+  }
+
+  rapid-flyout::part(content) {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  ${FoundationInboxStyles}
+`;

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

@@ -0,0 +1,22 @@
+import { html, ref } from '@genesislcap/web-core';
+import { FoundationInboxTemplate } from '../../inbox.template';
+import type { FoundationInboxFlyout } from './foundation-inbox-flyout';
+
+export const FoundationInboxFlyoutTemplate = html<FoundationInboxFlyout>`
+  <rapid-flyout
+    ${ref('flyout')}
+    position="right"
+    @closed=${(x) => (x.flyoutClosed = true)}
+    :closed=${(x) => x.flyoutClosed}
+    displayHeader=${false}
+  >
+    <div class="inbox-header">
+      <div class="inbox-header-title">Alerts Center</div>
+      <rapid-button class="inbox-header-close" @click=${(x) => x.close()}>
+        <rapid-icon part="icon" name="xmark" size="xl"></rapid-icon>
+      </rapid-button>
+    </div>
+
+    ${FoundationInboxTemplate}
+  </rapid-flyout>
+`;

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

@@ -0,0 +1,43 @@
+import type { Flyout } from '@genesislcap/rapid-design-system';
+import { observable, customElement } from '@genesislcap/web-core';
+import { loadRemotes } from '../../../components';
+import { FoundationInboxBase } from '../../inbox-base/inbox-base';
+import { FoundationInboxFlyoutStyles } from './foundation-inbox-flyout.styles';
+import { FoundationInboxFlyoutTemplate } from './foundation-inbox-flyout.template';
+
+@customElement({
+  name: 'foundation-inbox-flyout',
+  template: FoundationInboxFlyoutTemplate,
+  styles: FoundationInboxFlyoutStyles,
+})
+export class FoundationInboxFlyout extends FoundationInboxBase {
+  @observable ready: boolean = false;
+
+  flyout: Flyout;
+  @observable flyoutClosed: boolean = true;
+
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.loadRemotes();
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+  }
+
+  public async open() {
+    this.flyoutClosed = false;
+    this.rules = await this.ruleService.getRules();
+    this.templates = await this.templateService.getRuleTemplates();
+  }
+
+  public close() {
+    this.ruleTemplateDetails = null;
+    this.flyout.closeFlyout();
+  }
+
+  async loadRemotes() {
+    const remoteComponents = await loadRemotes();
+    this.ready = true;
+  }
+}

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

@@ -0,0 +1,37 @@
+import { css } from '@genesislcap/web-core';
+
+export const InboxSubscriptionStyles = css`
+  .inbox-subscription {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .inbox-subscription-header {
+    border-top: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    padding: calc(var(--design-unit) * 2px);
+  }
+
+  .inbox-subscription-content {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--design-unit) * 2px);
+    overflow: auto;
+    max-height: calc(var(--design-unit) * 80px);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    margin: calc(var(--design-unit) * 2px);
+    padding: calc(var(--design-unit) * 2px);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+  }
+
+  .inbox-subscription-footer {
+    padding: calc(var(--design-unit) * 2px);
+    border-top: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+  }
+
+  rapid-button.subscribe {
+    display: flex;
+    margin: 0;
+    width: 100%;
+  }
+`;

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

@@ -0,0 +1,50 @@
+import { html, repeat, when } from '@genesislcap/web-core';
+import { eventDetail } from '../../../../utils';
+import { RuleParameterEntity } from '../../inbox.types';
+import type { InboxSubscription } from './inbox-subscription';
+
+export const InboxSubscriptionTemplate = html<InboxSubscription>`
+  <div class="inbox-subscription">
+    <div class="inbox-subscription-header">
+      Subscribe to
+      <span style="font-weight: bold;">${(x) => x.template.RULE_NAME}</span>
+    </div>
+
+    ${when(
+      (x) => Object.values(x.template.PARAMETERS).length === 0,
+      html`
+        <p style="padding-left: 10px;">The selected template doesn't have parameters.</p>
+      `,
+    )}
+    ${when(
+      (x) => Object.values(x.template.PARAMETERS).length > 0,
+      html`
+        <div class="inbox-subscription-content">
+          ${repeat(
+            // @ts-ignore
+            (x) => Object.values(x.template.PARAMETERS),
+            html<RuleParameterEntity>`
+              <rule-parameter
+                :parameter=${(x) => x}
+                :isFirstElement=${(x, c) => c.parent.isFirstElement(x)}
+                :operator=${(x, c) => c.parent.parametersOperators[x.PARAM_NAME]}
+                @parameterEdited=${(x, c) => c.parent.parameterEdit(eventDetail(c))}
+              ></rule-parameter>
+            `,
+          )}
+        </div>
+      `,
+    )}
+
+    <div class="inbox-subscription-footer">
+      <rapid-button
+        class="subscribe"
+        appearance="primary"
+        @click=${(x) => x.subscribeTemplate()}
+        ?disabled=${(x) => x.subscribeDisabled}
+      >
+        Subscribe
+      </rapid-button>
+    </div>
+  </div>
+`;

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

@@ -0,0 +1,81 @@
+import { attr, customElement, GenesisElement, observable } from '@genesislcap/web-core';
+import { RuleService } from '../../../../services/rule.service';
+import { EXPRESSION_TYPE_PLACEHOLDER } from '../../../foundation-notification-dashboard/types/expression-type';
+import { PARAM_SOURCE_TYPE_DEFINED_GROUP } from '../../../foundation-notification-dashboard/types/param-source-type';
+import { RuleParameterEntity } from '../../inbox.types';
+import { InboxSubscriptionStyles } from './inbox-subscription.styles';
+import { InboxSubscriptionTemplate } from './inbox-subscription.template';
+
+@customElement({
+  name: 'inbox-subscription',
+  template: InboxSubscriptionTemplate,
+  styles: InboxSubscriptionStyles,
+})
+export class InboxSubscription extends GenesisElement {
+  @attr template;
+  private parametersDetails = {};
+  @observable parametersOperators = {};
+  @observable subscribeDisabled = true;
+  @RuleService ruleService: RuleService;
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.parametersDetails = {};
+    this.subscribeDisabled = true;
+  }
+
+  templateChanged() {
+    const parameters: RuleParameterEntity = this.template.PARAMETERS;
+
+    Object.keys(parameters).forEach((key) => {
+      const parameter = parameters[key];
+
+      if (parameter.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_DEFINED_GROUP) {
+        // Attribute 1st group value for select fields
+        this.parametersDetails[parameter.PARAM_NAME] = parameter.PARAM_SOURCE.split(',')[0];
+      }
+
+      this.parametersDetails[parameter.PARAM_NAME] = '';
+    });
+
+    this.parametersOperators = this.createParametersOperatorMap(
+      this.template.RULE_EXPRESSION.CONDITIONS,
+    );
+
+    this.verifySubscribe();
+  }
+
+  parameterEdit(value: any) {
+    this.parametersDetails[value.parameter.PARAM_NAME] = value.valueTyped;
+    this.verifySubscribe();
+  }
+
+  verifySubscribe() {
+    const parameters = Object.values(this.parametersDetails);
+    this.subscribeDisabled = parameters.length > 0 ? !parameters.every((x) => x !== '') : false;
+  }
+
+  isFirstElement = (parameter: RuleParameterEntity) =>
+    (Object.values(this.template.PARAMETERS) as any).findIndex(
+      (p) => p.PARAM_NAME === parameter.PARAM_NAME,
+    ) === 0;
+
+  async subscribeTemplate() {
+    await this.ruleService.subscribeRule(this.template.DYNAMIC_RULE_ID, this.parametersDetails);
+    this.$emit('templateSubscribed');
+  }
+
+  createParametersOperatorMap = (conditions) => {
+    this.parametersOperators = {};
+    conditions.forEach((condition) => {
+      if (condition.RIGHT.TYPE == EXPRESSION_TYPE_PLACEHOLDER) {
+        this.parametersOperators[condition.RIGHT.KEY] = condition.OPERATION;
+      }
+    });
+    return this.parametersOperators;
+  };
+}

package/src/components/foundation-inbox/components/inbox-subscription/rule-parameter/rule-parameter.styles.ts

@@ -0,0 +1,25 @@
+import { css } from '@genesislcap/web-core';
+
+export const RuleParameterStyles = css`
+  .control {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  label {
+    margin-bottom: calc(var(--design-unit) * 2px);
+  }
+
+  .input-field {
+    display: flex;
+  }
+
+  .input-field::part(root) {
+    width: 100%;
+  }
+
+  rapid-select::part(listbox) {
+    max-height: 160px;
+  }
+`;

package/src/components/foundation-inbox/components/inbox-subscription/rule-parameter/rule-parameter.template.ts

@@ -0,0 +1,96 @@
+import { sync } from '@genesislcap/foundation-utils';
+import { html, repeat, when } from '@genesislcap/web-core';
+import { humanize } from '../../../../../utils';
+import {
+  PARAM_SOURCE_TYPE_DEFINED_GROUP,
+  PARAM_SOURCE_TYPE_REQ_REP,
+  PARAM_SOURCE_TYPE_USER_TEXT,
+} from '../../../../foundation-notification-dashboard/types/param-source-type';
+import {
+  PARAM_TYPE_BOOLEAN,
+  PARAM_TYPE_NUMBER,
+  PARAM_TYPE_STRING,
+} from '../../../../foundation-notification-dashboard/types/param-type';
+import type { RuleParameter } from './rule-parameter';
+
+export const RuleParameterTemplate = html<RuleParameter>`
+  <div class="control">
+    <label>
+      <span style="font-weight: bold;">${(x) => x.parameter.PARAM_LABEL}</span>
+      ${(x, c) => humanize(x.operator).toLowerCase()}
+    </label>
+
+    <!-- USER_TEXT -->
+    ${when(
+      (x) => x.parameter.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_USER_TEXT,
+      html`
+        ${when(
+          (x) => x.parameter.PARAM_TYPE === PARAM_TYPE_STRING,
+          html`
+            <rapid-text-field
+              autofocus=${(x) => x.isFirstElement}
+              class="input-field"
+              :value=${sync((x) => x.inputValue)}
+              @input=${(x, c) => x.parameterEdit((c.event.target as HTMLInputElement).value)}
+            ></rapid-text-field>
+          `,
+        )}
+        ${when(
+          (x) => x.parameter.PARAM_TYPE === PARAM_TYPE_NUMBER,
+          html`
+            <rapid-number-field
+              hide-step
+              autofocus=${(x) => x.isFirstElement}
+              class="input-field"
+              :value=${sync((x) => x.inputValue)}
+              @input=${(x, c) => x.parameterEdit((c.event.target as HTMLInputElement).value)}
+            ></rapid-number-field>
+          `,
+        )}
+
+        <!-- TODO: Implement
+        ${when(
+          (x) => x.parameter.PARAM_TYPE === PARAM_TYPE_BOOLEAN,
+          html`
+            <rapid-select
+              autofocus=${(x) => x.isFirstElement}
+              class="input-field"
+              :value=${sync((x) => x.inputValue)}
+            >
+              <rapid-option value="true">true</rapid-option>
+              <rapid-option value="false">false</rapid-option>
+            </rapid-select>
+          `,
+        )}
+        -->
+      `,
+    )}
+
+    <!-- DEFINED_GROUP -->
+    ${when(
+      (x) => x.parameter.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_DEFINED_GROUP,
+      html`
+        <rapid-select
+          autofocus=${(x) => x.isFirstElement}
+          class="input-field"
+          :value=${sync((x) => x.inputValue)}
+        >
+          ${repeat(
+            (x) => x.parameter.PARAM_SOURCE.split(','),
+            html`
+              <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>
+            `,
+          )}
+        </rapid-select>
+      `,
+    )}
+
+    <!-- TODO: REQ_REP -->
+    ${when(
+      (x) => x.parameter.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_REQ_REP,
+      html`
+        <rapid-select :value=${sync((x) => x.inputValue)}></rapid-select>
+      `,
+    )}
+  </div>
+`;

package/src/components/foundation-inbox/components/inbox-subscription/rule-parameter/rule-parameter.ts

@@ -0,0 +1,55 @@
+import { attr, customElement, GenesisElement, observable } from '@genesislcap/web-core';
+import {
+  PARAM_SOURCE_TYPE_DEFINED_GROUP,
+  PARAM_SOURCE_TYPE_USER_TEXT,
+} from '../../../../foundation-notification-dashboard/types/param-source-type';
+import { PARAM_TYPE_BOOLEAN } from '../../../../foundation-notification-dashboard/types/param-type';
+import { RuleParameterEntity } from '../../../inbox.types';
+import { RuleParameterStyles } from './rule-parameter.styles';
+import { RuleParameterTemplate } from './rule-parameter.template';
+
+@customElement({
+  name: 'rule-parameter',
+  template: RuleParameterTemplate,
+  styles: RuleParameterStyles,
+})
+export class RuleParameter extends GenesisElement {
+  @attr @observable parameter: RuleParameterEntity;
+  @attr isFirstElement: boolean = false;
+  @attr operator: string = null;
+  @observable inputValue: string = '';
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    switch (this.parameter.PARAM_SOURCE_TYPE) {
+      case PARAM_SOURCE_TYPE_DEFINED_GROUP:
+        this.inputValue = this.parameter.PARAM_SOURCE.split(',')[0];
+        break;
+      case PARAM_SOURCE_TYPE_USER_TEXT:
+        switch (this.parameter.PARAM_TYPE) {
+          case PARAM_TYPE_BOOLEAN:
+            this.inputValue = 'true';
+            break;
+          default:
+            this.inputValue = '';
+            break;
+        }
+        break;
+      default:
+        break;
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+
+  parameterEdit(inputValue) {
+    this.inputValue = inputValue;
+    this.$emit('parameterEdited', {
+      parameter: this.parameter,
+      valueTyped: inputValue,
+    } as any);
+  }
+}