@genesislcap/pbc-notify-ui 1.0.64 → 14.308.0

package/src/components/foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder.ts

@@ -0,0 +1,124 @@
+import type { Select, TextField } from '@genesislcap/rapid-design-system';
+import { attr, customElement, GenesisElement, observable } from '@genesislcap/web-core';
+import {
+  PARAM_SOURCE_TYPE_DEFINED_GROUP,
+  PARAM_SOURCE_TYPE_REQ_REP,
+} from '../../../../types/param-source-type';
+import { ParameterBuilderEntity } from '../template-dialog.types';
+import { ParameterBuilderStyles as styles } from './parameter-builder.styles';
+import { ParameterBuilderTemplate as template } from './parameter-builder.template';
+
+const name = 'parameter-builder';
+
+@customElement({
+  name,
+  template,
+  styles,
+})
+export class ParameterBuilder extends GenesisElement {
+  @attr parameter: ParameterBuilderEntity;
+
+  @observable name: string;
+  @observable label: string;
+  @observable type: string;
+  @observable sourceType: string;
+
+  @observable sourceSelected: string;
+  @observable sourceTyped: string;
+
+  sourceTextField: TextField;
+  sourceSelect: Select;
+
+  reqRepItems = ['REQUEST_1', 'REQUEST_2', 'REQUEST_3'];
+
+  async connectedCallback() {
+    super.connectedCallback();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+
+  deleteParameter() {
+    this.$emit('delete', this.parameter as ParameterBuilderEntity);
+  }
+
+  // #region Changed Parameters
+  parameterChanged() {
+    this.name = this.parameter.PARAM_NAME;
+    this.label = this.parameter.PARAM_LABEL;
+    this.type = this.parameter.PARAM_TYPE;
+    const paramTemp = this.parameter.PARAM_SOURCE; // Can be cleaned
+    this.sourceType = this.parameter.PARAM_SOURCE_TYPE;
+
+    switch (this.sourceType) {
+      case PARAM_SOURCE_TYPE_REQ_REP:
+        this.sourceSelected = this.parameter.PARAM_SOURCE ?? paramTemp;
+        break;
+      case PARAM_SOURCE_TYPE_DEFINED_GROUP:
+        this.sourceTyped = this.parameter.PARAM_SOURCE ?? paramTemp;
+        break;
+      default:
+        break;
+    }
+  }
+
+  nameChanged() {
+    this.genericChanged('PARAM_NAME', this.name);
+  }
+
+  labelChanged() {
+    this.genericChanged('PARAM_LABEL', this.label);
+  }
+
+  typeChanged() {
+    this.genericChanged('PARAM_TYPE', this.type);
+  }
+
+  sourceTypeChanged() {
+    this.genericChanged('PARAM_SOURCE_TYPE', this.sourceType);
+
+    switch (this.sourceType) {
+      case PARAM_SOURCE_TYPE_REQ_REP:
+        this.sourceTyped = '';
+        break;
+      case PARAM_SOURCE_TYPE_DEFINED_GROUP:
+        this.sourceSelected = this.reqRepItems[0];
+        break;
+      default:
+        this.sourceSelected = this.reqRepItems[0];
+        this.sourceTyped = '';
+        break;
+    }
+  }
+
+  sourceSelectedChanged() {
+    if (this.sourceType !== PARAM_SOURCE_TYPE_REQ_REP) {
+      return;
+    }
+
+    this.genericChanged('PARAM_SOURCE', this.sourceSelected);
+  }
+
+  sourceTypedChanged() {
+    if (this.sourceType !== PARAM_SOURCE_TYPE_DEFINED_GROUP) {
+      return;
+    }
+
+    this.genericChanged('PARAM_SOURCE', this.sourceTyped);
+  }
+  // #endregion
+
+  private genericChanged(parameterAttribute, value) {
+    if (!this.parameter) {
+      return;
+    }
+
+    if (this.parameter[parameterAttribute] === value) {
+      return;
+    }
+
+    this.parameter[parameterAttribute] = value;
+    this.$emit('edit', this.parameter as ParameterBuilderEntity);
+  }
+}

package/src/components/foundation-notification-dashboard/components/templates/template-dialog/template-condition-builder/template-condition-builder.template.ts

@@ -0,0 +1,107 @@
+import { FieldTypeEnum } from '@genesislcap/foundation-comms';
+import { sync } from '@genesislcap/foundation-utils';
+import { classNames, html, repeat, when, whenElse } from '@genesislcap/web-core';
+import {
+  LogicalOperator,
+  RightCriteria,
+  nullAndBlankLogicalOperatorValues,
+} from '../../../../../../notify.types';
+import { Field } from '../../../../../../services/system.service';
+import type { TemplateConditionBuilder } from './template-condition-builder';
+
+export const TemplateConditionBuilderTemplate = html<TemplateConditionBuilder>`
+  <div class="condition-builder">
+    <rapid-select
+      :value=${sync((x) => x.leftValue)}
+      :initialValue=${sync((x) => x.leftValue)}
+      class="left-value"
+    >
+      ${repeat(
+        (x) => x.leftValueItems,
+        html<Field>`
+          <rapid-option value=${(x) => JSON.stringify(x)}>${(x) => x.FIELD_NAME}</rapid-option>
+        `,
+      )}
+    </rapid-select>
+
+    <rapid-select
+      class="logical-operator${(x) =>
+        classNames([
+          '-null-and-blank',
+          nullAndBlankLogicalOperatorValues.includes(LogicalOperator[x.logicalOperator]),
+        ])}"
+      :value=${sync((x) => x.logicalOperator)}
+    >
+      ${repeat(
+        (_) => Object.values(LogicalOperator),
+        html`
+          <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>
+        `,
+      )}
+    </rapid-select>
+
+    ${when(
+      (x) => !nullAndBlankLogicalOperatorValues.includes(LogicalOperator[x.logicalOperator]),
+      html`
+        <rapid-select class="right-criteria" :value=${sync((x) => x.rightCriteria)}>
+          ${repeat(
+            (_) => Object.values(RightCriteria),
+            html`
+              <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>
+            `,
+          )}
+        </rapid-select>
+
+        ${when(
+          (x) => x.rightCriteria === RightCriteria.VALUE,
+          html<TemplateConditionBuilder>`
+            ${whenElse(
+              (x) => JSON.parse(x.leftValue ?? '{}').FIELD_TYPE === FieldTypeEnum.BOOLEAN,
+              html`
+                <rapid-select class="right-criteria-select" :value=${sync((x) => x.rightValueText)}>
+                  <rapid-option value="true">true</rapid-option>
+                  <rapid-option value="false">false</rapid-option>
+                </rapid-select>
+              `,
+              html`
+                <rapid-text-field
+                  class="right-criteria-text"
+                  :value=${sync((x) => x.rightValueText)}
+                  placeholder="Value"
+                  autocomplete="off"
+                ></rapid-text-field>
+              `,
+            )}
+          `,
+        )}
+        ${when(
+          (x) => x.rightCriteria === RightCriteria.USER_ENTRY,
+          html<TemplateConditionBuilder>`
+            <rapid-select class="right-criteria-select" :value=${sync((x) => x.rightValueSelect)}>
+              ${(x) => rightValueItemsOptions(x.rightValueItems)}
+            </rapid-select>
+          `,
+        )}
+      `,
+    )}
+
+    <rapid-button appearance="icon" class="delete" @click=${(x) => x.deleteCondition()}>
+      <rapid-icon
+        style="opacity: 0.5"
+        variant="regular"
+        name="trash-alt"
+        size="lg"
+        part="icon"
+      ></rapid-icon>
+    </rapid-button>
+  </div>
+`;
+
+const rightValueItemsOptions = (rightValueItems) => html`
+  ${repeat(
+    (x) => rightValueItems,
+    html`
+      <rapid-option value="${(x) => x.UUID ?? ''}">${(x) => x.PARAM_NAME ?? ''}</rapid-option>
+    `,
+  )}
+`;

package/src/components/foundation-notification-dashboard/components/templates/template-dialog/template-condition-builder/template-condition-builder.ts

@@ -0,0 +1,185 @@
+import { FieldTypeEnum } from '@genesislcap/foundation-comms';
+import { attr, customElement, GenesisElement, observable } from '@genesislcap/web-core';
+import {
+  ConditionBuilderEntity,
+  LogicalOperator,
+  RightCriteria,
+  nullAndBlankLogicalOperatorValues,
+} from '../../../../../../notify.types';
+import { logger } from '../../../../../../utils';
+import { ConditionBuilderStyles } from '../../../../styles/condition-builder.styles';
+import { ParameterBuilderEntity } from '../template-dialog.types';
+import { TemplateConditionBuilderTemplate } from './template-condition-builder.template';
+
+@customElement({
+  name: 'template-condition-builder',
+  template: TemplateConditionBuilderTemplate,
+  styles: ConditionBuilderStyles,
+})
+export class TemplateConditionBuilder extends GenesisElement {
+  @attr condition: ConditionBuilderEntity;
+  @attr parameters: Array<ParameterBuilderEntity> = [];
+  @attr fields: Array<string> = [];
+
+  @observable leftValue: any = null;
+  @observable leftValueItems: Array<any> = [];
+
+  @observable logicalOperator: string = null;
+  @observable rightCriteria: string = RightCriteria.VALUE;
+  @observable rightValueText: string = null;
+  @observable rightValueSelect: string = null;
+  @observable rightValueItems: Array<any> = [];
+
+  deleteCondition() {
+    this.$emit('delete', this.condition as ConditionBuilderEntity);
+  }
+
+  async conditionChanged() {
+    if (this.fields) {
+      this.leftValueItems = this.fields;
+    }
+
+    const rightValue = this.condition.RIGHT_VALUE;
+    this.assignLeftValue();
+    this.logicalOperator = this.condition.LOGICAL_OPERATOR;
+    this.rightCriteria = this.condition.RIGHT_CRITERIA;
+    this.condition.RIGHT_VALUE = rightValue;
+    this.assignRightValue();
+
+    this.$emit('edit', this.condition as ConditionBuilderEntity);
+  }
+
+  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 as ConditionBuilderEntity);
+  }
+
+  // #region LeftValue
+  private assignLeftValue() {
+    if (!this.condition.LEFT_VALUE) {
+      // Add (fresh new; assign the 1st element)
+      this.leftValue = JSON.stringify(this.leftValueItems[0]);
+    } else if (typeof this.condition.LEFT_VALUE !== 'string') {
+      // Add (value changed)
+      this.leftValue = JSON.stringify(this.condition.LEFT_VALUE);
+    } else {
+      // Edit
+      this.leftValue = JSON.stringify(
+        this.leftValueItems.find((item) => item.FIELD_NAME === this.condition.LEFT_VALUE),
+      );
+    }
+
+    this.condition.LEFT_VALUE = JSON.parse(this.leftValue ?? '{}');
+  }
+
+  leftValueChanged() {
+    if (!this.condition) {
+      return;
+    }
+
+    this.condition.LEFT_VALUE = JSON.parse(this.leftValue ?? '{}');
+
+    if (this.condition.LEFT_VALUE.FIELD_TYPE === FieldTypeEnum.BOOLEAN) {
+      this.rightValueText = 'true';
+    } else {
+      this.clearRightValueText();
+    }
+
+    this.$emit('edit', this.condition as ConditionBuilderEntity);
+  }
+  // #endregion
+
+  // #region RightValue
+  private assignRightValue() {
+    if (this.condition.RIGHT_CRITERIA === RightCriteria.VALUE) {
+      this.rightValueText = this.condition.RIGHT_VALUE;
+      return;
+    }
+
+    if (this.parameters?.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:
+        if (this.condition.LEFT_VALUE.FIELD_TYPE === FieldTypeEnum.BOOLEAN) {
+          this.rightValueText = 'true';
+        } else {
+          this.clearRightValueText();
+        }
+        break;
+      case RightCriteria.USER_ENTRY:
+        this.clearRightValueSelect();
+        break;
+      default:
+        logger.error(`Unknown RightCriteria: ${this.rightCriteria}`);
+        break;
+    }
+
+    this.$emit('edit', this.condition as ConditionBuilderEntity);
+  }
+
+  private clearRightValueText() {
+    this.rightValueText = '';
+  }
+
+  private clearRightValueSelect() {
+    this.rightValueSelect = this.parameters?.length > 0 ? this.parameters[0].UUID : null;
+  }
+
+  rightValueTextChanged() {
+    if (!this.condition) {
+      return;
+    }
+
+    this.condition.RIGHT_VALUE = this.rightValueText;
+    this.$emit('edit', this.condition as ConditionBuilderEntity);
+  }
+
+  rightValueSelectChanged() {
+    if (!this.condition) {
+      return;
+    }
+
+    this.condition.RIGHT_VALUE = this.rightValueSelect;
+    this.$emit('edit', this.condition as ConditionBuilderEntity);
+  }
+  // #endregion
+}

