@genesislcap/pbc-notify-ui 1.0.64 → 14.308.0

package/src/components/foundation-notification-dashboard/components/templates/template-dialog/template-dialog.ts

@@ -0,0 +1,246 @@
+import type { Modal } from '@genesislcap/rapid-design-system';
+import { customElement, GenesisElement, observable, volatile } from '@genesislcap/web-core';
+import {
+  Assignment,
+  ConditionBuilderEntity,
+  defaultUpdateType,
+  Severity,
+  UpdateType,
+} from '../../../../../notify.types';
+import { NotifyService } from '../../../../../services/notify.service';
+import { Field, SystemService } from '../../../../../services/system.service';
+import { TemplateService } from '../../../../../services/template.service';
+import { humanize, logger } from '../../../../../utils';
+import {
+  DynamicRuleUtils,
+  showNotificationError,
+  TemplateUtils,
+  isEmpty,
+} from '../../../notification-dashboard.utils';
+import { DynamicRuleDialogStyles } from '../../../styles/dynamic-rule.styles';
+import { TemplateDialogTemplate } from './template-dialog.template';
+import { ParameterBuilderEntity, Template, TemplateDialogMode } from './template-dialog.types';
+
+@customElement({
+  name: 'template-dialog',
+  template: TemplateDialogTemplate,
+  styles: DynamicRuleDialogStyles,
+})
+export class TemplateDialog extends GenesisElement {
+  @TemplateService templateService: TemplateService;
+  @SystemService systemService: SystemService;
+  @NotifyService notifyService: NotifyService;
+
+  dialog: Modal;
+  @observable templateDialogMode: (typeof TemplateDialogMode)[keyof typeof TemplateDialogMode] =
+    null;
+
+  private templateId: string = null;
+  @observable name: string = null;
+  @observable description: string = null;
+  @observable header = null;
+  @observable message = null;
+  @observable resource: string = ''; // TODO: Tables + Views
+  @observable topic: string = '';
+  @observable severity: string = '';
+  @observable updateType: UpdateType[] = defaultUpdateType;
+
+  @observable parameters: Array<ParameterBuilderEntity> = [];
+  @observable conditions: Array<ConditionBuilderEntity> = [];
+
+  @observable resources: Array<string> = [];
+  @observable fields: Array<Field> = [];
+  @observable topics: Array<string> = [];
+
+  private requiredFields = () => [this.name, this.description, this.header, this.message];
+
+  public async openDialog(params: any) {
+    this.topics = await this.notifyService.getNotifyRouteTopics();
+    this.resources = await this.systemService.getResources(); // TODO: Tables + Views
+    this.templateDialogMode = params.mode;
+
+    switch (params.mode) {
+      case TemplateDialogMode.CREATE:
+        await this.createTemplate();
+        break;
+      case TemplateDialogMode.EDIT:
+        await this.editTemplate(params.data);
+        break;
+      default:
+        logger.error('Error on TemplateDialogMode');
+        break;
+    }
+
+    this.dialog.show();
+  }
+
+  close() {
+    // Objects
+    this.templateId = null;
+    this.name = null;
+    this.description = null;
+    this.header = null;
+    this.message = null;
+    this.resource = null;
+    this.topic = null;
+    this.severity = null;
+    this.templateDialogMode = null;
+
+    // Arrays
+    this.resources = [];
+    this.topics = [];
+    this.conditions = [];
+    this.parameters = [];
+    this.updateType = [];
+
+    this.dialog.close();
+    this.$emit('close');
+  }
+
+  private async createTemplate() {
+    this.conditions.push(DynamicRuleUtils.createEmptyCondition());
+    this.resource = this.resources[0];
+    this.fields = await this.systemService.getFields(this.resource);
+    this.topic = this.topics[0];
+    this.severity = Severity.INFORMATION;
+    this.updateType = defaultUpdateType;
+  }
+
+  private async editTemplate(data) {
+    const template = data;
+    this.templateId = template.DYNAMIC_RULE_ID;
+    this.name = template.RULE_NAME;
+    this.description = template.RULE_DESCRIPTION;
+    this.resource = template.RULE_TABLE;
+    this.updateType = template.TABLE_OPERATIONS;
+    this.fields = await this.systemService.getFields(this.resource);
+    this.parameters = TemplateUtils.getParameters(template.PARAMETERS);
+    this.conditions = TemplateUtils.getConditions(
+      template.RULE_EXPRESSION.CONDITIONS,
+      this.parameters,
+    );
+    this.attributeAssignments(template.RESULT_EXPRESSION?.ASSIGNMENTS);
+  }
+
+  private attributeAssignments(assignments) {
+    if (!assignments || !assignments.length) {
+      return;
+    }
+
+    this.header = DynamicRuleUtils.getAssignmentValue(assignments, Assignment.HEADER);
+    this.message = DynamicRuleUtils.getAssignmentValue(assignments, Assignment.BODY);
+    this.severity = DynamicRuleUtils.getAssignmentValue(
+      assignments,
+      Assignment.NOTIFY_SEVERITY,
+    )?.toUpperCase();
+    this.topic = DynamicRuleUtils.getAssignmentValue(assignments, Assignment.TOPIC);
+  }
+
+  get templateDialogTitle(): string {
+    return `${this.templateDialogMode === TemplateDialogMode.CREATE ? 'Create' : 'Edit'} Template`;
+  }
+
+  submit() {
+    if (this.requiredFields().some((value) => isEmpty(value))) {
+      return;
+    }
+
+    const template: Template = this.createTemplateObject();
+
+    switch (this.templateDialogMode) {
+      case TemplateDialogMode.CREATE:
+        this.templateService
+          .createRuleTemplate(template)
+          .then((response) => this.validateResponse(response));
+        break;
+      case TemplateDialogMode.EDIT:
+        this.templateService
+          .editRuleTemplate(template)
+          .then((response) => this.validateResponse(response));
+        break;
+      default:
+        logger.error('Error on TemplateDialogMode');
+        break;
+    }
+  }
+
+  private createTemplateObject(): Template {
+    return {
+      ...(this.templateDialogMode === TemplateDialogMode.EDIT && {
+        DYNAMIC_RULE_ID: this.templateId,
+      }),
+      RULE_NAME: this.name,
+      RULE_DESCRIPTION: this.description,
+      RULE_TABLE: this.resource,
+      TABLE_OPERATIONS: this.updateType,
+      RULE_EXPRESSION: {
+        CONDITIONS: DynamicRuleUtils.createConditions(this.conditions, this.parameters),
+      },
+      RAW_RULE_EXPRESSION: null,
+      RESULT_EXPRESSION: {
+        ASSIGNMENTS: [
+          DynamicRuleUtils.createAssignment(Assignment.TOPIC, this.topic),
+          DynamicRuleUtils.createAssignment(Assignment.HEADER, this.header),
+          DynamicRuleUtils.createAssignment(Assignment.BODY, this.message),
+          DynamicRuleUtils.createAssignment(Assignment.NOTIFY_SEVERITY, humanize(this.severity)),
+        ],
+      },
+      PARAMETER_DETAILS: TemplateUtils.createParameterDetails(this.parameters),
+    };
+  }
+
+  validateResponse(response) {
+    if (response.MESSAGE_TYPE === 'EVENT_ACK') {
+      this.close();
+      return;
+    }
+
+    showNotificationError(response.ERROR);
+  }
+
+  async resourceChanged() {
+    this.conditions = [DynamicRuleUtils.createEmptyCondition()];
+    this.fields = await this.systemService.getFields(this.resource);
+  }
+
+  // #region Condition
+  newCondition() {
+    this.conditions.push(DynamicRuleUtils.createEmptyCondition());
+  }
+
+  editCondition(editedCondition: ConditionBuilderEntity) {}
+
+  deleteCondition(deletedCondition: ConditionBuilderEntity) {
+    if (this.conditions.length <= 1) {
+      return;
+    }
+
+    this.conditions = this.conditions.filter((condition) => condition !== deletedCondition);
+  }
+  // #endregion
+
+  // #region Parameter
+  newParameter() {
+    this.parameters = [...this.parameters, TemplateUtils.createEmptyParameter()];
+  }
+
+  editParameter(editedParameter: ParameterBuilderEntity) {
+    this.parameters = [...this.parameters];
+  }
+
+  deleteParameter(deletedParameter: ParameterBuilderEntity) {
+    if (this.conditions.find((condition) => condition.RIGHT_VALUE === deletedParameter.UUID)) {
+      return;
+    }
+
+    this.parameters = this.parameters.filter(
+      (parameter) => parameter.UUID !== deletedParameter.UUID,
+    );
+  }
+  // #endregion
+
+  @volatile
+  public get validateRequiredFields(): boolean {
+    return this.requiredFields().some((value) => isEmpty(value));
+  }
+}

