@genesislcap/pbc-notify-ui 1.0.0

package/dist/esm/components/foundation-notification-dashboard/components/parameter-builder/parameter-builder.template.js

@@ -0,0 +1,81 @@
+import { sync } from '@genesislcap/foundation-utils';
+import { html, ref, repeat, when } from "@microsoft/fast-element";
+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';
+export const ParameterBuilderTemplate = html `
+  <div class="parameter-builder">
+    <zero-text-field
+      id="param-name"
+      placeholder="Name"
+      :value=${sync(x => x.name)}
+    >
+    </zero-text-field>
+    
+    <zero-text-field
+      id="param-label"
+      placeholder="Label"
+      :value=${sync(x => x.label)}
+    >
+    </zero-text-field>
+
+    <zero-select
+      id="param-source-type"
+      :value=${sync(x => x.sourceType)}
+      class="param-source-type"
+    >
+      ${repeat(x => ALL_PARAM_SOURCE_TYPES, html `
+          <zero-option value=${x => x}>${x => x}</zero-option>
+        `)}
+    </zero-select>
+
+    ${when(x => x.sourceType === PARAM_SOURCE_TYPE_USER_TEXT, html `
+        <zero-text-field
+          class="param-source"
+          disabled
+        >
+        </zero-text-field>
+      `)}
+
+    ${when(x => x.sourceType === PARAM_SOURCE_TYPE_REQ_REP, html `
+        <zero-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 `
+              <zero-option value=${x => x}>${x => x}</zero-option>
+            `)}
+        </zero-select>
+      `)}
+
+    ${when(x => x.sourceType === PARAM_SOURCE_TYPE_DEFINED_GROUP, html `
+        <zero-text-field
+          ${ref('sourceTextField')}
+          class="param-source"
+          placeholder="item1,item2,item3"
+          :value=${sync(x => x.sourceTyped)}
+        >
+        </zero-text-field>
+      `)}
+    
+    <zero-select
+      id="param-type"
+      :value=${sync(x => x.type)}
+      class="param-type"
+    >
+      ${repeat(x => ALL_PARAM_TYPES, html `
+          <zero-option value=${x => x}>${x => x}</zero-option>
+        `)}
+    </zero-select>
+
+    <zero-button
+      appearance="icon"
+      class="delete"
+      @click=${x => x.deleteParameter()}
+    >
+      <zero-icon name="trash" part="icon"></zero-icon>
+    </zero-button>
+  </div>
+`;

package/dist/esm/components/foundation-notification-dashboard/components/rule-dialog/index.js

@@ -0,0 +1,2 @@
+export * from './rule-dialog';
+export * from './rule-dialog.types';

package/dist/esm/components/foundation-notification-dashboard/components/rule-dialog/rule-condition-builder/index.js

@@ -0,0 +1,2 @@
+export * from './rule-condition-builder';
+export * from './rule-condition-builder.types';

package/dist/esm/components/foundation-notification-dashboard/components/rule-dialog/rule-condition-builder/rule-condition-builder.js

