mass text component modify

projects/ucap-webmessenger-api-common/src/lib/apis/mass-talk-download.ts

@@ -8,19 +8,24 @@ import {
 } from '@ucap-webmessenger/api';
 
 export interface MassTalkDownloadRequest extends APIRequest {
-  userSeq: string;
+  userSeq: number;
   deviceType: DeviceType;
   token: string;
-  eventMassSeq?: string;
+  eventMassSeq?: number;
 }
 
 export interface MassTalkDownloadResponse extends APIResponse {
-  Content?: string;
-  UserName?: string;
-  RegDate?: string;
+  content?: string;
+  userName?: string;
+  regDate?: string;
 }
 
-const massTalkDownloadEncodeMap = {};
+const massTalkDownloadEncodeMap = {
+  userSeq: 'p_user_seq',
+  deviceType: 'p_device_type',
+  token: 'p_token',
+  eventMassSeq: 'p_event_mass_seq'
+};
 
 export const encodeMassTalkDownload: APIEncoder<MassTalkDownloadRequest> = (
   req: MassTalkDownloadRequest
@@ -31,5 +36,11 @@ export const encodeMassTalkDownload: APIEncoder<MassTalkDownloadRequest> = (
 export const decodeMassTalkDownload: APIDecoder<MassTalkDownloadResponse> = (
   res: any
 ) => {
-  return {} as MassTalkDownloadResponse;
+  return {
+    statusCode: res.StatusCode,
+    errorMessage: res.ErrorMessage,
+    content: res.Content,
+    userName: res.UserName,
+    regDate: res.RegDate
+  } as MassTalkDownloadResponse;
 };

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

@@ -29,7 +29,8 @@
   <!-- CHAT CONTENT -->
   <div fxFlex="1 1 auto" class="chat-content" #messageBoxContainer>
     <!-- CHAT MESSAGES -->
-    <ucap-chat-messages [messages]="eventList$ | async" [userInfos]="userInfoList$ | async" [loginRes]="loginRes">
+    <ucap-chat-messages [messages]="eventList$ | async" [userInfos]="userInfoList$ | async" [loginRes]="loginRes"
+      (massDetail)="onMassDetail($event)">
     </ucap-chat-messages>
     <!-- CHAT MESSAGES -->
   </div>

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

@@ -14,6 +14,7 @@ import { Info, EventType } from '@ucap-webmessenger/protocol-event';
 
 import * as AppStore from '@app/store';
 import * as EventStore from '@app/store/messenger/event';
+import * as ChatStore from '@app/store/messenger/chat';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
@@ -113,4 +114,13 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
       this.messageBoxContainer.nativeElement.scrollTop = this.messageBoxContainer.nativeElement.scrollHeight;
     } catch (err) {}
   }
+
+  /** MassText Detail View */
+  onMassDetail(value: number) {
+    this.store.dispatch(
+      ChatStore.selectedMassDetail({
+        massEventSeq: value
+      })
+    );
+  }
 }

projects/ucap-webmessenger-app/src/app/store/messenger/chat/actions.ts

@@ -1,5 +1,9 @@
 import { createAction, props } from '@ngrx/store';
 import { Info } from '@ucap-webmessenger/protocol-event';
+import {
+  MassTalkDownloadRequest,
+  MassTalkDownloadResponse
+} from '@ucap-webmessenger/api-common';
 
 export const selectedRoom = createAction(
   '[Messenger::Chat] selectedRoom',
@@ -13,3 +17,20 @@ export const newEventMessage = createAction(
     info: Info;
   }>()
 );
+
+export const selectedMassDetail = createAction(
+  '[Messenger::Chat] selectedMassDetail',
+  props<{ massEventSeq: number }>()
+);
+export const massTalkDownload = createAction(
+  '[Messenger::Chat] massTalkDownload',
+  props<MassTalkDownloadRequest>()
+);
+export const massTalkDownloadSuccess = createAction(
+  '[Messenger::Chat] massTalkDownload Success',
+  props<MassTalkDownloadResponse>()
+);
+export const massTalkDownloadFailure = createAction(
+  '[Messenger::Chat] massTalkDownload Failure',
+  props<{ error: any }>()
+);

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

@@ -1,15 +1,85 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Inject } from '@angular/core';
 
