@genesislcap/pbc-notify-ui 1.0.0

package/dist/esm/components/foundation-inbox/services/foundation-inbox.service.js

@@ -0,0 +1,109 @@
+import { __awaiter, __decorate, __param } from "tslib";
+import { Auth, Connect } from '@genesislcap/foundation-comms';
+import { DI } from '@microsoft/fast-foundation';
+import { DEBOUNCED_SEARCH_TIME } from '../inbox.config';
+import { NotifyResourceNames } from '../inbox.types';
+import { logger, transformMessageToNotify } from '../utils';
+let FoundationInboxServiceImpl = class FoundationInboxServiceImpl {
+    constructor(connect, auth) {
+        this.connect = connect;
+        this.auth = auth;
+        this.resourceName = NotifyResourceNames.ALL_RECORDS;
+        this.subscriptions = [];
+        this.store = {
+            notifies: []
+        };
+    }
+    getNotificationRules() {
+        let notificationRules = [];
+        this.connect.request('NOTIFICATION_RULE').then((response) => {
+            if (!response.REPLY) {
+                return;
+            }
+            notificationRules = response.REPLY;
+        });
+        return notificationRules;
+    }
+    getStream() {
+        return this.connect.stream(this.resourceName, (result) => {
+            this.sourceRef = result.SOURCE_REF;
+            if (!(result === null || result === void 0 ? void 0 : result.ROW)) {
+                this.store.notifies = [];
+                return;
+            }
+            if (result.SEQUENCE_ID === 1) {
+                const newNotifies = [];
+                result.ROW.forEach((row) => newNotifies.push(transformMessageToNotify(row)));
+                this.store.notifies = newNotifies;
+            }
+            else {
+                const details = result === null || result === void 0 ? void 0 : result.ROW[0];
+                if ((details === null || details === void 0 ? void 0 : details.DETAILS.OPERATION) === 'DELETE') {
+                    const notifyItemIndex = this.store.notifies.findIndex(({ rowRef }) => rowRef === details.DETAILS.ROW_REF);
+                    if (notifyItemIndex > -1) {
+                        this.store.notifies.splice(notifyItemIndex, 1);
+                    }
+                }
+                if ((details === null || details === void 0 ? void 0 : details.DETAILS.OPERATION) === 'INSERT') {
+                    this.store.notifies.push(transformMessageToNotify(details));
+                }
+            }
+            this.subscriptions.forEach((callback) => callback({ store: this.store }));
+        }, (response) => logger.error('Error: Could not load notify data.' + response));
+    }
+    subscribe(callback) {
+        this.subscriptions.push(callback);
+        if (this.stream) {
+            callback({ store: this.store });
+        }
+        else {
+            this.stream = this.getStream();
+            this.stream.subscribe();
+        }
+    }
+    unsubscribe(callback) {
+        const index = this.subscriptions.indexOf(callback);
+        if (index >= 0) {
+            this.subscriptions.splice(index, 1);
+        }
+        this.dataLogoff();
+    }
+    dataLogoff() {
+        if (this.sourceRef && this.auth.isLoggedIn) {
+            this.connect.dataLogoff(this.sourceRef);
+        }
+        this.stream = undefined;
+        this.store = {
+            notifies: []
+        };
+        this.sourceRef = undefined;
+    }
+    filter(filterTypes, payload) {
+        const criteriaByFilterType = {
+            search: `(Expr.containsIgnoreCase(MESSAGE, '${payload['search']}') || Expr.containsIgnoreCase(HEADER, '${payload['search']}'))`,
+            severity: `NOTIFY_SEVERITY == '${payload['severity']}'`,
+        };
+        const CRITERIA_MATCH = filterTypes
+            .map((filterType) => criteriaByFilterType[filterType])
+            .join(' && ');
+        return new Promise((resolve) => {
+            if (this.debounced) {
+                clearTimeout(this.debounced);
+                this.debounced = null;
+            }
+            this.debounced = setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+                const { ROW: rows } = yield this.connect.snapshot(this.resourceName, { CRITERIA_MATCH });
+                let newNotifies = [];
+                if (rows) {
+                    newNotifies = rows.map((row) => transformMessageToNotify(row));
+                }
+                return resolve(newNotifies);
+            }), DEBOUNCED_SEARCH_TIME);
+        });
+    }
+};
+FoundationInboxServiceImpl = __decorate([
+    __param(0, Connect),
+    __param(1, Auth)
+], FoundationInboxServiceImpl);
+export const FoundationInboxService = DI.createInterface((x) => x.singleton(FoundationInboxServiceImpl));

