qms-angular 1.1.23 → 1.1.25

package/lib/common/models/qms-flat-node.model.d.ts

@@ -13,4 +13,5 @@ export declare class QMSFlatNodeTree {
     itemMatIcon?: string;
     isGroup?: boolean;
     groupId?: string;
+    isLoading?: boolean;
 }

package/lib/common/models/qms-tree-node.model.d.ts

@@ -14,6 +14,7 @@ export interface QMSTreeNode {
     tooltip?: string;
     isGroup?: boolean;
     groupId?: string;
+    expandable?: boolean;
 }
 export declare class QMSTreeModel implements QMSTreeNode {
     id: string;

package/lib/components/select-department/select-department.component.d.ts

@@ -19,8 +19,12 @@ export declare class SelectDepartmentComponent implements OnInit, OnDestroy, Aft
     popupData: SelectDepartmentPopupData;
     resultSelected: QMSTreeNode[];
     onSearchEvent: EventEmitter<string>;
+    onCheckNodeEvent: EventEmitter<QMSFlatNodeTree>;
+    onExpandNodeEvent: EventEmitter<QMSFlatNodeTree>;
+    onLoadMoreEvent: EventEmitter<void>;
     resultSearch: QMSFlatNodeTree[];
     isActiveViewSearch: boolean;
+    get isIncludeChild(): boolean;
     constructor(cdRef: ChangeDetectorRef, dialogRef: MatDialogRef<SelectDepartmentComponent>, data: SelectDepartmentPopupData, trans: TranslateLibraryService);
     ngAfterViewInit(): void;
     onCloseDialog(): void;
@@ -34,4 +38,19 @@ export declare class SelectDepartmentComponent implements OnInit, OnDestroy, Aft
     generateTootip(node: QMSTreeNode): string;
     updateResultSearch(data: QMSDepartmentPagingModel<QMSFlatNodeTree>): void;
     private formatString;
+    /**
+         * This function use for lazy load children of node
+         * @param node node update. if node is null data auto insert as roots
+         * @param data list children to update node.
+         * @param mode default is update that replace current list children by new list children , if mode = 'insert' will insert new value to list children existed before.
+    */
+    updateChildOfNode(node: QMSFlatNodeTree, data: QMSTreeNode[], mode?: 'insert' | 'update'): void;
+    addRootTree(data?: QMSTreeNode[]): void;
+    /**
+     * This function handle check node of tree
+     * @param node node of tree
+     * @param callback do something before handle check node
+     * @returns
+     */
+    handleCheckNode(node: QMSFlatNodeTree, callback?: (node: QMSFlatNodeTree) => Promise<void>): void;
 }

package/lib/components/select-department-tree/model/select-department-tree.config.d.ts

@@ -19,5 +19,7 @@ export declare class QMSSelectDepartmentTreeConfig {
     };
     activeSelectAllNode: boolean;
     modeView: ModeDepartmentTreeeViewEnum;
+    isMobile: boolean;
+    lazy: boolean;
     constructor();
 }

package/lib/components/select-department-tree/select-department-tree.component.d.ts

@@ -1,6 +1,8 @@
 import { SelectionModel } from '@angular/cdk/collections';
+import { Overlay } from '@angular/cdk/overlay';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { FlatTreeControl } from '@angular/cdk/tree';
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnInit } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnInit, ViewContainerRef } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { MatIconRegistry } from '@angular/material/icon';
 import { PageEvent } from '@angular/material/paginator';
@@ -27,7 +29,10 @@ export declare class SelectDepartmentTreeComponent implements OnInit, AfterViewI
     private eleRef;
     trans: TranslateLibraryService;
     private treeDepartmentGlobalService;
+    overlay: Overlay;
+    viewContainerRef: ViewContainerRef;
     LANG: any;
+    spinnerArr: any[];
     arrSkeleton: any[];
     set rowsSkeleton(value: number);
     height: string;
@@ -38,18 +43,22 @@ export declare class SelectDepartmentTreeComponent implements OnInit, AfterViewI
     get isIndeterminateCheckboxAllTree(): boolean;
     onSearchEvent: EventEmitter<string>;
     onPagingSearchEvent: EventEmitter<PageEvent>;
