qms-angular 1.1.25 → 1.1.26

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

@@ -16,6 +16,7 @@ export declare class QMSSelectDepartmentTreeConfig {
     headerName: {
         treeName: string;
         externalName: string;
+        resultSearchName: string;
     };
     activeSelectAllNode: boolean;
     modeView: ModeDepartmentTreeeViewEnum;

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

@@ -32,7 +32,7 @@ export declare class SelectDepartmentTreeComponent implements OnInit, AfterViewI
     overlay: Overlay;
     viewContainerRef: ViewContainerRef;
     LANG: any;
-    spinnerArr: any[];
+    readonly spinnerArr: any[];
     arrSkeleton: any[];
     set rowsSkeleton(value: number);
     height: string;
@@ -50,41 +50,41 @@ export declare class SelectDepartmentTreeComponent implements OnInit, AfterViewI
     onLoadMoreEvent: EventEmitter<void>;
     cdkVirtualScrollViewport: CdkVirtualScrollViewport;
     paginatorSearch: QMSPaginatorComponent;
-    MODE_VIEW_ENUM: typeof ModeDepartmentTreeeViewEnum;
+    readonly MODE_VIEW_ENUM: typeof ModeDepartmentTreeeViewEnum;
     ITEM_SIZE: number;
-    ngUnsubscribe: Subject<void>;
+    readonly ngUnsubscribe: Subject<void>;
     resultSearchSelected: QMSTreeNode[];
     resultSelected: QMSTreeNode[];
-    getDataTree$: BehaviorSubject<QMSTreeNode[]>;
-    searchDepartment$: BehaviorSubject<QMSDepartmentPagingModel<QMSFlatNodeTree>>;
+    readonly getDataTree$: BehaviorSubject<QMSTreeNode[]>;
+    readonly searchDepartment$: BehaviorSubject<QMSDepartmentPagingModel<QMSFlatNodeTree>>;
     resultSearch: DepartmentSearchResultModel[];
     get currentTreeData(): QMSTreeNode[];
     get isSelectAllResultSearch(): boolean;
     get indeterminateSearchResult(): boolean;
     indexView: number;
-    scrollToNodeEvent$: Subject<string>;
+    readonly scrollToNodeEvent$: Subject<string>;
+    readonly getActiveNodeEvent$: Subject<string>;
     activeNode: string;
-    getActiveNodeEvent$: Subject<string>;
-    PAGINATION_SIZE: typeof PaginationSize;
+    readonly PAGINATION_SIZE: typeof PaginationSize;
     PAGE_SIZE_OPTION: number[];
-    nestedTreeNodeMap: Map<QMSTreeNode, QMSFlatNodeTree>;
-    flatTreeNodeMap: Map<QMSFlatNodeTree, QMSTreeNode>;
-    checkListSelection: SelectionModel<QMSFlatNodeTree>;
-    checkListSelectionSearch: SelectionModel<DepartmentSearchResultModel>;
+    readonly nestedTreeNodeMap: Map<QMSTreeNode, QMSFlatNodeTree>;
+    readonly flatTreeNodeMap: Map<QMSFlatNodeTree, QMSTreeNode>;
+    readonly checkListSelection: SelectionModel<QMSFlatNodeTree>;
+    readonly checkListSelectionSearch: SelectionModel<DepartmentSearchResultModel>;
     treeControl: FlatTreeControl<QMSFlatNodeTree>;
     treeFlattener: MatTreeFlattener<QMSTreeNode, QMSFlatNodeTree>;
     dataSource: MatTreeFlatDataSource<QMSTreeNode, QMSFlatNodeTree>;
     dataSourceTreeSearch: MatTreeFlatDataSource<QMSTreeNode, QMSFlatNodeTree>;
     formSearchControl: FormControl;
-    getLoading$: BehaviorSubject<boolean>;
-    getLoadingMore$: BehaviorSubject<boolean>;
-    afterOnCheckNode: Subject<QMSFlatNodeTree>;
+    readonly getLoading$: BehaviorSubject<boolean>;
+    readonly getLoadingMore$: BehaviorSubject<boolean>;
+    readonly afterOnCheckNode: Subject<QMSFlatNodeTree>;
     textResultSearch: string;
     itemIconType: typeof ItemIconType;
-    _transformer: (node: QMSTreeNode, level: number) => QMSFlatNodeTree;
-    private getLevel;
-    private _getChild;
-    private isExpandable;
+    private readonly _transformer;
+    private readonly getLevel;
+    private readonly _getChild;
+    private readonly isExpandable;
     hasChild: (_: number, node: QMSFlatNodeTree) => boolean;
     constructor(cdRef: ChangeDetectorRef, domSanitizer: DomSanitizer, appIconService: QMSIconRegistryService, iconRegistry: MatIconRegistry, eleRef: ElementRef, trans: TranslateLibraryService, treeDepartmentGlobalService: QMSSelectDepartmentTreeGlobalService, overlay: Overlay, viewContainerRef: ViewContainerRef);
     ngAfterContentInit(): void;
@@ -143,6 +143,7 @@ export declare class SelectDepartmentTreeComponent implements OnInit, AfterViewI
     getHeightStyleRefNode(nodeId: string): string;
     private getSelectedNodeStorage;
     private setSelectedNodeStorage;
+    setDefaultPaginatorSize(options: number[]): void;
     trackBy(index: number, item: QMSFlatNodeTree): QMSFlatNodeTree;
     /**
          * This function use for lazy load children of node

package/package.json

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

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

@@ -104,6 +104,9 @@
     grid-template-columns: 1fr 200px;
     column-gap: 2px;
     padding: 4px 12px 4px 0;
+    .header-view:nth-child(1){
+      padding-left: 12px;
+    }
   }
 
   .tree-department-wrapper {
@@ -328,7 +331,10 @@
   }
 
   .ml5 {
-    margin-left: 10px !important;
+    margin-left: 15px !important;
+  }
+  .pl-10{
+    padding-left: 10px;
   }
 
   ::ng-deep .mat-checkbox.qms-group-options.flex-direction-row {
@@ -347,48 +353,88 @@
   .qms-view-search-result{
     width: 100%;
     overflow: hidden;
-    .result {
-      max-height: calc(100% - 44px);
-      overflow-y: auto;
-      margin-bottom: 4px;
-      padding-right: 4px;
-      &.active-paging{
-        max-height: calc(100% - 95px);
-      }
-      &.no-result{
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+    &__header{
+      position: relative;
+      &::after{
+        position: absolute;
+        content: "";
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background-color: black(.1);
       }
-      &.no-result{
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+      .header-title{
+        padding: 8px 0;
+        display: inline-block;
+        &:nth-child(1){
+          padding-left: 12px;
+        }
+        &:nth-child(2){
+        flex-basis: 200px;
+        }
       }
     }
-    .result-item{
-      border-radius: 4px;
-      display: grid;
-      grid-template-columns: 45px 1fr;
-      align-items: center;
-      cursor: pointer;
-      transition: background .3s ease;
-      &:not(:nth-child(1)){
-        margin-top: 4px !important;
-      }
-      &:hover{
-        background: linear-gradient(0deg, rgba(1, 99, 178, 0.12), rgba(1, 99, 178, 0.12)), #FFFFFF;
+    &__wrapper{
+      height: calc(100% - 50px);
+      &.active-external{
+        height: calc(100% - 90px) !important;
       }
-      &.active{
-        background: linear-gradient(0deg, rgba(1, 99, 178, 0.12), rgba(1, 99, 178, 0.12)), #FFFFFF;
+      width: 100%;
+      .result {
+        max-height: calc(100% - 44px);
+        overflow-y: auto;
+        margin-bottom: 4px;
+        padding-right: 4px;
+        &.active-paging{
+          max-height: calc(100% - 40px);
+        }
+        &.no-result{
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        &.no-result{
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
       }
-      .item-result-content-wraper{
-        padding: 5px 15px 5px 15px;
+      .result-item{
+        border-radius: 4px;
+        display: grid;
+        grid-template-columns: 45px 1fr;
+        align-items: center;
+        cursor: pointer;
+        transition: background .3s ease;
+        &:not(:nth-child(1)){
+          margin-top: 4px !important;
+        }
+        &:hover{
+          background: linear-gradient(0deg, rgba(1, 99, 178, 0.12), rgba(1, 99, 178, 0.12)), #FFFFFF;
+        }
+        &.active{
+          background: linear-gradient(0deg, rgba(1, 99, 178, 0.12), rgba(1, 99, 178, 0.12)), #FFFFFF;
+        }
+        &__content{
+          display: flex;
+          align-items: center;
+          .item-result-content-wraper{
+            padding: 5px 15px 5px 15px;
+            width: 100%;
+          }
+          .external-name{
+            flex-basis: 200px;
+            span{
+              width: 200px;
+              display: inline-block;
+            }
+          }
+        }
       }
     }
-
     ::ng-deep .mat-checkbox.qms-group-options{
       display: flex;
       height: 100%;
@@ -467,6 +513,7 @@
     color: rgba(0, 0, 0, 0.6);
     font-weight: 400;
     font-size: 14px;
+    max-width: 250px;
   }
 
   ::ng-deep .mat-checkbox.checkbox-all .mat-checkbox-label{
@@ -677,6 +724,35 @@
         line-height: 30px;
       }
     }
+    .fs-base{
+      font-size: 12px !important;
+    }
+    .qms-select-department-tree-container .breadcrumb-container{
+      flex-wrap: nowrap !important;
+    }
+    ::ng-deep .qms-breadcrumb-item-text{
+      font-size: 12px !important;
+      max-width: 175px !important;
+    }
+
+    ::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{
+      display: none !important;
+    }
+
+    ::ng-deep .qms-paginator .size-small .mat-paginator-container{
+      justify-content: center !important;
+    }
+
+    .qms-view-search-result__header > .header-title:nth-child(2){
+      flex-basis: 120px !important;
+    }
+
+    .result-item__content .external-name{
+      flex-basis: 75px !important;
+      span{
+        width: 75px !important;
+      }
+    }
   }
 }