package/dist/esm/components/foundation-inbox/styles/index.js

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

package/dist/esm/components/foundation-inbox/styles/styles.js

@@ -0,0 +1,13 @@
+import { css } from '@microsoft/fast-element';
+export const mixinScreen = (display = 'block') => `
+  contain: content;
+  display: ${display};
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+`;
+export const inboxStyles = css `
+  :host {
+    display: flex;
+  }
+`;

package/dist/esm/components/foundation-inbox/utils/getSeverityByMessageType.js

@@ -0,0 +1,4 @@
+import { MAP_MESSAGE_TYPE_TO_SEVERITY_TYPE } from '../inbox.config';
+export const getSeverityByMessageType = (severityType) => {
+    return [...MAP_MESSAGE_TYPE_TO_SEVERITY_TYPE].find(([ignore, val]) => val == severityType)[0];
+};

package/dist/esm/components/foundation-inbox/utils/index.js

@@ -0,0 +1,3 @@
+export * from './logger';
+export * from './transformMessageToNotify';
+export * from './getSeverityByMessageType';

package/dist/esm/components/foundation-inbox/utils/logger.js

@@ -0,0 +1,2 @@
+import { createLogger } from '@genesislcap/foundation-logger';
+export const logger = createLogger('foundation-inbox');

package/dist/esm/components/foundation-inbox/utils/transformMessageToNotify.js

@@ -0,0 +1,12 @@
+import { formatDateTimeTimestamp } from '@genesislcap/foundation-utils';
+import { SEVERITY_TYPE_DEFAULT, MAP_MESSAGE_TYPE_TO_SEVERITY_TYPE } from '../inbox.config';
+export const transformMessageToNotify = (notifyRow) => {
+    return {
+        id: notifyRow.ALERT_ID,
+        rowRef: notifyRow.DETAILS.ROW_REF,
+        title: notifyRow.HEADER,
+        content: notifyRow.MESSAGE,
+        date: formatDateTimeTimestamp(notifyRow.CREATED_AT),
+        type: MAP_MESSAGE_TYPE_TO_SEVERITY_TYPE.get(notifyRow.NOTIFY_SEVERITY) || SEVERITY_TYPE_DEFAULT,
+    };
+};

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

