@genesislcap/pbc-notify-ui 1.0.64 → 14.308.0

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

@@ -0,0 +1,159 @@
+import { sync } from '@genesislcap/foundation-utils';
+import { html, ref, repeat } from '@genesislcap/web-core';
+import { ConditionBuilderEntity, Severity, UpdateType } from '../../../../../notify.types';
+import { eventDetail } from '../../../../../utils/eventDetail';
+import type { RuleDialog } from './rule-dialog';
+
+export const RuleDialogTemplate = html<RuleDialog>`
+  <rapid-modal ${ref('dialog')} class="dialog" :onCloseCallback=${(x) => () => x.close()}>
+    <div slot="top" class="dialog-top">${(x) => x.ruleDialogTitle}</div>
+
+    <div class="dialog-content">
+      <div class="content-row">
+        <div class="control">
+          <rapid-text-field
+            :value=${sync((x) => x.name)}
+            @change="${(x) => x.validateRequiredFields()}"
+            autofocus
+            autocomplete="off"
+            required
+          >
+            Name
+          </rapid-text-field>
+        </div>
+
+        <div class="control">
+          <rapid-text-field
+            :value=${sync((x) => x.description)}
+            @change="${(x) => x.validateRequiredFields()}"
+            autocomplete="off"
+            required
+          >
+            Description
+          </rapid-text-field>
+        </div>
+      </div>
+
+      <div class="content-row">
+        <div class="control">
+          <label>Resource</label>
+          <rapid-select
+            :value=${sync((x) => x.resource)}
+            title=${(x) => x.resource}
+            position="below"
+          >
+            ${repeat(
+              (x) => x.resources,
+              html`
+                <rapid-option value=${(x) => x} title=${(x) => x}>${(x) => x}</rapid-option>
+              `,
+            )}
+          </rapid-select>
+        </div>
+
+        <div class="control">
+          <label>Topic</label>
+          <rapid-combobox
+            autocomplete="both"
+            :value=${sync((x) => x.topic)}
+            title=${(x) => x.topic}
+          >
+            ${repeat(
+              (x) => x.topics,
+              html`
+                <rapid-option value=${(x) => x} title=${(x) => x}>${(x) => x}</rapid-option>
+              `,
+            )}
+          </rapid-combobox>
+        </div>
+
+        <div class="control">
+          <label>Severity</label>
+          <rapid-select :value=${sync((x) => x.severity)}>
+            <options-datasource
+              value-field="value"
+              label-field="value"
+              option-element="rapid-option"
+              :data=${(_) => Object.values(Severity).map((value) => ({ value }))}
+            ></options-datasource>
+          </rapid-select>
+        </div>
+
+        <div class="control">
+          <label>Update Type</label>
+          <rapid-multiselect
+            :selectedOptions=${(x) => x.updateType}
+            @selectionChange=${(x, c) => {
+              x.updateType = (c.event as CustomEvent).detail;
+            }}
+            search="false"
+            all="false"
+          >
+            <multiselect-datasource
+              value-field="value"
+              label-field="value"
+              :data=${() => Object.values(UpdateType).map((value) => ({ value, label: value }))}
+            ></multiselect-datasource>
+          </rapid-multiselect>
+        </div>
+      </div>
+
+      <div class="content-row">
+        <div class="control">
+          <rapid-text-field
+            required
+            :value=${sync((x) => x.header)}
+            @change="${(x) => x.validateRequiredFields()}"
+            autocomplete="off"
+          >
+            Header
+          </rapid-text-field>
+        </div>
+
+        <div class="control">
+          <rapid-text-field
+            required
+            :value=${sync((x) => x.message)}
+            @change="${(x) => x.validateRequiredFields()}"
+            autocomplete="off"
+          >
+            Message
+          </rapid-text-field>
+        </div>
+      </div>
+
+      <div class="control">
+        <label>Condition(s)</label>
+        <div class="items">
+          <div class="content-row item">
+            ${repeat(
+              (x) => x.conditions,
+              html<ConditionBuilderEntity>`
+                <rule-condition-builder
+                  :fields=${(x, c) => c.parent.fields}
+                  :condition=${(x) => x}
+                  @edit=${(x, c) => c.parent.editCondition(eventDetail(c))}
+                  @delete=${(x, c) => c.parent.deleteCondition(eventDetail(c))}
+                ></rule-condition-builder>
+              `,
+            )}
+          </div>
+
+          <div class="content-row">
+            <rapid-button @click=${(x) => x.newCondition()}>+ Condition</rapid-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div slot="bottom" class="dialog-bottom">
+      <rapid-button
+        appearance="primary"
+        @click=${(x) => x.submit()}
+        ?disabled=${(x) => x.submitDisabled}
+      >
+        Submit
+      </rapid-button>
+    </div>
+  </rapid-modal>
+`;

