modify integrated search.

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html

@@ -22,6 +22,7 @@
       [pageListCount]="pageListCount"
       (search)="onSearch($event)"
       (changePage)="onChangePage($event)"
+      (openProfile)="onClickOpenProfile($event)"
     >
     </ucap-integrated-search>
   </mat-card-content>

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts

@@ -16,7 +16,7 @@ import {
   DeptUserResponse
 } from '@ucap-webmessenger/protocol-query';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
-import { map, catchError } from 'rxjs/operators';
+import { map, catchError, take } from 'rxjs/operators';
 import { Subscription, of, Observable } from 'rxjs';
 import { EnvironmentsInfo, KEY_ENVIRONMENTS_INFO } from '@app/types';
 import { NGXLogger } from 'ngx-logger';
@@ -25,6 +25,13 @@ import { environment } from '../../../../../environments/environment';
 import { TranslateService } from '@ngx-translate/core';
 import { StatusBulkInfo } from '@ucap-webmessenger/protocol-status';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
+import { DaesangProtocolService } from '@ucap-webmessenger/daesang';
+import { DialogService } from '@ucap-webmessenger/ui';
+import {
+  ProfileDialogComponent,
+  ProfileDialogData,
+  ProfileDialogResult
+} from '../profile/profile.dialog.component';
 
 export interface IntegratedSearchDialogData {
   keyword: string;
@@ -61,6 +68,8 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
     @Inject(MAT_DIALOG_DATA) public data: IntegratedSearchDialogData,
     private queryProtocolService: QueryProtocolService,
     private sessionStorageService: SessionStorageService,
+    private daesangProtocolService: DaesangProtocolService,
+    private dialogService: DialogService,
     private store: Store<any>,
     private logger: NGXLogger
   ) {
@@ -164,4 +173,35 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
 
     this.onSearch(this.currentSearchWord);
   }
+
+  onClickOpenProfile(userSeq: number) {
+    if (!userSeq || userSeq < 0) {
+      return;
+    }
+
+    this.daesangProtocolService
+      .dataUserDaesang({
+        divCd: 'OPENPROF',
+        seq: userSeq,
+        senderCompanyCode: this.loginRes.userInfo.companyCode,
+        senderEmployeeType: this.loginRes.userInfo.employeeType
+      })
+      .pipe(
+        take(1),
+        map(res => {
+          if (!!res && !!res.userInfo) {
+            this.dialogService.open<
+              ProfileDialogComponent,
+              ProfileDialogData,
+              ProfileDialogResult
+            >(ProfileDialogComponent, {
+              data: {
+                userInfo: res.userInfo
+              }
+            });
+          }
+        })
+      )
+      .subscribe();
+  }
 }

projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html

@@ -18,25 +18,14 @@
     <perfect-scrollbar class="search-scrollbar">
       <table mat-table [dataSource]="searchUserInfos">
         <ng-container matColumnDef="profile">
-          <!--<th
+          <th mat-header-cell *matHeaderCellDef class="profile">
-            mat-header-cell
-            *matHeaderCellDef
-            #header
-            class="profile"
-            (mousedown)="resizeTable($event, header)"
-          >-->
-          <th mat-header-cell *matHeaderCellDef #header class="profile" >
             {{ 'search.fieldProfile' | translate }}
           </th>
-          <td mat-cell *matCellDef ="let element">
+          <td mat-cell *matCellDef="let element">
-            <!--
-            {{ getPresence(element, PresenceType.PC) }}
-            {{ getPresence(element, PresenceType.MOBILE) }}
-          -->
             <div class="profile">
               <span
-                class="presence pcOn"
+                class="presence"
-                [ngClass]="getPresence(PresenceType.PC)"
+                [ngClass]="getPresence(element, PresenceType.PC)"
               ></span>
               <span class="thumbnail-mask">
                 <img
@@ -48,43 +37,31 @@
                   (click)="onClickOpenProfile($event, element.seq)"
                 />
               </span>
-              <!--모바일 상태-->
+              <span
-              <span class="text-accent-color marker-mobile-state">
+                *ngIf="getPresence(element, PresenceType.MOBILE) === 'mobileOn'"
+                class="text-accent-color marker-mobile-state"
+              >
                 <mat-icon>phone_android</mat-icon>
               </span>
             </div>
-          </td>
-        </ng-container>
-        <ng-container matColumnDef="name">
-          <th
-            mat-header-cell
-            *matHeaderCellDef
-            #header
-            class="name"
-            (mousedown)="resizeTable($event, header)"
-          >
-            {{ 'search.fieldName' | translate }}
-          </th>
-          <td mat-cell *matCellDef ="let element">
             <div>
-              <!-- morning-off: 오전 afternoon-off: 오후 day-off: 휴가 long-time: 장기 leave-of-absence: 휴직-->
+              <span
-              <span class="work-status morning-off">
+                class="work-status"
-                {{ getWorkstatus(element) }}</span
+                [ngClass]="getWorkstatusInfo(element, 'style')"
               >