-import { Actions } from '@ngrx/effects';
+import { Actions, ofType, createEffect } from '@ngrx/effects';
 
 import { Store } from '@ngrx/store';
 
 import { NGXLogger } from 'ngx-logger';
+import { catchError, exhaustMap, map, tap, switchMap } from 'rxjs/operators';
+import {
+  selectedMassDetail,
+  massTalkDownload,
+  massTalkDownloadFailure,
+  massTalkDownloadSuccess
+} from './actions';
+import { Login2Response } from '@ucap-webmessenger/pi';
+import {
+  webLoginFailure,
+  webLoginSuccess
+} from '@app/store/account/authentication';
+import { of } from 'rxjs';
+import { PublicApiService } from '@ucap-webmessenger/api-public';
+import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+import { StatusCode } from '@ucap-webmessenger/api';
+import {
+  CommonApiService,
+  MassTalkDownloadRequest
+} from '@ucap-webmessenger/api-common';
+import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
+import { EnvironmentsInfo, KEY_ENVIRONMENTS_INFO } from '@app/types';
+import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 
 @Injectable()
 export class Effects {
+  selectedMassDetail$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(selectedMassDetail),
+      map(action => {
+        const loginResInfo: LoginResponse = this.sessionStorageService.get<
+          LoginResponse
+        >(KEY_LOGIN_RES_INFO);
+
+        const environmentsInfo = this.sessionStorageService.get<
+          EnvironmentsInfo
+        >(KEY_ENVIRONMENTS_INFO);
+
+        return massTalkDownload({
+          userSeq: loginResInfo.userSeq,
+          deviceType: environmentsInfo.deviceType,
+          eventMassSeq: Number(action.massEventSeq),
+          token: loginResInfo.tokenString
+        });
+      })
+    )
+  );
+
+  massTalkDownload$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(massTalkDownload),
+        map(action => action),
+        exhaustMap(req => {
+          return this.commonApiService.massTalkDownload(req).pipe(
+            map(res => {
+              this.logger.debug(res);
+              if (res.statusCode === StatusCode.Success) {
+                this.store.dispatch(massTalkDownloadSuccess(res));
+              } else {
+                this.store.dispatch(massTalkDownloadFailure({ error: res }));
+              }
+            }),
+            catchError(error => of(massTalkDownloadFailure({ error })))
+          );
+        })
+      );
+    },
+    { dispatch: false }
+  );
+
   constructor(
     private actions$: Actions,
+    private commonApiService: CommonApiService,
+    private sessionStorageService: SessionStorageService,
     private store: Store<any>,
     private logger: NGXLogger
   ) {}

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

@@ -1,6 +1,12 @@
 import { createReducer, on } from '@ngrx/store';
 import { initialState } from './state';
-import { selectedRoom } from './actions';
+import {
+  selectedRoom,
+  selectedMassDetail,
+  massTalkDownloadFailure,
+  massTalkDownload,
+  massTalkDownloadSuccess
+} from './actions';
 
 export const reducer = createReducer(
   initialState,
@@ -9,5 +15,31 @@ export const reducer = createReducer(
       ...state,
       selectedRoom: action.roomSeq
     };
+  }),
+
+  on(selectedMassDetail, (state, action) => {
+    return {
+      ...state,
+      selectedMassDetail: action.massEventSeq
+    };
+  }),
+
+  on(massTalkDownload, (state, action) => {
+    return {
+      ...state,
+      massDetailProcessing: true
+    };
+  }),
+  on(massTalkDownloadSuccess, (state, action) => {
+    return {
+      ...state,
+      massDetailProcessing: false
+    };
+  }),
+  on(massTalkDownloadFailure, (state, action) => {
+    return {
+      ...state,
+      massDetailProcessing: false
+    };
   })
 );

projects/ucap-webmessenger-app/src/app/store/messenger/chat/state.ts