package/src/components/foundation-notification-dashboard/components/rules/rule-dialog/rule-dialog.ts

@@ -0,0 +1,202 @@
+import type { Modal } from '@genesislcap/rapid-design-system';
+import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
+import {
+  Assignment,
+  ConditionBuilderEntity,
+  defaultUpdateType,
+  Severity,
+  UpdateType,
+} from '../../../../../notify.types';
+import { NotifyService } from '../../../../../services/notify.service';
+import { RuleService } from '../../../../../services/rule.service';
+import { Field, SystemService } from '../../../../../services/system.service';
+import { humanize } from '../../../../../utils';
+import {
+  DynamicRuleUtils,
+  RuleUtils,
+  showNotificationError,
+  isEmpty,
+} from '../../../notification-dashboard.utils';
+import { DynamicRuleDialogStyles } from '../../../styles/dynamic-rule.styles';
+import { RuleDialogTemplate } from './rule-dialog.template';
+import { Rule, RuleDialogMode, RuleDialogParams } from './rule-dialog.types';
+
+@customElement({
+  name: 'rule-dialog',
+  template: RuleDialogTemplate,
+  styles: DynamicRuleDialogStyles,
+})
+export class RuleDialog extends GenesisElement {
+  @RuleService ruleService: RuleService;
+  @SystemService systemService: SystemService;
+  @NotifyService notifyService: NotifyService;
+
+  dialog: Modal;
+  @observable ruleDialogMode: (typeof RuleDialogMode)[keyof typeof RuleDialogMode];
+
+  private ruleId: string = null;
+  @observable name: string = '';
+  @observable description: string = '';
+  @observable resource: string = ''; // TODO: Tables + Views
+  @observable topic: string = '';
+  @observable severity: string = '';
+  @observable updateType: UpdateType[] = defaultUpdateType;
+  @observable header: string = '';
+  @observable message: string = '';
+  @observable conditions: Array<ConditionBuilderEntity> = [];
+  @observable submitDisabled: boolean;
+
+  @observable resources: Array<string> = [];
+  @observable fields: Array<Field> = [];
+  @observable topics: string[] = [];
+
+  public async openDialog(params: RuleDialogParams) {
+    this.topics = await this.notifyService.getNotifyRouteTopics();
+    this.resources = await this.systemService.getResources();
+    this.ruleDialogMode = params.mode;
+
+    switch (params.mode) {
+      case RuleDialogMode.CREATE:
+        await this.createRule();
+        this.submitDisabled = true;
+        break;
+      case RuleDialogMode.EDIT:
+        await this.editRule(params.data);
+        this.submitDisabled = false;
+        break;
+    }
+
+    this.dialog.show();
+  }
+
+  close() {
+    // Objects
+    this.ruleId = null;
+    this.name = null;
+    this.description = null;
+    this.header = null;
+    this.message = null;
+    this.resource = null;
+    this.topic = null;
+    this.severity = null;
+    this.ruleDialogMode = null;
+
+    // Arrays
+    this.resources = [];
+    this.topics = [];
+    this.conditions = [];
+    this.updateType = [];
+
+    this.dialog.close();
+    this.$emit('close');
+  }
+
+  private async createRule() {
+    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 editRule(data) {
+    const rule = data;
+    this.ruleId = rule.DYNAMIC_RULE_ID;
+    this.name = rule.RULE_NAME;
+    this.description = rule.RULE_DESCRIPTION;
+    this.resource = rule.RULE_TABLE;
+    this.updateType = rule.TABLE_OPERATIONS;
+    this.fields = await this.systemService.getFields(this.resource);
+    this.conditions = RuleUtils.getConditions(rule.RULE_EXPRESSION.CONDITIONS);
+    this.attributeAssignments(rule.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 ruleDialogTitle(): string {
+    return `${this.ruleDialogMode === RuleDialogMode.CREATE ? 'Create' : 'Edit'} Rule`;
+  }
+
+  submit() {
+    const rule: Rule = this.createRuleObject();
+
+    switch (this.ruleDialogMode) {
+      case RuleDialogMode.CREATE:
+        this.ruleService.createRule(rule).then((response) => this.validateResponse(response));
+        break;
+      case RuleDialogMode.EDIT:
+        this.ruleService.updateRule(rule).then((response) => this.validateResponse(response));
+        break;
+    }
+  }
+
+  private createRuleObject(): Rule {
+    return {
+      ...(this.ruleDialogMode === RuleDialogMode.EDIT && { DYNAMIC_RULE_ID: this.ruleId }),
+      RULE_NAME: this.name,
+      RULE_DESCRIPTION: this.description,
+      RULE_TABLE: this.resource,
+      TABLE_OPERATIONS: this.updateType,
+      RULE_EXPRESSION: {
+        CONDITIONS: DynamicRuleUtils.createConditions(this.conditions),
+      },
+      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)),
+        ],
+      },
+    };
+  }
+
+  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
+
+  public validateRequiredFields() {
+    this.submitDisabled = [this.name, this.description, this.header, this.message].some((value) =>
+      isEmpty(value),
+    );
+  }
+}

