Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.html

@@ -10,7 +10,7 @@
     </div>
 
     <span
-      class="app-title text-accent-darkest "
+      class="app-title text-primary-color"
       [@animate]="{ value: '*', params: { delay: '100ms', y: '25px' } }"
     >
       {{ getTitle() }}

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html

@@ -48,9 +48,12 @@
     >
       <mat-tab [label]="MessageType.Receive">
         <ng-template mat-tab-label>
-          {{ 'message.messageTypeReceiving' | translate }}
+          {{ 'message.type.messageTypeReceiving' | translate }}
         </ng-template>
-        <perfect-scrollbar fxFlex="1 1 auto">
+        <perfect-scrollbar
+          fxFlex="1 1 auto"
+          *ngIf="!!(messageRetrieveList$ | async)"
+        >
           <ucap-message-list-item
             *ngFor="let message of messageRetrieveList$ | async"
             [message]="message"
@@ -58,12 +61,25 @@
             class="message-item"
           ></ucap-message-list-item>
         </perfect-scrollbar>
+        <div
+          class="no-search-result"
+          fxFlexFill
+          *ngIf="
+            !(messageRetrieveList$ | async) ||
+            0 === (messageRetrieveList$ | async).length
+          "
+        >
+          {{ 'common.noResult' | translate }}
+        </div>
       </mat-tab>
       <mat-tab [label]="MessageType.Send">
         <ng-template mat-tab-label>
-          {{ 'message.messageTypeOutgoing' | translate }}
+          {{ 'message.type.messageTypeOutgoing' | translate }}
         </ng-template>
-        <perfect-scrollbar fxFlex="1 1 auto">
+        <perfect-scrollbar
+          fxFlex="1 1 auto"
+          *ngIf="!!(messageSendList$ | async)"
+        >
           <ucap-message-list-item
             *ngFor="let message of messageSendList$ | async"
             [message]="message"
@@ -71,12 +87,25 @@
             class="message-item"
           ></ucap-message-list-item>
         </perfect-scrollbar>
+        <div
+          class="no-search-result"
+          fxFlexFill
+          *ngIf="
+            !(messageSendList$ | async) ||
+            0 === (messageSendList$ | async).length
+          "
+        >
+          {{ 'common.noResult' | translate }}
+        </div>
       </mat-tab>
       <mat-tab [label]="MessageType.Reservation">
         <ng-template mat-tab-label>
-          {{ 'message.messageTypeReservation' | translate }}
+          {{ 'message.type.messageTypeReservation' | translate }}
         </ng-template>
-        <perfect-scrollbar fxFlex="1 1 auto">
+        <perfect-scrollbar
+          fxFlex="1 1 auto"
+          *ngIf="!!(messageReservationList$ | async)"
+        >
           <ucap-message-list-item
             *ngFor="let message of messageReservationList$ | async"
             [message]="message"
@@ -84,6 +113,16 @@
             class="message-item"
           ></ucap-message-list-item>
         </perfect-scrollbar>
+        <div
+          class="no-search-result"
+          fxFlexFill
+          *ngIf="
+            !(messageReservationList$ | async) ||
+            0 === (messageReservationList$ | async).length
+          "
+        >
+          {{ 'common.noResult' | translate }}
+        </div>
       </mat-tab>
     </mat-tab-group>
   </div>
@@ -93,21 +132,16 @@
       <form [formGroup]="fgSearchType" class="w-100-p">
         <mat-form-field style="width: 100px;">
           <mat-select
+            value="A"
             formControlName="searchMessageType"
             (selectionChange)="onChangeSelection($event)"
           >
-            <mat-option [value]="MessageType.All">{{
+            <mat-option
-              'message.messageTypeAll' | translate
+              *ngFor="let messageType of messageTypeList"
-            }}</mat-option>
+              [value]="messageType.name"
-            <mat-option [value]="MessageType.Receive">{{
+            >
-              'message.messageTypeReceiving' | translate
+              {{ messageType.displayName }}
-            }}</mat-option>
+            </mat-option>
-            <mat-option [value]="MessageType.Send">{{
-              'message.messageTypeOutgoing' | translate
-            }}</mat-option>
-            <mat-option [value]="MessageType.Reservation">{{
-              'message.messageTypeReservation' | translate
-            }}</mat-option>
           </mat-select>
         </mat-form-field>
         <mat-radio-group
@@ -128,7 +162,10 @@
       </form>
     </div>
     <div style="height: calc(100% - 65.5px)">