package/src/components/foundation-notification-dashboard/components/templates/template-dialog/template-dialog.types.ts

@@ -0,0 +1,38 @@
+import { UpdateType } from '../../../../../notify.types';
+
+export const TemplateDialogMode = {
+  CREATE: 'create',
+  EDIT: 'edit',
+} as const;
+
+export type TemplateDialogParams =
+  | {
+      mode: typeof TemplateDialogMode.CREATE;
+    }
+  | {
+      mode: typeof TemplateDialogMode.EDIT;
+      data: Template;
+    };
+
+export type Template = {
+  DYNAMIC_RULE_ID?: string;
+  RULE_NAME: string;
+  RULE_DESCRIPTION: string;
+  RULE_TABLE: string;
+  RULE_EXPRESSION?: any;
+  TABLE_OPERATIONS: UpdateType[];
+  RAW_RULE_EXPRESSION?: string;
+  RESULT_EXPRESSION?: {
+    ASSIGNMENTS: Array<any>;
+  };
+  PARAMETER_DETAILS: any;
+};
+
+export type ParameterBuilderEntity = {
+  UUID?: string;
+  PARAM_NAME: string;
+  PARAM_LABEL: string;
+  PARAM_TYPE: string;
+  PARAM_SOURCE_TYPE: string;
+  PARAM_SOURCE: string;
+};