+    onValueChangeEvent: EventEmitter<QMSTreeNode[]>;
+    selectionNodeChangeEvent: EventEmitter<ISelectionNodeChange<QMSTreeNode>>;
+    onCheckNodeEvent: EventEmitter<QMSFlatNodeTree>;
+    onExpandNodeEvent: EventEmitter<QMSFlatNodeTree>;
+    onLoadMoreEvent: EventEmitter<void>;
+    cdkVirtualScrollViewport: CdkVirtualScrollViewport;
+    paginatorSearch: QMSPaginatorComponent;
     MODE_VIEW_ENUM: typeof ModeDepartmentTreeeViewEnum;
+    ITEM_SIZE: number;
     ngUnsubscribe: Subject<void>;
-    isLoaded: boolean;
     resultSearchSelected: QMSTreeNode[];
     resultSelected: QMSTreeNode[];
-    get currentTreeData(): QMSTreeNode[];
     getDataTree$: BehaviorSubject<QMSTreeNode[]>;
-    onValueChangeEvent: EventEmitter<QMSTreeNode[]>;
-    selectionNodeChangeEvent: EventEmitter<ISelectionNodeChange<QMSTreeNode>>;
     searchDepartment$: BehaviorSubject<QMSDepartmentPagingModel<QMSFlatNodeTree>>;
-    paginatorSearch: QMSPaginatorComponent;
     resultSearch: DepartmentSearchResultModel[];
+    get currentTreeData(): QMSTreeNode[];
     get isSelectAllResultSearch(): boolean;
     get indeterminateSearchResult(): boolean;
     indexView: number;
@@ -68,6 +77,8 @@ export declare class SelectDepartmentTreeComponent implements OnInit, AfterViewI
     dataSourceTreeSearch: MatTreeFlatDataSource<QMSTreeNode, QMSFlatNodeTree>;
     formSearchControl: FormControl;
     getLoading$: BehaviorSubject<boolean>;
+    getLoadingMore$: BehaviorSubject<boolean>;
+    afterOnCheckNode: Subject<QMSFlatNodeTree>;
     textResultSearch: string;
     itemIconType: typeof ItemIconType;
     _transformer: (node: QMSTreeNode, level: number) => QMSFlatNodeTree;
@@ -75,12 +86,13 @@ export declare class SelectDepartmentTreeComponent implements OnInit, AfterViewI
     private _getChild;
     private isExpandable;
     hasChild: (_: number, node: QMSFlatNodeTree) => boolean;
-    constructor(cdRef: ChangeDetectorRef, domSanitizer: DomSanitizer, appIconService: QMSIconRegistryService, iconRegistry: MatIconRegistry, eleRef: ElementRef, trans: TranslateLibraryService, treeDepartmentGlobalService: QMSSelectDepartmentTreeGlobalService);
+    constructor(cdRef: ChangeDetectorRef, domSanitizer: DomSanitizer, appIconService: QMSIconRegistryService, iconRegistry: MatIconRegistry, eleRef: ElementRef, trans: TranslateLibraryService, treeDepartmentGlobalService: QMSSelectDepartmentTreeGlobalService, overlay: Overlay, viewContainerRef: ViewContainerRef);
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngOnInit(): void;
     ngOnDestroy(): void;
     private _initTreeData;
+    _convertToTreeData(data: QMSTreeNode[]): QMSTreeNode[];
     private _initCheckListSelected;
     private _handleItemSelectionChanged;
     private _onSelectionNodeChangeEvent;
@@ -96,7 +108,13 @@ export declare class SelectDepartmentTreeComponent implements OnInit, AfterViewI
     onRemoveNode(nodeId: string): void;
     isIndeterminate(node: QMSFlatNodeTree): boolean;
     isCheckAll(node: QMSFlatNodeTree): boolean;
-    private _handleCheckNode;
+    /**
+     * This function handle check node of tree
+     * @param node node of tree
+     * @param callback do something before handle check node
+     * @returns
+     */
+    handleCheckNode(node: QMSFlatNodeTree, callback?: (node: QMSFlatNodeTree) => Promise<void>): Promise<void>;
     private resetNode;
     isSelectedNode(node: QMSFlatNodeTree): boolean;
     getChildrenSelected(node: QMSFlatNodeTree): QMSFlatNodeTree[];
