ato-water-lib 0.0.36 → 0.0.38

package/src/lib/components/asset-flow/asset-flow.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AssetFlowComponent } from './asset-flow.component';
-
-describe('AssetFlowComponent', () => {
-  let component: AssetFlowComponent;
-  let fixture: ComponentFixture<AssetFlowComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ AssetFlowComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(AssetFlowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/asset-flow/asset-flow.component.ts

@@ -1,137 +0,0 @@
-import {
-  Component,
-  EventEmitter,
-  HostListener,
-  Input,
-  OnInit,
-  Output,
-  ViewChild,
-} from '@angular/core';
-import * as go from 'gojs';
-import _ from 'lodash';
-import { AtoGoJSBase64 } from '../../constants/base64.const';
-import { ATO_ASSET_LAYERS, ATO_COMPONENTS_GROUP_DATA } from '../../constants/components-group-const';
-import { AtoGoJSData } from '../../models/gojs-data.model';
-import { AtoGojsEditorModel } from '../../models/gojs-editor.model';
-import { AtoAssetParamsViewComponent } from '../asset-params-view/asset-params-view.component';
-import { AtoFlowDiagramLibComponent } from '../flow-diagram-lib/flow-diagram-lib.component';
-
-export interface AtoDefaultFlowData {
-  systemType: string; 
-  isUseBase64?: boolean;
-  assetLayer?: string;
-}
-
-@Component({
-  selector: 'ato-asset-flow',
-  templateUrl: './asset-flow.component.html',
-  styleUrls: ['./asset-flow.component.scss'],
-})
-export class AssetFlowComponent implements OnInit {
-  @Input() assetLayer: string;
-  @ViewChild(AtoFlowDiagramLibComponent)
-  gjFlowDiagramTemp: AtoFlowDiagramLibComponent;
-  @ViewChild(AtoAssetParamsViewComponent)
-  assetParamsViewTemp: AtoAssetParamsViewComponent;
-  @Input() selectedComponent: any;
-  @Input() systemType: AtoGojsEditorModel.ENUM_TYPES;
-  @Output() onClickParamOfTableEvent: EventEmitter<any> =
-    new EventEmitter<any>();
-  @Input() isUseBase64 = false;
-  $ = go.GraphObject.make;
-  options = {
-    layout: this.$(go.LayeredDigraphLayout, {
-      // direction: 0,
-    }),
-    // isReadOnly: true,
-  };
-  @Input() flowData: AtoGoJSData = {} as AtoGoJSData;
-
-  // Reponsive
-  dataTableAssetParams: any[];
-  @Input() isResponsiveView = false;
-  @Input() getFlowDataCallBack: Function;
-
-  timeoutResizeWindow;
-  @HostListener('window:resize', ['$event'])
-  onResize(event: Event): void {
-    // Now only Support Cooling Tower Responsive
-    if (this.timeoutResizeWindow) {
-      clearTimeout(this.timeoutResizeWindow);
-    }
-    this.timeoutResizeWindow = setTimeout(() => {
-      this.checkResponsiveView();
-      this.updateLocationReponsive();
-    }, 1000);
-  }
-
-  checkResponsiveView() {
-    if (
-      this?.systemType ===
-      AtoGojsEditorModel.ENUM_TYPES.COOLING_TOWER
-    ) {
-      this.isResponsiveView = window.innerWidth < 1024;
-    } else {
-      this.isResponsiveView = false;
-    }
-  }
-
-  updateLocationReponsive() {
-    if (!this.flowData?.nodeDataArray) {
-      this.flowData = AssetFlowComponent.getDefaultFlowData({
-        systemType: this.systemType, 
-        isUseBase64: this.isUseBase64,
-        assetLayer: this.assetLayer
-      });
-    }
-    _.forEach(
-      this.flowData?.nodeDataArray,
-      (node: any) => {
-        node = _.merge(node, node[`extendedData${this.isResponsiveView ? 'Responsive' : ''}`]);
-      }
-    );
-    this.setFlowData(_.cloneDeep(this.flowData));
-  }
-
-  ngOnInit() {
-    this.checkResponsiveView();
-    this.updateLocationReponsive();
-  }
-  onClickParamOfTable($event: any) {
-    this.onClickParamOfTableEvent.emit($event);
-  }
-
-  static getDefaultFlowData(defaultData: AtoDefaultFlowData) {
-    const flowData = {
-      ..._.cloneDeep(ATO_COMPONENTS_GROUP_DATA)[
-        defaultData?.systemType
-      ],
-      linkFromPortIdProperty: 'fromPort',
-      linkToPortIdProperty: 'toPort',
-    };
-    // assetLayer
-    flowData.nodeDataArray = _.filter(flowData.nodeDataArray, x => !x?.assetLayers || (x?.assetLayers && x?.assetLayers === (defaultData?.assetLayer ?? ATO_ASSET_LAYERS.FLOW)))
-    if (defaultData?.isUseBase64) {
-      const itemImageTemp = (flowData as AtoGoJSData)?.nodeDataArray?.find(
-        (x) => x?.type === 'Image Template'
-      );
-      if (itemImageTemp) {
-        itemImageTemp.source = AtoGoJSBase64[defaultData?.systemType];
-      }
-    }
-    return flowData;
-  }
-
-  setFlowData(data: AtoGoJSData) {
-    this.flowData = { ...data };
-    this.dataTableAssetParams = _.forEach(
-      this.flowData?.nodeDataArray?.filter(
-        (e) => e?.type === AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE && e?.assetLayers?.includes(this?.assetLayer ?? ATO_ASSET_LAYERS.FLOW)
-      ), x => {
-        if (!data?.isRefresh) {
-          x.isCollapsed = this.assetParamsViewTemp?.data?.find(y => y?.key === x?.key)?.isCollapsed;
-        }
-      }
-    );
-  }
-}

package/src/lib/components/asset-params-view/asset-params-view.component.html

@@ -1,85 +0,0 @@
-<div class="d-flex flex-column flex-gap-2">
-  <div class="" *ngFor="let tableParam of data">
-    <ng-template
-      [ngTemplateOutlet]="tableParamTemplate"
-      [ngTemplateOutletContext]="{
-        data: tableParam
-      }"
-    ></ng-template>
-  </div>
-</div>
-
-<ng-template #tableParamTemplate let-data="data">
-  <div
-    class="d-flex flex-column asset-param-item w-100"
-    [style.backgroundColor]="data?.color"
-  >
-    <div
-      class="d-flex align-items-center justify-content-between py-1 pl-1 pr-2 cursor-pointer"
-      (click)="data.isCollapsed = !data.isCollapsed"
-    >
-      <div class="font-size-14px flex-grow-1 text-truncate color-white">
-        {{ data?.title }}
-      </div>
-      <svg
-        *ngIf="data.isCollapsed"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 320 512"
-        fill="#FFFF"
-        class="fa-solid font-size-14px color-white svg-15px"
-      >
-        <path
-          d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"
-        />
-      </svg>
-      <svg
-        *ngIf="!data.isCollapsed"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 448 512"
-        fill="#FFFF"
-        class="fa-solid font-size-14px color-white svg-15px"
-      >
-        <path
-          d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
-        />
-      </svg>
-    </div>
-    <div class="px-1 pb-1" *ngIf="!data.isCollapsed">
-      <div
-        class="table-asset-param-wrapper"
-        [style.backgroundColor]="data?.bgColor"
-      >
-        <table>
-          <tbody>
-            <tr
-              *ngFor="let itemTable of data?.dataTable"
-              (click)="onClickRowParam(itemTable)"
-              class="cursor-pointer"
-            >
-              <td
-                class="font-size-13px"
-                [style.borderColor]="data?.borderTable"
-              >
-                {{ itemTable?.name }}
-              </td>
-              <td
-                class="font-size-13px"
-                [style.borderColor]="data?.borderTable"
-              >
-                <div class="d-flex align-items-center">
-                  <div
-                    class="mr-auto font-size-13px text-truncate flex-grow-1"
-                    [style.color]="itemTable?.color"
-                  >
-                    {{ itemTable?.value }}
-                  </div>
-                  <svg *ngIf="isEditView" class="svg-15px" fill="#333333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z"/></svg>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</ng-template>

package/src/lib/components/asset-params-view/asset-params-view.component.scss

@@ -1,37 +0,0 @@
-.asset-param-item {
-    border-radius: 5px;
-
-    .table-asset-param-wrapper {
-        border-radius: 5px;
-        background-color: aliceblue;
-        table {
-            border-collapse: collapse;
-            width: 100%;
-
-            tbody {
-                tr {
-                    td {
-                        border: 1px solid red;
-                        height: 30px;
-                        padding: 4px;
-                    }
-                }
-            }
-        }
-    }
-}
-
-
-.color-white {
-    color: white;
-}
-
-.flex-gap-2 {
-    gap: 0.5rem;
-}
-
-.svg-15px {
-    width: 15px; 
-    height: 15px;
-    flex: 0 0 15px;
-}

package/src/lib/components/asset-params-view/asset-params-view.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AssetParamsViewComponent } from './asset-params-view.component';
-
-describe('AssetParamsViewComponent', () => {
-  let component: AssetParamsViewComponent;
-  let fixture: ComponentFixture<AssetParamsViewComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ AssetParamsViewComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(AssetParamsViewComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/asset-params-view/asset-params-view.component.ts

@@ -1,16 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-  selector: 'ato-asset-params-view',
-  templateUrl: './asset-params-view.component.html',
-  styleUrls: ['./asset-params-view.component.scss']
-})
-export class AtoAssetParamsViewComponent {
-  @Input() isEditView = false;
-  @Input() data: any[] = [];
-  @Output() clickParamTableRow = new EventEmitter();
-
-  onClickRowParam(itemTable) {
-      this.clickParamTableRow.emit(itemTable);
-  }
-}

package/src/lib/components/flow-diagram-lib/flow-diagram-lib.component.html

@@ -1,25 +0,0 @@
-<div class="w-100 h-100 gj-flow-diagram-wrapper" atoLoading [appLoading]="data === null || !!isLoading">
-    <div class="w-100 h-100 d-flex">
-        <!-- <button
-            id="actionMenuId"
-            class="invisible-btn"
-            mat-button
-            [matMenuTriggerFor]="menu"
-            #menuTrigger="matMenuTrigger"
-        ></button>
-        <mat-menu #menu="matMenu">
-            <button mat-menu-item *ngFor="let item of actions" (click)="item?.onClick($event)">
-                <div class="d-flex flex-gap-2">
-                    <div><i class="{{ item?.iconClassName }}"></i></div>
-                    <div>{{ item?.name }}</div>
-                </div>
-            </button>
-        </mat-menu> -->
-
-        <div #myDiagramDivTemp [id]="myDiagramDiv" class="flex-grow-1"></div>
-        <div *ngIf="initialOptions?.isReadOnly && !data?.nodeDataArray?.length" class="empty-data">
-            <!-- <nz-empty nzNotFoundImage="simple"></nz-empty> -->
-            No Data
-        </div>
-    </div>
-</div>

package/src/lib/components/flow-diagram-lib/flow-diagram-lib.component.ts

@@ -1,69 +0,0 @@
-import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import _ from 'lodash';
-
-import { AtoDefaultGojsEditor } from '../../models/default-gojs-editor.model';
-import { AtoGojsEditorModel } from '../../models/gojs-editor.model';
-
-@Component({
-  selector: 'ato-flow-diagram-lib',
-  templateUrl: './flow-diagram-lib.component.html',
-  styleUrls: ['./flow-diagram-lib.component.css']
-})
-export class AtoFlowDiagramLibComponent extends AtoDefaultGojsEditor implements OnInit  {
- @ViewChild('myDiagramDivTemp') myDiagramDivTemp: any;
-  _data: any = null;
-  @Input() set data(v) {
-      this._data = v;
-      this.loadDiagram();
-  }
-
-  @Input() isLoading = false;
-
-  get data() {
-      return this._data;
-  }
-
-  constructor(
-    _elRef: ElementRef,
-  ) {
-      super(_elRef);
-      this.actions = [
-        AtoDefaultGojsEditor.ACTIONS[AtoDefaultGojsEditor.ENUM_ACTIONS.DETAILS],
-        AtoDefaultGojsEditor.ACTIONS[AtoDefaultGojsEditor.ENUM_ACTIONS.DELETE],
-      ];
-      this.unsubscribeAll();
-  }
-
-
-
-  ngOnInit(): void {
-      this.addSubscribes(
-          this.committedTransactionSubject?.subscribe((e) => {
-              this.onModelChangeListenerEvent.emit(e);
-          }),
-          // this._GjUtilsService?.updateNameDataBox$?.subscribe((rs) => {
-          //     if (rs && rs?.key) {
-          //         const node = this.myDiagram.findNodeForKey(rs?.key);
-          //         this.myDiagram.model.setDataProperty(node?.data, 'name', rs?.name);
-          //     }
-          // }),
-      );
-  }
-
-  loadDiagram() {
-      this.editor = new AtoGojsEditorModel({
-          class: 'go.GraphLinksModel',
-          nodeCategoryProperty: 'type',
-          ...this.data,
-      });
-  }
-
-  findNodeForKey(key: number | string) {
-      this.myDiagram.select(this.myDiagram.findNodeForKey(key));
-  }
-}
-
-
-
-
-