@@ -0,0 +1,111 @@
+import { __awaiter, __decorate } from "tslib";
+import { customElement, DOM, FASTElement, observable } from '@microsoft/fast-element';
+import { SystemService } from '../../../../../services/system.service';
+import { ConditionBuilderStyles as styles } from './rule-condition-builder.styles';
+import { ConditionBuilderTemplate as template } from './rule-condition-builder.template';
+import { RIGHT_CRITERIA } from './rule-condition-builder.types';
+const name = 'rule-condition-builder';
+let RuleConditionBuilder = class RuleConditionBuilder extends FASTElement {
+    constructor() {
+        super(...arguments);
+        /** Used to pause `Changed` methods while populating with existing data */
+        this.formActive = true;
+    }
+    conditionChanged() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.formActive = false;
+            yield this.assignLeftValue();
+            this.logicalOperator = this.condition.LOGICAL_OPERATOR;
+            this.rightCriteria = this.condition.RIGHT_CRITERIA;
+            this.assignRightValue();
+            this.formActive = true;
+        });
+    }
+    assignLeftValue() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield DOM.nextUpdate(); // need to wait for the options to be added to the DOM, which should happen before the next DOM update
+            this.leftValue = this.condition.LEFT_VALUE;
+            this.$emit('edit', this.condition);
+        });
+    }
+    assignRightValue() {
+        if (this.condition.RIGHT_CRITERIA === RIGHT_CRITERIA.VALUE) {
+            this.rightValueText = this.condition.RIGHT_VALUE;
+        }
+        else {
+            this.rightValueField = null;
+        }
+        this.$emit('edit', this.condition);
+    }
+    leftValueChanged() {
+        if (this.formActive) {
+            this.condition.LEFT_VALUE = this.leftValue;
+            this.$emit('edit', this.condition);
+        }
+    }
+    logicalOperatorChanged() {
+        if (this.formActive) {
+            this.condition.LOGICAL_OPERATOR = this.logicalOperator;
+            this.$emit('edit', this.condition);
+        }
+    }
+    rightCriteriaChanged() {
+        if (this.formActive) {
+            this.condition.RIGHT_CRITERIA = this.rightCriteria;
+            if (this.condition.RIGHT_CRITERIA === RIGHT_CRITERIA.VALUE) {
+                this.rightValueText = '';
+            }
+            else {
+                this.rightValueField = null;
+            }
+            this.$emit('edit', this.condition);
+        }
+    }
+    rightValueTextChanged() {
+        if (this.formActive) {
+            this.condition.RIGHT_VALUE = this.rightValueText;
+            this.$emit('edit', this.condition);
+        }
+    }
+    rightValueUserEntryChanged() {
+        if (this.formActive) {
+            this.condition.RIGHT_VALUE = this.rightValueField;
+            this.$emit('edit', this.condition);
+        }
+    }
+    deleteCondition() {
+        this.$emit('delete', this.condition);
+    }
+};
+__decorate([
+    SystemService
+], RuleConditionBuilder.prototype, "systemService", void 0);
+__decorate([
+    observable
+], RuleConditionBuilder.prototype, "condition", void 0);
+__decorate([
+    observable
+], RuleConditionBuilder.prototype, "resourceFields", void 0);
+__decorate([
+    observable
+], RuleConditionBuilder.prototype, "leftValue", void 0);
+__decorate([
+    observable
+], RuleConditionBuilder.prototype, "logicalOperator", void 0);
+__decorate([
+    observable
+], RuleConditionBuilder.prototype, "rightCriteria", void 0);
+__decorate([
+    observable
+], RuleConditionBuilder.prototype, "rightValueText", void 0);
+__decorate([
+    observable
+], RuleConditionBuilder.prototype, "rightValueField", void 0);
+RuleConditionBuilder = __decorate([
+    customElement({
+        name,
+        template,
+        styles,
+    })
+], RuleConditionBuilder);
+export { RuleConditionBuilder };

package/dist/esm/components/foundation-notification-dashboard/components/rule-dialog/rule-condition-builder/rule-condition-builder.styles.js

@@ -0,0 +1,53 @@
+import { css } from '@microsoft/fast-element';
+export const ConditionBuilderStyles = css `
+  .condition-builder {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+
+  zero-button {
+    margin: 0px;
+  }
+
+  .delete {
+    margin: 0px;
+    background-color: rgba(242, 242, 242, 0.05);
+  }
+
+  .delete:hover {
+    background-color: rgba(255, 255, 255, 0.11);
+  }
+
+  zero-text-field {
+    width: 100%;
+  }
+
+  zero-select {
+    min-width: auto;
+  }
+
+  zero-select.left-value::part(control) {
+    width: 250px;
+  }
+
+  zero-select.logical-operator::part(control) {
+    width: 160px;
+  }
+
+  zero-select.right-criteria::part(control) {
+    width: 135px;
+  }
+
+  zero-select.right-criteria-user-entry {
+    width: 100%;
+  }
+
+  zero-select::part(listbox) {
+    max-height: 160px;
+  }
+
+  .display-none {
+    display: none;
+  }
+`;