-      <perfect-scrollbar fxFlex="1 1 auto">
+      <perfect-scrollbar
+        fxFlex="1 1 auto"
+        *ngIf="!!(messageSearchList$ | async)"
+      >
         <ucap-message-list-item
           *ngFor="let message of messageSearchList$ | async"
           [message]="message"
@@ -136,6 +173,16 @@
           class="message-item"
         ></ucap-message-list-item>
       </perfect-scrollbar>
+      <div
+        class="no-search-result"
+        fxFlexFill
+        *ngIf="
+          !(messageSearchList$ | async) ||
+          0 === (messageSearchList$ | async).length
+        "
+      >
+        {{ 'common.noSearchResult' | translate }}
+      </div>
     </div>
   </div>
 </div>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss

@@ -30,5 +30,10 @@
       position: relative;
       height: 100%;
     }
+
+    .no-search-result {
+      padding-top: 10px;
+      padding-left: 10px;
+    }
   }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.ts

@@ -8,9 +8,8 @@ import {
   Input,
   AfterViewChecked
 } from '@angular/core';
-import { Observable, Subscription } from 'rxjs';
+import { Observable, Subscription, merge } from 'rxjs';
 import { Store, select } from '@ngrx/store';
-import { tap } from 'rxjs/operators';
 import { NGXLogger } from 'ngx-logger';
 
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
@@ -53,6 +52,11 @@ import * as AppStore from '@app/store';
 import * as MessageStore from '@app/store/messenger/message';
 import { TranslateService } from '@ngx-translate/core';
 
+export interface MessageTypeData {
+  displayName: string;
+  name: string;
+}
+
 @Component({
   selector: 'app-layout-chat-left-sidenav-message',
   templateUrl: './message.component.html',
@@ -95,6 +99,9 @@ export class MessageBoxComponent
 
   isSearch = false;
 
+  messageTypeList: MessageTypeData[] = [];
+  langChangeSubscription: Subscription;
+
   constructor(
     private store: Store<any>,
     private formBuilder: FormBuilder,
@@ -217,6 +224,15 @@ export class MessageBoxComponent
     if (!!this.tabs) {
       this.tabs.realignInkBar();
     }
+
+    this.setMessageTypeData();
+    this.langChangeSubscription = merge(
+      this.translateService.onLangChange,
+      this.translateService.onDefaultLangChange,
+      this.translateService.onTranslationChange
+    ).subscribe(() => {
+      this.setMessageTypeData();
+    });
   }
 
   ngAfterViewChecked(): void {
@@ -230,6 +246,9 @@ export class MessageBoxComponent
     if (!!this.messageDetailInfo) {
       this.messageDetailInfo.unsubscribe();
     }
+    if (!!this.langChangeSubscription) {
+      this.langChangeSubscription.unsubscribe();
+    }
   }
 
   onSelectedIndexTab(value: number) {
@@ -275,6 +294,10 @@ export class MessageBoxComponent
     event.preventDefault();
     event.stopPropagation();
 
+    if (!search || search.trim().length === 0) {
+      return;
+    }
+
     this.getSearchMessage(
       MessageType.All,
       MessageSearchType.Name,
@@ -343,4 +366,32 @@ export class MessageBoxComponent
       })
     );
   }
+
+  private setMessageTypeData() {
+    const messageTypeData = this.translateService.instant('message.type');
+
+    const messageTypeList: MessageTypeData[] = [];
+    for (const key in messageTypeData) {
+      if (messageTypeData.hasOwnProperty(key)) {
+        let name = 'A';
+        switch (key) {
+          case 'messageTypeAll':
+            name = MessageType.All;
+            break;
+          case 'messageTypeReceiving':
+            name = MessageType.Receive;
+            break;
+          case 'messageTypeOutgoing':
+            name = MessageType.Send;
+            break;
+          case 'messageTypeReservation':
+            name = MessageType.Reservation;
+            break;
+        }
+        messageTypeList.push({ displayName: messageTypeData[key], name });
+      }
+    }
+
+    this.messageTypeList = messageTypeList;
+  }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts

@@ -265,6 +265,20 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
       .subscribe(roomInfo => {
         this.clearView();
         this.roomInfoSubject.next(roomInfo);
+
+        if (!!this.roomInfoSubject.value && !!this.interval) {
+          clearInterval(this.interval);
+          this.interval = undefined;
+        }
+
+        if (
+          !!this.roomInfoSubject.value &&
+          !!this.roomInfoSubject.value.isTimeRoom
+        ) {
+          this.interval = setInterval(() => {
+            this.store.dispatch(EventStore.infoIntervalClear({}));
+          }, 1000);
+        }
       });
 
     this.userInfoListSubscription = this.store
@@ -393,15 +407,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
           }
         }
       });
