테이블 컬럼 리사이징

projects/ucap-webmessenger-ui-organization/src/lib/components/detail-table.component.html

@@ -37,7 +37,11 @@
       </td>
     </ng-container>
     <ng-container matColumnDef="profileInfo">
-      <th mat-header-cell *matHeaderCellDef class="profileInfo">
+      <th mat-header-cell *matHeaderCellDef class="profileInfo" minWidth="200">
+        <span
+          class="ui-column-resizer"
+          (mousedown)="resizeTable($event)"
+        ></span>
         <div>
           <span mat-sort-header="name">
             {{ 'search.fieldName' | translate }}
@@ -78,6 +82,10 @@
     </ng-container>
     <ng-container matColumnDef="company_hpNumber">
       <th mat-header-cell *matHeaderCellDef>
+        <span
+          class="ui-column-resizer"
+          (mousedown)="resizeTable($event)"
+        ></span>
         <div mat-sort-header="company">
           {{ 'search.fieldCompany' | translate }}
         </div>
@@ -96,6 +104,10 @@
     </ng-container>
     <ng-container matColumnDef="workplace_lineNumber">
       <th mat-header-cell *matHeaderCellDef>
+        <span
+          class="ui-column-resizer"
+          (mousedown)="resizeTable($event)"
+        ></span>
         <div mat-sort-header="workplace">
           {{ 'search.fieldWorkPlace' | translate }}
         </div>
@@ -104,6 +116,10 @@
         </div>
       </th>
       <td mat-cell *matCellDef="let element">
+        <span
+          class="ui-column-resizer"
+          (mousedown)="resizeTable($event)"
+        ></span>
         <div class="workplace">
           {{ element.workplace }}
         </div>
@@ -114,6 +130,10 @@
     </ng-container>
     <ng-container matColumnDef="responsibilities_email">
       <th mat-header-cell *matHeaderCellDef>
+        <span
+          class="ui-column-resizer"
+          (mousedown)="resizeTable($event)"
+        ></span>
         <div mat-sort-header="responsibilities">
           {{ 'search.fieldResponsibilities' | translate }}
         </div>
@@ -140,7 +160,7 @@
         >
         </mat-checkbox>
       </th>
-      <td mat-cell *matCellDef="let element">
+      <td mat-cell *matCellDef="let element" minWidth="70">
         <mat-checkbox
           #checkbox
           *ngIf="loginRes.userSeq !== element.seq"

projects/ucap-webmessenger-ui-organization/src/lib/components/detail-table.component.scss

@@ -30,6 +30,25 @@ table {
   width: 100%;
 }
 
+th.mat-header-cell {
+  @include disable-selection;
+  position: relative;
+
+  span.ui-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 5px;
+    height: 100%;
+    padding: 0;
+    cursor: col-resize;
+    border: 1px solid transparent;
+    background-color: #666;
+  }
+}
+
 td.mat-cell {
   padding: 6px;
   position: relative;
@@ -95,7 +114,6 @@ td.mat-cell {
     .baseInfo {
       display: flex;
       width: 200px;
-      min-width: 200px;
       font-size: 1em;
 
       .name {

projects/ucap-webmessenger-ui-organization/src/lib/components/detail-table.component.ts

@@ -5,7 +5,8 @@ import {
   Output,
   EventEmitter,
   ChangeDetectorRef,
-  OnDestroy
+  OnDestroy,
+  Renderer2
 } from '@angular/core';
 import { NGXLogger } from 'ngx-logger';
 import { UserInfoSS } from '@ucap-webmessenger/protocol-query';
@@ -70,7 +71,16 @@ export class DetailTableComponent implements OnInit, OnDestroy {
     'checkable'
   ];
 
+  start: any = undefined;
+  pressed = false;
+  startX: any;
+  startWidth: any;
+  relationWidth: any;
+  resizableFnMousemove: () => void;
+  resizableFnMouseup: () => void;
+
   constructor(
+    private renderer: Renderer2,
     private changeDetectorRef: ChangeDetectorRef,
     private logger: NGXLogger
   ) {}
@@ -304,4 +314,69 @@ export class DetailTableComponent implements OnInit, OnDestroy {
   onClickSMS(userInfo: UserInfoSS) {
     this.sendSms.emit(userInfo.employeeNum);
   }
+
+  curHandle: any = undefined;
+  gap: any;
+
+  /** column resizing */
+  resizeTable(event) {
+    this.curHandle = event.target;
+    this.start = event.target.parentElement;
+    if (this.start.cellIndex !== this.displayedColumns.length - 1) {
+      this.pressed = true;
+      this.startX = event.pageX;
+      this.startWidth = this.start.clientWidth;
+      this.relationWidth = this.start.nextElementSibling.clientWidth;
+      this.initResizableColumns();
+    }
+  }
+
+  initResizableColumns() {
+    const column = this.start;
+    const relationColumn = column.nextElementSibling;
+
+    this.resizableFnMousemove = this.renderer.listen(
+      'document',
+      'mousemove',
+      event => {
+        if (this.pressed) {
+          let curMinWidth = column.getAttribute('minwidth');
+          let relationColumnMinWidth = relationColumn.getAttribute('minwidth');
+          curMinWidth = curMinWidth || 50;
+          relationColumnMinWidth = relationColumnMinWidth || 50;
+          let gap = event.pageX - this.startX;
+
+          if (this.startWidth + gap < curMinWidth) {
+            gap = curMinWidth - this.startWidth;
+          }
+          if (this.relationWidth - gap < relationColumnMinWidth) {
+            gap = this.relationWidth - relationColumnMinWidth;
+          }
+
+          const columnWidth = this.startWidth + gap;
+          const relationWidth = this.relationWidth - gap;
+          column.width = columnWidth;
+          relationColumn.width = relationWidth;
+        }
+      }
+    );
+
+    this.resizableFnMouseup = this.renderer.listen(
+      'document',
+      'mouseup',
+      event => {
+        if (this.pressed) {
+          this.pressed = false;
+          this.curHandle = undefined;
+          this.start = undefined;
+          this.startX = undefined;
+          this.startWidth = undefined;
+          this.relationWidth = undefined;
+          this.gap = undefined;
+          this.resizableFnMousemove();
+          this.resizableFnMouseup();
+        }
+      }
+    );
+  }
 }