@@ -125,4 +143,13 @@ export declare class SelectDepartmentTreeComponent implements OnInit, AfterViewI
     getHeightStyleRefNode(nodeId: string): string;
     private getSelectedNodeStorage;
     private setSelectedNodeStorage;
+    trackBy(index: number, item: QMSFlatNodeTree): QMSFlatNodeTree;
+    /**
+         * This function use for lazy load children of node
+         * @param node node update. if node is null data auto insert as roots
+         * @param data list children to update node.
+         * @param mode default is update that replace current list children by new list children , if mode = 'insert' will insert new value to list children existed before.
+    */
+    updateChildOfNode(node: QMSFlatNodeTree, data?: QMSTreeNode[], mode?: 'insert' | 'update'): void;
+    addRootTree(data?: QMSTreeNode[]): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qms-angular",
-  "version": "1.1.23",
+  "version": "1.1.25",
   "dependencies": {
     "tslib": "^2.0.0"
   },

package/src/lib/components/select-department/select-department.component.scss

@@ -137,17 +137,24 @@
 
 
     span.related__item__content_name {
-      display: inline-block;
       min-width: calc(100% - 13px);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 220px;
+      max-width: 250px;
+      display: flex;
+      align-items: center;
+      & > span:nth-child(1){
+        display: inline-block;
+        margin-right: 4px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 200px;
+      }
 
       .select__include-children__count {
         font-size: 0.75rem;
         color: black(0.5);
         font-weight: 600;
+        line-height: 16px;
       }
     }
   }
@@ -201,3 +208,16 @@
       color: unset !important;
   }
 }
+
+@media screen and (max-width: 600px) {
+  ::ng-deep .cdk-global-overlay-wrapper{
+    justify-content: center !important;
+    width: 100vw;
+  }
+  .header-title{
+    font-size: 14px;
+  }
+  .related__item__content_name{
+  font-size: 12px !important;
+  }
+}

package/src/lib/components/select-department-tree/select-department-tree.component.scss

@@ -3,7 +3,6 @@
 @import "../../../themes/theme/mixins";
 @import "../../../themes/qms-icon-font";
 
