@genesislcap/pbc-notify-ui 1.0.3 → 1.0.5

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

@@ -4,12 +4,10 @@ import { observable, customElement, FASTElement } from '@microsoft/fast-element'
 import { InboxStyles as styles } from './inbox.styles';
 import { InboxTab, FoundationInboxTemplate as template } from './inbox.template';
 import { RuleStatus } from './inbox.types';
-import { RuleTemplateService } from '../../services/rule-template.service';
-import { RuleService } from '../../services/rule.service';
-import { PARAM_SOURCE_TYPE_DEFINED_GROUP } from '../foundation-notification-dashboard/types/param-source-type';
-import { EMPTY_HTML, createParametersOperatorMap, createSubscribeComponent } from './inbox.utils';
+import { logger, updateArray } from '../../utils';
 import { AlertService } from '../../services/alert.service';
-import { logger } from '../../utils';
+import { RuleService } from '../../services/rule.service';
+import { TemplateService } from '../../services/template.service';
 /**
  * Foundation inbox component for displaying notifies list.
  * Allow searching, filtering and deleting notifies
@@ -27,17 +25,13 @@ let FoundationInbox = class FoundationInbox extends FASTElement {
         this.templates = [];
         this.templatesFilter = [];
         this.searchSubscribe = '';
-        this.parametersDetails = {};
-        this.ruleTemplateSelected = null;
-        this.subscribeToAlertComponent = EMPTY_HTML;
-        this.subscribeDisabled = false;
+        this.ruleTemplateDetails = null;
         this.flyoutClosed = true;
         // #endregion
         // #region Changed Events
         this.alertsChanged = () => this.alertsFilter = this.alerts;
         this.rulesChanged = () => this.rulesFilter = this.rules;
         this.templatesChanged = () => this.templatesFilter = this.templates;
-        this.verifySubscribe = () => this.subscribeDisabled = !Object.values(this.parametersDetails).every(x => x !== '');
         this.searchAlertLogChanged = () => {
             if (!this.searchAlertLog) {
                 this.alertsFilter = this.alerts;
@@ -63,18 +57,27 @@ let FoundationInbox = class FoundationInbox extends FASTElement {
         });
         return __awaiter(this, void 0, void 0, function* () {
             _super.connectedCallback.call(this);
+            this.alertService.getAlerts().subscribe({
+                next: (streamMessage) => {
+                    var _a;
+                    const alerts = (_a = streamMessage.ROW) !== null && _a !== void 0 ? _a : null;
+                    this.alerts = updateArray(alerts, this.alerts);
+                },
+                error: (error) => {
+                    logger.error(error);
+                },
+            });
         });
     }
     open() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.alerts = yield this.alertService.getAlerts();
             this.rules = yield this.ruleService.getRules();
             this.templates = yield this.ruleTemplateService.getRuleTemplates();
             this.flyoutClosed = false;
         });
     }
     close() {
-        this.cleanSubscriptionFields();
+        this.ruleTemplateDetails = null;
         this.flyout.closeFlyout();
     }
     // #region Tabs
@@ -85,11 +88,9 @@ let FoundationInbox = class FoundationInbox extends FASTElement {
     }
     inboxTabChanged(inboxTab) {
         return __awaiter(this, void 0, void 0, function* () {
-            logger.log('inboxTab Changed:', InboxTab[inboxTab.toString()]);
-            this.cleanSubscriptionFields();
+            this.ruleTemplateDetails = null;
             switch (inboxTab) {
                 case InboxTab.AlertLog:
-                    this.alerts = yield this.alertService.getAlerts();
                     break;
                 case InboxTab.MyAlerts:
                     this.rules = yield this.ruleService.getRules();
@@ -139,44 +140,17 @@ let FoundationInbox = class FoundationInbox extends FASTElement {
     }
     // #endregion
     // #region Subscribe
-    openAlertSubscription(ruleTemplate) {
+    openTemplateSubscription(ruleTemplate) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (this.ruleTemplateSelected) {
+            if (this.ruleTemplateDetails) {
                 // Close
-                this.cleanSubscriptionFields();
+                this.ruleTemplateDetails = null;
                 return;
             }
             // Open
-            this.ruleTemplateSelected = yield this.ruleTemplateService.getRuleTemplateDetails(ruleTemplate.ID);
-            const parameters = this.ruleTemplateSelected.PARAMETERS;
-            Object.keys(parameters).forEach(key => {
-                const parameter = parameters[key];
-                if (parameter.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_DEFINED_GROUP) {
-                    // Attribute 1st group value for select fields
-                    this.parametersDetails[parameter.PARAM_NAME] = parameter.PARAM_SOURCE.split(',')[0];
-                }
-                this.parametersDetails[parameter.PARAM_NAME] = '';
-            });
-            this.subscribeToAlertComponent = createSubscribeComponent(parameters, createParametersOperatorMap(this.ruleTemplateSelected.RULE_EXPRESSION.CONDITIONS));
-            this.verifySubscribe();
+            this.ruleTemplateDetails = yield this.ruleTemplateService.getRuleTemplateDetails(ruleTemplate.ID);
         });
     }
-    parameterEdit(parameter, valueTyped) {
-        this.parametersDetails[parameter.PARAM_NAME] = valueTyped;
-        this.verifySubscribe();
-    }
-    subscribeAlert() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.ruleService.subscribeRule(this.ruleTemplateSelected.DYNAMIC_RULE_ID, this.parametersDetails);
-            this.cleanSubscriptionFields();
-        });
-    }
-    cleanSubscriptionFields() {
-        this.ruleTemplateSelected = null;
-        this.parametersDetails = {};
-        this.subscribeToAlertComponent = EMPTY_HTML;
-        this.subscribeDisabled = false;
-    }
     // #endregion
     /**
      * Load remote components
@@ -215,7 +189,7 @@ __decorate([
     observable
 ], FoundationInbox.prototype, "rulesFilter", void 0);
 __decorate([
-    RuleTemplateService
+    TemplateService
 ], FoundationInbox.prototype, "ruleTemplateService", void 0);
 __decorate([
     observable
@@ -228,13 +202,7 @@ __decorate([
 ], FoundationInbox.prototype, "searchSubscribe", void 0);
 __decorate([
     observable
-], FoundationInbox.prototype, "ruleTemplateSelected", void 0);
-__decorate([
-    observable
-], FoundationInbox.prototype, "subscribeToAlertComponent", void 0);
-__decorate([
-    observable
-], FoundationInbox.prototype, "subscribeDisabled", void 0);
+], FoundationInbox.prototype, "ruleTemplateDetails", void 0);
 __decorate([
     observable
 ], FoundationInbox.prototype, "flyoutClosed", void 0);

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

@@ -4,6 +4,7 @@ import { css } from '@microsoft/fast-element';
  */
 export const InboxStyles = css `
   zero-flyout::part(flyout) {
+    background: var(--neutral-layer-4);
     width: 30%;
     min-width: 320px;
     padding: 0;
@@ -21,15 +22,6 @@ export const InboxStyles = css `
     background: var(--neutral-layer-4);
     display: flex;
     flex-direction: column;