@@ -0,0 +1,181 @@
+import { __awaiter, __decorate } from "tslib";
+import { FASTElement, attr, customElement, html, observable } from '@microsoft/fast-element';
+import { SystemService } from '../../../../services/system.service';
+import { RIGHT_CRITERIA_VALUE } from '../../types/right-criteria';
+import { ConditionBuilderStyles as styles } from './condition-builder.styles';
+import { ConditionBuilderTemplate as template } from './condition-builder.template';
+const name = 'condition-builder';
+let ConditionBuilder = class ConditionBuilder extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.leftValueItems = [];
+        this.rightCriteria = RIGHT_CRITERIA_VALUE;
+        this.rightValueItems = [];
+        this.rightValueItemsProperty = '';
+    }
+    connectedCallback() {
+        const _super = Object.create(null, {
+            connectedCallback: { get: () => super.connectedCallback }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.connectedCallback.call(this);
+            if (this.resource) {
+                this.leftValueItems = yield this.systemService.getFields(this.resource);
+                // this.leftValue = JSON.stringify(this.leftValueItems[0]);
+            }
+            this.rightValueItems = this.parameters;
+            this.createRightValueItems();
+            if (this.condition.ID) {
+                this.assignLeftValue();
+                this.logicalOperator = this.condition.LOGICAL_OPERATOR;
+                this.rightCriteria = this.condition.RIGHT_CRITERIA;
+                this.assignRightValue();
+            }
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+    createRightValueItems() {
+        let optionsInHTML = '';
+        this.rightValueItems.forEach(item => {
+            var _a;
+            optionsInHTML += `<zero-option value="${item.UUID}">${(_a = item.PARAM_NAME) !== null && _a !== void 0 ? _a : ''}</zero-option>`;
+        });
+        this.rightValueItemsProperty = html `
+      ${optionsInHTML}
+    `;
+    }
+    resourceChanged() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.resource) {
+                this.leftValueItems = yield this.systemService.getFields(this.resource);
+                // this.leftValue = JSON.stringify(this.leftValueItems[0]);
+            }
+        });
+    }
+    parametersChanged() {
+        if (this.parameters) {
+            this.rightValueItems = this.parameters;
+            this.createRightValueItems();
+        }
+    }
+    conditionChanged() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.resource) {
+                this.leftValueItems = yield this.systemService.getFields(this.resource);
+                // this.leftValue = JSON.stringify(this.leftValueItems[0]);
+            }
+            this.assignLeftValue();
+            this.logicalOperator = this.condition.LOGICAL_OPERATOR;
+            this.rightCriteria = this.condition.RIGHT_CRITERIA;
+            this.assignRightValue();
+        });
+    }
+    assignLeftValue() {
+        this.leftValue = this.condition.LEFT_VALUE
+            ? typeof this.condition.LEFT_VALUE === 'string'
+                ? JSON.stringify(this.leftValueItems.find(item => item.FIELD_NAME === this.condition.LEFT_VALUE)) // Edit
+                : JSON.stringify(this.condition.LEFT_VALUE)
+            : JSON.stringify(this.leftValueItems[0]);
+        this.$emit('edit', this.condition);
+    }
+    assignRightValue() {
+        var _a;
+        if (this.condition.RIGHT_CRITERIA === RIGHT_CRITERIA_VALUE) {
+            this.rightValueText = this.condition.RIGHT_VALUE;
+        }
+        else {
+            this.rightValueUserEntry = ((_a = this.parameters) === null || _a === void 0 ? void 0 : _a.length) > 0
+                ? this.condition.RIGHT_VALUE
+                : null;
+        }
+        this.$emit('edit', this.condition);
+    }
+    leftValueChanged() {
+        if (this.condition) {
+            this.condition.LEFT_VALUE = JSON.parse(this.leftValue);
+            this.$emit('edit', this.condition);
+        }
+    }
+    logicalOperatorChanged() {
+        if (this.condition) {
+            this.condition.LOGICAL_OPERATOR = this.logicalOperator;
+            this.$emit('edit', this.condition);
+        }
+    }
+    rightCriteriaChanged() {
+        var _a;
+        if (this.condition) {
+            this.condition.RIGHT_CRITERIA = this.rightCriteria;
+            if (this.condition.RIGHT_CRITERIA === RIGHT_CRITERIA_VALUE) {
+                this.rightValueText = '';
+            }
+            else {
+                this.rightValueUserEntry = ((_a = this.parameters) === null || _a === void 0 ? void 0 : _a.length) > 0
+                    ? this.parameters[0].UUID
+                    : null;
+            }
+            this.$emit('edit', this.condition);
+        }
+    }
+    rightValueTextChanged() {
+        if (this.condition) {
+            this.condition.RIGHT_VALUE = this.rightValueText;
+            this.$emit('edit', this.condition);
+        }
+    }
+    rightValueUserEntryChanged() {
+        if (this.condition) {
+            this.condition.RIGHT_VALUE = this.rightValueUserEntry;
+            this.$emit('edit', this.condition);
+        }
+    }
+    deleteCondition() {
+        this.$emit('delete', this.condition);
+    }
+};
+__decorate([
+    SystemService
+], ConditionBuilder.prototype, "systemService", void 0);
+__decorate([
+    attr
+], ConditionBuilder.prototype, "condition", void 0);
+__decorate([
+    attr
+], ConditionBuilder.prototype, "resource", void 0);
+__decorate([
+    attr
+], ConditionBuilder.prototype, "parameters", void 0);
+__decorate([
+    observable
+], ConditionBuilder.prototype, "leftValueItems", void 0);
+__decorate([
+    observable
+], ConditionBuilder.prototype, "leftValue", void 0);
+__decorate([
+    observable
+], ConditionBuilder.prototype, "logicalOperator", void 0);
+__decorate([
+    observable
+], ConditionBuilder.prototype, "rightCriteria", void 0);
+__decorate([
+    observable
+], ConditionBuilder.prototype, "rightValueText", void 0);
+__decorate([
+    observable
+], ConditionBuilder.prototype, "rightValueUserEntry", void 0);
+__decorate([
+    observable
+], ConditionBuilder.prototype, "rightValueItems", void 0);
+__decorate([
+    observable
+], ConditionBuilder.prototype, "rightValueItemsProperty", void 0);
+ConditionBuilder = __decorate([
+    customElement({
+        name,
+        template,
+        styles,
+    })
+], ConditionBuilder);
+export { ConditionBuilder };

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

