@genesislcap/pbc-notify-ui 1.0.0

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

@@ -0,0 +1,126 @@
+import { sync } from '@genesislcap/foundation-utils';
+import { html, ref, repeat } from "@microsoft/fast-element";
+import { ALL_RULE_EXECUTION_STRATEGIES } from '../../types/rule-execution-strategy';
+import { ALL_SEVERITIES } from '../../types/severity';
+import { eventDetail } from '../../utils/eventDetail';
+export const ruleDialogTemplate = html `
+  <zero-modal class="template-dialog" ${ref('dialog')} :onCloseCallback=${(x) => () => x.close()}>
+    <div slot="top" class="template-dialog-header-title">${x => x.ruleDialogTitle}</div>
+
+    <div class="template-dialog-content">
+      <div class="content-row">
+        <div class="control">
+          <label>Name</label>
+          <zero-text-field
+            :value=${sync(x => x.name)}
+            autofocus
+            autocomplete="off"
+          ></zero-text-field>
+        </div>
+
+        <div class="control">
+          <label>Description</label>
+          <zero-text-field
+            :value=${sync(x => x.description)}
+            autocomplete="off"
+          ></zero-text-field>
+        </div>
+      </div>
+
+      <div class="col-4">
+        <div class="control">
+          <label>Resource</label>
+          <zero-select
+            :value=${sync(x => x.resource)}
+            position="below"
+          >
+            ${repeat(x => x.resources, html `<zero-option value=${x => x}>${x => x}</zero-option>`)}
+          </zero-select>
+        </div>
+
+        <div class="control">
+          <label>Table ID</label>
+          <zero-select :value=${sync(x => x.tableId)}>
+            ${repeat(x => x.resourceFields, html `<zero-option value=${x => x.FIELD_NAME}>${x => x.FIELD_NAME}</zero-option>`)}
+          </zero-select>
+        </div>
+
+        <div class="control">
+          <label>Topic</label>
+          <zero-select :value=${sync(x => x.topic)}>
+            ${repeat(x => x.topics, html `<zero-option value=${x => x}>${x => x}</zero-option>`)}
+          </zero-select>
+        </div>
+
+        <div class="control">
+          <label>Execution Strategy</label>
+          <zero-select :value=${sync(x => x.executionStrategy)}>
+            ${repeat(x => ALL_RULE_EXECUTION_STRATEGIES, html `<zero-option value=${x => x}>${x => x}</zero-option>`)}
+          </zero-select>
+        </div>
+      </div>
+
+      <div class="content-row">
+        <div class="control">
+          <label>Severity</label>
+          <zero-select :value=${sync(x => x.severity)}>
+              ${repeat(_ => ALL_SEVERITIES, html `<zero-option value=${x => x}>${x => x}</zero-option>`)}
+          </zero-select>
+        </div>
+        <div class="control">
+          <label>Header</label>
+          <zero-text-field
+            :value=${sync(x => x.header)}
+            autocomplete="off"
+          ></zero-text-field>
+        </div>
+      </div>
+
+      <div class="content-row">
+        <div class="control">
+          <label>Message</label>
+          <zero-text-field
+            :value=${sync(x => x.message)}
+            autocomplete="off"
+          ></zero-text-field>
+        </div>
+      </div>
+
+      <div class="control">
+        <label>Condition(s)</label>
+        <div class="conditions">
+          <div class="content-row condition">
+            ${repeat(x => x.conditions, html `
+                <rule-condition-builder
+                  :resourceFields=${(x, c) => c.parent.resourceFields}
+                  :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">
+            <zero-button
+              appearance="primary-gradient"
+              @click=${x => x.newCondition()}
+            >
+              <zero-icon name="plus"></zero-icon>Condition
+            </zero-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="template-dialog-footer">
+      <div class="content-row" style="margin-left: auto; margin-bottom: 0px;">
+        <zero-button
+          appearance="primary-gradient"
+          @click=${x => x.submit()}
+        >
+          Submit
+        </zero-button>
+      </div>
+    </div>
+  </zero-modal>
+`;

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

@@ -0,0 +1,4 @@
+export const RuleDialogMode = {
+    CREATE: 'create',
+    EDIT: 'edit',
+};

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

@@ -0,0 +1,311 @@
+import { __awaiter, __decorate } from "tslib";
+import { showNotification } from '@genesislcap/foundation-notifications';
+import { attr, customElement, FASTElement, observable } from '@microsoft/fast-element';
+import { RuleTemplateService } from '../../../../services/rule-template.service';
+import { SystemService } from '../../../../services/system.service';
+import { EXPRESSION_TYPE_NUMBER, EXPRESSION_TYPE_PLACEHOLDER, EXPRESSION_TYPE_STRING } from '../../types/expression-type';
+import { PARAM_TYPE_BOOLEAN, PARAM_TYPE_FIELD, PARAM_TYPE_NUMBER, PARAM_TYPE_STRING } from '../../types/param-type';
+import { RIGHT_CRITERIA_USER_ENTRY, RIGHT_CRITERIA_VALUE } from '../../types/right-criteria';
+import { RULE_EXECUTION_UNLIMITED } from '../../types/rule-execution-strategy';
+import { TemplateDialogStyles as styles } from './template-dialog.styles';
+import { TemplateDialogTemplate as template } from './template-dialog.template';
+import { TemplateDialogMode } from './template-dialog.types';
+import { createEmptyCondition, createEmptyParameter, UUIDGenerator } from './template-dialog.utils';
+const name = 'template-dialog';
+let TemplateDialog = class TemplateDialog extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.resource = ''; // Tables, Views
+        this.parameters = [];
+        this.conditions = [];
+        this.resources = [];
+        this.isCompleteToSubmit = false;
+    }
+    connectedCallback() {
+        const _super = Object.create(null, {
+            connectedCallback: { get: () => super.connectedCallback }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.connectedCallback.call(this);
+            // TODO: Get tables and views
+            this.resources = yield this.systemService.getResources();
+            switch (this.templateDialogMode) {
+                case TemplateDialogMode.CREATE:
+                    this.conditions.push(createEmptyCondition());
+                    this.resource = this.resources[0];
+                    this.executionStrategy = RULE_EXECUTION_UNLIMITED;
+                    break;
+                case TemplateDialogMode.EDIT:
+                    this.name = this.ruleTemplateData.RULE_NAME;
+                    this.description = this.ruleTemplateData.RULE_DESCRIPTION;
+                    this.resource = this.ruleTemplateData.RULE_TABLE;
+                    this.executionStrategy = this.ruleTemplateData.RULE_EXECUTION_STRATEGY;
+                    this.parameters = Object.keys(this.ruleTemplateData.PARAMETERS).map(key => {
+                        return {
+                            UUID: UUIDGenerator.createUuid(),
+                            PARAM_NAME: this.ruleTemplateData.PARAMETERS[key].PARAM_NAME,
+                            PARAM_LABEL: this.ruleTemplateData.PARAMETERS[key].PARAM_LABEL,
+                            PARAM_TYPE: this.ruleTemplateData.PARAMETERS[key].PARAM_TYPE,
+                            PARAM_SOURCE_TYPE: this.ruleTemplateData.PARAMETERS[key].PARAM_SOURCE_TYPE,
+                            PARAM_SOURCE: this.ruleTemplateData.PARAMETERS[key].PARAM_SOURCE
+                        };
+                    });
+                    this.conditions = this.ruleTemplateData.RULE_EXPRESSION.CONDITIONS.map(condition => {
+                        return {
+                            ID: UUIDGenerator.createUuid(),
+                            LEFT_VALUE: condition.LEFT.VALUE,
+                            LOGICAL_OPERATOR: condition.OPERATION,
+                            RIGHT_CRITERIA: condition.RIGHT.TYPE === EXPRESSION_TYPE_PLACEHOLDER
+                                ? RIGHT_CRITERIA_USER_ENTRY
+                                : RIGHT_CRITERIA_VALUE,
+                            RIGHT_VALUE: condition.RIGHT.TYPE === EXPRESSION_TYPE_PLACEHOLDER
+                                ? condition.RIGHT.KEY
+                                : condition.RIGHT.VALUE
+                        };
+                    });
+                    break;
+                default:
+                    console.error('Error on TemplateDialogMode');
+                    break;
+            }
+            this.verifyChangeComplete();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+    get templateDialogTitle() {
+        const mode = this.templateDialogMode === TemplateDialogMode.CREATE
+            ? 'Create'
+            : 'Edit';
+        return `${mode} Template`;
+    }
+    complete() {
+        if (!this.name || !this.description) {
+            return;
+        }
+        /*
+        if (!this.isConditionsValid()) {
+          return;
+        }
+        */
+        const ruleTemplate = {
+            RULE_NAME: this.name,
+            RULE_DESCRIPTION: this.description,
+            RULE_TABLE: this.resource,
+            RULE_EXECUTION_STRATEGY: this.executionStrategy,
+            RULE_EXPRESSION: {
+                CONDITIONS: this.transformConditions(this.conditions)
+            },
+            RAW_RULE_EXPRESSION: null,
+            RESULT_EXPRESSION: {
+                ASSIGNMENTS: []
+            },
+            PARAMETER_DETAILS: this.createParameterDetails()
+        };
+        switch (this.templateDialogMode) {
+            case TemplateDialogMode.CREATE:
+                this.ruleTemplateService
+                    .createRuleTemplate(ruleTemplate)
+                    .then(response => this.validateResponse(response));
+                break;
+            case TemplateDialogMode.EDIT:
+                ruleTemplate.DYNAMIC_RULE_ID = this.ruleTemplateData.DYNAMIC_RULE_ID;
+                this.ruleTemplateService
+                    .editRuleTemplate(ruleTemplate)
+                    .then(response => this.validateResponse(response));
+                break;
+            default:
+                console.error('Error on TemplateDialogMode');
+                break;
+        }
+    }
+    validateResponse(response) {
+        var _a, _b;
+        if (response.MESSAGE_TYPE === 'EVENT_ACK') {
+            this.close();
+            return;
+        }
+        showNotification({
+            title: (_a = response.ERROR[0]) === null || _a === void 0 ? void 0 : _a.CODE,
+            body: (_b = response.ERROR[0]) === null || _b === void 0 ? void 0 : _b.TEXT,
+            config: {
+                snackbar: {
+                    type: 'error',
+                },
+            },
+        }, 'zero');
+    }
+    isConditionsValid() {
+        return false;
+    }
+    close() {
+        this.name = null;
+        this.description = null;
+        this.resource = '';
+        this.executionStrategy = null;
+        this.conditions = [];
+        this.parameters = [];
+        this.resources = [];
+        this.isCompleteToSubmit = false;
+        this.$emit('close');
+    }
+    // #region Condition
+    newCondition() {
+        this.conditions.push(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
+    // #region Parameter
+    newParameter() {
+        this.parameters = [...this.parameters, createEmptyParameter()];
+        this.verifyChangeComplete();
+    }
+    editParameter(editedParameter) {
+        this.parameters = [...this.parameters];
+        this.verifyChangeComplete();
+    }
+    deleteParameter(deletedParameter) {
+        if (this.conditions.find(condition => condition.RIGHT_VALUE === deletedParameter.UUID)) {
+            return;
+        }
+        this.parameters = this.parameters.filter(parameter => parameter.UUID !== deletedParameter.UUID);
+        this.verifyChangeComplete();
+    }
+    // #endregion
+    nameChanged() {
+        this.verifyChangeComplete();
+    }
+    resourceChanged() {
+        this.conditions = [createEmptyCondition()];
+    }
+    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: this.getLeftExpression(condition),
+                OPERATION: condition.LOGICAL_OPERATOR,
+                RIGHT: this.getRightExpression(condition)
+            };
+        });
+    }
+    getLeftExpression(condition) {
+        const leftType = this.getLeftType(condition);
+        if ([PARAM_TYPE_NUMBER, PARAM_TYPE_STRING].includes(leftType)) {
+            return {
+                TYPE: leftType,
+                VALUE: condition.LEFT_VALUE.FIELD_NAME
+            };
+        }
+        return {
+            TYPE: PARAM_TYPE_FIELD,
+            NAME: condition.LEFT_VALUE.FIELD_NAME
+        };
+    }
+    getLeftType(condition) {
+        switch (condition.LEFT_VALUE.FIELD_TYPE) {
+            case PARAM_TYPE_BOOLEAN:
+                return PARAM_TYPE_FIELD;
+            case PARAM_TYPE_NUMBER:
+                return PARAM_TYPE_NUMBER;
+            default:
+                return PARAM_TYPE_STRING;
+        }
+    }
+    getRightExpression(condition) {
+        if (condition.RIGHT_CRITERIA === RIGHT_CRITERIA_USER_ENTRY) {
+            return {
+                TYPE: EXPRESSION_TYPE_PLACEHOLDER,
+                KEY: this.parameters.find(parameter => parameter.UUID === condition.RIGHT_VALUE).PARAM_NAME
+            };
+        }
+        if (condition.LEFT_VALUE.FIELD_TYPE === EXPRESSION_TYPE_STRING) {
+            return {
+                TYPE: condition.LEFT_VALUE.FIELD_TYPE === EXPRESSION_TYPE_STRING
+                    ? EXPRESSION_TYPE_STRING
+                    : EXPRESSION_TYPE_NUMBER,
+                VALUE: condition.LEFT_VALUE.FIELD_TYPE !== EXPRESSION_TYPE_STRING
+                    ? Number(condition.RIGHT_VALUE)
+                    : condition.RIGHT_VALUE
+            };
+        }
+    }
+    createParameterDetails() {
+        const parameterDetails = {};
+        this.parameters.forEach(parameter => {
+            var _a;
+            parameterDetails[parameter.PARAM_NAME] = {
+                PARAM_LABEL: parameter.PARAM_LABEL,
+                PARAM_TYPE: parameter.PARAM_TYPE,
+                PARAM_SOURCE_TYPE: parameter.PARAM_SOURCE_TYPE,
+                PARAM_SOURCE: (_a = parameter.PARAM_SOURCE) !== null && _a !== void 0 ? _a : '',
+                PARAM_OPERATOR: 'EQUALS'
+            };
+        });
+        return parameterDetails;
+    }
+};
+__decorate([
+    RuleTemplateService
+], TemplateDialog.prototype, "ruleTemplateService", void 0);
+__decorate([
+    SystemService
+], TemplateDialog.prototype, "systemService", void 0);
+__decorate([
+    observable
+], TemplateDialog.prototype, "name", void 0);
+__decorate([
+    observable
+], TemplateDialog.prototype, "description", void 0);
+__decorate([
+    observable
+], TemplateDialog.prototype, "resource", void 0);
+__decorate([
+    observable
+], TemplateDialog.prototype, "executionStrategy", void 0);
+__decorate([
+    observable
+], TemplateDialog.prototype, "parameters", void 0);
+__decorate([
+    observable
+], TemplateDialog.prototype, "conditions", void 0);
+__decorate([
+    attr
+], TemplateDialog.prototype, "templateDialogMode", void 0);
+__decorate([
+    attr
+], TemplateDialog.prototype, "ruleTemplateData", void 0);
+__decorate([
+    observable
+], TemplateDialog.prototype, "resources", void 0);
+__decorate([
+    observable
+], TemplateDialog.prototype, "isCompleteToSubmit", void 0);
+TemplateDialog = __decorate([
+    customElement({
+        name,
+        template,
+        styles,
+    })
+], TemplateDialog);
+export { TemplateDialog };

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

@@ -0,0 +1,95 @@
+import { css } from '@microsoft/fast-element';
+export const TemplateDialogStyles = css `
+  fast-dialog.template-dialog::part(control) {
+    background-color: #1f2126;
+    --dialog-height: none;
+    --dialog-width: none;
+    border: 1px solid #2e3339;
+    border-radius: 4px;
+    position: relative;
+  }
+
+  .template-dialog-header {
+    display: flex;
+    border-bottom: 1px solid rgb(46, 51, 57);
+    padding: 8px;
+  }
+
+  .template-dialog-header-title {
+    font-weight: bold;
+    align-self: center;
+  }
+
+  label {
+    margin-bottom: 6px;
+  }
+
+  zero-button {
+    margin: 0px;
+  }
+
+  .closing-icon {
+    text-align: center;
+    height: 30px;
+    width: 30px;
+    min-width: 30px;
+    margin-left: auto;
+  }
+
+  .closing-icon::part(control) {
+    padding: 0px;
+  }
+
+  .template-dialog-content {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    padding: 8px
+  }
+
+  .content-row {
+    display: flex;
+    gap: 8px;
+  }
+
+  .control {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .conditions,
+  .parameters {
+    height: 150px;
+    width: 940px;
+    max-height: 200px;
+    border: 1px solid #2e3339;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    overflow-y: scroll;
+    padding: 8px;
+  }
+
+  .template-dialog-footer {
+    display: flex;
+    flex-direction: row;
+    margin: 0px 8px 8px 0px;
+  }
+
+  .complete {
+    margin: 0px;
+    background-color: #dadc01;
+    color: #000000;
+  }
+
+  .condition,
+  .parameter {
+    gap: 0px;
+    flex-direction: column;
+  }
+
+  zero-select::part(listbox) {
+    max-height: 160px;
+  }
+`;

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

@@ -0,0 +1,126 @@
+import { sync } from '@genesislcap/foundation-utils';
+import { html, repeat } from "@microsoft/fast-element";
+import { eventDetail } from '../../utils/eventDetail';
+import { ALL_RULE_EXECUTION_STRATEGIES } from '../../types/rule-execution-strategy';
+export const TemplateDialogTemplate = html `
+  <fast-dialog class="template-dialog">
+    <div class="template-dialog-header">
+      <div class="template-dialog-header-title">${x => x.templateDialogTitle}</div>
+      <zero-button
+        class="closing-icon"
+        @click=${(x) => x.close()}
+      >
+        <zero-icon name="xmark" part="icon" size="lg"></zero-icon>
+      </zero-button>
+    </div>
+
+    <div class="template-dialog-content">
+      <div class="content-row" style="margin-bottom: 8px;">
+        <div class="control">
+          <label>Name</label>
+          <zero-text-field
+            :value=${sync(x => x.name)}
+            autofocus
+          >
+          </zero-text-field>
+        </div>
+
+        <div class="control">
+          <label>Description</label>
+          <zero-text-field
+            :value=${sync(x => x.description)}
+          >
+          </zero-text-field>
+        </div>
+      </div>
+
+      <div class="content-row">
+        <div class="control">
+          <label>Resource</label>
+          <zero-select
+            :value=${sync(x => x.resource)}
+            position="below"
+          >
+            ${repeat(x => x.resources, html `
+                <zero-option value=${x => x}>${x => x}</zero-option>
+              `)}
+          </zero-select>
+        </div>
+
+        <div class="control">
+          <label>Execution Strategy</label>
+          <zero-select
+            :value=${sync(x => x.executionStrategy)}
+          >
+            ${repeat(x => ALL_RULE_EXECUTION_STRATEGIES, html `
+                <zero-option value=${x => x}>${x => x}</zero-option>
+              `)}
+          </zero-select>
+        </div>
+      </div>
+        
+      <div class="content-row" style="margin-top: 8px;">
+        <label>Parameter(s)</label>
+      </div>
+      
+      <div class="parameters">
+        <div class="content-row condition">
+          ${repeat(x => x.parameters, html `
+              <parameter-builder
+                :parameter=${x => x}
+                @edit=${(x, c) => c.parent.editParameter(eventDetail(c))}
+                @delete=${(x, c) => c.parent.deleteParameter(eventDetail(c))}
+              >
+              </parameter-builder>
+            `)}
+        </div>
+        
+        <div class="content-row">
+          <zero-button
+            @click=${x => x.newParameter()}
+          >
+            <zero-icon name="plus"></zero-icon>Parameter
+          </zero-button>
+        </div>
+      </div>
+
+      <div class="content-row" style="margin-top: 8px;">
+        <label>Condition(s)</label>
+      </div>
+      
+      <div class="conditions">
+        <div class="content-row condition">
+          ${repeat(x => x.conditions, html `
+              <condition-builder
+                :resource=${(x, c) => c.parent.resource}
+                :parameters=${(x, c) => c.parent.parameters}
+                :condition=${x => x}
+                @edit=${(x, c) => c.parent.editCondition(eventDetail(c))}
+                @delete=${(x, c) => c.parent.deleteCondition(eventDetail(c))}
+              >
+              </condition-builder>
+            `)}
+        </div>
+
+        <div class="content-row">
+          <zero-button
+            @click=${x => x.newCondition()}
+          >
+            <zero-icon name="plus"></zero-icon>Condition
+          </zero-button>
+        </div>
+      </div>
+    </div>
+
+    <div class="template-dialog-footer">
+      <div class="content-row" style="margin-left: auto; margin-bottom: 0px;">
+        <!-- ?disabled=${x => !x.isCompleteToSubmit} -->
+        <zero-button
+          @click=${x => x.complete()}
+        >
+          Complete
+        </zero-button>
+      </div>
+    </div>
+  </fast-dialog>
+`;

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

@@ -0,0 +1,5 @@
+export var TemplateDialogMode;
+(function (TemplateDialogMode) {
+    TemplateDialogMode[TemplateDialogMode["CREATE"] = 0] = "CREATE";
+    TemplateDialogMode[TemplateDialogMode["EDIT"] = 1] = "EDIT";
+})(TemplateDialogMode || (TemplateDialogMode = {}));