@genesislcap/pbc-notify-ui 1.0.29 → 1.0.31

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

@@ -1,13 +1,12 @@
 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 './rule-dialog.types';
 export const RuleDialogTemplate = html `
-  <zero-modal ${ref('dialog')} class="rule-dialog" :onCloseCallback=${(x) => () => x.close()}>
-    <div slot="top" class="rule-dialog-top">${(x) => x.ruleDialogTitle}</div>
+  <zero-modal ${ref('dialog')} class="dialog" :onCloseCallback=${(x) => () => x.close()}>
+    <div slot="top" class="dialog-top">${(x) => x.ruleDialogTitle}</div>
 
-    <div class="rule-dialog-content">
+    <div class="dialog-content">
       <div class="content-row">
         <div class="control">
           <label>Name</label>
@@ -53,10 +52,11 @@ export const RuleDialogTemplate = 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
@@ -90,11 +90,11 @@ export const RuleDialogTemplate = html `
 
       <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 `
                 <rule-condition-builder
-                  :resource=${(x, c) => c.parent.resource}
+                  :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))}
@@ -103,16 +103,13 @@ export const RuleDialogTemplate = html `
           </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="rule-dialog-bottom">
+    <div slot="bottom" class="dialog-bottom">
       <zero-button appearance="accent" @click=${(x) => x.submit()}>Submit</zero-button>
     </div>
   </zero-modal>

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

@@ -2,10 +2,3 @@ export const RuleDialogMode = {
     CREATE: 'create',
     EDIT: 'edit',
 };
-export var UpdateType;
-(function (UpdateType) {
-    UpdateType["INSERT"] = "INSERT";
-    UpdateType["MODIFY"] = "MODIFY";
-    UpdateType["DELETE"] = "DELETE";
-})(UpdateType || (UpdateType = {}));
-export const defaultUpdateType = [UpdateType.INSERT];

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

@@ -2,7 +2,7 @@ import { __awaiter, __decorate } from "tslib";
 import { showNotificationDialog } from '@genesislcap/foundation-notifications';
 import { css, customElement, FASTElement, html, ref, repeat } from '@microsoft/fast-element';
 import { RuleService } from '../../../../services/rule.service';