-
-    if (
-      !!this.roomInfoSubject.value &&
-      !!this.roomInfoSubject.value.isTimeRoom
-    ) {
-      this.interval = setInterval(() => {
-        this.store.dispatch(EventStore.infoIntervalClear({}));
-      }, 1000);
-    }
   }
 
   ngOnDestroy(): void {

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html

@@ -3,13 +3,13 @@
     <mat-card-title>
       <ng-container [ngSwitch]="messageInfo.type">
         <span *ngSwitchCase="MessageType.Receive">{{
-          'message.messageTypeReceiving' | translate
+          'message.type.messageTypeReceiving' | translate
         }}</span>
         <span *ngSwitchCase="MessageType.Send">{{
-          'message.messageTypeOutgoing' | translate
+          'message.type.messageTypeOutgoing' | translate
         }}</span>
         <span *ngSwitchCase="MessageType.Reservation">{{
-          'message.messageTypeReservation' | translate
+          'message.type.messageTypeReservation' | translate
         }}</span>
       </ng-container>
     </mat-card-title>

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

@@ -20,7 +20,7 @@
       [totalCount]="totalCount"
       [pageCurrent]="pageCurrent"
       [pageListCount]="pageListCount"
-      (search)="onSearch($event)"
+      (search)="onReSearch($event)"
       (changePage)="onChangePage($event)"
       (openProfile)="onClickOpenProfile($event)"
     >

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

@@ -92,6 +92,12 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
     );
   }
 
