@genesislcap/pbc-notify-ui 1.0.30 → 1.0.32

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

@@ -1,29 +1,23 @@
 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>
-          <zero-text-field
-            :value=${sync((x) => x.name)}
-            autofocus
-            autocomplete="off"
-          ></zero-text-field>
+          <zero-text-field :value=${sync((x) => x.name)} autofocus autocomplete="off" required>
+            Name
+          </zero-text-field>
         </div>
 
         <div class="control">
-          <label>Description</label>
-          <zero-text-field
-            :value=${sync((x) => x.description)}
-            autocomplete="off"
-          ></zero-text-field>
+          <zero-text-field :value=${sync((x) => x.description)} autocomplete="off" required>
+            Description
+          </zero-text-field>
         </div>
       </div>
 
@@ -53,10 +47,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
@@ -78,23 +73,25 @@ export const RuleDialogTemplate = html `
 
       <div class="content-row">
         <div class="control">
-          <label>Header</label>
-          <zero-text-field :value=${sync((x) => x.header)} autocomplete="off"></zero-text-field>
+          <zero-text-field required :value=${sync((x) => x.header)} autocomplete="off">
+            Header
+          </zero-text-field>
         </div>
 
         <div class="control">
-          <label>Message</label>
-          <zero-text-field :value=${sync((x) => x.message)} autocomplete="off"></zero-text-field>
+          <zero-text-field required :value=${sync((x) => x.message)} autocomplete="off">
+            Message
+          </zero-text-field>
         </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 `
                 <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,17 +100,20 @@ 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">
-      <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/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

@@ -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 { 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 {
@@ -62,9 +62,7 @@ RuleManagement = __decorate([
 
     <rule-dialog ${ref('ruleDialog')}></rule-dialog>
   `,
-        styles: css `
-    ${rulesAndTemplatesStyles}
-  `,
+        styles: DynamicRuleManagementStyles,
     })
 ], RuleManagement);
 export { 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>
+    `)}
+`;