modify integrated search.

2020-01-30 17:16:20 +09:00 · 2020-01-30 17:16:20 +09:00 · d623359d1e
commit d623359d1e
parent 186a99bee9
5 changed files with 154 additions and 104 deletions
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts
+++ b/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();
+  }
 }
--- a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html
+++ b/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
-            mat-header-cell
-            *matHeaderCellDef
-            #header
-            class="profile"
-            (mousedown)="resizeTable($event, header)"
-          >-->
-          <th mat-header-cell *matHeaderCellDef #header class="profile" >
+          <th mat-header-cell *matHeaderCellDef class="profile">
            {{ 'search.fieldProfile' | translate }}
          </th>
-          <td mat-cell *matCellDef ="let element">
-            <!--
-            {{ getPresence(element, PresenceType.PC) }}
-            {{ getPresence(element, PresenceType.MOBILE) }}
-          -->
+          <td mat-cell *matCellDef="let element">
            <div class="profile">
              <span
-                class="presence pcOn"
-                [ngClass]="getPresence(PresenceType.PC)"
+                class="presence"
+                [ngClass]="getPresence(element, PresenceType.PC)"
              ></span>
              <span class="thumbnail-mask">
                <img
@ -48,43 +37,31 @@
                  (click)="onClickOpenProfile($event, element.seq)"
                />
              </span>
-              <!--모바일 상태-->
-              <span class="text-accent-color marker-mobile-state">
+              <span
+                *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 class="work-status morning-off">
-                {{ getWorkstatus(element) }}</span
+              <span
+                class="work-status"
+                [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
-            #header
-            class="grade"
-            (mousedown)="resizeTable($event, header)"
+            *matHeaderCellDef class="grade"
+            (mousedown)="resizeTable($event)"
          >
            {{ 'search.fieldGrade' | translate }}
          </th>
@ -97,14 +74,12 @@
        <ng-container matColumnDef="deptName">
          <th
            mat-header-cell
-            *matHeaderCellDef
-            #header
-            class="deptName"
-            (mousedown)="resizeTable($event, header)"
+            *matHeaderCellDef class="deptName"
+            (mousedown)="resizeTable($event)"
          >
            {{ '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
-            #header
-            class="companyName"
-            (mousedown)="resizeTable($event, header)"
+            *matHeaderCellDef class="companyName"
+            (mousedown)="resizeTable($event)"
          >
            {{ '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
-            #header
-            class="lineNumber"
-            (mousedown)="resizeTable($event, header)"
+            *matHeaderCellDef class="lineNumber"
+            (mousedown)="resizeTable($event)"
          >
            {{ '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
-            #header
-            class="hpNumber"
-            (mousedown)="resizeTable($event, header)"
+            *matHeaderCellDef class="hpNumber"
+            (mousedown)="resizeTable($event)"
          >
            {{ '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
-            #header
-            class="email"
-            (mousedown)="resizeTable($event, header)"
+            *matHeaderCellDef class="email"
+            (mousedown)="resizeTable($event)"
          >
            {{ '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
-            #header
-            class="responsibilities"
-            (mousedown)="resizeTable($event, header)"
+            *matHeaderCellDef class="responsibilities"
+            (mousedown)="resizeTable($event)"
          >
            {{ '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
-            #header
-            class="workplace"
-            (mousedown)="resizeTable($event, header)"
+            *matHeaderCellDef class="workplace"
+            (mousedown)="resizeTable($event)"
          >
            {{ '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>
--- a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.scss
+++ b/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;
--- a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.ts
+++ b/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 {
-    let workstatus = '';
-    if (!!userInfo && !!userInfo.workstatus) {
-      switch (userInfo.workstatus) {
-        case WorkStatusType.VacationAM:
-          workstatus = '오전';
-          break;
-        case WorkStatusType.VacationPM:
-          workstatus = '오후';
-          break;
-        case WorkStatusType.VacationAll:
-          workstatus = '휴가';
-          break;
-        case WorkStatusType.LeaveOfAbsence:
-          workstatus = '휴직';
-          break;
-        case WorkStatusType.LongtermRefresh:
-          workstatus = '장기';
-          break;
+  getWorkstatusInfo(userInfo: UserInfoSS, type: string): string {
+    let workstatus = userInfo.workstatus;
+
+    const presences = this.presence.filter(p => p.userSeq === userInfo.seq);
+
+    if (!!presences && presences.length > 0) {
+      const presence = presences[0];
+      if (
+        !!presence &&
+        !!presence.workstatus &&
+        presence.workstatus.trim().length > 0
+      ) {
+        workstatus = presence.workstatus;
      }
    }

-    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;
-    this.pressed = true;
-    this.startX = event.pageX;
-    this.startWidth = this.start.clientWidth;
-    this.mouseMove(column);
+    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.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);
-          let index = this.start.cellIndex;
-          column.width = width;
+          const gap = event.pageX - this.startX;
+          const columnWidth = this.startWidth + gap;
+          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();
        }