package/dist/esm/components/foundation-notification-dashboard/components/rule-dialog/rule-condition-builder/rule-condition-builder.template.js

@@ -0,0 +1,63 @@
+import { sync } from '@genesislcap/foundation-utils';
+import { html, repeat } from "@microsoft/fast-element";
+import { classNames } from '@microsoft/fast-web-utilities';
+import { ALL_LOGICAL_OPERATORS } from '../../../types/logical-operator';
+import { RIGHT_CRITERIA } from './rule-condition-builder.types';
+export const ConditionBuilderTemplate = html `
+  <div class="condition-builder">
+    <zero-select
+      :value=${sync(x => x.leftValue)}
+      :initialValue=${sync(x => x.leftValue)}
+      class="left-value"
+      position="below"
+    >
+      ${repeat(x => x.resourceFields, html `
+          <zero-option value=${x => x.FIELD_NAME}>${x => x.FIELD_NAME}</zero-option>
+        `)}
+    </zero-select>
+
+    <zero-select
+      class="logical-operator"
+      :value=${sync(x => x.logicalOperator)}
+      position="below"
+    >
+      ${repeat(x => ALL_LOGICAL_OPERATORS, html `
+          <zero-option value=${x => x}>${x => x}</zero-option>
+        `)}
+    </zero-select>
+
+    <zero-select
+      class="right-criteria"
+      :value=${sync(x => x.rightCriteria)}
+      position="below"
+    >
+      ${repeat(x => Object.values(RIGHT_CRITERIA), html `
+          <zero-option value=${x => x}>${x => x}</zero-option>
+        `)}
+    </zero-select>
+
+    <zero-text-field
+      class="right-criteria-value ${x => classNames(['display-none', x.rightCriteria !== RIGHT_CRITERIA.VALUE])}"
+      :value=${sync(x => x.rightValueText)}
+      placeholder="Value"
+      autocomplete="off"
+    ></zero-text-field>
+    <zero-select
+      class="right-criteria-user-entry ${x => classNames(['display-none', x.rightCriteria !== RIGHT_CRITERIA.FIELD])}"
+      :value=${sync(x => x.rightValueField)}
+      position="below"
+    >
+      ${repeat(x => x.resourceFields, html `
+          <zero-option value=${x => x.FIELD_NAME}>${x => x.FIELD_NAME}</zero-option>
+        `)}
+    </zero-select>
+
+    <zero-button
+      appearance="icon"
+      class="delete"
+      @click=${x => x.deleteCondition()}
+    >
+      <zero-icon name="trash" part="icon"></zero-icon>
+    </zero-button>
+  </div>
+`;

package/dist/esm/components/foundation-notification-dashboard/components/rule-dialog/rule-condition-builder/rule-condition-builder.types.js

@@ -0,0 +1,4 @@
+export const RIGHT_CRITERIA = {
+    VALUE: 'VALUE',
+    FIELD: 'FIELD',
+};

package/dist/esm/components/foundation-notification-dashboard/components/rule-dialog/rule-dialog.js