package/src/components/foundation-notification-dashboard/components/templates/template-management.ts

@@ -0,0 +1,72 @@
+import { showNotificationDialog } from '@genesislcap/foundation-notifications';
+import { customElement, GenesisElement, html, ref, repeat } from '@genesislcap/web-core';
+import { TemplateService } from '../../../../services/template.service';
+import { DynamicRuleManagementStyles } from '../../styles/dynamic-rule.styles';
+import { TEMPLATE_MANAGEMENT_COLUMNS } from './columns';
+import type { TemplateDialog } from './template-dialog/template-dialog';
+import { TemplateDialogMode } from './template-dialog/template-dialog.types';
+
+@customElement({
+  name: 'template-management',
+  template: html<TemplateManagement>`
+    <div class="container">
+      <div class="header">
+        <rapid-button class="add" @click=${(x) => x.openTemplateDialog()}>
+          <rapid-icon name="plus" size="lg" variant="solid"></rapid-icon>
+          Add
+        </rapid-button>
+      </div>
+
+      <div class="grid">
+        <rapid-grid-pro only-template-col-defs>
+          <grid-pro-genesis-datasource resource-name="ALL_RULE_TEMPLATES">
+            ${repeat(
+              (x) => TEMPLATE_MANAGEMENT_COLUMNS(x),
+              html`
+                <grid-pro-column :definition=${(x) => x} />
+              `,
+            )}
+          </grid-pro-genesis-datasource>
+        </rapid-grid-pro>
+      </div>
+    </div>
+
+    <template-dialog ${ref('templateDialog')}></template-dialog>
+  `,
+  styles: DynamicRuleManagementStyles,
+})
+export class TemplateManagement extends GenesisElement {
+  @TemplateService templateService: TemplateService;
+  templateDialog: TemplateDialog;
+
+  openTemplateDialog() {
+    this.templateDialog.openDialog({ mode: TemplateDialogMode.CREATE });
+  }
+
+  async editTemplate(row) {
+    const template = await this.templateService.getRuleTemplateDetails(row.ID);
+    this.templateDialog.openDialog({ mode: TemplateDialogMode.EDIT, data: template });
+  }
+
+  deleteTemplate(template) {
+    showNotificationDialog(
+      {
+        title: 'Confirm Delete',
+        body: 'Do you really want to delete this template?',
+        dialog: {
+          dismissingAction: {
+            label: 'Dismiss',
+            action: () => null,
+          },
+          confirmingActions: [
+            {
+              label: 'Confirm',
+              action: () => this.templateService.deleteRuleTemplate(template.ID),
+            },
+          ],
+        },
+      },
+      'rapid',
+    );
+  }
+}

package/src/components/foundation-notification-dashboard/index.ts

@@ -0,0 +1 @@
+export * from './notification-dashboard';

package/src/components/foundation-notification-dashboard/notification-dashboard.styles.ts

