@genesislcap/pbc-notify-ui 1.0.4 → 1.0.6

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

@@ -11,175 +11,162 @@ export var InboxTab;
  * @public
  */
 export const FoundationInboxTemplate = html `
-  <zero-flyout ${ref('flyout')} position="right" @closed=${(x) => (x.flyoutClosed = true)} :closed=${(x) => x.flyoutClosed} displayHeader=${false}>
-  <div class="inbox-header">
-    <div class="inbox-header-title">
-      Alerts
+  <zero-flyout
+    ${ref('flyout')}
+    position="right"
+    @closed=${(x) => (x.flyoutClosed = true)}
+    :closed=${(x) => x.flyoutClosed}
+    displayHeader=${false}
+  >
+    <div class="inbox-header">
+      <div class="inbox-header-title">
+        Alerts
+      </div>
+      <zero-button
+        class="inbox-header-close"
+        @click=${x => x.close()}
+      >
+        <zero-icon part="icon" name="xmark" size="xl"></zero-icon>
+      </zero-button>
     </div>
-    <zero-button
-      class="inbox-header-close"
-      @click=${x => x.close()}
-    >
-      <zero-icon part="icon" name="xmark" size="xl"></zero-icon>
-    </zero-button>
-  </div>
 
-  <div class="inbox-content">
-    <zero-tabs
-      ${(ref('tabs'))}
-      appearance="secondary"
-      activeid=${x => InboxTab.AlertLog}
-    >
-      <zero-tab
-        slot="alert-log-tab"
-        id=${x => InboxTab.AlertLog}
-        @click=${x => x.inboxTabChanged(InboxTab.AlertLog)}
-        appearance="secondary"
-      >
-        Alert Log
-      </zero-tab>
-      <zero-tab
-        slot="my-alerts-tab"
-        id=${x => InboxTab.MyAlerts}
-        @click=${x => x.inboxTabChanged(InboxTab.MyAlerts)}
-        appearance="secondary"
-      >
-        My Alerts
-      </zero-tab>
-      <zero-tab
-        slot="subscribe-tab"
-        id=${x => InboxTab.Subscribe}
-        @click=${x => x.inboxTabChanged(InboxTab.Subscribe)}
-        appearance="secondary"
-      >
-        Subscribe
-      </zero-tab>
-      
-      <zero-tab-panel
-        slot="alert-log-tab"
-        class="alert-log-tab-panel"
-        id=${x => InboxTab.AlertLog}
-        style=${x => x.checkActiveTab(InboxTab.AlertLog)}
-      >
-        <div class="search">
-          <zero-text-field
-            class="search-input"
-            :value=${sync((x) => x.searchAlertLog)}
-            placeholder="Search Alerts..."
-            autocomplete="off"
-          >
-          </zero-text-field>
-        </div>
-        <div class="alert-log-tab-content">
-          ${repeat(x => x.alertsFilter, html `
-              <div class="toast" id=${(x) => x.ALERT_ID}>
-                <div class="toast-severity" style="background-color: ${(x) => getSeverityColor(x.NOTIFY_SEVERITY)}"></div>
-                <div class="toast-content">
-                  <span class="toast-header">${(x) => x.HEADER}</span>
-                  <span class="toast-message">${(x) => x.MESSAGE}</span>
-                  <div class="toast-bottom" slot="bottom">
-                    <span class="toast-date" slot="date">${(x) => getFormattedDate(x.CREATED_AT)}</span>
+    <div class="inbox-content">
+      <zero-tabs ${(ref('tabs'))} appearance="secondary" activeid=${x => InboxTab.AlertLog}>
+        <zero-tab slot="alert-log-tab"
+          id=${x => InboxTab.AlertLog}
+          @click=${x => x.inboxTabChanged(InboxTab.AlertLog)}
+          appearance="secondary"
+        >
+          Alert Log
+        </zero-tab>
+        <zero-tab
+          slot="my-alerts-tab"
+          id=${x => InboxTab.MyAlerts}
+          @click=${x => x.inboxTabChanged(InboxTab.MyAlerts)}
+          appearance="secondary"
+        >
+          My Alerts
+        </zero-tab>
+        <zero-tab
+          slot="subscribe-tab"
+          id=${x => InboxTab.Subscribe}
+          @click=${x => x.inboxTabChanged(InboxTab.Subscribe)}
+          appearance="secondary"
+        >
+          Subscribe
+        </zero-tab>
+        
+        <!-- Alerts -->
+        <zero-tab-panel
+          slot="alert-log-tab"
+          class="alert-log-tab-panel"
+          id=${x => InboxTab.AlertLog}
+          style=${x => x.checkActiveTab(InboxTab.AlertLog)}
+        >
+          <div class="search">
+            <zero-text-field
+              class="search-input"
+              :value=${sync((x) => x.searchAlertLog)}
+              placeholder="Search Alerts..."
+              autocomplete="off"
+            >
+            </zero-text-field>
+          </div>
+          <div class="alert-log-tab-content">
+            ${repeat(x => x.alertsFilter, html `
+                <div class="toast" id=${(x) => x.ALERT_ID}>
+                  <div class="toast-severity" style="background-color: ${(x) => getSeverityColor(x.NOTIFY_SEVERITY)}"></div>
+                  <div class="toast-content">
+                    <span class="toast-header">${(x) => x.HEADER}</span>
+                    <span class="toast-message">${(x) => x.MESSAGE}</span>
+                    <div class="toast-bottom" slot="bottom">
+                      <span class="toast-date" slot="date">${(x) => getFormattedDate(x.CREATED_AT)}</span>
+                    </div>
+                  </div>
+                  <div class="toast-delete" @click=${(x, c) => c.parent.deleteNotifyAlert(x.ALERT_ID)}>
+                    <zero-icon name="xmark" variant="solid" size="lg"><zero-icon>
                   </div>
                 </div>
-                <div class="toast-delete" @click=${(x, c) => c.parent.deleteNotifyAlert(x.ALERT_ID)}>
-                  <zero-icon name="xmark" variant="solid" size="lg"><zero-icon>
-                </div>
-              </div>
-            `)}
-        </div>
-      </zero-tab-panel>
+              `)}
+          </div>
+        </zero-tab-panel>
 
-      <zero-tab-panel
-        slot="my-alerts-tab"
-        class="my-alerts-tab-panel"
-        id=${x => InboxTab.MyAlerts}
-        style=${x => x.checkActiveTab(InboxTab.MyAlerts)}
-      >
-        <div class="my-alerts-tab-content">
-          ${repeat((x) => x.rulesFilter, html `
-              <div class="rule">
-                <div class="rule-name">${x => x.NAME}</div>
-                <div class="rule-expression">${x => x.RULE_EXPRESSION}</div>
-                <div class="rule-datetime">${(x, c) => getFormattedDate(x.DATETIME)}</div>
-                <div class="rule-status-actions">
-                  <div class="rule-status ${x => getStatus(x.RULE_STATUS).toLowerCase()}">
-                    ${(x, c) => getStatus(x.RULE_STATUS)}
-                  </div>
-                  <div class="rule-actions">
-                    <!--
-                    <span class="rule-action-edit" @click=${(x, c) => c.parent.editAlert(x)}}>
-                      <zero-icon name="gear"></zero-icon>
-                    </span>
-                    -->
-                    <span class="rule-action-enable-disable" @click=${(x, c) => c.parent.playPauseAlert(x)}>
-                      <zero-icon name=${x => getIcon(x.RULE_STATUS)}></zero-icon>
-                    </span>
-                    <span class="rule-action-delete" @click=${(x, c) => c.parent.deleteAlert(x)}>
-                      <zero-icon name="trash"></zero-icon>
-                    </span>
+        <!-- Rules -->
+        <zero-tab-panel
+          slot="my-alerts-tab"
+          class="my-alerts-tab-panel"
+          id=${x => InboxTab.MyAlerts}
+          style=${x => x.checkActiveTab(InboxTab.MyAlerts)}
+        >
+          <div class="my-alerts-tab-content">
+            ${repeat((x) => x.rulesFilter, html `
+                <div class="rule">
+                  <div class="rule-name">${x => x.NAME}</div>
+                  <div class="rule-expression">${x => x.RULE_EXPRESSION}</div>
+                  <div class="rule-datetime">${(x, c) => getFormattedDate(x.DATETIME)}</div>
+                  <div class="rule-status-actions">
+                    <div class="rule-status ${x => getStatus(x.RULE_STATUS).toLowerCase()}">
+                      ${(x, c) => getStatus(x.RULE_STATUS)}
+                    </div>
+                    <div class="rule-actions">
+                      <!--
+                      <span class="rule-action-edit" @click=${(x, c) => c.parent.editAlert(x)}}>
+                        <zero-icon name="gear"></zero-icon>
+                      </span>
+                      -->
+                      <span class="rule-action-enable-disable" @click=${(x, c) => c.parent.playPauseAlert(x)}>
+                        <zero-icon name=${x => getIcon(x.RULE_STATUS)}></zero-icon>
+                      </span>
+                      <span class="rule-action-delete" @click=${(x, c) => c.parent.deleteAlert(x)}>
+                        <zero-icon name="trash"></zero-icon>
+                      </span>
+                    </div>
                   </div>
                 </div>
-              </div>
-            `)}
-        </div>
-      </zero-tab-panel>
+              `)}
+          </div>
+        </zero-tab-panel>
 
-      <zero-tab-panel
-        slot="subscribe-tab"
-        class="subscribe-tab-panel"
-        id=${x => InboxTab.Subscribe}
-        style=${x => x.checkActiveTab(InboxTab.Subscribe)}
-      >
-        <div class="search">
-          <zero-text-field
-            class="search-input"
-            :value=${sync(x => x.searchSubscribe)}
-            placeholder="Search Templates..."
-            autocomplete="off"
-          >
-          </zero-text-field>
-        </div>
-        <div
-          class="subscribe-tab-content"
+        <!-- Templates -->
+        <zero-tab-panel
+          slot="subscribe-tab"
+          class="subscribe-tab-panel"
+          id=${x => InboxTab.Subscribe}
+          style=${x => x.checkActiveTab(InboxTab.Subscribe)}
         >
-          ${repeat((x) => x.templatesFilter, html `
-              <div
-                class="rule-template"
-                @click=${(x, c) => c.parent.openAlertSubscription(x)}
-                id=${(x) => x.ID}
+          <div class="search">
+            <zero-text-field
+              class="search-input"
+              :value=${sync(x => x.searchSubscribe)}
+              placeholder="Search Templates..."
+              autocomplete="off"
+            >
+            </zero-text-field>
+          </div>
+          <div
+            class="subscribe-tab-content"
+          >
+            ${repeat((x) => x.templatesFilter, html `
+                <div
+                  class="template"
+                  @click=${(x, c) => c.parent.openTemplateSubscription(x)}
+                  id=${(x) => x.ID}
+                >
+                  <div class="template-name">${x => x.NAME}</div>
+                  <div class="template-description">${x => x.DESCRIPTION}</div>
+                  <div class="template-datetime">${(x, c) => getFormattedDate(x.DATETIME)}</div>
+                </div>
+              `)}
+          </div>
+          ${when(x => x.ruleTemplateDetails, html `
+              <inbox-subscription
+                :template=${x => x.ruleTemplateDetails}
+                @templateSubscribed=${(x, c) => c.parent.ruleTemplateDetails = null}
               >
-                <div class="rule-template-name">${x => x.NAME}</div>
-                <div class="rule-template-description">${x => x.DESCRIPTION}</div>
-                <div class="rule-template-datetime">${(x, c) => getFormattedDate(x.DATETIME)}</div>
-              </div>
+              </inbox-subscription>
             `)}