+                {{ getWorkstatusInfo(element, 'text') }}
+              </span>
               <span class="name">
                 {{ element.name }}
               </span>
             </div>
           </td>
         </ng-container>
-
         <ng-container matColumnDef="grade">
           <th
             mat-header-cell
-            *matHeaderCellDef
+            *matHeaderCellDef class="grade"
-            #header
+            (mousedown)="resizeTable($event)"
-            class="grade"
-            (mousedown)="resizeTable($event, header)"
           >
             {{ 'search.fieldGrade' | translate }}
           </th>
@@ -97,14 +74,12 @@
         <ng-container matColumnDef="deptName">
           <th
             mat-header-cell
-            *matHeaderCellDef
+            *matHeaderCellDef class="deptName"
-            #header
+            (mousedown)="resizeTable($event)"
-            class="deptName"
-            (mousedown)="resizeTable($event, header)"
           >
             {{ 'search.fieldDeptartment' | translate }}
           </th>
-          <td mat-cell *matCellDef ="let element">
+          <td mat-cell *matCellDef="let element">
             <div class="deptName">
               {{ element.deptName }}
             </div>
@@ -113,14 +88,12 @@
         <ng-container matColumnDef="companyName">
           <th
             mat-header-cell
-            *matHeaderCellDef
+            *matHeaderCellDef class="companyName"
-            #header
+            (mousedown)="resizeTable($event)"
-            class="companyName"
-            (mousedown)="resizeTable($event, header)"
           >
             {{ 'search.fieldCompany' | translate }}
           </th>
-          <td mat-cell *matCellDef ="let element">
+          <td mat-cell *matCellDef="let element">
             <div class="companyName">
               {{ element.companyName }}
             </div>
@@ -130,14 +103,12 @@
         <ng-container matColumnDef="lineNumber">
           <th
             mat-header-cell
-            *matHeaderCellDef
+            *matHeaderCellDef class="lineNumber"
-            #header
+            (mousedown)="resizeTable($event)"
-            class="lineNumber"
-            (mousedown)="resizeTable($event, header)"
           >
             {{ 'search.fieldOfficePhoneNumber' | translate }}
           </th>
-          <td mat-cell *matCellDef ="let element" class="lineNumber">
+          <td mat-cell *matCellDef="let element" class="lineNumber">
             <div class="lineNumber">
               {{ element.lineNumber }}
             </div>
@@ -146,14 +117,12 @@
         <ng-container matColumnDef="hpNumber">
           <th
             mat-header-cell
-            *matHeaderCellDef
+            *matHeaderCellDef class="hpNumber"
-            #header
+            (mousedown)="resizeTable($event)"
-            class="hpNumber"
-            (mousedown)="resizeTable($event, header)"
           >
             {{ 'search.fieldHandphone' | translate }}
           </th>
-          <td mat-cell *matCellDef ="let element" class="hpNumber">
+          <td mat-cell *matCellDef="let element" class="hpNumber">
             <div class="hpNumber">
               {{ element.hpNumber }}
             </div>
@@ -162,14 +131,12 @@
         <ng-container matColumnDef="email">
           <th
             mat-header-cell
-            *matHeaderCellDef
+            *matHeaderCellDef class="email"
-            #header
+            (mousedown)="resizeTable($event)"
-            class="email"
-            (mousedown)="resizeTable($event, header)"
           >
             {{ 'search.fieldEmail' | translate }}
           </th>
-          <td mat-cell *matCellDef ="let element" class="email">
+          <td mat-cell *matCellDef="let element" class="email">
             <div class="email">
               {{ element.email }}
             </div>
@@ -178,14 +145,12 @@
         <ng-container matColumnDef="responsibilities">
           <th
             mat-header-cell
-            *matHeaderCellDef
+            *matHeaderCellDef class="responsibilities"
-            #header
+            (mousedown)="resizeTable($event)"
-            class="responsibilities"
-            (mousedown)="resizeTable($event, header)"
           >
             {{ 'search.fieldResponsibilities' | translate }}
           </th>
-          <td mat-cell *matCellDef ="let element" class="responsibilities">
+          <td mat-cell *matCellDef="let element" class="responsibilities">
             <div class="responsibilities">
               {{ element.responsibilities }}
             </div>
@@ -194,14 +159,12 @@
         <ng-container matColumnDef="workplace">
           <th
             mat-header-cell
-            *matHeaderCellDef
+            *matHeaderCellDef class="workplace"
-            #header
+            (mousedown)="resizeTable($event)"
-            class="workplace"
-            (mousedown)="resizeTable($event, header)"
           >
             {{ 'search.fieldWorkPlace' | translate }}
           </th>
-          <td mat-cell *matCellDef ="let element" class="workplace">
+          <td mat-cell *matCellDef="let element" class="workplace">
             <div class="workplace">
               {{ element.workplace }}
             </div>

projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.scss