@@ -0,0 +1,21 @@
+import { css } from '@genesislcap/web-core';
+
+/**
+ * @public
+ */
+export const FoundationNotificationDashboardStyles = css`
+  .notification-dashboard,
+  rapid-tabs,
+  rapid-tab-panel {
+    height: 100%;
+  }
+
+  .no-permissions {
+    font-family: var(--body-font);
+    color: var(--neutral-foreground-rest);
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;

package/src/components/foundation-notification-dashboard/notification-dashboard.tabs.ts

@@ -0,0 +1,35 @@
+export class NotificationDashboardTab {
+  id: string;
+  name: string;
+  component: string;
+  right: string;
+}
+
+export const NOTIFICATION_DASHBOARD_TABS: NotificationDashboardTab[] = [
+  {
+    id: 'rules',
+    name: 'Rules',
+    component: 'rule-management',
+    right: 'NotificationRuleView',
+  },
+  {
+    id: 'templates',
+    name: 'Templates',
+    component: 'template-management',
+    right: 'NotificationRuleTemplateView',
+  },
+  {
+    id: 'routes',
+    name: 'Routes',
+    component: 'route-management',
+    right: 'NotificationRouteView',
+  },
+  /* TODO: Not needed at the moment
+  {
+    id: 'notify-audit',
+    name: 'Notify Audit',
+    component: 'notify-audit-management',
+    right: 'NotificationAuditView',
+  },
+  */
+];

package/src/components/foundation-notification-dashboard/notification-dashboard.template.ts

@@ -0,0 +1,58 @@
+import { Auth } from '@genesislcap/foundation-comms';
+import { html, repeat, when, whenElse } from '@genesislcap/web-core';
+import type { FoundationNotificationDashboard } from './notification-dashboard';
+import {
+  NOTIFICATION_DASHBOARD_TABS,
+  NotificationDashboardTab,
+} from './notification-dashboard.tabs';
+
+export const FoundationNotificationDashboardTemplate = html<FoundationNotificationDashboard>`
+  <div class="notification-dashboard">
+    ${whenElse(
+      (x) => x.hasPermissions,
+      html`
+        <rapid-tabs class="tabs">
+          <!-- Tabs -->
+          ${repeat(
+            (_) => NOTIFICATION_DASHBOARD_TABS,
+            html<NotificationDashboardTab>`
+              ${when(
+                (x, c) => (c.parent.auth as Auth).currentUser.hasPermission(x.right),
+                html<NotificationDashboardTab>`
+                  <rapid-tab slot="${(x) => x.id}-tab">${(x) => x.name}</rapid-tab>
+                `,
+              )}
+            `,
+          )}
+
+          <!-- Panels -->
+          ${repeat(
+            (_) => NOTIFICATION_DASHBOARD_TABS,
+            html<NotificationDashboardTab>`
+              ${when(
+                (x, c) => (c.parent.auth as Auth).currentUser.hasPermission(x.right),
+                html`
+                  ${
+                    /* HTML Render */
+                    (x) =>
+                      html<NotificationDashboardTab>`
+                        <rapid-tab-panel slot="${x.id}-tab"
+                                         id="${x.id}-tab-panel">
+                            <${x.component}></${x.component}>
+                        </rapid-tab-panel>
+                      `
+                  }
+                `,
+              )}
+            `,
+          )}
+        </rapid-tabs>
+      `,
+      html`
+        <div class="no-permissions">
+          <label>User has no permissions to view Notification Screens</label>
+        </div>
+      `,
+    )}
+  </div>
+`;

package/src/components/foundation-notification-dashboard/notification-dashboard.ts

@@ -0,0 +1,40 @@
+import { Auth } from '@genesislcap/foundation-comms';
+import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
+import { loadRemotes } from '../components';
+import { FoundationNotificationDashboardStyles as styles } from './notification-dashboard.styles';
+import { NOTIFICATION_DASHBOARD_TABS } from './notification-dashboard.tabs';
+import { FoundationNotificationDashboardTemplate as template } from './notification-dashboard.template';
+
+/**
+ * @public
+ */
+@customElement({
+  name: 'foundation-notification-dashboard',
+  template,
+  styles,
+})
+export class FoundationNotificationDashboard extends GenesisElement {
+  @Auth auth: Auth;
+  @observable ready: boolean = false;
+  @observable hasPermissions: boolean = true;
+
+  async connectedCallback() {
+    super.connectedCallback();
+
+    this.hasPermissions = NOTIFICATION_DASHBOARD_TABS.some((tabCfg) =>
+      this.auth.currentUser.hasPermission(tabCfg.right),
+    );
+
+    await this.loadRemotes();
+  }
+
+  /**
+   * Load remote components
+   * @remarks With regards to module federation
+   * @internal
+   */
+  async loadRemotes() {
+    const remoteComponents = await loadRemotes();
+    this.ready = true;
+  }
+}