@@ -0,0 +1,49 @@
+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;
+  }
+`;

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

@@ -0,0 +1,65 @@
+import { sync } from '@genesislcap/foundation-utils';
+import { html, ref, repeat, when } from "@microsoft/fast-element";
+import { ALL_LOGICAL_OPERATORS } from '../../types/logical-operator';
+import { ALL_RIGHT_CRITERIAS, RIGHT_CRITERIA_USER_ENTRY, RIGHT_CRITERIA_VALUE } from '../../types/right-criteria';
+export const ConditionBuilderTemplate = html `
+  <div class="condition-builder">
+    <zero-select
+      :value=${sync(x => x.leftValue)}
+      class="left-value"
+      position="below"
+    >
+      ${repeat(x => x.leftValueItems, html `
+          <zero-option value=${x => JSON.stringify(x)}>${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 => ALL_RIGHT_CRITERIAS, html `
+          <zero-option value=${x => x}>${x => x}</zero-option>
+        `)}
+    </zero-select>
+
+    ${when(x => x.rightCriteria === RIGHT_CRITERIA_VALUE, html `
+      <zero-text-field
+        class="right-criteria-value"
+        :value=${sync(x => x.rightValueText)}
+        placeholder="Value"
+      >
+      </zero-text-field>
+    `)}
+    
+    ${when(x => x.rightCriteria === RIGHT_CRITERIA_USER_ENTRY, html `
+      <zero-select
+        ${ref('selectRightValueUserEntry')}
+        class="right-criteria-user-entry"
+        :value=${sync(x => x.rightValueUserEntry)}
+        position="below"
+      >
+        ${x => x.rightValueItemsProperty}
+      </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/parameter-builder/parameter-builder.js

@@ -0,0 +1,125 @@
+import { __awaiter, __decorate } from "tslib";
+import { FASTElement, attr, customElement, observable } from "@microsoft/fast-element";
+import { ParameterBuilderTemplate as template } from './parameter-builder.template';
+import { ParameterBuilderStyles as styles } from './parameter-builder.styles';
+import { PARAM_SOURCE_TYPE_DEFINED_GROUP, PARAM_SOURCE_TYPE_REQ_REP } from "../../types/param-source-type";
+const name = 'parameter-builder';
+let ParameterBuilder = class ParameterBuilder extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.reqRepItems = [
+            'REQUEST_1',
+            'REQUEST_2',
+            'REQUEST_3',
+        ];
+    }
+    connectedCallback() {
+        const _super = Object.create(null, {
+            connectedCallback: { get: () => super.connectedCallback }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.connectedCallback.call(this);
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+    deleteParameter() {
+        this.$emit('delete', this.parameter);
+    }
+    // #region Changed Parameters
+    parameterChanged() {
+        var _a, _b;
+        this.name = this.parameter.PARAM_NAME;
+        this.label = this.parameter.PARAM_LABEL;
+        this.type = this.parameter.PARAM_TYPE;
+        const paramTemp = this.parameter.PARAM_SOURCE; // Can be cleaned
+        this.sourceType = this.parameter.PARAM_SOURCE_TYPE;
+        switch (this.sourceType) {
+            case PARAM_SOURCE_TYPE_REQ_REP:
+                this.sourceSelected = (_a = this.parameter.PARAM_SOURCE) !== null && _a !== void 0 ? _a : paramTemp;
+                break;
+            case PARAM_SOURCE_TYPE_DEFINED_GROUP:
+                this.sourceTyped = (_b = this.parameter.PARAM_SOURCE) !== null && _b !== void 0 ? _b : paramTemp;
+                break;
+            default:
+                break;
+        }
+    }
+    nameChanged() {
+        this.genericChanged('PARAM_NAME', this.name);
+    }
+    labelChanged() {
+        this.genericChanged('PARAM_LABEL', this.label);
+    }
+    typeChanged() {
+        this.genericChanged('PARAM_TYPE', this.type);
+    }
+    sourceTypeChanged() {
+        this.genericChanged('PARAM_SOURCE_TYPE', this.sourceType);
+        switch (this.sourceType) {
+            case PARAM_SOURCE_TYPE_REQ_REP:
+                this.sourceTyped = '';
+                break;
+            case PARAM_SOURCE_TYPE_DEFINED_GROUP:
+                this.sourceSelected = this.reqRepItems[0];
+                break;
+            default:
+                this.sourceSelected = this.reqRepItems[0];
+                this.sourceTyped = '';
+                break;
+        }
+    }
+    sourceSelectedChanged() {
+        if (this.sourceType !== PARAM_SOURCE_TYPE_REQ_REP) {
+            return;
+        }
+        this.genericChanged('PARAM_SOURCE', this.sourceSelected);
+    }
+    sourceTypedChanged() {
+        if (this.sourceType !== PARAM_SOURCE_TYPE_DEFINED_GROUP) {
+            return;
+        }
+        this.genericChanged('PARAM_SOURCE', this.sourceTyped);
+    }
+    // #endregion
+    genericChanged(parameterAttribute, value) {
+        if (!this.parameter) {
+            return;
+        }
+        if (this.parameter[parameterAttribute] === value) {
+            return;
+        }
+        this.parameter[parameterAttribute] = value;
+        this.$emit('edit', this.parameter);
+    }
+};
+__decorate([
+    attr
+], ParameterBuilder.prototype, "parameter", void 0);
+__decorate([
+    observable
+], ParameterBuilder.prototype, "name", void 0);
+__decorate([
+    observable
+], ParameterBuilder.prototype, "label", void 0);
+__decorate([
+    observable
+], ParameterBuilder.prototype, "type", void 0);
+__decorate([
+    observable
+], ParameterBuilder.prototype, "sourceType", void 0);
+__decorate([
+    observable
+], ParameterBuilder.prototype, "sourceSelected", void 0);
+__decorate([
+    observable
+], ParameterBuilder.prototype, "sourceTyped", void 0);
+ParameterBuilder = __decorate([
+    customElement({
+        name,
+        template,
+        styles,
+    })
+], ParameterBuilder);
+export { ParameterBuilder };

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

@@ -0,0 +1,50 @@
+import { css } from '@microsoft/fast-element';
+const PARAM_SOURCE_WIDTH = '200';
+export const ParameterBuilderStyles = css `
+  .parameter-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.param-type::part(control) {
+    width: 115px;
+  }
+
+  zero-select.param-source-type::part(control) {
+    width: 160px;
+  }
+
+  zero-select.param-source::part(control) {
+    width: ${PARAM_SOURCE_WIDTH}px;
+  }
+
+  zero-text-field.param-source::part(root) {
+    width: calc(${PARAM_SOURCE_WIDTH}px + 2px);
+  }
+
+  zero-select::part(listbox) {
+    max-height: 160px;
+  }
+`;