@genesislcap/pbc-notify-ui 1.0.30 → 1.0.32

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

@@ -1,88 +1,38 @@
 import { __awaiter, __decorate } from "tslib";
-import { showNotification } from '@genesislcap/foundation-notifications';
-import { customElement, FASTElement, observable } from '@microsoft/fast-element';
+import { customElement, FASTElement, observable, volatile } from '@microsoft/fast-element';
+import { Assignment, defaultUpdateType, Severity, } from '../../../../../notify.types';
 import { NotifyService } from '../../../../../services/notify.service';
 import { SystemService } from '../../../../../services/system.service';
 import { TemplateService } from '../../../../../services/template.service';
 import { humanize, logger } from '../../../../../utils';
-import { EXPRESSION_TYPE_PLACEHOLDER } from '../../../types/expression-type';
-import { RIGHT_CRITERIA_USER_ENTRY, RIGHT_CRITERIA_VALUE } from '../../../types/right-criteria';
-import { SEVERITY_INFORMATION } from '../../../types/severity';
-import { defaultUpdateType } from '../../rules/rule-dialog/rule-dialog.types';
-import { TemplateDialogStyles as styles } from './template-dialog.styles';
-import { TemplateDialogTemplate as template } from './template-dialog.template';
-import { TemplateDialogMode, } from './template-dialog.types';
-import { createAssignment, createConditions, createEmptyCondition, createEmptyParameter, createParameterDetails, getAssignmentValue, UUIDGenerator, } from './template-dialog.utils';
-const name = 'template-dialog';
+import { DynamicRuleUtils, showNotificationError, TemplateUtils, isEmpty, } from '../../../notification-dashboard.utils';
+import { DynamicRuleDialogStyles } from '../../../styles/dynamic-rule.styles';
+import { TemplateDialogTemplate } from './template-dialog.template';
+import { TemplateDialogMode } from './template-dialog.types';
 let TemplateDialog = class TemplateDialog extends FASTElement {
     constructor() {
         super(...arguments);
-        this.resource = ''; // Tables + Views
+        this.templateDialogMode = null;
+        this.resource = ''; // TODO: Tables + Views
         this.updateType = defaultUpdateType;
         this.parameters = [];
         this.conditions = [];
         this.resources = [];
         this.fields = [];
         this.topics = [];
+        this.requiredFields = () => [this.name, this.description, this.header, this.message];
     }
     openDialog(params) {
         return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b;
-            this.resources = yield this.systemService.getResources(); // TODO: Tables + Views
             this.topics = yield this.notifyService.getNotifyRouteTopics();
+            this.resources = yield this.systemService.getResources(); // TODO: Tables + Views
             this.templateDialogMode = params.mode;
             switch (params.mode) {
                 case TemplateDialogMode.CREATE:
-                    this.conditions.push(createEmptyCondition());
-                    this.resource = this.resources[0];
-                    this.fields = yield this.systemService.getFields(this.resource);
-                    this.topic = this.topics[0];
-                    this.severity = SEVERITY_INFORMATION;
-                    this.updateType = defaultUpdateType;
+                    yield this.createTemplate();
                     break;
                 case TemplateDialogMode.EDIT:
-                    const ruleTemplate = params.data;
-                    this.templateId = ruleTemplate.DYNAMIC_RULE_ID;
-                    this.name = ruleTemplate.RULE_NAME;
-                    this.description = ruleTemplate.RULE_DESCRIPTION;
-                    this.resource = ruleTemplate.RULE_TABLE;
-                    this.updateType = ruleTemplate.TABLE_OPERATIONS;
-                    this.fields = yield this.systemService.getFields(this.resource);
-                    // Parameters
-                    this.parameters = Object.keys(ruleTemplate.PARAMETERS).map((key) => {
-                        return {
-                            UUID: UUIDGenerator.createUuid(),
-                            PARAM_NAME: ruleTemplate.PARAMETERS[key].PARAM_NAME,
-                            PARAM_LABEL: ruleTemplate.PARAMETERS[key].PARAM_LABEL,
-                            PARAM_TYPE: ruleTemplate.PARAMETERS[key].PARAM_TYPE,
-                            PARAM_SOURCE_TYPE: ruleTemplate.PARAMETERS[key].PARAM_SOURCE_TYPE,
-                            PARAM_SOURCE: ruleTemplate.PARAMETERS[key].PARAM_SOURCE,
-                        };
-                    });
-                    // Conditions
-                    this.conditions = ruleTemplate.RULE_EXPRESSION.CONDITIONS.map((condition) => {
-                        var _a, _b;
-                        return {
-                            ID: UUIDGenerator.createUuid(),
-                            LEFT_VALUE: (_a = condition.LEFT.VALUE) !== null && _a !== void 0 ? _a : condition.LEFT.NAME,
-                            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
-                                ? this.parameters.find((parameter) => parameter.PARAM_NAME === condition.RIGHT.KEY)
-                                    .UUID
-                                : (_b = condition.RIGHT.VALUE) !== null && _b !== void 0 ? _b : condition.RIGHT.NAME,
-                        };
-                    });
-                    // Assignments
-                    const assignments = (_a = ruleTemplate.RESULT_EXPRESSION) === null || _a === void 0 ? void 0 : _a.ASSIGNMENTS;
-                    if (assignments) {
-                        this.header = getAssignmentValue(assignments, 'HEADER');
-                        this.message = getAssignmentValue(assignments, 'BODY');
-                        this.severity = (_b = getAssignmentValue(assignments, 'NOTIFY_SEVERITY')) === null || _b === void 0 ? void 0 : _b.toUpperCase();
-                        this.topic = getAssignmentValue(assignments, 'TOPIC');
-                    }
+                    yield this.editTemplate(params.data);
                     break;
                 default:
                     logger.error('Error on TemplateDialogMode');
@@ -91,32 +41,78 @@ let TemplateDialog = class TemplateDialog extends FASTElement {
             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');
+    }
+    createTemplate() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.conditions.push(DynamicRuleUtils.createEmptyCondition());
+            this.resource = this.resources[0];
+            this.fields = yield this.systemService.getFields(this.resource);
+            this.topic = this.topics[0];
+            this.severity = Severity.INFORMATION;
+            this.updateType = defaultUpdateType;
+        });
+    }
+    editTemplate(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            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 = yield this.systemService.getFields(this.resource);
+            this.parameters = TemplateUtils.getParameters(template.PARAMETERS);
+            this.conditions = TemplateUtils.getConditions(template.RULE_EXPRESSION.CONDITIONS, this.parameters);
+            this.attributeAssignments((_a = template.RESULT_EXPRESSION) === null || _a === void 0 ? void 0 : _a.ASSIGNMENTS);
+        });
+    }
+    attributeAssignments(assignments) {
+        var _a;
+        if (!assignments || !assignments.length) {
+            return;
+        }
+        this.header = DynamicRuleUtils.getAssignmentValue(assignments, Assignment.HEADER);
+        this.message = DynamicRuleUtils.getAssignmentValue(assignments, Assignment.BODY);
+        this.severity = (_a = DynamicRuleUtils.getAssignmentValue(assignments, Assignment.NOTIFY_SEVERITY)) === null || _a === void 0 ? void 0 : _a.toUpperCase();
+        this.topic = DynamicRuleUtils.getAssignmentValue(assignments, Assignment.TOPIC);
+    }
     get templateDialogTitle() {
-        const mode = this.templateDialogMode === TemplateDialogMode.CREATE ? 'Create' : 'Edit';
-        return `${mode} Template`;
+        return `${this.templateDialogMode === TemplateDialogMode.CREATE ? 'Create' : 'Edit'} Template`;
     }
     submit() {
-        const ruleTemplate = Object.assign(Object.assign({}, (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: createConditions(this.conditions, this.parameters),
-            }, RAW_RULE_EXPRESSION: null, RESULT_EXPRESSION: {
-                ASSIGNMENTS: [
-                    createAssignment('TOPIC', this.topic),
-                    createAssignment('HEADER', this.header),
-                    createAssignment('BODY', this.message),
-                    createAssignment('NOTIFY_SEVERITY', humanize(this.severity)),
-                ],
-            }, PARAMETER_DETAILS: createParameterDetails(this.parameters) });
+        if (this.requiredFields().some((value) => isEmpty(value))) {
+            return;
+        }
+        const template = this.createTemplateObject();
         switch (this.templateDialogMode) {
             case TemplateDialogMode.CREATE:
                 this.templateService
-                    .createRuleTemplate(ruleTemplate)
+                    .createRuleTemplate(template)
                     .then((response) => this.validateResponse(response));
                 break;
             case TemplateDialogMode.EDIT:
                 this.templateService
-                    .editRuleTemplate(ruleTemplate)
+                    .editRuleTemplate(template)
                     .then((response) => this.validateResponse(response));
                 break;
             default:
@@ -124,42 +120,36 @@ let TemplateDialog = class TemplateDialog extends FASTElement {
                 break;
         }
     }
+    createTemplateObject() {
+        return Object.assign(Object.assign({}, (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) {
-        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');
+        showNotificationError(response.ERROR);
     }
-    close() {
-        this.dialog.close();
-        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.updateType = defaultUpdateType;
-        this.conditions = [];
-        this.parameters = [];
-        this.resources = [];
-        this.topics = [];
-        this.$emit('close');
+    resourceChanged() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.conditions = [DynamicRuleUtils.createEmptyCondition()];
+            this.fields = yield this.systemService.getFields(this.resource);
+        });
     }
     // #region Condition
     newCondition() {
-        this.conditions.push(createEmptyCondition());
+        this.conditions.push(DynamicRuleUtils.createEmptyCondition());
     }
     editCondition(editedCondition) { }
     deleteCondition(deletedCondition) {
@@ -171,7 +161,7 @@ let TemplateDialog = class TemplateDialog extends FASTElement {
     // #endregion
     // #region Parameter
     newParameter() {
-        this.parameters = [...this.parameters, createEmptyParameter()];
+        this.parameters = [...this.parameters, TemplateUtils.createEmptyParameter()];
     }
     editParameter(editedParameter) {
         this.parameters = [...this.parameters];
@@ -183,11 +173,8 @@ let TemplateDialog = class TemplateDialog extends FASTElement {
         this.parameters = this.parameters.filter((parameter) => parameter.UUID !== deletedParameter.UUID);
     }
     // #endregion
-    resourceChanged() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.conditions = [createEmptyCondition()];
-            this.fields = yield this.systemService.getFields(this.resource);
-        });
+    get validateRequiredFields() {
+        return this.requiredFields().some((value) => isEmpty(value));
     }
 };
 __decorate([
@@ -199,6 +186,9 @@ __decorate([
 __decorate([
     NotifyService
 ], TemplateDialog.prototype, "notifyService", void 0);
+__decorate([
+    observable
+], TemplateDialog.prototype, "templateDialogMode", void 0);
 __decorate([
     observable
 ], TemplateDialog.prototype, "templateId", void 0);
@@ -242,13 +232,13 @@ __decorate([
     observable
 ], TemplateDialog.prototype, "topics", void 0);
 __decorate([
-    observable
-], TemplateDialog.prototype, "templateDialogMode", void 0);
+    volatile
+], TemplateDialog.prototype, "validateRequiredFields", null);
 TemplateDialog = __decorate([
     customElement({
-        name,
-        template,
-        styles,
+        name: 'template-dialog',
+        template: TemplateDialogTemplate,
+        styles: DynamicRuleDialogStyles,
     })
 ], TemplateDialog);
 export { TemplateDialog };

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

@@ -1,22 +1,19 @@
 import { sync } from '@genesislcap/foundation-utils';
 import { html, ref, repeat } from '@microsoft/fast-element';
+import { Severity, UpdateType } from '../../../../../notify.types';
 import { eventDetail } from '../../../../../utils/eventDetail';
-import { ALL_SEVERITIES } from '../../../types/severity';
-import { UpdateType } from '../../rules/rule-dialog/rule-dialog.types';
 export const TemplateDialogTemplate = html `
-  <zero-modal ${ref('dialog')} class="template-dialog" :onCloseCallback=${(x) => () => x.close()}>
-    <div slot="top" class="template-dialog-top">${(x) => x.templateDialogTitle}</div>
+  <zero-modal ${ref('dialog')} class="dialog" :onCloseCallback=${(x) => () => x.close()}>
+    <div slot="top" class="dialog-top">${(x) => x.templateDialogTitle}</div>
 
-    <div class="template-dialog-content">
+    <div class="dialog-content">
       <div class="content-row">
         <div class="control">
-          <label>Name</label>
-          <zero-text-field :value=${sync((x) => x.name)} autofocus></zero-text-field>
+          <zero-text-field :value=${sync((x) => x.name)} autofocus>Name</zero-text-field>
         </div>
 
         <div class="control">
-          <label>Description</label>
-          <zero-text-field :value=${sync((x) => x.description)}></zero-text-field>
+          <zero-text-field :value=${sync((x) => x.description)}>Description</zero-text-field>
         </div>
       </div>
 
@@ -46,10 +43,11 @@ export const TemplateDialogTemplate = html `
               value-field="value"
               label-field="value"
               option-element="zero-option"
-              :data=${(_) => ALL_SEVERITIES.map((value) => ({ value, label: value }))}
+              :data=${(_) => Object.values(Severity).map((value) => ({ value }))}
             ></options-datasource>
           </zero-select>
         </div>
+
         <div class="control">
           <label>Update Type</label>
           <zero-multiselect
@@ -71,20 +69,18 @@ export const TemplateDialogTemplate = html `
 
       <div class="content-row">
         <div class="control">
-          <label>Header</label>
-          <zero-text-field :value=${sync((x) => x.header)}></zero-text-field>
+          <zero-text-field :value=${sync((x) => x.header)}>Header</zero-text-field>
         </div>
 
         <div class="control">
-          <label>Message</label>
-          <zero-text-field :value=${sync((x) => x.message)}></zero-text-field>
+          <zero-text-field :value=${sync((x) => x.message)}>Message</zero-text-field>
         </div>
       </div>
 
       <div class="control">
         <label>Parameter(s)</label>
-        <div class="parameters">
-          <div class="content-row parameter">
+        <div class="items">
+          <div class="content-row item">
             ${repeat((x) => x.parameters, html `
                 <parameter-builder
                   :parameter=${(x) => x}
@@ -95,41 +91,41 @@ export const TemplateDialogTemplate = html `
           </div>
 
           <div class="content-row">
-            <zero-button @click=${(x) => x.newParameter()}>
-              <zero-icon name="plus"></zero-icon>
-              Parameter
-            </zero-button>
+            <zero-button @click=${(x) => x.newParameter()}>+ Parameter</zero-button>
           </div>
         </div>
       </div>
 
       <div class="control">
         <label>Condition(s)</label>
-        <div class="conditions">
-          <div class="content-row condition">
+        <div class="items">
+          <div class="content-row item">
             ${repeat((x) => x.conditions, html `
-                <condition-builder
-                  :resource=${(x, c) => c.parent.resource}
+                <template-condition-builder
+                  :fields=${(x, c) => c.parent.fields}
                   :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>
+                ></template-condition-builder>
               `)}
           </div>
 
           <div class="content-row">
-            <zero-button @click=${(x) => x.newCondition()}>
-              <zero-icon name="plus"></zero-icon>
-              Condition
-            </zero-button>
+            <zero-button @click=${(x) => x.newCondition()}>+ Condition</zero-button>
           </div>
         </div>
       </div>
     </div>
 
-    <div slot="bottom" class="template-dialog-bottom">
-      <zero-button appearance="accent" @click=${(x) => x.submit()}>Submit</zero-button>
+    <div slot="bottom" class="dialog-bottom">
+      <zero-button
+        appearance="accent"
+        @click=${(x) => x.submit()}
+        ?disabled=${(x) => x.validateRequiredFields}
+      >
+        Submit
+      </zero-button>
     </div>
   </zero-modal>
 `;

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

@@ -1,8 +1,8 @@
 import { __awaiter, __decorate } from "tslib";
 import { showNotificationDialog } from '@genesislcap/foundation-notifications';
-import { css, customElement, FASTElement, html, ref, repeat } from '@microsoft/fast-element';
+import { customElement, FASTElement, html, ref, repeat } from '@microsoft/fast-element';
 import { TemplateService } from '../../../../services/template.service';
-import { rulesAndTemplatesStyles } from '../../styles/rules-and-templates.styles';
+import { DynamicRuleManagementStyles } from '../../styles/dynamic-rule.styles';
 import { TEMPLATE_MANAGEMENT_COLUMNS } from './columns';
 import { TemplateDialogMode } from './template-dialog/template-dialog.types';
 let TemplateManagement = class TemplateManagement extends FASTElement {
@@ -62,9 +62,7 @@ TemplateManagement = __decorate([
 
     <template-dialog ${ref('templateDialog')}></template-dialog>
   `,
-        styles: css `
-    ${rulesAndTemplatesStyles}
-  `,
+        styles: DynamicRuleManagementStyles,
     })
 ], TemplateManagement);
 export { TemplateManagement };