ato-water-lib 0.0.33 → 0.0.36

package/ng-package.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ato-water-lib",
+  "assets": [
+    "./assets", 
+    "./scss"
+  ],
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ato-water-lib",
-  "version": "0.0.33",
+  "version": "0.0.36",
   "peerDependencies": {
     "@angular/common": "^15.1.0 || ^16.2.0",
     "@angular/core": "^15.1.0 || ^16.2.0",
@@ -11,24 +11,5 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "sideEffects": false,
-  "module": "fesm2015/ato-water-lib.mjs",
-  "es2020": "fesm2020/ato-water-lib.mjs",
-  "esm2020": "esm2020/ato-water-lib.mjs",
-  "fesm2020": "fesm2020/ato-water-lib.mjs",
-  "fesm2015": "fesm2015/ato-water-lib.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2020": "./esm2020/ato-water-lib.mjs",
-      "es2020": "./fesm2020/ato-water-lib.mjs",
-      "es2015": "./fesm2015/ato-water-lib.mjs",
-      "node": "./fesm2015/ato-water-lib.mjs",
-      "default": "./fesm2020/ato-water-lib.mjs"
-    }
-  }
-}
+  "sideEffects": false
+}

package/src/lib/ato-water-lib.component.spec.ts

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

package/src/lib/ato-water-lib.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-ato-water-lib',
+  template: `
+    <p>
+      ato-water-lib works!
+    </p>
+  `,
+  styles: [
+  ]
+})
+export class AtoWaterLibComponent {
+
+}

package/src/lib/ato-water-lib.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { AtoWaterLibComponent } from './ato-water-lib.component';
+import { AtoFlowDiagramLibComponent } from './components/flow-diagram-lib/flow-diagram-lib.component';
+import { AssetFlowComponent } from './components/asset-flow/asset-flow.component';
+import { CommonModule } from '@angular/common';
+import { AtoLoadingDirective } from './directive/ato-loading.directive';
+import { AtoAssetParamsViewComponent } from './components/asset-params-view/asset-params-view.component';
+import { AtoNgVarDirective } from './directive/ng-var.directive';
+
+@NgModule({
+  declarations: [
+    AtoWaterLibComponent,
+    AtoFlowDiagramLibComponent,
+    AssetFlowComponent,
+    AtoLoadingDirective,
+    AtoAssetParamsViewComponent,
+    AtoNgVarDirective,
+  ],
+  imports: [
+    CommonModule,
+  ],
+  exports: [
+    AtoWaterLibComponent,
+    AtoFlowDiagramLibComponent,
+    AssetFlowComponent,
+    AtoLoadingDirective,
+    AtoAssetParamsViewComponent,
+    AtoNgVarDirective,
+  ]
+})
+export class AtoWaterLibModule { }

package/src/lib/ato-water-lib.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AtoWaterLibService } from './ato-water-lib.service';
+
+describe('AtoWaterLibService', () => {
+  let service: AtoWaterLibService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AtoWaterLibService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/ato-water-lib.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AtoWaterLibService {
+
+  constructor() { }
+}

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

@@ -0,0 +1,21 @@
+<div class="h-100 d-flex flex-column flex-gap-3 flex-grow-1 overflow-auto px-3 pb-3">
+  <div class="h-100 d-flex flex-column" atoLoading [appLoading]="flowData === null">
+    <ato-flow-diagram-lib
+      *ngIf="flowData !== null"
+      #gjFlowDiagramTemp
+      [data]="flowData"
+      [initialOptions]="options"
+      (onClikParamOfTable)="onClickParamOfTable($event)"
+      [class]="!!isResponsiveView ? 'diagram-responsive-view' : 'flex-grow-1'"
+    ></ato-flow-diagram-lib>
+    <div class="mt-2" *ngIf="isResponsiveView">
+      <ato-asset-params-view
+        #assetParamsViewTemp
+        [data]="dataTableAssetParams"
+        [isEditView]="true"
+        (clickParamTableRow)="onClickParamOfTable($event)"
+      ></ato-asset-params-view>
+    </div>
+  </div>
+</div>
+

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

@@ -0,0 +1,4 @@
+.diagram-responsive-view {
+    height: 30vh;
+    min-height: 30vh;
+}

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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,137 @@
+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

@@ -0,0 +1,85 @@
+<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

@@ -0,0 +1,37 @@
+.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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,25 @@
+<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

@@ -0,0 +1,69 @@
+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));
+  }
+}
+
+
+
+
+