-import { rulesAndTemplatesStyles } from '../../styles/rules-and-templates.styles';
+import { DynamicRuleManagementStyles } from '../../styles/dynamic-rule.styles';
 import { RULE_MANAGEMENT_COLUMNS } from './columns';
 import { RuleDialogMode } from './rule-dialog/rule-dialog.types';
 let RuleManagement = class RuleManagement extends FASTElement {
@@ -63,7 +63,7 @@ RuleManagement = __decorate([
     <rule-dialog ${ref('ruleDialog')}></rule-dialog>
   `,
         styles: css `
-    ${rulesAndTemplatesStyles}
+    ${DynamicRuleManagementStyles}
   `,
     })
 ], RuleManagement);

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

@@ -0,0 +1,169 @@
+import { __awaiter, __decorate } from "tslib";
+import { FASTElement, attr, customElement, observable } from '@microsoft/fast-element';
+import { LogicalOperator, RightCriteria, nullAndBlankLogicalOperatorValues, } from '../../../../../../notify.types';
+import { logger } from '../../../../../../utils';
+import { ConditionBuilderStyles } from '../../../../styles/condition-builder.styles';
+import { TemplateConditionBuilderTemplate } from './template-condition-builder.template';
+let TemplateConditionBuilder = class TemplateConditionBuilder extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.leftValueItems = [];
+        this.rightCriteria = RightCriteria.VALUE;
+        this.rightValueItems = [];
+        // #endregion
+    }
+    deleteCondition() {
+        this.$emit('delete', this.condition);
+    }
+    conditionChanged() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.fields) {
+                this.leftValueItems = this.fields;
+            }
+            this.assignLeftValue();
+            this.logicalOperator = this.condition.LOGICAL_OPERATOR;
+            const rightValue = this.condition.RIGHT_VALUE;
+            this.rightCriteria = this.condition.RIGHT_CRITERIA;
+            this.condition.RIGHT_VALUE = rightValue;
+            this.assignRightValue();
+            this.$emit('edit', this.condition);
+        });
+    }
+    parametersChanged() {
+        if (!Array.isArray(this.parameters) || !this.parameters) {
+            return;
+        }
+        this.rightValueItems = this.parameters;
+    }
+    fieldsChanged() {
+        if (!Array.isArray(this.fields) || !this.fields.length) {
+            return;
+        }
+        this.leftValueItems = this.fields;
+        this.leftValue = JSON.stringify(this.leftValueItems[0]);
+    }
+    logicalOperatorChanged() {
+        if (!this.condition) {
+            return;
+        }
+        if (nullAndBlankLogicalOperatorValues.includes(LogicalOperator[this.logicalOperator])) {
+            this.rightCriteria = RightCriteria.VALUE;
+            this.clearRightValueText();
+        }
+        this.condition.LOGICAL_OPERATOR = this.logicalOperator;
+        this.$emit('edit', this.condition);
+    }
+    // #region LeftValue
+    assignLeftValue() {
+        // Add (fresh new; assign the 1st element)
+        if (!this.condition.LEFT_VALUE) {
+            this.leftValue = JSON.stringify(this.leftValueItems[0]);
+            return;
+        }
+        // Add (value changed)
+        if (typeof this.condition.LEFT_VALUE !== 'string') {
+            this.leftValue = JSON.stringify(this.condition.LEFT_VALUE);
+            return;
+        }
+        // Edit
+        this.leftValue = JSON.stringify(this.leftValueItems.find((item) => item.FIELD_NAME === this.condition.LEFT_VALUE));
+    }
+    leftValueChanged() {
+        if (!this.condition) {
+            return;
+        }
+        this.condition.LEFT_VALUE = JSON.parse(this.leftValue);
+        this.$emit('edit', this.condition);
+    }
+    // #endregion
+    // #region RightValue
+    assignRightValue() {
+        var _a;
+        if (this.condition.RIGHT_CRITERIA === RightCriteria.VALUE) {
+            this.rightValueText = this.condition.RIGHT_VALUE;
+            return;
+        }
+        if (((_a = this.parameters) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            this.rightValueSelect = this.condition.RIGHT_VALUE;
+            return;
+        }
+        this.rightValueSelect = null;
+    }
+    rightCriteriaChanged() {
+        if (!this.condition) {
+            return;
+        }
+        this.condition.RIGHT_CRITERIA = this.rightCriteria;
+        switch (this.rightCriteria) {
+            case RightCriteria.VALUE:
+                this.clearRightValueText();
+                break;
+            case RightCriteria.USER_ENTRY:
+                this.clearRightValueSelect();
+                break;
+            default:
+                logger.error(`Unknown RightCriteria: ${this.rightCriteria}`);
+                break;
+        }
+        this.$emit('edit', this.condition);
+    }
+    clearRightValueText() {
+        this.rightValueText = '';
+    }
+    clearRightValueSelect() {
+        var _a;
+        this.rightValueSelect = ((_a = this.parameters) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.parameters[0].UUID : null;
+    }
+    rightValueTextChanged() {
+        if (!this.condition) {
+            return;
+        }
+        this.condition.RIGHT_VALUE = this.rightValueText;
+        this.$emit('edit', this.condition);
+    }
+    rightValueSelectChanged() {
+        if (!this.condition) {
+            return;
+        }
+        this.condition.RIGHT_VALUE = this.rightValueSelect;
+        this.$emit('edit', this.condition);
+    }
+};
+__decorate([
+    attr
+], TemplateConditionBuilder.prototype, "condition", void 0);
+__decorate([
+    attr
+], TemplateConditionBuilder.prototype, "parameters", void 0);
+__decorate([
+    attr
+], TemplateConditionBuilder.prototype, "fields", void 0);
+__decorate([
+    observable
+], TemplateConditionBuilder.prototype, "leftValue", void 0);
+__decorate([
+    observable
+], TemplateConditionBuilder.prototype, "leftValueItems", void 0);
+__decorate([
+    observable
+], TemplateConditionBuilder.prototype, "logicalOperator", void 0);
+__decorate([
+    observable
+], TemplateConditionBuilder.prototype, "rightCriteria", void 0);
+__decorate([
+    observable
+], TemplateConditionBuilder.prototype, "rightValueText", void 0);
+__decorate([
+    observable
+], TemplateConditionBuilder.prototype, "rightValueSelect", void 0);
+__decorate([
+    observable
+], TemplateConditionBuilder.prototype, "rightValueItems", void 0);
+TemplateConditionBuilder = __decorate([
+    customElement({
+        name: 'template-condition-builder',
+        template: TemplateConditionBuilderTemplate,
+        styles: ConditionBuilderStyles,
+    })
+], TemplateConditionBuilder);
+export { TemplateConditionBuilder };

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

@@ -0,0 +1,66 @@
+import { sync } from '@genesislcap/foundation-utils';
+import { html, repeat, when } from '@microsoft/fast-element';
+import { classNames } from '@microsoft/fast-web-utilities';
+import { LogicalOperator, RightCriteria, nullAndBlankLogicalOperatorValues, } from '../../../../../../notify.types';
+export const TemplateConditionBuilderTemplate = html `
+  <div class="condition-builder">
+    <zero-select
+      :value=${sync((x) => x.leftValue)}
+      :initialValue=${sync((x) => x.leftValue)}
+      class="left-value"
+    >
+      ${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${(x) => classNames([
+    '-null-and-blank',
+    nullAndBlankLogicalOperatorValues.includes(LogicalOperator[x.logicalOperator]),
+])}"
+      :value=${sync((x) => x.logicalOperator)}
+    >
+      ${repeat((_) => Object.values(LogicalOperator), html `
+          <zero-option value=${(x) => x}>${(x) => x}</zero-option>
+        `)}
+    </zero-select>
+
+    ${when((x) => !nullAndBlankLogicalOperatorValues.includes(LogicalOperator[x.logicalOperator]), html `
+        <zero-select class="right-criteria" :value=${sync((x) => x.rightCriteria)}>
+          ${repeat((_) => Object.values(RightCriteria), html `
+              <zero-option value=${(x) => x}>${(x) => x}</zero-option>
+            `)}
+        </zero-select>
+
+        ${when((x) => x.rightCriteria === RightCriteria.VALUE, html `
+            <zero-text-field
+              class="right-criteria-text"
+              :value=${sync((x) => x.rightValueText)}
+              placeholder="Value"
+              autocomplete="off"
+            ></zero-text-field>
+          `)}
+        ${when((x) => x.rightCriteria === RightCriteria.USER_ENTRY, html `
+            <zero-select class="right-criteria-select" :value=${sync((x) => x.rightValueSelect)}>
+              ${(x) => rightValueItemsOptions(x.rightValueItems)}
+            </zero-select>
+          `)}
+      `)}
+
+    <zero-button appearance="icon" class="delete" @click=${(x) => x.deleteCondition()}>
+      <zero-icon
+        style="opacity: 0.5"
+        variant="regular"
+        name="trash-alt"
+        size="lg"
+        part="icon"
+      ></zero-icon>
+    </zero-button>
+  </div>
+`;
+const rightValueItemsOptions = (rightValueItems) => html `
+  ${repeat((x) => rightValueItems, html `
+      <zero-option value="${(x) => { var _a; return (_a = x.UUID) !== null && _a !== void 0 ? _a : ''; }}">${(x) => { var _a; return (_a = x.PARAM_NAME) !== null && _a !== void 0 ? _a : ''; }}</zero-option>
+    `)}
+`;

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 { 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, } 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.resource = ''; // TODO: Tables + Views
         this.updateType = defaultUpdateType;
         this.parameters = [];
         this.conditions = [];
         this.resources = [];
         this.fields = [];
         this.topics = [];
+        this.templateDialogMode = null;
+        // #endregion
     }
     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,75 @@ 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) });
+        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 +117,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 +158,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];
@@ -182,13 +169,6 @@ 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);
-        });
-    }
 };
 __decorate([
     TemplateService
@@ -246,9 +226,9 @@ __decorate([
 ], TemplateDialog.prototype, "templateDialogMode", void 0);
 TemplateDialog = __decorate([
     customElement({
-        name,
-        template,
-        styles,
+        name: 'template-dialog',
+        template: TemplateDialogTemplate,
+        styles: DynamicRuleDialogStyles,
     })
 ], TemplateDialog);
 export { TemplateDialog };