@@ -0,0 +1,288 @@
+import { __awaiter, __decorate } from "tslib";
+import { customElement, FASTElement, observable } from '@microsoft/fast-element';
+import { NotifyService } from '../../../../services/notify.service';
+import { RuleService } from '../../../../services/rule.service';
+import { SystemService } from '../../../../services/system.service';
+import { EXPRESSION_TYPE_FIELD, EXPRESSION_TYPE_PLACEHOLDER } from '../../types/expression-type';
+import { LOGICAL_OPERATOR_EQUALS } from '../../types/logical-operator';
+import { RULE_EXECUTION_UNLIMITED } from '../../types/rule-execution-strategy';
+import { SEVERITY_INFORMATION } from '../../types/severity';
+import { UUIDGenerator } from '../template-dialog/template-dialog.utils';
+import { RIGHT_CRITERIA } from './rule-condition-builder';
+import { ruleDialogStyles as styles } from './rule-dialog.styles';
+import { ruleDialogTemplate as template } from './rule-dialog.template';
+import { RuleDialogMode } from './rule-dialog.types';
+const name = 'rule-dialog';
+let RuleDialog = class RuleDialog extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.resource = ''; // Tables, Views
+        this.topic = '';
+        this.severity = '';
+        this.conditions = [];
+        this.resources = [];
+        this.isCompleteToSubmit = false;
+    }
+    openDialog(params) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.resources = yield this.systemService.getResources();
+            this.topics = yield this.notifyService.getNotifyRouteTopics();
+            this.ruleDialogMode = params.mode;
+            switch (params.mode) {
+                case RuleDialogMode.CREATE:
+                    this.conditions.push(this.createEmptyCondition());
+                    this.resource = this.resources[0];
+                    this.resourceFields = yield this.systemService.getFields(this.resource);
+                    this.tableId = this.resourceFields[0].FIELD_NAME;
+                    this.topic = this.topics[0];
+                    this.executionStrategy = RULE_EXECUTION_UNLIMITED;
+                    this.severity = SEVERITY_INFORMATION;
+                    break;
+                case RuleDialogMode.EDIT:
+                    const rule = params.data;
+                    this.ruleId = rule.DYNAMIC_RULE_ID;
+                    this.name = rule.RULE_NAME;
+                    this.description = rule.RULE_DESCRIPTION;
+                    this.resource = rule.RULE_TABLE;
+                    this.executionStrategy = rule.RULE_EXECUTION_STRATEGY;
+                    this.conditions = (_a = rule.RULE_EXPRESSION.CONDITIONS) === null || _a === void 0 ? void 0 : _a.map(condition => {
+                        return {
+                            ID: UUIDGenerator.createUuid(),
+                            LEFT_VALUE: condition.LEFT.TYPE == 'FIELD' ? condition.LEFT.NAME : null,
+                            LOGICAL_OPERATOR: condition.OPERATION,
+                            RIGHT_CRITERIA: condition.RIGHT.TYPE === 'FIELD'
+                                ? RIGHT_CRITERIA.FIELD
+                                : RIGHT_CRITERIA.VALUE,
+                            RIGHT_VALUE: condition.RIGHT.TYPE === EXPRESSION_TYPE_PLACEHOLDER
+                                ? condition.RIGHT.KEY
+                                : condition.RIGHT.TYPE === EXPRESSION_TYPE_FIELD
+                                    ? condition.RIGHT.NAME
+                                    : condition.RIGHT.VALUE
+                        };
+                    });
+                    const assignments = (_b = rule.RESULT_EXPRESSION) === null || _b === void 0 ? void 0 : _b.ASSIGNMENTS;
+                    if (assignments) {
+                        this.header = this.getAssignmentValue(assignments, 'HEADER');
+                        this.message = this.getAssignmentValue(assignments, 'MESSAGE');
+                        this.severity = this.getAssignmentValue(assignments, 'SEVERITY');
+                        this.topic = this.getAssignmentValue(assignments, 'TOPIC');
+                        this.tableId = this.getAssignmentValue(assignments, 'TABLE_ID');
+                    }
+                    break;
+            }
+            this.verifyChangeComplete();
+            this.dialog.show();
+        });
+    }
+    get ruleDialogTitle() {
+        return `${this.ruleDialogMode === RuleDialogMode.CREATE ? 'Create' : 'Edit'} Rule`;
+    }
+    submit() {
+        if (!this.name || !this.description) {
+            return;
+        }
+        const rule = Object.assign(Object.assign({}, (this.ruleDialogMode === RuleDialogMode.EDIT && { DYNAMIC_RULE_ID: this.ruleId })), { RULE_NAME: this.name, RULE_DESCRIPTION: this.description, RULE_TABLE: this.resource, RULE_EXECUTION_STRATEGY: this.executionStrategy, RULE_EXPRESSION: {
+                CONDITIONS: this.transformConditions(this.conditions)
+            }, RESULT_EXPRESSION: {
+                ASSIGNMENTS: [
+                    this.createAssignment('TOPIC', this.topic),
+                    this.createAssignment('TABLE_NAME', this.resource),
+                    this.createAssignment('TABLE_ID', this.tableId),
+                    this.createAssignment('HEADER', this.header),
+                    this.createAssignment('MESSAGE', this.message),
+                    this.createAssignment('SEVERITY', this.severity),
+                    this.createAssignment('RULE_NAME', this.name)
+                ]
+            } });
+        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;
+        }
+    }
+    validateResponse(response) {
+        var _a;
+        if (response.MESSAGE_TYPE === 'EVENT_ACK') {
+            this.close();
+            return;
+        }
+        if (((_a = response.ERROR[0]) === null || _a === void 0 ? void 0 : _a.CODE) === 'DUPLICATE_KEY') {
+            return;
+        }
+    }
+    isConditionsValid() {
+        return false;
+    }
+    close() {
+        this.dialog.close();
+        this.name = null;
+        this.description = null;
+        this.header = null;
+        this.message = null;
+        this.resource = null;
+        this.resources = [];
+        this.topic = null;
+        this.topics = [];
+        this.executionStrategy = null;
+        this.severity = null;
+        this.tableId = null;
+        this.conditions = [];
+        this.isCompleteToSubmit = false;
+    }
+    // #region Condition
+    newCondition() {
+        this.conditions.push(this.createEmptyCondition());
+        this.verifyChangeComplete();
+    }
+    editCondition(editedCondition) {
+        this.verifyChangeComplete();
+    }
+    deleteCondition(deletedCondition) {
+        if (this.conditions.length <= 1) {
+            return;
+        }
+        this.conditions = this.conditions.filter(condition => condition !== deletedCondition);
+        this.verifyChangeComplete();
+    }
+    // #endregion
+    nameChanged() {
+        this.verifyChangeComplete();
+    }
+    resourceChanged() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.conditions = [this.createEmptyCondition()];
+            this.resourceFields = yield this.systemService.getFields(this.resource);
+        });
+    }
+    verifyChangeComplete() {
+        if (!this.name || !this.description) {
+            this.isCompleteToSubmit = false;
+            return;
+        }
+        if (!this.isConditionsValid()) {
+            this.isCompleteToSubmit = false;
+            return;
+        }
+        this.isCompleteToSubmit = true;
+    }
+    transformConditions(conditions) {
+        return conditions.map(condition => {
+            return {
+                LEFT: {
+                    TYPE: EXPRESSION_TYPE_FIELD,
+                    NAME: condition.LEFT_VALUE
+                },
+                OPERATION: condition.LOGICAL_OPERATOR,
+                RIGHT: condition.RIGHT_CRITERIA === 'VALUE' ? {
+                    TYPE: 'STRING',
+                    VALUE: condition.RIGHT_VALUE,
+                } : {
+                    TYPE: condition.RIGHT_CRITERIA,
+                    NAME: condition.RIGHT_VALUE,
+                }
+            };
+        });
+    }
+    createEmptyCondition() {
+        return {
+            ID: null,
+            LEFT_VALUE: null,
+            LOGICAL_OPERATOR: LOGICAL_OPERATOR_EQUALS,
+            RIGHT_CRITERIA: RIGHT_CRITERIA.VALUE,
+            RIGHT_VALUE: null,
+        };
+    }
+    getAssignmentValue(assignments, field) {
+        const expression = assignments.find(assignment => assignment.FIELD.NAME === field).VALUE;
+        switch (expression.TYPE) {
+            case 'FIELD':
+                return expression.TYPE;
+            case 'PLACEHOLDER':
+                return expression.KEY;
+            default:
+                return String(expression.VALUE);
+        }
+    }
+    createAssignment(field, value) {
+        return {
+            FIELD: {
+                TYPE: 'FIELD',
+                NAME: field
+            },
+            VALUE: {
+                TYPE: 'STRING',
+                VALUE: value
+            }
+        };
+    }
+};
+__decorate([
+    RuleService
+], RuleDialog.prototype, "ruleService", void 0);
+__decorate([
+    SystemService
+], RuleDialog.prototype, "systemService", void 0);
+__decorate([
+    NotifyService
+], RuleDialog.prototype, "notifyService", void 0);
+__decorate([
+    observable
+], RuleDialog.prototype, "ruleDialogMode", void 0);
+__decorate([
+    observable
+], RuleDialog.prototype, "name", void 0);
+__decorate([
+    observable
+], RuleDialog.prototype, "description", void 0);
+__decorate([
+    observable
+], RuleDialog.prototype, "resource", void 0);
+__decorate([
+    observable
+], RuleDialog.prototype, "tableId", void 0);
+__decorate([
+    observable
+], RuleDialog.prototype, "topic", void 0);
+__decorate([
+    observable
+], RuleDialog.prototype, "topics", void 0);
+__decorate([
+    observable
+], RuleDialog.prototype, "resourceFields", void 0);
+__decorate([
+    observable
+], RuleDialog.prototype, "executionStrategy", void 0);
+__decorate([
+    observable
+], RuleDialog.prototype, "severity", void 0);
+__decorate([
+    observable
+], RuleDialog.prototype, "header", void 0);
+__decorate([
+    observable
+], RuleDialog.prototype, "message", void 0);
+__decorate([
+    observable
+], RuleDialog.prototype, "conditions", void 0);
+__decorate([
+    observable
+], RuleDialog.prototype, "resources", void 0);
+__decorate([
+    observable
+], RuleDialog.prototype, "isCompleteToSubmit", void 0);
+RuleDialog = __decorate([
+    customElement({
+        name,
+        template,
+        styles,
+    })
+], RuleDialog);
+export { RuleDialog };

