@genesislcap/pbc-notify-ui 1.0.1 → 1.0.2

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

@@ -44,25 +44,26 @@ export const TemplateDialogStyles = css `
     display: flex;
     justify-content: center;
     flex-direction: column;
-    padding: 8px
   }
 
   .content-row {
     display: flex;
     gap: 8px;
+    margin-bottom: 8px;
   }
 
   .control {
     display: flex;
     flex-direction: column;
     width: 100%;
+    min-width: 0;
   }
 
   .conditions,
   .parameters {
-    height: 150px;
+    height: 100px;
     width: 940px;
-    max-height: 200px;
+    max-height: 150px;
     border: 1px solid #2e3339;
     border-radius: 4px;
     display: flex;
@@ -74,7 +75,6 @@ export const TemplateDialogStyles = css `
   .template-dialog-footer {
     display: flex;
     flex-direction: row;
-    margin: 0px 8px 8px 0px;
   }
 
   .complete {
@@ -87,9 +87,20 @@ export const TemplateDialogStyles = css `
   .parameter {
     gap: 0px;
     flex-direction: column;
+    margin-bottom: 0px;
+  }
+
+  zero-select {
+    min-width: 0;
+  }
+
+  zero-select::part(control) {
   }
 
   zero-select::part(listbox) {
     max-height: 160px;
   }
+
+  zero-select::part(selected-value) {
+  }
 `;

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

@@ -1,21 +1,20 @@
 import { sync } from '@genesislcap/foundation-utils';
-import { html, repeat } from "@microsoft/fast-element";
+import { html, ref, repeat } from "@microsoft/fast-element";
 import { eventDetail } from '../../utils/eventDetail';
 import { ALL_RULE_EXECUTION_STRATEGIES } from '../../types/rule-execution-strategy';
+import { ALL_SEVERITIES } from '../../types/severity';
 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>
+  <zero-modal
+    ${ref('dialog')}
+    class="template-dialog"
+    :onCloseCallback=${(x) => () => x.close()}
+  >
+    <div slot="top" class="template-dialog-header-title">
+      ${x => x.templateDialogTitle}
     </div>
 
     <div class="template-dialog-content">
-      <div class="content-row" style="margin-bottom: 8px;">
+      <div class="content-row">
         <div class="control">
           <label>Name</label>
           <zero-text-field
@@ -47,6 +46,29 @@ export const TemplateDialogTemplate = html `
           </zero-select>
         </div>
 
+        <div class="control">
+          <label>Table ID</label>
+          <zero-select
+            :value=${sync(x => x.tableId)}
+            position="below"
+          >
+            ${repeat(x => x.fields, 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
@@ -58,13 +80,44 @@ export const TemplateDialogTemplate = html `
           </zero-select>
         </div>
       </div>
+
+    <div class="content-row">
+      <div class="control">
+        <label>Severity</label>
+        <zero-select
+          :value=${sync(x => x.severity)}
+        >
+          ${repeat(x => 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)}
+        >
+        </zero-text-field>
+      </div>
+    </div>
+
+      <div class="content-row">
+        <div class="control">
+          <label>Message</label>
+          <zero-text-field
+            :value=${sync(x => x.message)}
+          >
+          </zero-text-field>
+        </div>
+      </div>
         
-      <div class="content-row" style="margin-top: 8px;">
+      <div class="content-row" style="margin-bottom: 0px">
         <label>Parameter(s)</label>
       </div>
       
       <div class="parameters">
-        <div class="content-row condition">
+        <div class="content-row parameter">
           ${repeat(x => x.parameters, html `
               <parameter-builder
                 :parameter=${x => x}
@@ -84,11 +137,11 @@ export const TemplateDialogTemplate = html `
         </div>
       </div>
 
-      <div class="content-row" style="margin-top: 8px;">
+      <div class="content-row" style="margin-bottom: 0px; margin-top: 8px">
         <label>Condition(s)</label>
       </div>
       
-      <div class="conditions">
+      <div class="conditions" style="margin-bottom: 8px;">
         <div class="content-row condition">
           ${repeat(x => x.conditions, html `
               <condition-builder
@@ -114,7 +167,6 @@ export const TemplateDialogTemplate = html `
 
     <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()}
         >
@@ -122,5 +174,5 @@ export const TemplateDialogTemplate = html `
         </zero-button>
       </div>
     </div>
-  </fast-dialog>
+  </zero-modal>
 `;

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

@@ -1,8 +1,9 @@
 import { __decorate } from "tslib";
+import { EXPRESSION_TYPE_FIELD, EXPRESSION_TYPE_PLACEHOLDER, EXPRESSION_TYPE_STRING } from "../../types/expression-type";
 import { LOGICAL_OPERATOR_EQUALS } from "../../types/logical-operator";
 import { PARAM_SOURCE_TYPE_USER_TEXT } from "../../types/param-source-type";
-import { PARAM_TYPE_STRING } from "../../types/param-type";
-import { RIGHT_CRITERIA_VALUE } from "../../types/right-criteria";
+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 { UUID } from '@genesislcap/foundation-utils';
 export class UUIDGenerator {
     static createUuid() {
@@ -31,3 +32,85 @@ export function createEmptyParameter() {
         PARAM_SOURCE: null,
     };
 }
+export function createAssignment(field, value) {
+    return {
+        FIELD: {
+            TYPE: 'FIELD',
+            NAME: field
+        },
+        VALUE: {
+            TYPE: 'STRING',
+            VALUE: value
+        }
+    };
+}
+export function getAssignmentValue(assignments, field) {
+    return assignments.find(assignment => assignment.FIELD.NAME === field).VALUE.VALUE;
+}
+export function createConditions(conditions, parameters) {
+    return conditions.map(condition => {
+        return {
+            LEFT: getLeftExpression(condition),
+            OPERATION: condition.LOGICAL_OPERATOR,
+            RIGHT: getRightExpression(condition, parameters)
+        };
+    });
+}
+export function getLeftExpression(condition) {
+    const leftType = getLeftType(condition);
+    if (PARAM_TYPE_STRING === leftType) {
+        return {
+            TYPE: PARAM_TYPE_STRING,
+            VALUE: condition.LEFT_VALUE.FIELD_NAME
+        };
+    }
+    return {
+        TYPE: PARAM_TYPE_FIELD,
+        NAME: condition.LEFT_VALUE.FIELD_NAME
+    };
+}
+export function getLeftType(condition) {
+    switch (condition.LEFT_VALUE.FIELD_TYPE) {
+        case PARAM_TYPE_BOOLEAN:
+            return PARAM_TYPE_FIELD;
+        case 'INTEGER':
+        case 'DOUBLE':
+        case 'LONG':
+        case 'SHORT':
+        case 'BIGDECIMAL':
+            return PARAM_TYPE_NUMBER;
+        default:
+            return PARAM_TYPE_STRING;
+    }
+}
+export function getRightExpression(condition, parameters) {
+    if (condition.RIGHT_CRITERIA === RIGHT_CRITERIA_USER_ENTRY) {
+        return {
+            TYPE: EXPRESSION_TYPE_PLACEHOLDER,
+            KEY: parameters.find(parameter => parameter.UUID === condition.RIGHT_VALUE).PARAM_NAME
+        };
+    }
+    if (condition.LEFT_VALUE.FIELD_TYPE === EXPRESSION_TYPE_STRING) {
+        return {
+            TYPE: EXPRESSION_TYPE_STRING,
+            VALUE: condition.RIGHT_VALUE
+        };
+    }
+    return {
+        TYPE: EXPRESSION_TYPE_FIELD,
+        NAME: condition.RIGHT_VALUE
+    };
+}
+export function createParameterDetails(parameters) {
+    return parameters.reduce((acc, parameter) => {
+        var _a;
+        acc[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 acc;
+    }, {});
+}

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

@@ -3,8 +3,25 @@ export const managementGridStyles = css `
   :host {
     height: 100%;
   }
+`;
+export const rulesAndTemplatesStyles = css `
+  .container {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+  }
+
+  .header {
+    display: flex;
+  }
+
+  .grid {
+    height: 100%;
+  }
 
-  entity-management::part(header) {
-    display: none;
+  zero-button.add {
+    margin: 0px;
+    margin-left: auto;
+    margin-bottom: 6px;
   }
 `;

package/dist/esm/components/foundation-notification-dashboard/management/notify-audit-management.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { customElement, FASTElement, html } from '@microsoft/fast-element';
+import { css, customElement, FASTElement, html } from '@microsoft/fast-element';
 import { managementGridStyles } from './management.styles';
 let NotifyAuditManagement = class NotifyAuditManagement extends FASTElement {
 };
@@ -12,7 +12,13 @@ NotifyAuditManagement = __decorate([
       resourceName="ALL_NOTIFY_AUDIT"
     ></entity-management>
   `,
-        styles: managementGridStyles,
+        styles: css `
+    ${managementGridStyles}
+
+    entity-management::part(header) {
+      display: none;
+    }
+  `
     })
 ], NotifyAuditManagement);
 export { NotifyAuditManagement };

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

@@ -4,6 +4,8 @@ import { css, customElement, FASTElement, html, ref, repeat } from '@microsoft/f
 import { RuleService } from '../../../services/rule.service';
 import { RuleDialogMode } from '../components/rule-dialog';
 import { deleteIcon, editIcon } from '../utils/icons';
+import { rulesAndTemplatesStyles } from './management.styles';
+import { showNotificationDialog } from '@genesislcap/foundation-notifications';
 export const ruleColumns = (context) => [
     {
         field: 'NAME',
@@ -59,7 +61,20 @@ let RuleManagement = class RuleManagement extends FASTElement {
         });
     }
     deleteRule(rule) {
-        this.ruleService.deleteRule(rule.ID);
+        showNotificationDialog({
+            title: 'Confirm Delete',
+            body: 'Do you really want to delete this rule?',
+            dialog: {
+                dismissingAction: {
+                    label: 'Dismiss',
+                    action: () => null
+                },
+                confirmingActions: [{
+                        label: 'Confirm',
+                        action: () => this.ruleService.deleteRule(rule.ID)
+                    }],
+            },
+        }, 'zero');
     }
 };
 __decorate([
@@ -69,36 +84,32 @@ RuleManagement = __decorate([
     customElement({
         name: 'rule-management',
         template: html `
-    <zero-button 
-      class="create-template"
-      @click=${x => x.openRuleDialog()}
+    <div class="container">
+      <div class="header">
+        <zero-button 
+          class="add"
+          @click=${x => x.openRuleDialog()}
+        >
+          <zero-icon name="plus" size="lg" variant="solid"></zero-icon>Create
+        </zero-button>
+      </div>
+      <div class="grid">
+        <zero-grid-pro only-template-col-defs>
+          <grid-pro-genesis-datasource resource-name="ALL_DYNAMIC_NOTIFY_RULES">
+            ${repeat(x => ruleColumns(x), html `
+                <grid-pro-column :definition=${x => x} />
+              `)}
+          </grid-pro-genesis-datasource> 
+        </zero-grid-pro>
+      </div>
+    </div>
+    <rule-dialog
+      ${ref('ruleDialog')}
     >
-      <zero-icon name="plus" size="lg" variant="solid"></zero-icon>
-      Create Rule
-    </zero-button>
-    <zero-grid-pro only-template-col-defs>
-      <grid-pro-genesis-datasource resource-name="ALL_DYNAMIC_NOTIFY_RULES">
-        ${repeat(x => ruleColumns(x), html `
-            <grid-pro-column :definition=${x => x} />
-          `)}
-      </grid-pro-genesis-datasource> 
-    </zero-grid-pro>
-    <rule-dialog ${ref('ruleDialog')}></rule-dialog>
+    </rule-dialog>
   `,
         styles: css `
-    :host {
-      height: 100%;
-    }
-
-    zero-button.create-template {
-      margin: 0px;
-      margin-left: auto;
-      margin-bottom: 6px;
-    }
-
-    zero-button::part(control) {
-      display: block;
-    }
+    ${rulesAndTemplatesStyles}
   `,
     })
 ], RuleManagement);

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

@@ -1,10 +1,11 @@
 import { __awaiter, __decorate } from "tslib";
 import { buttonCellRenderer } from '@genesislcap/foundation-entity-management';
-import { css, customElement, FASTElement, html, observable, repeat, when } from '@microsoft/fast-element';
+import { css, customElement, FASTElement, html, ref, repeat } from '@microsoft/fast-element';
 import { RuleTemplateService } from '../../../services/rule-template.service';
 import { TemplateDialogMode } from '../components/template-dialog/template-dialog.types';
 import { deleteIcon, editIcon } from '../utils/icons';
-import { managementGridStyles } from './management.styles';
+import { rulesAndTemplatesStyles } from './management.styles';
+import { showNotificationDialog } from '@genesislcap/foundation-notifications';
 const ruleTemplateColumns = (context) => [
     {
         field: 'NAME',
@@ -16,95 +17,99 @@ const ruleTemplateColumns = (context) => [
         headerName: 'Description',
         flex: 1
     },
+    {
+        field: 'USER_NAME',
+        headerName: 'Username',
+        flex: 1
+    },
     {
         field: 'RULE_TABLE',
         headerName: 'Table',
         flex: 1
     },
+    {
+        field: 'RULE_STATUS',
+        headerName: 'Status',
+        flex: 1
+    },
     {
         field: 'RULE_EXPRESSION',
         headerName: 'Expression',
         flex: 1
     },
     {
-        field: 'RULE_STATUS',
-        headerName: 'Status',
+        field: 'RESULT_EXPRESSION',
+        headerName: 'Result',
         flex: 1
     },
-    buttonCellRenderer('Edit', (e) => context.openTemplateModal(e), editIcon),
+    {
+        field: 'RULE_EXECUTION_STRATEGY',
+        headerName: 'Execution Strategy',
+        flex: 1,
+    },
+    buttonCellRenderer('Edit', (e) => context.editTemplate(e), editIcon),
     buttonCellRenderer('Delete', (e) => context.deleteTemplate(e), deleteIcon)
 ];
 let RuleTemplateManagement = class RuleTemplateManagement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.templateDialogMode = null;
-        this.ruleTemplateData = null;
+    openTemplateDialog() {
+        this.templateDialog.openDialog({ mode: TemplateDialogMode.CREATE });
     }
-    openTemplateModal(ruleTemplate) {
+    editTemplate(row) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!ruleTemplate) {
-                // Add
-                this.ruleTemplateData = null;
-                this.templateDialogMode = TemplateDialogMode.CREATE;
-                return;
-            }
-            // Edit
-            this.ruleTemplateData = yield this.ruleTemplateService.getRuleTemplateDetails(ruleTemplate.ID);
-            this.templateDialogMode = TemplateDialogMode.EDIT;
+            const ruleTemplate = yield this.ruleTemplateService.getRuleTemplateDetails(row.ID);
+            this.templateDialog.openDialog({ mode: TemplateDialogMode.EDIT, data: ruleTemplate });
         });
     }
-    closeTemplateModal() {
-        this.templateDialogMode = null;
-        this.ruleTemplateData = null;
-    }
-    deleteTemplate(ruleTemplate) {
-        this.ruleTemplateService.deleteRuleTemplate(ruleTemplate.ID);
+    deleteTemplate(row) {
+        showNotificationDialog({
+            title: 'Confirm Delete',
+            body: 'Do you really want to delete this template?',
+            dialog: {
+                dismissingAction: {
+                    label: 'Dismiss',
+                    action: () => null
+                },
+                confirmingActions: [{
+                        label: 'Confirm',
+                        action: () => this.ruleTemplateService.deleteRuleTemplate(row.ID)
+                    }],
+            },
+        }, 'zero');
     }
 };
 __decorate([
     RuleTemplateService
 ], RuleTemplateManagement.prototype, "ruleTemplateService", void 0);
-__decorate([
-    observable
-], RuleTemplateManagement.prototype, "templateDialogMode", void 0);
-__decorate([
-    observable
-], RuleTemplateManagement.prototype, "ruleTemplateData", void 0);
 RuleTemplateManagement = __decorate([
     customElement({
         name: 'rule-template-management',
         template: html `
-    <zero-button class="create-template" @click=${x => x.openTemplateModal()}>
-      <zero-icon name="plus" size="lg" variant="solid"></zero-icon>Add
-    </zero-button>
-    <zero-grid-pro only-template-col-defs>
-      <grid-pro-genesis-datasource resource-name="ALL_RULE_TEMPLATES">
-        ${repeat(x => ruleTemplateColumns(x), html `
-            <grid-pro-column :definition=${x => x} />
-          `)}
-      </grid-pro-genesis-datasource> 
-    </zero-grid-pro>
-    ${when(x => x.templateDialogMode != null, html `
-        <template-dialog
-          @close=${x => x.closeTemplateModal()}
-          :templateDialogMode=${x => x.templateDialogMode}
-          :ruleTemplateData=${x => x.ruleTemplateData}
+    <div class="container">
+      <div class="header">
+        <zero-button
+          class="add"
+          @click=${x => x.openTemplateDialog()}
         >
-        </template-dialog>
-      `)}
+          <zero-icon name="plus" size="lg" variant="solid"></zero-icon>Create
+        </zero-button>
+      </div>
+      <div class="grid">
+        <zero-grid-pro only-template-col-defs>
+          <grid-pro-genesis-datasource resource-name="ALL_RULE_TEMPLATES">
+            ${repeat(x => ruleTemplateColumns(x), html `
+                <grid-pro-column :definition=${x => x} />
+              `)}
+          </grid-pro-genesis-datasource> 
+        </zero-grid-pro>
+      </div>
+    </div>
+    <template-dialog
+      ${ref('templateDialog')}
+    >
+    </template-dialog>
   `,
         styles: css `
-    ${managementGridStyles}
-
-    zero-button.create-template {
-      margin: 0px;
-      margin-left: auto;
-      margin-bottom: 6px;
-    }
-
-    zero-button::part(control) {
-      display: block;
-    }
+    ${rulesAndTemplatesStyles}
   `,
     })
 ], RuleTemplateManagement);

package/dist/esm/components/foundation-notification-dashboard/management/screen-route-management.js

@@ -12,7 +12,8 @@ ScreenRouteManagement = __decorate([
       createEvent="EVENT_SCREEN_NOTIFY_ROUTE_CREATE"
       updateEvent="EVENT_SCREEN_NOTIFY_ROUTE_UPDATE"
       deleteEvent="EVENT_SCREEN_NOTIFY_ROUTE_DELETE"
-    ></entity-management>
+    >
+  </entity-management>
   `,
         styles: managementGridStyles,
     })

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

@@ -1,6 +1,6 @@
 import { __awaiter, __decorate } from "tslib";
-import { FASTElement, customElement, observable } from '@microsoft/fast-element';
 import * as Components from '../index';
+import { FASTElement, customElement, observable } from '@microsoft/fast-element';
 import { FoundationNotificationDashboardStyles as styles } from './notification-dashboard.styles';
 import { FoundationNotificationDashboardTemplate as template } from './notification-dashboard.template';
 /**

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

@@ -1,10 +1,10 @@
 export const SEVERITY_INFORMATION = 'INFORMATION';
-export const SEVERITY_WARNING = 'WARNING';
 export const SEVERITY_CRITICAL = 'CRITICAL';
 export const SEVERITY_SERIOUS = 'SERIOUS';
+export const SEVERITY_WARNING = 'WARNING';
 export const ALL_SEVERITIES = [
     SEVERITY_INFORMATION,
-    SEVERITY_WARNING,
     SEVERITY_CRITICAL,
-    SEVERITY_SERIOUS
+    SEVERITY_SERIOUS,
+    SEVERITY_WARNING
 ];