-    /* overflow-y: auto; */
-    /* max-height: 100%; */
-  }
-
-  .loading-spinner-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
   }
   
   /* Tabs */
@@ -55,7 +47,7 @@ export const InboxStyles = css `
   /* Search */
   .search {
     padding: calc(var(--design-unit) * 3px) calc(var(--design-unit) * 3px);
-    border-bottom: solid 1px #2E3339;
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
     flex: 0;
   }
 
@@ -75,11 +67,11 @@ export const InboxStyles = css `
     align-items: center;
     justify-content: space-between;
     padding: calc(var(--design-unit) * 3px) calc(var(--design-unit) * 3px);
-    border-bottom: 1px solid #4B585F;
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
   }
 
   .inbox-header-title {
-    font-size: 16px;
+    font-size: calc(var(--design-unit) * 4px);
     font-weight: 700;
     padding: 0;
     margin: 0 auto 0 0;
@@ -123,23 +115,20 @@ export const InboxStyles = css `
     overflow: auto;
   }
 
-  .no-notifications-info {
-    padding: calc(var(--design-unit) * 5px) 0;
-    margin: 0;
-    text-align: center;
-    font-size: 16px;
-  }
-
   .toast {
     display: flex;
     flex-direction: row;
-    border-bottom: solid 1px #2E3339;
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
   }
 
   .toast-severity {
-    width: 4px;
+    width: calc(var(--design-unit) * 1px);
     background-color: white;
-    margin: 10px 0px 10px 10px;
+    margin:
+      calc(var(--design-unit) * 2px)
+      calc(var(--design-unit) * 0px)
+      calc(var(--design-unit) * 2px)
+      calc(var(--design-unit) * 2px);
   }
 
   .toast-header {
@@ -157,12 +146,16 @@ export const InboxStyles = css `
     display: flex;
     flex-direction: column;
     width: 100%;
-    padding: 10px 0px 10px 10px;
+    margin:
+      calc(var(--design-unit) * 2px)
+      calc(var(--design-unit) * 0px)
+      calc(var(--design-unit) * 2px)
+      calc(var(--design-unit) * 2px);
   }
 
   .toast-date {
     color: var(--neutral-foreground-hint);
-    font-size: 12px;
+    font-size: calc(var(--design-unit) * 3px)
   }
 
   .toast-delete {
@@ -170,13 +163,10 @@ export const InboxStyles = css `
     display: flex;
     justify-content: center;
     align-items: center;
-    border-left: solid 1px #2E3339;
+    border-left: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
     visibility: hidden;
   }
 
-  .toast:hover {
-  }
-
   .toast:hover > .toast-delete {
     cursor: pointer;
     visibility: visible;
@@ -189,62 +179,51 @@ export const InboxStyles = css `
 
   /* My Alerts */
   .my-alerts-tab-panel {
-    
     display: flex;
     flex-direction: column;
     min-height: 0;
     flex: 1;
-    
   }
 
   .my-alerts-tab-content {
-    
     flex: 1;
     overflow: auto;
-    
   }
   /***/
   
   /* Subscribe */
   .subscribe-tab-panel {
-    
     display: flex;
     flex-direction: column;
     min-height: 0;
     flex: 1;
-    
   }
 
   .subscribe-tab-content {
-    
     flex: 1;
     overflow: auto;
-    
   }
   /***/
 
-  .wrapper {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    flex: 1;
+  /* Rule and Template */
+  .template {
+    cursor: pointer;
   }
 
   .rule,
-  .rule-template {
-    border-bottom: 1px solid #2E3339;
-    padding: 10px;
-    cursor: default;
+  .template {
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    padding: calc(var(--design-unit) * 2px);
   }
 
   .rule-status-actions {
     display: flex;
     flex-direction: row;
-    gap: 8px;
+    gap: calc(var(--design-unit) * 2px);
   }
   
   .rule:hover,
-  .rule-template:hover {
+  .template:hover {
     background-color: #2e3034;
   }
 
@@ -255,7 +234,7 @@ export const InboxStyles = css `
   .rule-actions {
     margin-left: auto;
     display: flex;
-    gap: 12px;
+    gap: calc(var(--design-unit) * 3px);
     justify-content: space-between;
     visibility: hidden;
   }
@@ -269,7 +248,7 @@ export const InboxStyles = css `
   }
 
   .rule-datetime,
-  .rule-template-datetime {
+  .template-datetime {
     color: #879ba6;
   }
 
@@ -278,62 +257,5 @@ export const InboxStyles = css `
   .rule-action-delete {
     cursor: pointer;
   }
-
-  .rule-template {
-    cursor: pointer;
-  }
-
-  /* Subscribe to Alert*/
-  .subscribe-to-alert {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .subscribe-to-alert-header {
-    border-top: solid 1px #4B585F;
-    border-bottom: solid 1px #4B585F;
-    padding: 10px;
-  }
-
-  .subscribe-to-alert-content {
-    padding: 10px 10px 0px;
-    overflow: auto;
-    max-height: 100px;
-    border: 1px solid #2E3339;
-    margin: 10px;
-  }
-
-  .subscribe-to-alert-footer {
-    padding: 10px;
-    border-top: solid 1px #4B585F;
-  }
-
-  zero-button.subscribe {
-    display: flex;
-    margin: 0px;
-    width: 100%;
-  }
-
-  .control {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    padding-bottom: 10px;
-  }
-
-  label {
-    margin-bottom: 6px;
-  }
-
-  .input-field {
-    display: flex;
-  }
-  
-  .input-field::part(root) {
-    width: 100%;
-  }
-
-  zero-select::part(listbox) {
-    max-height: 160px;
-  }
+  /***/
 `;