package/src/components/foundation-notification-dashboard/components/rules/rule-dialog/rule-dialog.types.ts

@@ -0,0 +1,28 @@
+import { UpdateType } from '../../../../../notify.types';
+
+export const RuleDialogMode = {
+  CREATE: 'create',
+  EDIT: 'edit',
+} as const;
+
+export type RuleDialogParams =
+  | {
+      mode: typeof RuleDialogMode.CREATE;
+    }
+  | {
+      mode: typeof RuleDialogMode.EDIT;
+      data: Rule;
+    };
+
+export type Rule = {
+  DYNAMIC_RULE_ID?: string;
+  RULE_NAME: string;
+  RULE_DESCRIPTION: string;
+  RULE_TABLE: string;
+  TABLE_OPERATIONS: UpdateType[];
+  RULE_EXPRESSION?: any;
+  RAW_RULE_EXPRESSION?: string;
+  RESULT_EXPRESSION?: {
+    ASSIGNMENTS: Array<any>;
+  };
+};

package/src/components/foundation-notification-dashboard/components/rules/rule-management.ts

@@ -0,0 +1,72 @@
+import { showNotificationDialog } from '@genesislcap/foundation-notifications';
+import { customElement, GenesisElement, html, ref, repeat } from '@genesislcap/web-core';
+import { RuleService } from '../../../../services/rule.service';
+import { DynamicRuleManagementStyles } from '../../styles/dynamic-rule.styles';
+import { RULE_MANAGEMENT_COLUMNS } from './columns';
+import { RuleDialog } from './rule-dialog/rule-dialog';
+import { RuleDialogMode } from './rule-dialog/rule-dialog.types';
+
+@customElement({
+  name: 'rule-management',
+  template: html<RuleManagement>`
+    <div class="container">
+      <div class="header">
+        <rapid-button class="add" @click=${(x) => x.openRuleDialog()}>
+          <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_DYNAMIC_NOTIFY_RULES">
+            ${repeat(
+              (x) => RULE_MANAGEMENT_COLUMNS(x),
+              html`
+                <grid-pro-column :definition=${(x) => x} />
+              `,
+            )}
+          </grid-pro-genesis-datasource>
+        </rapid-grid-pro>
+      </div>
+    </div>
+
+    <rule-dialog ${ref('ruleDialog')}></rule-dialog>
+  `,
+  styles: DynamicRuleManagementStyles,
+})
+export class RuleManagement extends GenesisElement {
+  @RuleService ruleService: RuleService;
+  ruleDialog: RuleDialog;
+
+  openRuleDialog() {
+    this.ruleDialog.openDialog({ mode: RuleDialogMode.CREATE });
+  }
+
+  async editRule(row) {
+    const rule = await this.ruleService.getRuleDetails(row.ID);
+    this.ruleDialog.openDialog({ mode: RuleDialogMode.EDIT, data: rule });
+  }
+
+  deleteRule(rule) {
+    showNotificationDialog(
+      {
+        title: 'Confirm Delete',
+        body: 'Do you really want to delete this rule?',
+        dialog: {
+          dismissingAction: {
+            label: 'Dismiss',
+            action: () => null,
+          },
+          confirmingActions: [
+            {
+              label: 'Confirm',
+              action: () => this.ruleService.deleteRule(rule.ID),
+            },
+          ],
+        },
+      },
+      'rapid',
+    );
+  }
+}

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