+  onReSearch(searchWord: string) {
+    this.pageCurrent = 1;
+
+    this.onSearch(searchWord);
+  }
+
   onSearch(searchWord: string) {
     this.currentSearchWord = this.data.keyword;
 

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html

@@ -10,7 +10,7 @@
     </ucap-integrated-search-form>
     <div
       *ngIf="!!loginRes && !!weblink"
-      class="app-layout-native-title-bar-link"
+      class="app-layout-native-title-bar-link weblink"
     >
       <ng-container *ngFor="let link of weblink" [ngSwitch]="link.key">
         <button

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss

@@ -48,11 +48,13 @@
         -webkit-box-align: center;
         align-items: center;
         position: relative;
-        display: inline-block;
+        display: inline-flex;
         min-width: 0;
         width: auto;
         overflow: hidden;
         white-space: nowrap;
+        align-items: center;
+        height:100%;
         .button {
           -webkit-app-region: no-drag;
           outline: 0;
@@ -69,8 +71,7 @@
           text-align: center;
           font-size: 10px;
           vertical-align: middle;
-          margin-left: 10px;
+          margin-right: 12px;
-          transform: translateY(-2px);
           .weblink {
             display: inline-flex;
             line-height: 24px;
@@ -121,7 +122,7 @@
         width: 10px;
         height: 20px;
         border-right: 1px solid rgba(255, 255, 255, 0.3);
-        margin: 0 10px 0 10px;
+        margin: 0 10px 0 0;
         display: inline-block;
       }
       .myprofile-item {

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts

@@ -562,6 +562,10 @@ export class TopBarComponent implements OnInit, OnDestroy {
   }
 
   onIntegratedSearch(keyword: string) {
+    if (!keyword || keyword.trim().length === 0) {
+      return;
+    }
+
     this.dialogService.open<
       IntegratedSearchDialogComponent,
       IntegratedSearchDialogData,

projects/ucap-webmessenger-app/src/app/store/messenger/status/effects.ts

@@ -120,6 +120,16 @@ export class Effects {
     )
   );
 
+  myStatusCheck$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(AuthStore.loginSuccess),
+      map(action => action.loginRes),
+      map(loginRes => {
+        return bulkInfo({ divCd: 'bulk', userSeqs: [loginRes.userSeq] });
+      })
+    )
+  );
+
   constructor(
     private actions$: Actions,
     private store: Store<any>,

projects/ucap-webmessenger-app/src/app/store/messenger/status/reducers.ts

@@ -9,6 +9,7 @@ import {
 
 import * as AuthenticationStore from '@app/store/account/authentication';
 import { StatusBulkInfo } from '@ucap-webmessenger/protocol-status';
+import { StatusCode } from '@ucap-webmessenger/core';
 
 export const reducer = createReducer(
   initialState,
@@ -68,6 +69,22 @@ export const reducer = createReducer(
     } as State;
   }),
 
+  on(AuthenticationStore.loginSuccess, (state, action) => {
+    return {
+      ...state,
+      myStatus: {
+        userSeq: action.loginRes.userSeq,
+        pcStatus: StatusCode.OnLine,
+        phoneStatus: StatusCode.Offline,
+        mobileStatus: StatusCode.Offline,
+        conferenceStatus: StatusCode.Offline,
+        statusMessage: '',
+        mobileConferenceStatus: StatusCode.Offline,
+        imessengerStatus: StatusCode.Offline
+      }
+    };
+  }),
+
   on(changeMyIdleCheckTime, (state, action) => {
     return {
       ...state,

projects/ucap-webmessenger-app/src/assets/i18n/en.json

@@ -293,10 +293,6 @@
     "sendTo": "Send message",
     "sendReservation": "Send reservation",
     "placeholderForSearch": "search for name, title, content",
-    "messageTypeAll": "All",
-    "messageTypeReceiving": "Receiving",
-    "messageTypeOutgoing": "Outgoing",
-    "messageTypeReservation": "Reservation",
     "searchTypeName": "Name",
     "searchTypeTitle": "Title",
     "searchTypeContent": "Content",
@@ -318,6 +314,12 @@
     "andOthers": "and {{count}}others",
     "addReceiver": "Add Reciever",
     "countOfReceiver": "{{count}} total recipients",
+    "type": {
+      "messageTypeAll": "All",
+      "messageTypeReceiving": "Receiving",
+      "messageTypeOutgoing": "Outgoing",
+      "messageTypeReservation": "Reservation"
+    },
     "results": {
       "successForSending": "Your message has been sent.",
       "successForReservation": "You have scheduled a message transfer.",
@@ -372,7 +374,8 @@
     "searchWord": "Search word",
     "searchResult": "Search result",
     "noSearchResult": "There is no search result",
-    "useOnlyForSpecialCharacter": "Can only use Special characters: {{v}}",
+    "noResult": "There is no result",
+    "useOnlyForSpecialCharacter": "Can only use Special characters: {{specialCharacter}}",
     "units": {
       "date": "Date",
       "time": "Time",

projects/ucap-webmessenger-app/src/assets/i18n/ko.json

@@ -293,10 +293,6 @@
     "sendTo": "쪽지 보내기",
     "sendReservation": "쪽지 예약 보내기",
     "placeholderForSearch": "이름, 제목, 내용 검색",
-    "messageTypeAll": "전체",
-    "messageTypeReceiving": "수신",
-    "messageTypeOutgoing": "발신",
-    "messageTypeReservation": "예약",
     "searchTypeName": "이름",
     "searchTypeTitle": "제목",
     "searchTypeContent": "내용",
@@ -318,6 +314,12 @@
     "andOthers": "외 {{count}}명",
     "addReceiver": "수신자 추가",
     "countOfReceiver": "총 수신자 {{count}}명",
+    "type": {
+      "messageTypeAll": "전체",
+      "messageTypeReceiving": "수신",
+      "messageTypeOutgoing": "발신",
+      "messageTypeReservation": "예약"
+    },
     "results": {
       "successForSending": "쪽지를 전송하였습니다.",
       "successForReservation": "쪽지 전송을 예약 하였습니다.",
@@ -372,6 +374,7 @@
     "searchWord": "검색어",
     "searchResult": "검색 결과",
     "noSearchResult": "검색 결과가 없습니다.",
+    "noResult": "조회된 내용이 없습니다.",
     "useOnlyForSpecialCharacter": "특수문자는 {{specialCharacter}}만 사용할 수 있습니다.",
     "units": {
       "date": "날짜",

projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss

@@ -52,21 +52,22 @@ ol {
   list-style: none;
 }
 $lg-red: (
-  50: #fff9fc,
+  50: #ffffff,
-  100: #f8bbd0,
+  100: #fff9fc,
-  200: #f48fb1,
+  200: #f1e1e5,
   /*300: #f06292,*/ 300: #ef4c73,
   400: #ec407a,
   500: #ed097e,
   600: #d81b60,
   700: #c2185b,
   800: #ad1457,
-  900: #880e4f,
+  /*900: #880e4f,*/ 900: #5f2a41,
   A100: #ff80ab,
   A200: #ff4081,
   A400: #ff3399,
   A700: #c51162,
   B100: #4f4f4f,
+  B200: #67545b,
   G100: #ef4c73,
   G900: #352a37,
   contrast: (
@@ -92,14 +93,12 @@ $lg-red: (
 
 $aquaBlue-daesang: (
   50: #f9feff,
-  //#e0f7fa,
+  100: #ebfdff,
-    /* 100: #b2ebf2,*/ 100: #ebfdff,
+  200: #a7f3fd,
-  /*200: #65e4f5,*/ 200: #a7f3fd,
+  300: #4dd0e1,
-  //#80deea,
-    300: #4dd0e1,
   400: #26c6da,
   500: #00bcd4,
-  /*600: #00acc1,*/ 600: #00b6d5,
+  600: #00b6d5,
   700: #1ea7b9,
   800: #0367a6,
   900: #024873,
@@ -108,6 +107,7 @@ $aquaBlue-daesang: (
   A400: #00e5ff,
   A700: #06a6c1,
   B100: #2d3a4a,
+  B200: #00b6d5,
   //,#47667fbackgroundcolor
     G100: #0367a6,
   /*G900: #192a2c,*/ G900: #6dd5ed,
@@ -200,11 +200,11 @@ $daesang-grey: (
     color: mat-color($primary, default-contrast);
   }
   .bg-accent-dark {
-    background: mat-color($accent, 600);
+    background: mat-color($accent, B200);
     color: mat-color($primary, default-contrast);
   }
   .bg-accent-light {
-    background: mat-color($accent, 300) !important;
+    background: mat-color($accent, 300);
     color: mat-color($primary, default-contrast);
   }
   .bg-accent-bright {
@@ -278,7 +278,8 @@ $daesang-grey: (
   .policy {
     background-color: mat-color($accent, B100);
   }
-  .mat-badge-accent .mat-badge-content {
+  .mat-badge-accent .mat-badge-content,
+  .weblink .mat-badge-content {
     background-color: mat-color($warn, 400);
   }
 
@@ -430,4 +431,12 @@ $daesang-grey: (
   .translation-preview {
     background-color: mat-color($accent, 900, 0.8);
   }
+  .tree-has-child {
+    li {
+      .tree-node-body {
+        background-color: mat-color($accent, 100);
+        border: 1px solid mat-color($accent, 200);
+      }
+    }
+  }
 }

projects/ucap-webmessenger-ui-message/src/lib/components/write.component.ts

@@ -558,11 +558,15 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit {
     const selection: Selection = document.getSelection();
     const range: Range = selection.getRangeAt(0);
 
+    let inEditor = false;
     if (removeSelected) {
+      // onPaste
       selection.empty();
+      inEditor = true;
+    } else {
+      inEditor = this.inEditor(selection.anchorNode);
     }
 
-    const inEditor = this.inEditor(selection.anchorNode);
     if (inEditor) {
       range.insertNode(node);
     } else {

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

@@ -3,8 +3,6 @@
 
   .tree-node-closer-container {
     position: relative;
-    // border: 1px dotted grey;
-    // border-width: 0 0 1px 1px;
 
     .tree-node-closer-top {
       width: 15px;
@@ -13,7 +11,6 @@
       border: 1px dotted #cccccc;
       border-width: 0 0 1px 1px;
       top: -40px;
-      // left: 20px;
     }
     .tree-node-closer-bottom {
       width: 15px;
@@ -22,7 +19,6 @@
       border: 1px dotted #cccccc;
       border-width: 0 0 1px 1px;
       top: 0px;
-      // left: 20px;
     }
 
     .tree-node-closer-top[sub-node] {
@@ -52,11 +48,6 @@
     list-style-type: none;
   }
 
-  // li:last-child {
-  //   border-left: 1px solid white;
-  //   margin-left: -41px;
-  // }
-
   .tree-has-child {
     height: 50px;
     min-height: 50px;
@@ -71,10 +62,7 @@
       .tree-node-body {
         width: 100%;
         height: 40px;
-        background-color: #eef9fd;
-        border: 1px solid #cee1e8;
         border-radius: 4px;
-        //padding-bottom: 10px;
         button {
           line-height: normal;
           .mat-button-wrapper {

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

@@ -1,5 +1,5 @@
 <div class="search-container">
-  <span class="icon-img">
+  <span class="icon-img" (click)="onKeyDownEnter(searchWordInput.value)">
     <i class="mid mdi-magnify"></i>
   </span>
   <!--<mat-form-field appearance="outline">-->

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

@@ -196,6 +196,13 @@
         <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       </table>
     </perfect-scrollbar>
+    <div
+      class="no-search-result"
+      fxFlexFill
+      *ngIf="!searchUserInfos || 0 === searchUserInfos.length"
+    >
+      {{ 'common.noSearchResult' | translate }}
+    </div>
   </div>
   <div class="footer-fix search-result-footer">
     <mat-paginator

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

@@ -25,6 +25,9 @@
 .search-scrollbar {
   height: 550px;
 }
+::ng-deep .ps__rail-y {
+  z-index: 102;
+}
 
 ::ng-deep .search-area {
   .search-container {