-        </div>
-        ${when(x => x.ruleTemplateSelected, html `
-            <div class="subscribe-to-alert">
-              <div class="subscribe-to-alert-header">
-                Subscribe to <span style="font-weight: bold;">${x => { var _a; return (_a = x.templates.filter(template => template.ID === x.ruleTemplateSelected.DYNAMIC_RULE_ID)[0]) === null || _a === void 0 ? void 0 : _a.NAME; }}</span>
-              </div>
-              ${when(x => Object.values(x.ruleTemplateSelected.PARAMETERS).length === 0, html `
-                  <p style="padding-left: 10px;">The selected template doesn't have parameters.</p>
-                `)}
-              ${when(x => Object.values(x.ruleTemplateSelected.PARAMETERS).length > 0, html `
-                  <div class="subscribe-to-alert-content">
-                    ${x => x.subscribeToAlertComponent}
-                  </div>
-                `)}
-              <div class="subscribe-to-alert-footer">
-                <zero-button
-                  class="subscribe"
-                  @click=${x => x.subscribeAlert()}
-                  ?disabled=${x => x.subscribeDisabled}
-                >
-                  Subscribe
-                </zero-button>
-              </div>
-            </div>
-          `)}
-      </zero-tab-panel>
-    </zero-tabs>
-  </div>
+        </zero-tab-panel>
+      </zero-tabs>
+    </div>
   </zero-flyout>
 `;

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

@@ -1,87 +1,5 @@
-import { html, repeat, when } from "@microsoft/fast-element";
-import { PARAM_SOURCE_TYPE_DEFINED_GROUP, PARAM_SOURCE_TYPE_REQ_REP, PARAM_SOURCE_TYPE_USER_TEXT } from "../foundation-notification-dashboard/types/param-source-type";
-import { PARAM_TYPE_BOOLEAN, PARAM_TYPE_NUMBER, PARAM_TYPE_STRING } from "../foundation-notification-dashboard/types/param-type";
 import { SEVERITY_CRITICAL, SEVERITY_INFORMATION, SEVERITY_SERIOUS, SEVERITY_WARNING } from "../foundation-notification-dashboard/types/severity";
-import { EXPRESSION_TYPE_PLACEHOLDER } from "../foundation-notification-dashboard/types/expression-type";
 import { chartPinkWebRGBA, primaryBlueWebRGBA, secondaryOrangeWebRGBA, warningYellowWebRGBA } from "@genesislcap/foundation-zero";
-export const EMPTY_HTML = html ``;
-const isFirstElement = (parameters, parameter) => Object.values(parameters).findIndex(p => p.PARAM_NAME === parameter.PARAM_NAME) === 0;
-export const createSubscribeComponent = (parameters, parametersOperatorsMap) => html `
-  ${repeat(x => Object.values(parameters), html `
-      <div class="control">
-        <label>
-          <span style="font-weight: bold;">${x => x.PARAM_LABEL} </span>
-          <span>${x => humanize(parametersOperatorsMap[x.PARAM_NAME]).toLowerCase()}</span>
-        </label>
-        
-        <!-- USER_TEXT -->
-        ${when(x => x.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_USER_TEXT, html `                            
-            ${when(x => x.PARAM_TYPE === PARAM_TYPE_STRING, html `
-                <zero-text-field
-                  autofocus=${x => isFirstElement(parameters, x)}
-                  class="input-field"
-                  @input=${(x, c) => c.parent.parameterEdit(x, c.event.target.value)}
-                >
-                </zero-text-field>
-              `)}
-
-            ${when(x => x.PARAM_TYPE === PARAM_TYPE_NUMBER, html `
-                <zero-number-field
-                  hide-step
-                  autofocus=${x => isFirstElement(parameters, x)}
-                  class="input-field"
-                  @input=${(x, c) => c.parent.parameterEdit(x, c.event.target.value)}
-                >
-                </zero-number-field>
-              `)}
-
-            ${when(x => x.PARAM_TYPE === PARAM_TYPE_BOOLEAN, html `
-                <zero-select
-                  autofocus=${x => isFirstElement(parameters, x)}
-                  class="input-field"
-                  @change=${(x, c) => console.log(x)}
-                >
-                  <zero-option value="true">true</zero-option>
-                  <zero-option value="false">false</zero-option>
-                </zero-select>
-              `)}
-          `)}
-        
-        <!-- DEFINED_GROUP -->
-        ${when(x => x.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_DEFINED_GROUP, html `
-            <zero-select
-              autofocus=${x => isFirstElement(parameters, x)}
-              class="input-field"
-              position="below"
-              @change=${(x, c) => c.parent.parameterEdit(x, c.event.target.value)}
-            >
-              ${repeat(x => x.PARAM_SOURCE.split(','), html `
-                  <zero-option value=${(x) => x}>${(x) => x}</zero-option>
-                `)}
-            </zero-select>
-          `)}
-
-        <!-- TODO: REQ_REP -->
-        ${when(x => x.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_REQ_REP, html `
-            <zero-select
-              autofocus=${x => isFirstElement(parameters, x)}
-              @change=${(x, c) => console.log(x)}
-            >
-            </zero-select>
-          `)}
-      </div>
-    `)}
-`;
-export const humanize = (s) => {
-    if (!s) {
-        return '';
-    }
-    let i, frags = s.split('_');
-    for (i = 0; i < frags.length; i++) {
-        frags[i] = frags[i].charAt(0).toUpperCase() + frags[i].slice(1).toLowerCase();
-    }
-    return frags.join(' ');
-};
 export const getStatus = (ruleStatus) => ruleStatus == 'ENABLED'
     ? 'Active'
     : 'Paused';
@@ -107,11 +25,3 @@ export function getSeverityColor(severity) {
             return '#FF';
     }
 }
-export function createParametersOperatorMap(conditions) {
-    return conditions.reduce((acc, condition) => {
-        if (condition.RIGHT.TYPE == EXPRESSION_TYPE_PLACEHOLDER) {
-            acc[condition.RIGHT.KEY] = condition.OPERATION;
-        }
-        return acc;
-    }, {});
-}

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

@@ -0,0 +1,99 @@
+import { __decorate } from "tslib";
+import { css, customElement, FASTElement, html } from '@microsoft/fast-element';
+import { managementGridStyles } from '../../styles/management.styles';
+const NOTIFY_AUDIT_MANAGEMENT_COLUMNS = [
+    {
+        field: 'ALERT_ID',
+        headerName: 'Alert',
+        flex: 1
+    },
+    {
+        field: 'MESSAGE',
+        headerName: 'Message',
+        flex: 1
+    },
+    {
+        field: 'HEADER',
+        headerName: 'Header',
+        flex: 1
+    },
+    {
+        field: 'USER_NAME',
+        headerName: 'User Name',
+        flex: 1
+    },
+    {
+        field: 'EXPIRY',
+        headerName: 'Expiry',
+        flex: 1
+    },
+    {
+        field: 'NOTIFY_SEVERITY',
+        headerName: 'Notify Serverity',
+        flex: 1
+    },
+    {
+        field: 'CREATED_AT',
+        headerName: 'Created At',
+        flex: 1
+    },
+    {
+        field: 'TABLE_ENTITY_ID',
+        headerName: 'Table Entity Id',
+        flex: 1,
+    },
+    {
+        field: 'TOPIC',
+        headerName: 'Topic',
+        flex: 1,
+    },
+    {
+        field: 'NOTIFY_ALERT_AUDIT_ID',
+        headerName: 'Table Entity Id',
+        flex: 1,
+    },
+    {
+        field: 'AUDIT_EVENT_TYPE',
+        headerName: 'Audit Event Type',
+        flex: 1,
+    },
+    {
+        field: 'AUDIT_EVENT_DATETIME',
+        headerName: 'Audit Event Datetime',
+        flex: 1,
+    },
+    {
+        field: 'AUDIT_EVENT_TEXT',
+        headerName: 'Audit Event Text',
+        flex: 1,
+    },
+    {
+        field: 'AUDIT_EVENT_USER',
+        headerName: 'Audit Event User',
+        flex: 1,
+    },
+];
+let NotifyAuditManagement = class NotifyAuditManagement extends FASTElement {
+};
+NotifyAuditManagement = __decorate([
+    customElement({
+        name: 'notify-audit-management',
+        template: html `
+    <div class="grid">
+      <entity-management
+        resourceName="ALL_NOTIFY_AUDIT"
+        :columns=${() => [...NOTIFY_AUDIT_MANAGEMENT_COLUMNS]}
+      >
+      </entity-management>
+    </div>
+  `,
+        styles: css `
+    ${managementGridStyles}
+
+    entity-management::part(header) {
+      display: none;
+    }
+  `
+    })
+], NotifyAuditManagement);
+export { NotifyAuditManagement };

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

@@ -0,0 +1,59 @@
+import { __decorate } from "tslib";
+import { FASTElement, css, customElement, html } from "@microsoft/fast-element";
+let RouteManagement = class RouteManagement extends FASTElement {
+};
+RouteManagement = __decorate([
+    customElement({
+        name: 'route-management',
+        template: html `
+    <zero-tabs appearance="secondary">
+      <zero-tab appearance="secondary">Screen Routes</zero-tab>
+      <zero-tab appearance="secondary">Email Distribution Routes</zero-tab>
+      <zero-tab appearance="secondary">Email User Routes</zero-tab>
+      <zero-tab appearance="secondary">Log Routes</zero-tab>
+      <zero-tab appearance="secondary">MS Teams Routes</zero-tab>
+      
+      <zero-tab-panel>
+        <screen-route-management></screen-route-management>
+      </zero-tab-panel>
+      <zero-tab-panel>
+        <email-distribution-route-management></email-distribution-route-management>
+      </zero-tab-panel>
+      <zero-tab-panel>
+        <email-user-route-management></email-user-route-management>
+      </zero-tab-panel>
+      <zero-tab-panel>
+        <log-route-management></log-route-management>
+      </zero-tab-panel>
+      <zero-tab-panel>
+        <ms-teams-route-management></ms-teams-route-management>
+      </zero-tab-panel>
+    </zero-tabs>
+  `,
+        styles: css `
+    zero-tabs {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+    
+    zero-tabs::part(tablist) {
+      grid-template-columns: none;
+      flex: 0;
+    }
+    
+    zero-tabs::part(tabpanel) {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-height: 0;
+    }
+
+    zero-tabs,
+    zero-tab-panel {
+      height: 100%;
+    }
+  `,
+    })
+], RouteManagement);
+export { RouteManagement };

package/dist/esm/components/foundation-notification-dashboard/components/routes/tabs/email-distribution-route-management.js

@@ -0,0 +1,56 @@
+import { __decorate } from "tslib";
+import { customElement, FASTElement, html } from '@microsoft/fast-element';
+import { managementGridStyles } from '../../../styles/management.styles';
+const EMAIL_DISTRIBUTION_ROUTE_MANAGEMENT_COLUMNS = [
+    {
+        field: 'NOTIFY_ROUTE_ID',
+        headerName: 'Notify Route Id',
+        flex: 1
+    },
+    {
+        field: 'TOPIC_MATCH',
+        headerName: 'Topic Match',
+        flex: 1
+    },
+    {
+        field: 'GATEWAY_ID',
+        headerName: 'Gateway Id',
+        flex: 1
+    },
+    {
+        field: 'EMAIL_TO',
+        headerName: 'Email To',
+        flex: 1
+    },
+    {
+        field: 'EMAIL_CC',
+        headerName: 'Email Cc',
+        flex: 1
+    },
+    {
+        field: 'EMAIL_BCC',
+        headerName: 'Email Bcc',
+        flex: 1
+    },
+];
+let EmailDistributionRouteManagement = class EmailDistributionRouteManagement extends FASTElement {
+};
+EmailDistributionRouteManagement = __decorate([
+    customElement({
+        name: 'email-distribution-route-management',
+        template: html `
+    <div class="grid">
+      <entity-management
+        resourceName="ALL_EMAIL_DISTRIBUTION_ROUTES"
+        createEvent="EVENT_EMAIL_DISTRIBUTION_ROUTE_CREATE"
+        updateEvent="EVENT_DYNAMIC_RULE_NOTIFY_UPDATE"
+        deleteEvent="EVENT_DYNAMIC_RULE_NOTIFY_DELETE"
+        :columns=${() => [...EMAIL_DISTRIBUTION_ROUTE_MANAGEMENT_COLUMNS]}
+      >
+      </entity-management>
+    </div>
+  `,
+        styles: managementGridStyles
+    })
+], EmailDistributionRouteManagement);
+export { EmailDistributionRouteManagement };