package/dist/esm/components/foundation-notification-dashboard/components/rule-dialog/rule-dialog.styles.js

@@ -0,0 +1,67 @@
+import { css } from '@microsoft/fast-element';
+const modalWidthPx = 940;
+export const ruleDialogStyles = css `
+  .template-dialog-header-title {
+    font-weight: bold;
+    align-self: center;
+  }
+
+  zero-button {
+    margin: 0px;
+  }
+
+  .template-dialog-content {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    width: ${String(modalWidthPx)}px;
+    max-height: 800px;
+    gap: 8px;
+  }
+
+  .content-row {
+    display: flex;
+    gap: 8px;
+  }
+
+  .col-4 {
+    display: grid;
+    grid-template-columns: repeat(4, calc(${String(modalWidthPx - 8 * 3)}px / 4));
+    gap: 8px;
+  }
+
+  .control {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 4px;
+  }
+
+  .conditions {
+    min-height: 150px;
+    border: 1px solid #2e3339;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    padding: 8px;
+  }
+
+  .template-dialog-footer {
+    margin-top: 8px;
+    display: flex;
+  }
+
+  .condition {
+    gap: 0px;
+    flex-direction: column;
+  }
+
+  zero-select {
+    min-width: auto;
+  }
+
+  zero-select::part(control) {
+    display: flex;
+    width: 100%;
+  }
+`;