Merge branch 'master' of http://10.81.13.221:6990/Web/next-ucap-messenger

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

@@ -83,7 +83,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
     );
 
     this.eventList$ = this.store.pipe(
-      select(AppStore.MessengerSelector.EventSelector.infoList)
+      select(AppStore.MessengerSelector.EventSelector.selectAllInfoList)
     );
 
     this.scrollToBottomForMessageBoxContainer();

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

@@ -37,6 +37,13 @@ export const newInfo = createAction(
   }>()
 );
 
+export const recallInfoList = createAction(
+  '[Messenger::Event] recall InfoList',
+  props<{
+    eventSeq: number;
+  }>()
+);
+
 export const appendInfoList = createAction(
   '[Messenger::Event] Append InfoList',
   props<{

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

@@ -39,7 +39,8 @@ import {
   sendNotification,
   readNotification,
   cancelNotification,
-  delNotification
+  delNotification,
+  recallInfoList
 } from './actions';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { RoomInfo } from '@ucap-webmessenger/protocol-room';
@@ -194,8 +195,20 @@ export class Effects {
     () => {
       return this.actions$.pipe(
         ofType(cancelNotification),
-        map(action => action.noti),
+        withLatestFrom(
-        tap(noti => {})
+          this.store.pipe(
+            select((state: any) => state.messenger.room.roomInfo as RoomInfo)
+          )
+        ),
+        tap(([action, roomInfo]) => {
+          if (!!roomInfo && roomInfo.roomSeq === action.noti.roomSeq) {
+            this.logger.debug('cancelNotification$', action, roomInfo);
+            this.store.dispatch(
+              recallInfoList({ eventSeq: action.noti.eventSeq })
+            );
+            // this.store.dispatch(ChatStore.newEventMessage(action));
+          }
+        })
       );
     },
     { dispatch: false }

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

@@ -1,7 +1,14 @@
 import { createReducer, on } from '@ngrx/store';
-import { initialState } from './state';
+import { initialState, adapterInfoList } from './state';
-import { infoSuccess, appendInfoList, info, infoFailure } from './actions';
+import {
+  infoSuccess,
+  appendInfoList,
+  info,
+  infoFailure,
+  recallInfoList
+} from './actions';
 import * as AuthenticationStore from '@app/store/account/authentication';
+import { Info, EventType } from '@ucap-webmessenger/protocol-event';
 
 export const reducer = createReducer(
   initialState,
@@ -15,7 +22,9 @@ export const reducer = createReducer(
   on(infoSuccess, (state, action) => {
     return {
       ...state,
-      infoList: action.infoList,
+      infoList: adapterInfoList.addAll(action.infoList, {
+        ...state.infoList
+      }),
       infoStatus: action.res,
       infoListProcessing: false
     };
@@ -29,9 +38,38 @@ export const reducer = createReducer(
   }),
 
   on(appendInfoList, (state, action) => {
+    const eventinfo = action.info;
+
+    const statusEventInfo: Info = {
+      ...state.infoList.entities[eventinfo.seq],
+      type: eventinfo.type,
+      senderSeq: eventinfo.senderSeq,
+      sendDate: eventinfo.sendDate,
+      sentMessage: eventinfo.sentMessage,
+      receiverCount: eventinfo.receiverCount
+    };
+
     return {
       ...state,
-      infoList: [...state.infoList, action.info]
+      infoList: adapterInfoList.upsertOne(eventinfo, { ...state.infoList })
+    };
+  }),
+
+  on(recallInfoList, (state, action) => {
+    const eventSeq = action.eventSeq;
+
+    const statusEventInfo: Info = {
+      ...state.infoList.entities[eventSeq],
+      type: EventType.RecalledMessage,
+      sentMessage: '회수된 메시지'
+    };
+
+    return {
+      ...state,
+      infoList: adapterInfoList.updateOne(
+        { id: eventSeq, changes: statusEventInfo },
+        { ...state.infoList }
+      )
     };
   }),
 

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

@@ -1,19 +1,40 @@
 import { Selector, createSelector } from '@ngrx/store';
 import { InfoResponse, Info } from '@ucap-webmessenger/protocol-event';
+import { EntityState, createEntityAdapter } from '@ngrx/entity';
+
+export interface InfoListState extends EntityState<Info> {}
 
 export interface State {
   infoListProcessing: boolean;
-  infoList: Info[] | null;
+  infoList: InfoListState;
   infoStatus: InfoResponse | null;
 }
 
+export const adapterInfoList = createEntityAdapter<Info>({
+  selectId: info => info.seq
+});
+
+const infoListInitialState: InfoListState = adapterInfoList.getInitialState({});
+
 export const initialState: State = {
   infoListProcessing: false,
-  infoList: null,
+  infoList: infoListInitialState,
   infoStatus: null
 };
 
+const {
+  selectAll: ngeSelectAllInfoList,
+  selectEntities: ngeSelectEntitiesInfoList,
+  selectIds: ngeSelectIdsInfoList,
+  selectTotal: ngeSelectTotalInfoList
+} = adapterInfoList.getSelectors();
+
 export function selectors<S>(selector: Selector<any, State>) {
+  const selectInfoList = createSelector(
+    selector,
+    (state: State) => state.infoList
+  );
+
   return {
     infoListProcessing: createSelector(
       selector,
@@ -26,6 +47,21 @@ export function selectors<S>(selector: Selector<any, State>) {
     infoStatus: createSelector(
       selector,
       (state: State) => state.infoStatus
+    ),
+
+    selectAllInfoList: createSelector(
+      selectInfoList,
+      ngeSelectAllInfoList
+    ),
+    selectEntitiesInfoList: createSelector(
+      selectInfoList,
+      ngeSelectEntitiesInfoList
+    ),
+    selectInfoList: (seq: number) =>
+      createSelector(
+        selectInfoList,
+        ngeSelectEntitiesInfoList,
+        (_, entities) => (!!entities ? entities[seq] : undefined)
       )
   };
 }

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

@@ -1,5 +1,6 @@
 <div>
   <div class="room-name">{{ getRoomName(roomInfo) }}</div>
   <div>{{ roomInfo.finalEventDate }}</div>
-  <div>{{ roomInfo.finalEventMessage }}</div>
+  <div>{{ finalEventMessage }}</div>
+  <div *ngIf="roomInfo.noReadCnt > 0">noReadCnt : {{ roomInfo.noReadCnt }}</div>
 </div>

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.ts

@@ -2,10 +2,18 @@ import { Component, OnInit, Input } from '@angular/core';
 import {
   RoomInfo,
   UserInfoShort,
-  UserInfo as RoomUserInfo
+  UserInfo as RoomUserInfo,
+  RoomType
 } from '@ucap-webmessenger/protocol-room';
 import { NGXLogger } from 'ngx-logger';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
+import { EventType } from '@ucap-webmessenger/protocol-event';
+import {
+  FileInfo,
+  StickerInfo,
+  MassTextInfo
+} from '@ucap-webmessenger/ui-chat';
+import { FileType } from '@ucap-webmessenger/protocol-file';
 
 @Component({
   selector: 'ucap-room-list-item',
@@ -20,10 +28,60 @@ export class ListItemComponent implements OnInit {
   @Input()
   sessionVerinfo: VersionInfo2Response;
 
+  finalEventMessage: string;
+
   constructor(private logger: NGXLogger) {}
 
   ngOnInit() {
-    // this.logger.debug(this.roomInfo);
+    if (this.roomInfo.isTimeRoom) {
+      this.finalEventMessage = '비밀 대화방입니다.';
+    } else {
+      try {
+        switch (this.roomInfo.finalEventType) {
+          case EventType.File:
+            {
+              let msg = 'Attach File';
+              const contentJson: FileInfo = JSON.parse(
+                this.roomInfo.finalEventMessage
+              );
+              if (contentJson.FileType === FileType.File) {
+                msg = '첨부파일';
+              } else if (contentJson.FileType === FileType.Image) {
+                msg = '이미지';
+              } else if (contentJson.FileType === FileType.Video) {
+                msg = '동영상';
+              }
+              this.finalEventMessage = msg;
+            }
+            break;
+          case EventType.Sticker:
+            {
+              let msg = '스티커';
+              const contentJson: StickerInfo = JSON.parse(
+                this.roomInfo.finalEventMessage
+              );
+              if (contentJson.chat) {
+                msg += ' ' + contentJson.chat;
+              }
+              this.finalEventMessage = msg;
+            }
+            break;
+          case EventType.MassText:
+            {
+              const contentJson: MassTextInfo = JSON.parse(
+                this.roomInfo.finalEventMessage
+              );
+              this.finalEventMessage = contentJson.Content;
+            }
+            break;
+          default:
+            this.finalEventMessage = this.roomInfo.finalEventMessage;
+        }
+      } catch (e) {
+        this.logger.error(e);
+        this.finalEventMessage = this.roomInfo.finalEventMessage;
+      }
+    }
   }
 
   getRoomName(roomInfo: RoomInfo): string {
@@ -31,6 +89,10 @@ export class ListItemComponent implements OnInit {
       return roomInfo.roomName;
     }
 
+    if (roomInfo.roomType === RoomType.Mytalk) {
+      return 'MyTalk';
+    }
+
     if (!!this.roomUserInfo && 0 < this.roomUserInfo.length) {
       let roomName = '';
       this.roomUserInfo.forEach((roomUserInfo, index) => {