-
 .qms-select-department-tree-container {
   .mr10 {
     margin-right: 10px;
@@ -85,6 +84,8 @@
     font-weight: 500;
     color: theme-apply($ws-text-primary);
     font-size: 16px;
+    display: flex;
+    align-items: center;
     .header-view{
       padding: 4px 0;
     }
@@ -106,12 +107,10 @@
   }
 
   .tree-department-wrapper {
-    height: 375px;
     padding-right: 4px;
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow: hidden;
     position: relative;
-    transition: height .1s ease-in-out;
+    transition: height .3s ease-in-out;
     .tree-view{
       &.active-mode-external-view{
         width: 100%;
@@ -142,7 +141,7 @@
           .external-list-item-container{
             .node-external{
               overflow: hidden;
-              transition: .1s ease-in-out;
+              transition: all .1s ease-in-out;
               .node-external-content {
                   padding: 5px 15px 5px 15px;
                   height: calc(100% - 2px);
@@ -163,104 +162,131 @@
     }
   }
 
-  // Tree
-  .mat-tree.select-department-tree {
+  .mask-overlay{
+    z-index: 1000;
+    background-color: rgba(0,0,0,0.1);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
     height: 100%;
-    &.has-checkbox-all{
-      max-height: calc(100% - 47px);
-      overflow-y: auto;
-    }
-    .mat-tree-node {
-      border-radius: 4px;
-      &:hover {
-        background: black(0.08);
-      }
-
-      &:active {
-        background: black(0.12);
-      }
-
-      &.active {
-        color: theme-apply($primary);
-        background: theme-apply($primary-light-6-opacity);
-
-        &:active {
-          background: theme-apply($primary-light-12-opacity);
+    border-radius: 4px;
+    overflow: hidden;
+    display: grid;
+    place-items: center;
+    &> .qms-load-more-row {
+      // height: 0;
+      line-height: 35px;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+      transform: translateY(-15px);
+      span {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        background: theme-apply($primary-light-12-opacity);
+        border-radius: 50px;
+        animation: up-down-animate 0.5s ease-in-out infinite alternate;
+        &:nth-child(2) {
+          background: theme-apply($primary-light-24-opacity);
+          animation-delay: 0.16s;
         }
-
-        button,
-        .mat-icon-rtl-mirror,
-        .type-icon,
-        .text-name {
-          color: theme-apply($primary);
+        &:nth-child(3) {
+          background: theme-apply($primary-light-32-opacity);
+          animation-delay: 0.32s;
         }
-      }
-    }
-
-    .mat-tree-node.collapse-node:not(.selected-theme) {
-      &.active {
-        button,
-        .mat-icon-rtl-mirror,
-        .type-icon,
-        .text-name {
-          color: theme-apply($primary);
+        &:nth-child(4) {
+          background: theme-apply($primary-light-38-opacity);
+          animation-delay: 0.48s;
         }
-
-        &:hover {
-          background: theme-apply($primary-light-6-opacity);
+      }
+      @keyframes up-down-animate {
+        0% {
+          transform: translateY(-8px);
         }
 
-        &:active {
-          background: theme-apply($primary-light-12-opacity);
+        100% {
+          transform: translateY(8px);
         }
       }
     }
-
-    .mat-tree-node.selected-theme{
-      background: theme-apply($primary-light-12-opacity);
+  }
+  //Custom tree
+  .select-department-tree{
+    & > .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{
+      padding: 0 4px !important;
     }
-
-    .mat-tree-node.expand-node {
-      color: theme-apply($primary);
-
-      button,
-      .mat-icon-rtl-mirror,
-      .type-icon,
-      .text-name {
-        color: theme-apply($primary);
+    .qms-tree-node{
+      display: flex;
+      align-items: center;
+      border-radius: 4px;
+      &:hover{
+        background-color: rgba(0,0,0,.08);
       }
-
-      &:hover {
+      &> .node-expand-area{
+        width: 48px;
+        height: 48px;
+        position: relative;
+      }
+      &.active-external-view{
+        .mat-checkbox.qms-group-options{
+          width: calc(100% - 250px) ;
+        }
+      }
+      &.node-loading{
         background: theme-apply($primary-light-6-opacity);
       }
+      &> .external-view-node{
+        flex-basis: 200px;
+        overflow: hidden;
+        .node-external{
+          overflow: hidden;
+          transition: all .1s ease-in-out;
+          display: block;
+          .node-external-content {
+              padding: 5px 15px 5px 15px;
+              height: calc(100% - 2px);
+              color: theme-apply($default-color);
+              font-size: 14px;
+              display: flex;
+              align-items: center;
+              span{
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+            }
+        }
+      }
+      &.expand-node {
+            color: theme-apply($primary);
+            &:hover {
+              background: theme-apply($primary-light-6-opacity);
+            }
 
-      &:active {
+            &:active {
+              background: theme-apply($primary-light-12-opacity);
+            }
+        }
+      .node-without-checkbox{
+        cursor: pointer;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .mat-icon{
+          color: theme-apply($primary);
+          margin-right: 4px;
+        }
+      }
+      &.selected-theme{
         background: theme-apply($primary-light-12-opacity);
       }
-    }
-
-    .type-icon {
-      margin-right: 5px;
-      color: theme-apply($ws-action-active);
-    }
-
-    .text-name {
-      color: theme-apply($default-color);
-    }
 
-    .mat-icon-rtl-mirror {
-      color: black(0.6);
-    }
-
-    .mat-icon-button.btn-toggle {
-      width: 35px;
-      height: 35px;
-      line-height: 35px;
-    }
-
-
-    .mat-tree-node {
-      &.mat-tree-node-disabled-all {
+          &.mat-tree-node-disabled-all {
         cursor: default !important;
         pointer-events: none;
         user-select: none;
@@ -284,66 +310,8 @@
           background-color: transparent;
         }
       }
-
-      &.mat-tree-node-disabled {
-
-        button.mat-button-disabled,
-        .type-icon {
-          color: black(0.38);
-        }
-
-        .text-name {
-          &.disabled {
-            color: black(0.38);
-            cursor: default !important;
-            pointer-events: none;
-            user-select: none;
-          }
-        }
-
-        &.active,
-        &:hover,
-        &:active,
-        &.expand-node:hover,
-        &.expand-node:active {
-          background-color: transparent;
-        }
-      }
-
-      .node-without-checkbox{
-        cursor: pointer;
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .mat-icon{
-          color: theme-apply($primary);
-          margin-right: 4px;
-        }
-      }
-
-      &>.node-content-wraper {
-        width: fit-content;
-        position: relative;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        &>.mat-progress-bar {
-          height: 3px;
-          width: 100%;
-          position: absolute;
-          bottom: 0;
-          left: 10px;
-
-          .mat-progress-bar-fill::after {
-            background: theme-apply($primary);
-          }
-        }
-      }
     }
   }
-
   .text-name {
     position: relative;
     overflow: hidden;
@@ -377,7 +345,6 @@
   }
 
   .qms-view-search-result{
-    height: 100%;
     width: 100%;
     overflow: hidden;
     .result {
@@ -556,4 +523,160 @@
       }
     }
   }
+
+  .qms-spinner {
+    font-size: 20px;
+    position: relative;
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    &.center {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+    }
+    &> .qms-spinner-blade {
+      position: absolute;
+      left: 0.4629em;
+      bottom: 0;
+      width: 0.074em;
+      height: 0.2777em;
+      border-radius: 0.0555em;
+      background-color: transparent;
+      -webkit-transform-origin: center -0.2222em;
+      -ms-transform-origin: center -0.2222em;
+      transform-origin: center -0.2222em;
+      animation: spinner-animation 1s infinite linear;
+      &:nth-child(1) {
+        -webkit-animation-delay: 0s;
+        animation-delay: 0s;
+        -webkit-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+      &:nth-child(2) {
+        -webkit-animation-delay: 0.083s;
+        animation-delay: 0.083s;
+        -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+        transform: rotate(30deg);
+      }
+      &:nth-child(3) {
+        -webkit-animation-delay: 0.166s;
+        animation-delay: 0.166s;
+        -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+        transform: rotate(60deg);
+      }
+      &:nth-child(4) {
+        -webkit-animation-delay: 0.249s;
+        animation-delay: 0.249s;
+        -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+        transform: rotate(90deg);
+      }
+      &:nth-child(5) {
+        -webkit-animation-delay: 0.332s;
+        animation-delay: 0.332s;
+        -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+        transform: rotate(120deg);
+      }
+      &:nth-child(6) {
+        -webkit-animation-delay: 0.415s;
+        animation-delay: 0.415s;
+        -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+        transform: rotate(150deg);
+      }
+      &:nth-child(7) {
+        -webkit-animation-delay: 0.498s;
+        animation-delay: 0.498s;
+        -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+        transform: rotate(180deg);
+      }
+      &:nth-child(8) {
+        -webkit-animation-delay: 0.581s;
+        animation-delay: 0.581s;
+        -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+        transform: rotate(210deg);
+      }
+      &:nth-child(9) {
+        -webkit-animation-delay: 0.664s;
+        animation-delay: 0.664s;
+        -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+        transform: rotate(240deg);
+      }
+      &:nth-child(10) {
+        -webkit-animation-delay: 0.747s;
+        animation-delay: 0.747s;
+        -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+        transform: rotate(270deg);
+      }
+      &:nth-child(11) {
+        -webkit-animation-delay: 0.83s;
+        animation-delay: 0.83s;
+        -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+        transform: rotate(300deg);
+      }
+      &:nth-child(12) {
+        -webkit-animation-delay: 0.913s;
+        animation-delay: 0.913s;
+        -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+        transform: rotate(330deg);
+      }
+      @keyframes spinner-animation {
+        0% {
+          background-color: theme-apply($primary-light-32-opacity);
+        }
+
+        100% {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+  // Responsive
+  @media screen and (max-width: 600px) {
+    .external-view-node {
+      flex-basis: 65px !important;
+    }
+
+    .qms-tree-node.active-external-view .mat-checkbox.qms-group-options {
+      width: calc(100% - 110px)!important ;
+    }
+
+    .header-view-tree {
+      grid-template-columns: 1fr 80px !important;
+    }
+
+    ::ng-deep .cdk-virtual-scroll-content-wrapper{
+      right: 0 !important;
+    }
+    .header-title{
+      font-size: 14px !important;
+    }
+    .text-name, .node-external, .text-label, .text-label+span{
+      font-size: 12px;
+    }
+    .node-expand-area{
+      width: 30px !important;
+      height: 30px !important;
+      .qms-btn-icon{
+        width: 30px;
+        height: 30px;
+        line-height: 30px;
+      }
+    }
+  }
 }
+