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

2020-01-15 13:53:22 +09:00 · 2020-01-15 13:53:22 +09:00 · 704b2a0983
commit 704b2a0983
parent be60e02f94 4d303df05a
13 changed files with 296 additions and 77 deletions
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.ts
@ -149,6 +149,13 @@ export class MessageBoxComponent
          // Badge Refresh in case Receive Message..
          if (info.msgInfo.type === MessageType.Receive) {
            this.doRefreshUnReadCount.emit();
+
+            // Clear Receive Message New Badge..
+            this.store.dispatch(
+              MessageStore.clearNewFlagReceiveMessage({
+                msgId: info.msgInfo.msgId
+              })
+            );
          }

          // detail view..
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
@ -1303,6 +1303,33 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
              }
              break;
            case EventType.Translation:
+              {
+                let trgtStr = '';
+                if (clicktype === 'translation') {
+                  // translation
+                  trgtStr = (message.sentMessageJson as TranslationEventJson)
+                    .translation;
+                } else {
+                  // original
+                  trgtStr = (message.sentMessageJson as TranslationEventJson)
+                    .original;
+                }
+
+                if (this.clipboardService.copyFromContent(trgtStr)) {
+                  this.snackBarService.open(
+                    this.translateService.instant(
+                      'common.clipboard.results.copied'
+                    ),
+                    '',
+                    {
+                      duration: 3000,
+                      verticalPosition: 'top',
+                      horizontalPosition: 'center'
+                    }
+                  );
+                }
+              }
+              break;
            case EventType.MassTranslation:
              {
                const sentMessageJson: MassTranslationEventJson = message.sentMessageJson as MassTranslationEventJson;
--- a/projects/ucap-webmessenger-app/src/app/services/notification.service.ts
+++ b/projects/ucap-webmessenger-app/src/app/services/notification.service.ts
@ -660,6 +660,10 @@ export class AppNotificationService {

                // Remove one Receive Message
                if (!!noti && !!noti.keyId) {
+                  // clear badge in left navi
+                  this.store.dispatch(MessageStore.retrieveUnreadCount({}));
+
+                  // delete message in receive message list
                  this.store.dispatch(
                    deleteMessageSuccess({
                      messageType: MessageType.Receive,
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/message/actions.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/message/actions.ts
@ -122,3 +122,8 @@ export const clearSearchMessage = createAction(
  '[Messenger::Message] Clear Search Message',
  props()
 );
+
+export const clearNewFlagReceiveMessage = createAction(
+  '[Messenger::Message] Clear NewFlag Message',
+  props<{ msgId: number }>()
+);
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/message/reducers.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/message/reducers.ts
@ -18,9 +18,10 @@ import {
  detailMessageSuccess,
  detailMessageClear,
  detailMessage,
-  clearSearchMessage
+  clearSearchMessage,
+  clearNewFlagReceiveMessage
 } from './actions';
-import { MessageType } from '@ucap-webmessenger/api-message';
+import { MessageType, MessageList } from '@ucap-webmessenger/api-message';

 export const reducer = createReducer(
  initialState,
@ -149,6 +150,22 @@ export const reducer = createReducer(
    };
  }),

+  on(clearNewFlagReceiveMessage, (state, action) => {
+    const msgId = action.msgId;
+    const msgList: MessageList = {
+      ...state.receiveList.entities[msgId],
+      readYn: true
+    };
+
+    return {
+      ...state,
+      receiveList: adapterReceiveList.updateOne(
+        { id: msgId, changes: msgList },
+        { ...state.receiveList }
+      )
+    };
+  }),
+
  on(cancelReservationMessageSuccess, (state, action) => {
    return {
      ...state,
--- a/projects/ucap-webmessenger-app/src/assets/i18n/en.json
+++ b/projects/ucap-webmessenger-app/src/assets/i18n/en.json
@ -198,6 +198,7 @@
    "isRoomTypeSecret": "This room is secret type",
    "notificationIsOn": "Notification is on",
    "notificationIsOff": "Notification is off",
+    "typeMessage": "Type your message.",
    "event": {
      "inviteToRoomWith": "{{owner}} invited {{inviter}}.",
      "exitFromRoomWith": "{{exitor}} has left.",
@ -276,6 +277,8 @@
    "detailOfViewers": "Detail of viewers",
    "selectRecipient": "Select recipient",
    "andOthers": "and {{count}}others",
+    "addReceiver": "Add Reciever",
+    "countOfReceiver": "{{count}} total recipients",
    "results": {
      "successForSending": "Your message has been sent.",
      "successForReservation": "You have scheduled a message transfer.",
--- a/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
+++ b/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
@ -198,6 +198,7 @@
    "isRoomTypeSecret": "비밀 대화방입니다.",
    "notificationIsOn": "알림 켜짐",
    "notificationIsOff": "알림 꺼짐",
+    "typeMessage": "대화를 입력하세요.",
    "event": {
      "inviteToRoomWith": "{{owner}}이 {{inviter}}을 초대했습니다.",
      "exitFromRoomWith": "{{exitor}}님이 퇴장하셨습니다.",
@ -266,7 +267,7 @@
    "sendingTime": "보낸 시간",
    "reservationTime": "발송 예정 시간",
    "countOfReadUser": "읽은 사람",
-    "countOfUnreadUser": "읽은 않은 사람",
+    "countOfUnreadUser": "읽지 않은 사람",
    "badgeDescriptionForUnread": "확인하지 않은 쪽지가 있습니다.",
    "cancelReservation": "예약 발송 취소",
    "cancelSending": "발송 취소",
@ -276,6 +277,8 @@
    "detailOfViewers": "읽음 확인",
    "selectRecipient": "수신자 선택",
    "andOthers": "외 {{count}}명",
+    "addReceiver": "수신자 추가",
+    "countOfReceiver": "총 수신자 {{count}}명",
    "results": {
      "successForSending": "쪽지를 전송하였습니다.",
      "successForReservation": "쪽지 전송을 예약 하였습니다.",
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html
@ -50,7 +50,7 @@
      <textarea
        matInput
        #replyInput
-        placeholder="Type your message"
+        placeholder="{{ 'chat.typeMessage' | translate }}"
        ngModel
        name="message"
        [matTextareaAutosize]="true"
--- a/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html
+++ b/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html
@ -61,7 +61,7 @@
    </dd>
  </dl>
  <div class="date">
-    <span>{{ message.regDate | ucapDate: 'MM:DD' }}</span>
+    <span>{{ message.regDate | ucapDate: 'C' }}</span>
    <span
      *ngIf="message.type === MessageType.Receive && !message.readYn"
      class="badge-new bg-warn-darkest"
--- a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.html
+++ b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.html
@ -1,41 +1,38 @@
 <mat-card class="mat-elevation-z0 ucap-message-write">
  <form name="messageWriteForm" [formGroup]="messageWriteForm" novalidate>
-    <mat-form-field class="message-title">
-      <input
-        matInput
-        formControlName="title"
-        placeholder="{{ 'message.fieldTitle' | translate }}"
-      />
-    </mat-form-field>
+    <div class="add-row">
+      <button
+        mat-button
+        (click)="onClickReceiverList()"
+        class="mat-mini-fab mat-button-base mat-accent mat-elevation-z"
+      >
+        <mat-icon>add</mat-icon>
+        <span class="mat-fab__label">{{
+          'message.addReceiver' | translate
+        }}</span>
+      </button>
+      <span
+        *ngIf="receiverList.length > 0"
+        class="receiver-sum text-accent-color"
+      >
+        {{
+          'message.countOfReceiver' | translate: { count: receiverList.length }
+        }}
+      </span>
+    </div>
+    <mat-chip-list #chipList aria-label="receiver selection">
+      <mat-chip
+        *ngFor="let receiver of receiverList"
+        removable="true"
+        (removed)="onRemovedReceiver(receiver)"
+      >
+        {{ receiver.name }}
+        <span matChipRemove class="mdi mdi-close"></span>
+      </mat-chip>
+    </mat-chip-list>

-    <mat-card-content class="message-write-body">
-      <div
-        #editor
-        class="ucap-message-write-editor"
-        contenteditable="true"
-        (paste)="onPasteEditor($event)"
-        (input)="onInputEditor()"
-      ></div>
-      <input type="file" #fileInput style="display: none" multiple />
-      <mat-list>
-        <mat-list-item *ngFor="let oldAttachment of oldAttachmentList">
-          {{ oldAttachment.resContent }}
-          <button
-            mat-button
-            aria-label="이미지삭제"
-            (click)="onClickDeleteOldAttachment(oldAttachment)"
-          >
-            <span class="mdi mdi-delete"></span>
-          </button>
-        </mat-list-item>
-        <mat-list-item *ngFor="let attachment of attachmentList">
-          {{ attachment.name }}
-        </mat-list-item>
-      </mat-list>
-    </mat-card-content>
-
-    <perfect-scrollbar>
-      <mat-form-field class="message-receiver-list">
+    <!--<mat-form-field class="message-receiver-list">
+      <perfect-scrollbar>
        <mat-chip-list #chipList aria-label="receiver selection">
          <mat-chip
            *ngFor="let receiver of receiverList"
@ -52,31 +49,80 @@
            (click)="onClickReceiverList()"
          />
        </mat-chip-list>
-      </mat-form-field>
-    </perfect-scrollbar>
+      </perfect-scrollbar>
+    </mat-form-field>
+    -->

+    <mat-form-field class="message-title">
+      <input
+        matInput
+        formControlName="title"
+        placeholder="{{ 'message.fieldTitle' | translate }}"
+      />
+    </mat-form-field>
+
+    <div class="message-content">
+      <mat-card-content class="message-write-body">
+        <div
+          #editor
+          class="ucap-message-write-editor"
+          contenteditable="true"
+          (paste)="onPasteEditor($event)"
+          (input)="onInputEditor()"
+        ></div>
+        <input type="file" #fileInput style="display: none" multiple />
+        <mat-list>
+          <mat-list-item *ngFor="let oldAttachment of oldAttachmentList">
+            {{ oldAttachment.resContent }}
+            <button
+              mat-button
+              aria-label="이미지삭제"
+              (click)="onClickDeleteOldAttachment(oldAttachment)"
+            >
+              <span class="mdi mdi-delete"></span>
+            </button>
+          </mat-list-item>
+          <mat-list-item *ngFor="let attachment of attachmentList">
+            {{ attachment.name }}
+          </mat-list-item>
+        </mat-list>
+        <div class="message-option">
+          <div class="editor-tools">
+            <button
+              mat-icon-button
+              aria-label="이미지"
+              (click)="onClickImage()"
+            >
+              <span class="mdi mdi-camera mdi-24px"></span>
+            </button>
+            <button
+              mat-icon-button
+              aria-label="첨부파일"
+              (click)="onClickAttachment()"
+            >
+              <span class="mdi mdi-attachment mdi-rotate-90 mdi-24px"></span>
+            </button>
+          </div>
+          <div class="length">
+            <span
+              [class.editor-length-invalid]="
+                0 === contentLength || 1000 < contentLength
+              "
+              >{{ contentLength }}</span
+            >/1000
+          </div>
+        </div>
+      </mat-card-content>
+    </div>
    <mat-card-actions>
-      <div class="editor-tools">
-        <button mat-icon-button aria-label="이미지" (click)="onClickImage()">
-          <span class="mdi mdi-camera mdi-24px"></span>
-        </button>
-        <button
-          mat-icon-button
-          aria-label="첨부파일"
-          (click)="onClickAttachment()"
-        >
-          <span class="mdi mdi-attachment mdi-rotate-90 mdi-24px"></span>
-        </button>
-      </div>
-      <div class="editor-actions-spacer"></div>
-      <div>
+      <!--<div>
        <span
          [class.editor-length-invalid]="
            0 === contentLength || 1000 < contentLength
          "
          >{{ contentLength }}</span
        >/1000
-      </div>
+      </div>-->
      <div class="editor-actions-spacer"></div>
      <div class="editor-actions">
        <button
@ -86,8 +132,36 @@
        >
          {{ 'common.messages.cancel' | translate }}
        </button>
+        <button
+          mat-flat-button
+          (click)="onClickSend()"
+          [disabled]="
+            messageWriteForm.invalid ||
+            !receiverList ||
+            0 === receiverList.length ||
+            0 === contentLength ||
+            1000 < contentLength
+          "
+          class="mat-primary"
+        >
+          {{ 'message.sendTo' | translate }}
+        </button>
+        <button
+          mat-flat-button
+          (click)="onClickSendSchedule()"
+          [disabled]="
+            messageWriteForm.invalid ||
+            !receiverList ||
+            0 === receiverList.length ||
+            0 === contentLength ||
+            1000 < contentLength
+          "
+          class="mat-primary"
+        >
+          {{ 'message.sendReservation' | translate }}
+        </button>

-        <mat-menu #appMenu="matMenu" yPosition="above">
+        <!-- <mat-menu #appMenu="matMenu" yPosition="above">
          <button mat-menu-item (click)="onClickSendSchedule()">
            <span class="mdi mdi-send-clock"></span
            ><span>{{ 'message.sendReservation' | translate }}</span>
@ -121,7 +195,7 @@
          class="mat-primary"
        >
          {{ 'message.sendReservation' | translate }}
-        </button>
+        </button>-->
      </div>
    </mat-card-actions>
  </form>
--- a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.scss
+++ b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.scss
@ -7,20 +7,8 @@
    height: 100px;
  }

-  .message-title {
-    width: 100%;
-  }
-
  .message-write-body {
-    overflow: auto;
-    height: 270px;

-    .ucap-message-write-editor {
-      display: inline-block;
-      width: 100%;
-      height: 100%;
-      min-height: 250px;
-    }

    [contenteditable] {
    }
@ -45,14 +33,98 @@
  mat-card-actions {
    display: flex;
    width: 100%;
-
-    .editor-tools {
-      padding-left: 0px;
-    }
    .editor-actions-spacer {
      flex: 1 1 auto;
    }
-    .editor-actions {
+  }
+}
+
+.message-content {
+  display: flex;
+  flex-flow: row;
+  position: relative;
+  width: 100%;
+  .message-receiver-list {
+    position: relative;
+    width: 30%;
+    height: 100%;
+    margin-right: 10px;
+  }
+  .message-write-body {
+    display: flex;
+    flex: 1 1 auto;
+    flex-flow: column;
+    margin: 0;
+    .ucap-message-write-editor {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      padding: 10px;
+      height: 280px;
+      overflow: auto;
+    }
+    .message-option {
+      display: flex;
+      flex-flow: row;
+      flex: 1 1 auto;
+      height: 40px;
+      .editor-tools {
+      }
+      .length {
+        margin-left: auto;
+        align-self: center;
+      }
    }
  }
 }
+.mat-card-actions {
+  margin: 0 0 20px;
+  border-top: 1px solid #dddddd;
+  .editor-actions {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+    margin-left: auto;
+    button {
+      margin-left: 4px;
+    }
+  }
+}
+
+::ng-deep .ucap-message-write {
+  padding: 0;
+  .add-row {
+    display: flex;
+    align-items: center;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #dddddd;
+    .mat-mini-fab {
+      .mat-button-wrapper {
+        padding: 0;
+        .mat-icon {
+          width: 40px;
+          height: 40px;
+          line-height: 40px;
+        }
+        .mat-fab__label {
+          color: #212121;
+          margin-left: 10px;
+        }
+      }
+    }
+    .receiver-sum {
+      margin-left: auto;
+    }
+  }
+  .mat-chip-list {
+    .mat-chip-list-wrapper {
+      max-height: 100px;
+      overflow: auto;
+    }
+  }
+  .message-title {
+    width: 100%;
+    margin-top: 10px;
+  }
+}
--- a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.ts
+++ b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.ts
@ -78,6 +78,7 @@ export class GeneralComponent implements OnInit, OnDestroy {
  }

  ngOnInit() {
+    this.logger.debug('general setting', this.setting);
    let themeIndex: number;
    switch (this.setting.appTheme) {
      case 'theme-default':
--- a/projects/ucap-webmessenger-ui/src/lib/components/pick-date.component.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/components/pick-date.component.ts
@ -10,6 +10,7 @@ import {
 import { ucapAnimations } from '../animations';
 import { MatCalendar, DateAdapter } from '@angular/material';
 import { Subject } from 'rxjs';
+import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'ucap-pick-date',
@ -34,7 +35,12 @@ export class PickDateComponent<D> implements OnInit {
  calendar: MatCalendar<D>;

  // tslint:disable-next-line: variable-name
-  constructor(@Optional() private _dateAdapter: DateAdapter<D>) {}
+  constructor(
+    @Optional() private _dateAdapter: DateAdapter<D>,
+    private translateService: TranslateService
+  ) {
+    this._dateAdapter.setLocale(this.translateService.currentLang);
+  }

  ngOnInit() {}