@@ -2,10 +2,15 @@ import { Selector, createSelector } from '@ngrx/store';
 
 export interface State {
   selectedRoom: string | null;
+
+  selectedMassDetail: number | null;
+  massDetailProcessing: boolean;
 }
 
 export const initialState: State = {
-  selectedRoom: null
+  selectedRoom: null,
+  selectedMassDetail: null,
+  massDetailProcessing: false
 };
 
 export function selectors<S>(selector: Selector<any, State>) {
@@ -13,6 +18,10 @@ export function selectors<S>(selector: Selector<any, State>) {
     selectedRoom: createSelector(
       selector,
       (state: State) => state.selectedRoom
+    ),
+    selectedMassDetail: createSelector(
+      selector,
+      (state: State) => state.selectedMassDetail
     )
   };
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/file.component.html

@@ -0,0 +1,3 @@
+<p>
+  file
+</p>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html

@@ -1,8 +1,12 @@
 <p>
   <span>
-    {{ message.sentMessage }}
+    {{ content }}
   </span>
   <span>
     {{ message.sendDate | date: 'short' }}
   </span>
+  {{detailButteonShow}}
+  <span *ngIf="detailButteonShow">
+    <button mat-button (click)="onClickDetailView()">Detail View</button>
+  </span>
 </p>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.ts

@@ -1,5 +1,7 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Info } from '@ucap-webmessenger/protocol-event';
+import { NGXLogger } from 'ngx-logger';
+import { StatusCode } from '@ucap-webmessenger/api';
 
 @Component({
   selector: 'ucap-chat-message-box-mass',
@@ -10,7 +12,46 @@ export class MassComponent implements OnInit {
   @Input()
   message: Info;
 
-  constructor() {}
+  @Output()
+  massDetail = new EventEmitter<number>();
 
-  ngOnInit() {}
+  content: string;
+  eventMassSeq: number;
+  detailButteonShow = true;
+
+  constructor(private logger: NGXLogger) {}
+
+  ngOnInit() {
+    try {
+      const contentJson: MassTextInfo = JSON.parse(this.message.sentMessage);
+      if (contentJson.StatusCode === StatusCode.Success) {
+        this.content = contentJson.Content;
+      } else {
+        this.content = contentJson.ErrorMessage || '[Error] System Error!!';
+        this.detailButteonShow = false;
+      }
+
+      if (!!contentJson.EventMassSeq) {
+        this.eventMassSeq = contentJson.EventMassSeq;
+      } else {
+        this.detailButteonShow = false;
+      }
+    } catch (e) {
+      this.logger.error(e);
+      this.detailButteonShow = false;
+    }
+  }
+
+  onClickDetailView() {
+    this.massDetail.emit(this.eventMassSeq);
+  }
+}
+
+export interface MassTextInfo {
+  StatusCode?: StatusCode;
+  ErrorMessage?: string;
+  EventMassSeq?: number;
+  RoomID?: string;
+  RegDate?: Date;
+  Content?: string;
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -17,7 +17,9 @@
     </div>
     <ng-container [ngSwitch]="message.type">
       <ucap-chat-message-box-text *ngSwitchCase="EventType.Character" [message]="message"></ucap-chat-message-box-text>
-      <ucap-chat-message-box-mass *ngSwitchCase="EventType.MassText" [message]="message"></ucap-chat-message-box-mass>
+      <ucap-chat-message-box-mass *ngSwitchCase="EventType.MassText" [message]="message"
+        (massDetail)="onMassDetail($event)">
+      </ucap-chat-message-box-mass>
       <div *ngSwitchCase="EventType.Join">Join</div>
       <div *ngSwitchDefault>
         date splitter

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
 
 import { Info, EventType } from '@ucap-webmessenger/protocol-event';
 import {
@@ -22,6 +22,9 @@ export class MessagesComponent implements OnInit {
   @Input()
   userInfos?: UserInfo[];
 
+  @Output()
+  massDetail = new EventEmitter<number>();
+
   EventType = EventType;
   profileImageRoot: string;
 
@@ -57,4 +60,8 @@ export class MessagesComponent implements OnInit {
     }
     return '';
   }
+
+  onMassDetail(value: number) {
+    this.massDetail.emit(value);
+  }
 }

projects/ucap-webmessenger-ui-chat/src/lib/ucap-ui-chat.module.ts

@@ -7,6 +7,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
 
 import { FormComponent } from './components/form.component';
 import { MessagesComponent } from './components/messages.component';
@@ -55,7 +56,8 @@ const SERVICES = [];
     FlexLayoutModule,
     MatFormFieldModule,
     MatIconModule,
-    MatInputModule
+    MatInputModule,
+    MatButtonModule
   ],
   exports: [...COMPONENTS],
   declarations: [...COMPONENTS]