@@ -13,6 +13,15 @@
   }
 }
 
+@mixin disable-selection {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
+}
+
 .search-scrollbar {
   height: 550px;
 }
@@ -54,6 +63,7 @@
     table-layout: fixed;
     width: 100%;
     th {
+      @include disable-selection;
       text-align: center;
     }
     td.mat-cell {
@@ -77,6 +87,7 @@
             transform: translateY(-30px);
           }
           .thumbnail {
+            cursor: pointer;
             &-mask {
               display: inline-block;
               width: 40px;

projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.ts

@@ -54,7 +54,6 @@ export class IntegratedSearchComponent implements OnInit {
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   displayedColumns: string[] = [
     'profile',
-    'name',
     'deptName',
     'companyName',
     'grade',
@@ -69,6 +68,7 @@ export class IntegratedSearchComponent implements OnInit {
   pressed = false;
   startX: any;
   startWidth: any;
+  relationWidth: any;
   resizableFnMousemove: () => void;
   resizableFnMouseup: () => void;
 
@@ -130,29 +130,49 @@ export class IntegratedSearchComponent implements OnInit {
 
     return rtnClass;
   }
-  getWorkstatus(userInfo: UserInfoSS): string {
+  getWorkstatusInfo(userInfo: UserInfoSS, type: string): string {
-    let workstatus = '';
+    let workstatus = userInfo.workstatus;
-    if (!!userInfo && !!userInfo.workstatus) {
+
-      switch (userInfo.workstatus) {
+    const presences = this.presence.filter(p => p.userSeq === userInfo.seq);
-        case WorkStatusType.VacationAM:
+
-          workstatus = '오전';
+    if (!!presences && presences.length > 0) {
-          break;
+      const presence = presences[0];
-        case WorkStatusType.VacationPM:
+      if (
-          workstatus = '오후';
+        !!presence &&
-          break;
+        !!presence.workstatus &&
-        case WorkStatusType.VacationAll:
+        presence.workstatus.trim().length > 0
-          workstatus = '휴가';
+      ) {
-          break;
+        workstatus = presence.workstatus;
-        case WorkStatusType.LeaveOfAbsence:
-          workstatus = '휴직';
-          break;
-        case WorkStatusType.LongtermRefresh:
-          workstatus = '장기';
-          break;
       }
     }
 
-    return workstatus;
+    let text = '';
+    // morning-off: 오전 afternoon-off: 오후  day-off: 휴가 long-time: 장기  leave-of-absence: 휴직
+    let style = '';
+    switch (workstatus) {
+      case WorkStatusType.VacationAM:
+        style = 'morning-off';
+        text = '오전';
+        break;
+      case WorkStatusType.VacationPM:
+        style = 'afternoon-off';
+        text = '오후';
+        break;
+      case WorkStatusType.VacationAll:
+        style = 'day-off';
+        text = '휴가';
+        break;
+      case WorkStatusType.LeaveOfAbsence:
+        style = 'leave-of-absence';
+        text = '휴직';
+        break;
+      case WorkStatusType.LongtermRefresh:
+        style = 'long-time';
+        text = '장기';
+        break;
+    }
+
+    return type === 'text' ? text : style;
   }
 
   onClickOpenProfile(event: MouseEvent, userSeq: number) {
@@ -162,23 +182,34 @@ export class IntegratedSearchComponent implements OnInit {
     this.openProfile.emit(userSeq);
   }
 
-  resizeTable(event: any, column: any) {
+  resizeTable(event: any) {
     this.start = event.target;
+    if (this.start.cellIndex !== this.displayedColumns.length - 1) {
       this.pressed = true;
       this.startX = event.pageX;
       this.startWidth = this.start.clientWidth;
-    this.mouseMove(column);
+      this.relationWidth = this.start.nextElementSibling.clientWidth;
+      this.mouseMove();
+    }
   }
 
-  mouseMove(column: any) {
+  mouseMove() {
+    const column = this.start;
+    const relationColumn = column.nextElementSibling;
+
     this.resizableFnMousemove = this.renderer.listen(
       'document',
       'mousemove',
       event => {
         if (this.pressed) {
-          let width = this.startWidth + (event.pageX - this.startX);
+          const gap = event.pageX - this.startX;
-          let index = this.start.cellIndex;
+          const columnWidth = this.startWidth + gap;
-          column.width = width;
+          const relationWidth = this.relationWidth - gap;
+
+          if (columnWidth > 50 && relationWidth > 50) {
+            column.width = columnWidth;
+            relationColumn.width = relationWidth;
+          }
         }
       }
     );
@@ -188,6 +219,10 @@ export class IntegratedSearchComponent implements OnInit {
       event => {
         if (this.pressed) {
           this.pressed = false;
+          this.start = undefined;
+          this.startX = undefined;
+          this.startWidth = undefined;
+          this.relationWidth = undefined;
           this.resizableFnMousemove();
           this.resizableFnMouseup();
         }