@@ -0,0 +1,48 @@
+import { buttonCellRenderer } from '@genesislcap/foundation-entity-management';
+import { deleteIcon, editIcon } from '../../../../utils';
+import type { TemplateManagement } from './template-management';
+
+export const TEMPLATE_MANAGEMENT_COLUMNS = (context: TemplateManagement) => [
+  {
+    field: 'NAME',
+    headerName: 'Name',
+    flex: 1,
+  },
+  {
+    field: 'DESCRIPTION',
+    headerName: 'Description',
+    flex: 1,
+  },
+  {
+    field: 'USER_NAME',
+    headerName: 'Username',
+    flex: 1,
+  },
+  {
+    field: 'RULE_TABLE',
+    headerName: 'Table',
+    flex: 1,
+  },
+  {
+    field: 'RULE_STATUS',
+    headerName: 'Status',
+    flex: 1,
+  },
+  {
+    field: 'RULE_EXPRESSION',
+    headerName: 'Expression',
+    flex: 1,
+  },
+  {
+    field: 'RESULT_EXPRESSION',
+    headerName: 'Result',
+    flex: 1,
+  },
+  {
+    field: 'RULE_EXECUTION_STRATEGY',
+    headerName: 'Execution Strategy',
+    flex: 1,
+  },
+  buttonCellRenderer('Edit', (e) => context.editTemplate(e), editIcon),
+  buttonCellRenderer('Delete', (e) => context.deleteTemplate(e), deleteIcon),
+];

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

@@ -0,0 +1,59 @@
+import { css } from '@genesislcap/web-core';
+
+const PARAM_SOURCE_WIDTH = '200';
+
+export const ParameterBuilderStyles = css`
+  .parameter-builder {
+    display: flex;
+    gap: calc(var(--design-unit) * 2px);
+    margin-bottom: calc(var(--design-unit) * 2px);
+  }
+
+  rapid-button {
+    margin: 0;
+  }
+
+  .delete {
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    height: calc(var(--design-unit) * 9px);
+  }
+
+  .delete:hover {
+    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 89%);
+  }
+
+  rapid-text-field {
+    width: 100%;
+    margin-bottom: 0;
+  }
+
+  rapid-text-field::part(root) {
+    height: calc(var(--design-unit) * 9px);
+  }
+
+  rapid-select {
+    min-width: auto;
+  }
+
+  rapid-select.param-type::part(control) {
+    width: 115px;
+  }
+
+  rapid-select.param-source-type::part(control) {
+    width: 160px;
+  }
+
+  rapid-select.param-source::part(control) {
+    width: ${PARAM_SOURCE_WIDTH}px;
+  }
+
+  rapid-text-field.param-source::part(root) {
+    width: calc(${PARAM_SOURCE_WIDTH}px + 2px);
+  }
+
+  rapid-select::part(listbox) {
+    max-height: 160px;
+  }
+`;

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