package/src/components/foundation-notification-dashboard/components/templates/template-dialog/template-dialog.template.ts

@@ -0,0 +1,139 @@
+import { sync } from '@genesislcap/foundation-utils';
+import { html, ref, repeat } from '@genesislcap/web-core';
+import { ConditionBuilderEntity, Severity, UpdateType } from '../../../../../notify.types';
+import { eventDetail } from '../../../../../utils/eventDetail';
+import type { TemplateDialog } from './template-dialog';
+
+export const TemplateDialogTemplate = html<TemplateDialog>`
+  <rapid-modal ${ref('dialog')} class="dialog" :onCloseCallback=${(x) => () => x.close()}>
+    <div slot="top" class="dialog-top">${(x) => x.templateDialogTitle}</div>
+
+    <div class="dialog-content">
+      <div class="content-row">
+        <div class="control">
+          <rapid-text-field :value=${sync((x) => x.name)} autofocus>Name</rapid-text-field>
+        </div>
+
+        <div class="control">
+          <rapid-text-field :value=${sync((x) => x.description)}>Description</rapid-text-field>
+        </div>
+      </div>
+
+      <div class="content-row">
+        <div class="control">
+          <label>Resource</label>
+          <rapid-select :value=${sync((x) => x.resource)} position="below">
+            ${repeat(
+              (x) => x.resources,
+              html`
+                <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>
+              `,
+            )}
+          </rapid-select>
+        </div>
+
+        <div class="control">
+          <label>Topic</label>
+          <rapid-select :value=${sync((x) => x.topic)}>
+            ${repeat(
+              (x) => x.topics,
+              html`
+                <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>
+              `,
+            )}
+          </rapid-select>
+        </div>
+
+        <div class="control">
+          <label>Severity</label>
+          <rapid-select :value=${sync((x) => x.severity)}>
+            <options-datasource
+              value-field="value"
+              label-field="value"
+              option-element="rapid-option"
+              :data=${(_) => Object.values(Severity).map((value) => ({ value }))}
+            ></options-datasource>
+          </rapid-select>
+        </div>
+
+        <div class="control">
+          <label>Update Type</label>
+          <rapid-multiselect
+            :selectedOptions=${(x) => x.updateType}
+            @selectionChange=${(x, c) => {
+              x.updateType = (c.event as CustomEvent).detail;
+            }}
+            search="false"
+            all="false"
+          >
+            <multiselect-datasource
+              value-field="value"
+              label-field="value"
+              :data=${() => Object.values(UpdateType).map((value) => ({ value, label: value }))}
+            ></multiselect-datasource>
+          </rapid-multiselect>
+        </div>
+      </div>
+
+      <div class="content-row">
+        <div class="control">
+          <rapid-text-field :value=${sync((x) => x.header)}>Header</rapid-text-field>
+        </div>
+
+        <div class="control">
+          <rapid-text-field :value=${sync((x) => x.message)}>Message</rapid-text-field>
+        </div>
+      </div>
+
+      <div class="control">
+        <label>Parameter(s)</label>
+        <div class="items">
+          <div class="content-row item">
+            ${repeat(
+              (x) => x.parameters,
+              html`
+                <parameter-builder
+                  :parameter=${(x) => x}
+                  @edit=${(x, c) => c.parent.editParameter(eventDetail(c))}
+                  @delete=${(x, c) => c.parent.deleteParameter(eventDetail(c))}
+                ></parameter-builder>
+              `,
+            )}
+          </div>
+
+          <div class="content-row">
+            <rapid-button @click=${(x) => x.newParameter()}>+ Parameter</rapid-button>
+          </div>
+        </div>
+      </div>
+
+      <div class="control">
+        <label>Condition(s)</label>
+        <div class="items">
+          <div class="content-row item">
+            ${repeat(
+              (x) => x.conditions,
+              html<ConditionBuilderEntity>`
+                <template-condition-builder
+                  :fields=${(x, c) => c.parent.fields}
+                  :parameters=${(x, c) => c.parent.parameters}
+                  :condition=${(x) => x}
+                  @edit=${(x, c) => c.parent.editCondition(eventDetail(c))}
+                  @delete=${(x, c) => c.parent.deleteCondition(eventDetail(c))}
+                ></template-condition-builder>
+              `,
+            )}
+          </div>
+
+          <div class="content-row">
+            <rapid-button @click=${(x) => x.newCondition()}>+ Condition</rapid-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div slot="bottom" class="dialog-bottom">
+      <rapid-button appearance="primary" @click=${(x) => x.submit()}>Submit</rapid-button>
+    </div>
+  </rapid-modal>
+`;