qms-angular 1.1.23 → 1.1.24

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

@@ -1,4 +1,5 @@
 import { SelectionModel } from '@angular/cdk/collections';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
@@ -40,7 +41,6 @@ export declare class SelectDepartmentTreeComponent implements OnInit, AfterViewI
     onPagingSearchEvent: EventEmitter<PageEvent>;
     MODE_VIEW_ENUM: typeof ModeDepartmentTreeeViewEnum;
     ngUnsubscribe: Subject<void>;
-    isLoaded: boolean;
     resultSearchSelected: QMSTreeNode[];
     resultSelected: QMSTreeNode[];
     get currentTreeData(): QMSTreeNode[];
@@ -75,12 +75,15 @@ export declare class SelectDepartmentTreeComponent implements OnInit, AfterViewI
     private _getChild;
     private isExpandable;
     hasChild: (_: number, node: QMSFlatNodeTree) => boolean;
+    originalDataSource: QMSTreeNode[];
+    cdkVirtualScrollViewport: CdkVirtualScrollViewport;
     constructor(cdRef: ChangeDetectorRef, domSanitizer: DomSanitizer, appIconService: QMSIconRegistryService, iconRegistry: MatIconRegistry, eleRef: ElementRef, trans: TranslateLibraryService, treeDepartmentGlobalService: QMSSelectDepartmentTreeGlobalService);
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngOnInit(): void;
     ngOnDestroy(): void;
     private _initTreeData;
+    private _convertToTreeData;
     private _initCheckListSelected;
     private _handleItemSelectionChanged;
     private _onSelectionNodeChangeEvent;
@@ -125,4 +128,5 @@ export declare class SelectDepartmentTreeComponent implements OnInit, AfterViewI
     getHeightStyleRefNode(nodeId: string): string;
     private getSelectedNodeStorage;
     private setSelectedNodeStorage;
+    trackBy(index: number, item: QMSFlatNodeTree): QMSFlatNodeTree;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qms-angular",
-  "version": "1.1.23",
+  "version": "1.1.24",
   "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;
       }
     }
   }

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

@@ -106,12 +106,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 +140,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);
@@ -162,105 +160,75 @@
       }
     }
   }
-
-  // Tree
-  .mat-tree.select-department-tree {
-    height: 100%;
-    &.has-checkbox-all{
-      max-height: calc(100% - 47px);
-      overflow-y: auto;
+  //Custom tree
+  .select-department-tree{
+    & > .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{
+      padding: 0 4px !important;
     }
-    .mat-tree-node {
+    .qms-tree-node{
+      display: flex;
+      align-items: center;
       border-radius: 4px;
-      &:hover {
-        background: black(0.08);
+      &:hover{
+        background-color: rgba(0,0,0,.08);
       }
-
-      &:active {
-        background: black(0.12);
+      &> .node-expand-area{
+        width: 48px;
+        height: 48px;
       }
-
-      &.active {
-        color: theme-apply($primary);
-        background: theme-apply($primary-light-6-opacity);
-
-        &:active {
-          background: theme-apply($primary-light-12-opacity);
-        }
-
-        button,
-        .mat-icon-rtl-mirror,
-        .type-icon,
-        .text-name {
-          color: theme-apply($primary);
+      &.active-external-view{
+        .mat-checkbox.qms-group-options{
+          width: calc(100% - 250px) !important;
         }
       }
-    }
-
-    .mat-tree-node.collapse-node:not(.selected-theme) {
-      &.active {
-        button,
-        .mat-icon-rtl-mirror,
-        .type-icon,
-        .text-name {
-          color: theme-apply($primary);
+      &> .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);
+            }
 
-        &:hover {
-          background: theme-apply($primary-light-6-opacity);
+            &:active {
+              background: theme-apply($primary-light-12-opacity);
+            }
         }
-
-        &: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;
         }
       }
-    }
-
-    .mat-tree-node.selected-theme{
-      background: theme-apply($primary-light-12-opacity);
-    }
-
-    .mat-tree-node.expand-node {
-      color: theme-apply($primary);
-
-      button,
-      .mat-icon-rtl-mirror,
-      .type-icon,
-      .text-name {
-        color: theme-apply($primary);
-      }
-
-      &:hover {
-        background: theme-apply($primary-light-6-opacity);
-      }
-
-      &:active {
+      &.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 +252,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 +287,6 @@
   }
 
   .qms-view-search-result{
-    height: 100%;
     width: 100%;
     overflow: hidden;
     .result {