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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucap-webmessenger",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "author": {
     "name": "LG CNS",
     "email": "lgucap@lgcns.com"

projects/ucap-webmessenger-api/src/lib/types/message-status-code.type.ts

@@ -23,6 +23,8 @@ export enum MessageStatusCode {
   Fail_File_Size = '41',
   /** 파일 업로드 시, 업로드할 수 없는 파일 형식일 경우 발생 */
   Fail_File_Ext = '42',
+  /** 발송 취소된 메시지 */
+  Fail_Cancelled_Msg = '51',
   /** Exception 에러 발생 */
   Fail = '99'
 }

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

@@ -37,52 +37,57 @@
       </form>
     </div>
   </div>
-  <div *ngIf="!isSearch">
+  <div *ngIf="!isSearch" class="message-section">
     <mat-tab-group
       #tabs
       mat-stretch-tabs
       animationDuration="0ms"
       [selectedIndex]="0"
       (selectedIndexChange)="onSelectedIndexChange($event)"
+      class="message-tab"
     >
       <mat-tab [label]="MessageType.Receive">
         <ng-template mat-tab-label>
           {{ 'message.messageTypeReceiving' | translate }}
         </ng-template>
-
+        <perfect-scrollbar fxFlex="1 1 auto">
-        <ucap-message-list-item
+          <ucap-message-list-item
-          *ngFor="let message of messageRetrieveList$ | async"
+            *ngFor="let message of messageRetrieveList$ | async"
-          [message]="message"
+            [message]="message"
-          (click)="onClickDetail(message)"
+            (click)="onClickDetail(message)"
-          class="message-item"
+            class="message-item"
-        ></ucap-message-list-item>
+          ></ucap-message-list-item>
+        </perfect-scrollbar>
       </mat-tab>
       <mat-tab [label]="MessageType.Send">
         <ng-template mat-tab-label>
           {{ 'message.messageTypeOutgoing' | translate }}
         </ng-template>
-
+        <perfect-scrollbar fxFlex="1 1 auto">
-        <ucap-message-list-item
+          <ucap-message-list-item
-          *ngFor="let message of messageSendList$ | async"
+            *ngFor="let message of messageSendList$ | async"
-          [message]="message"
+            [message]="message"
-          (click)="onClickDetail(message)"
+            (click)="onClickDetail(message)"
-          class="message-item"
+            class="message-item"
-        ></ucap-message-list-item>
+          ></ucap-message-list-item>
+        </perfect-scrollbar>
       </mat-tab>
       <mat-tab [label]="MessageType.Reservation">
         <ng-template mat-tab-label>
           {{ 'message.messageTypeReservation' | translate }}
         </ng-template>
-
+        <perfect-scrollbar fxFlex="1 1 auto">
-        <ucap-message-list-item
+          <ucap-message-list-item
-          *ngFor="let message of messageReservationList$ | async"
+            *ngFor="let message of messageReservationList$ | async"
-          [message]="message"
+            [message]="message"
-          (click)="onClickDetail(message)"
+            (click)="onClickDetail(message)"
-          class="message-item"
+            class="message-item"
-        ></ucap-message-list-item>
+          ></ucap-message-list-item>
+        </perfect-scrollbar>
       </mat-tab>
     </mat-tab-group>
   </div>
+
   <div *ngIf="isSearch">
     <div class="search-sub">
       <form [formGroup]="fgSearchType" class="w-100-p">

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

@@ -1,3 +1,7 @@
+.message-box {
+  position: relative;
+  height: 100%;
+}
 .current-head {
   h3 {
     display: inline-flex;
@@ -65,7 +69,16 @@
 .mat-tab-label-active {
   opacity: 1;
 }
-
 .message-item {
   cursor: pointer;
 }
+::ng-deep .message-box {
+  .message-section {
+    position: relative;
+    height: calc(100% - 130px);
+    .message-tab {
+      position: relative;
+      height: 100%;
+    }
+  }
+}

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

@@ -15,7 +15,12 @@ import { NGXLogger } from 'ngx-logger';
 
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
-import { DialogService } from '@ucap-webmessenger/ui';
+import {
+  DialogService,
+  AlertDialogComponent,
+  AlertDialogResult,
+  AlertDialogData
+} from '@ucap-webmessenger/ui';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
 import {
@@ -46,6 +51,7 @@ import {
 
 import * as AppStore from '@app/store';
 import * as MessageStore from '@app/store/messenger/message';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-layout-chat-left-sidenav-message',
@@ -94,6 +100,7 @@ export class MessageBoxComponent
     private formBuilder: FormBuilder,
     private sessionStorageService: SessionStorageService,
     private dialogService: DialogService,
+    private translateService: TranslateService,
     private messageApiService: MessageApiService,
     private logger: NGXLogger
   ) {
@@ -177,6 +184,23 @@ export class MessageBoxComponent
                 break;
             }
           }
+        } else if (
+          !!info &&
+          info.responseCode === MessageStatusCode.Fail_Cancelled_Msg
+        ) {
+          this.dialogService.open<
+            AlertDialogComponent,
+            AlertDialogData,
+            AlertDialogResult
+          >(AlertDialogComponent, {
+            width: '360px',
+            data: {
+              title: this.translateService.instant('message.errors.label'),
+              message: this.translateService.instant(
+                'message.errors.cancelledMessage'
+              )
+            }
+          });
         }
       });
 

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

@@ -75,13 +75,11 @@ export class Effects {
           };
           return this.messageApiService.detailMessage(request).pipe(
             map(res => {
-              if (res.responseCode === MessageStatusCode.Success) {
+              this.store.dispatch(
-                this.store.dispatch(
+                detailMessageSuccess({
-                  detailMessageSuccess({
+                  res
-                    res
+                })
-                  })
+              );
-                );
-              }
             }),
             catchError(error => of(detailMessageFailure({ error })))
           );

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

@@ -281,7 +281,8 @@
       "label": "Message error",
       "failToSending": "The message failed to send.",
       "failToModify": "The message failed to modify.",
-      "minTimeReservation": "It can be set only 30 minutes after the current time."
+      "minTimeReservation": "It can be set only 30 minutes after the current time.",
+      "cancelledMessage": "This message has been cancelled."
     }
   },
   "notice": {

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

@@ -281,7 +281,8 @@
       "label": "쪽지 에러",
       "failToSending": "쪽지를 전송에 실패 하였습니다.",
       "failToModify": "쪽지 수정에 실패 하였습니다.",
-      "minTimeReservation": "현재 시각으로부터 30분 이후로만 설정 가능합니다."
+      "minTimeReservation": "현재 시각으로부터 30분 이후로만 설정 가능합니다.",
+      "cancelledMessage": "발송 취소된 쪽지 입니다."
     }
   },
   "notice": {

projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html

@@ -16,7 +16,7 @@
         <span class="name">
           <b>
             {{ message.userName
-            }}<span *ngIf="message.userCount > 0">
+            }}<span *ngIf="message.userCount > 1">
               {{
                 'message.andOthers'
                   | translate: { count: message.userCount - 1 }

projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html

@@ -13,7 +13,7 @@
     </span>
     <button
       mat-stroked-button
-      class="btn-translation-send"
+      class="btn-translation-send bg-accent-color"
       (click)="onClickSendTranslationMessage(translationPreviewInfo)"
     >
       <!--{{ 'chat.send' | translate }}-->