@@ -0,0 +1,95 @@
+import { sync } from '@genesislcap/foundation-utils';
+import { html, ref, repeat, when } from '@genesislcap/web-core';
+import {
+  ALL_PARAM_SOURCE_TYPES,
+  PARAM_SOURCE_TYPE_DEFINED_GROUP,
+  PARAM_SOURCE_TYPE_REQ_REP,
+  PARAM_SOURCE_TYPE_USER_TEXT,
+} from '../../../../types/param-source-type';
+import { ALL_PARAM_TYPES } from '../../../../types/param-type';
+import type { ParameterBuilder } from './parameter-builder';
+
+export const ParameterBuilderTemplate = html<ParameterBuilder>`
+  <div class="parameter-builder">
+    <rapid-text-field
+      id="param-name"
+      placeholder="Name"
+      :value=${sync((x) => x.name)}
+    ></rapid-text-field>
+
+    <rapid-text-field
+      id="param-label"
+      placeholder="Label"
+      :value=${sync((x) => x.label)}
+    ></rapid-text-field>
+
+    <rapid-select
+      id="param-source-type"
+      :value=${sync((x) => x.sourceType)}
+      class="param-source-type"
+    >
+      ${repeat(
+        (x) => ALL_PARAM_SOURCE_TYPES,
+        html`
+          <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>
+        `,
+      )}
+    </rapid-select>
+
+    ${when(
+      (x) => x.sourceType === PARAM_SOURCE_TYPE_USER_TEXT,
+      html<ParameterBuilder>`
+        <rapid-text-field class="param-source" disabled></rapid-text-field>
+      `,
+    )}
+    ${when(
+      (x) => x.sourceType === PARAM_SOURCE_TYPE_REQ_REP,
+      html<ParameterBuilder>`
+        <rapid-select
+          ${ref('sourceSelect')}
+          id="param-source"
+          :value=${sync((x) => x.sourceSelected)}
+          class="param-source"
+          ?disabled=${(x) => x.sourceType !== PARAM_SOURCE_TYPE_REQ_REP}
+        >
+          ${repeat(
+            (x) => x.reqRepItems,
+            html`
+              <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>
+            `,
+          )}
+        </rapid-select>
+      `,
+    )}
+    ${when(
+      (x) => x.sourceType === PARAM_SOURCE_TYPE_DEFINED_GROUP,
+      html<ParameterBuilder>`
+        <rapid-text-field
+          ${ref('sourceTextField')}
+          class="param-source"
+          placeholder="item1,item2,item3"
+          :value=${sync((x) => x.sourceTyped)}
+        ></rapid-text-field>
+      `,
+    )}
+
+    <rapid-select id="param-type" :value=${sync((x) => x.type)} class="param-type">
+      ${repeat(
+        (x) => ALL_PARAM_TYPES,
+        html`
+          <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>
+        `,
+      )}
+    </rapid-select>
+
+    <rapid-button appearance="icon" class="delete" @click=${(x) => x.deleteParameter()}>
+      <rapid-icon
+        style="opacity: 0.5"
+        variant="regular"
+        name="trash-alt"
+        size="lg"
+        part="icon"
+      ></rapid-icon>
+    </rapid-button>
+  </div>
+`;