diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/index.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/index.ts index 5e9a00ab..5fddc2c8 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/index.ts +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/index.ts @@ -1,4 +1,9 @@ import { CreateChatDialogComponent } from './create-chat.dialog.component'; import { EditChatRoomDialogComponent } from './edit-chat-room.dialog.component'; +import { MassDetailComponent } from './mass-detail.component'; -export const DIALOGS = [CreateChatDialogComponent, EditChatRoomDialogComponent]; +export const DIALOGS = [ + CreateChatDialogComponent, + EditChatRoomDialogComponent, + MassDetailComponent +]; diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.html new file mode 100644 index 00000000..27078fba --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.html @@ -0,0 +1,15 @@ + + + {{ data.title }} + + + +

+ + + + + + diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.scss new file mode 100644 index 00000000..a73849fe --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.scss @@ -0,0 +1,25 @@ +::ng-deep .mat-card-header-tex { + margin: 0; +} +.confirm-card { + min-width: 500px; + .mat-card-header { + margin-bottom: 20px; + .mat-card-header-text { + .mat-card-title { + margin: 0 -16px; + } + } + } + .button-farm { + text-align: right; + .mat-primary { + margin-left: 4px; + } + } +} + +.contnets { + max-height: 500px; + word-break: break-word; +} diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.spec.ts new file mode 100644 index 00000000..ba81d968 --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MassDetailComponent } from './mass-detail.component'; + +describe('MassDetailComponent', () => { + let component: MassDetailComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MassDetailComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MassDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.ts new file mode 100644 index 00000000..fbcffc4a --- /dev/null +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.ts @@ -0,0 +1,58 @@ +import { + Component, + OnInit, + Inject, + ElementRef, + AfterViewInit +} from '@angular/core'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; +import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native'; + +export interface MassDetailDialogData { + title: string; + contents: string; +} + +// tslint:disable-next-line: no-empty-interface +export interface MassDetailDialogResult {} + +@Component({ + selector: 'app-layout-messenger-mass-detail', + templateUrl: './mass-detail.component.html', + styleUrls: ['./mass-detail.component.scss'] +}) +export class MassDetailComponent implements OnInit, AfterViewInit { + constructor( + public dialogRef: MatDialogRef< + MassDetailDialogData, + MassDetailDialogResult + >, + @Inject(MAT_DIALOG_DATA) public data: MassDetailDialogData, + private elementRef: ElementRef, + @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService + ) {} + + ngOnInit() {} + + ngAfterViewInit(): void { + if ( + !!this.elementRef.nativeElement && + !!this.elementRef.nativeElement.querySelector('a') + ) { + const elements = this.elementRef.nativeElement.querySelectorAll('a'); + elements.forEach(element => { + element.addEventListener('click', this.onClickEvent.bind(this)); + }); + } + } + + onClickEvent(event: MouseEvent) { + this.nativeService.openDefaultBrowser( + (event.target as HTMLAnchorElement).text + ); + } + + onClickConfirm(): void { + this.dialogRef.close(); + } +} diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/chat/effects.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/chat/effects.ts index 0f453a30..a176ca3c 100644 --- a/projects/ucap-webmessenger-app/src/app/store/messenger/chat/effects.ts +++ b/projects/ucap-webmessenger-app/src/app/store/messenger/chat/effects.ts @@ -26,6 +26,10 @@ import { AlertDialogData } from '@ucap-webmessenger/ui'; import { initialState } from '../event'; +import { + MassDetailComponent, + MassDetailDialogData +} from '@app/layouts/messenger/dialogs/chat/mass-detail.component'; @Injectable() export class Effects { @@ -63,21 +67,16 @@ export class Effects { this.store.dispatch(massTalkDownloadSuccess(res)); const result = this.dialogService.open< - AlertDialogComponent, - AlertDialogData - >( - AlertDialogComponent, - - { - width: '100%', - height: '500px', - disableClose: false, - data: { - title: '전체보기', - html: `
` + res.content + `
` - } + MassDetailComponent, + MassDetailDialogData + >(MassDetailComponent, { + disableClose: false, + width: '550px', + data: { + title: 'Detail View', + contents: res.content } - ); + }); } else { this.store.dispatch(massTalkDownloadFailure({ error: res })); } diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html index 21ca5af0..967b4eaf 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html @@ -1,5 +1,5 @@
- + {{ moment(message.sendDate).toDate() | date: 'short' }} diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.html index 8bfbb736..2ba11f34 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.html @@ -6,9 +6,6 @@ onerror="this.src='assets/sticker/sticker_default.png'" /> -
  • +
  • diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.ts index ca696612..5bed2b60 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.ts +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.ts @@ -1,28 +1,61 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { + Component, + OnInit, + Input, + Inject, + ElementRef, + AfterViewInit +} from '@angular/core'; import { Info, StickerEventJson } from '@ucap-webmessenger/protocol-event'; import { NGXLogger } from 'ngx-logger'; import { StickerInfo } from '../../models/sticker-info.json'; +import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native'; @Component({ selector: 'ucap-chat-message-box-sticker', templateUrl: './sticker.component.html', styleUrls: ['./sticker.component.scss'] }) -export class StickerComponent implements OnInit { +export class StickerComponent implements OnInit, AfterViewInit { @Input() message: Info; - contentJson?: StickerInfo; + contents: string; stickerUrl?: string; - constructor(private logger: NGXLogger) {} + constructor( + private logger: NGXLogger, + private elementRef: ElementRef, + @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService + ) {} ngOnInit() { try { if (!!this.message.sentMessageJson.file) { this.stickerUrl = `assets/sticker/sticker_s_${this.message.sentMessageJson.file}.png`; } + if (!!this.message.sentMessageJson.chat) { + this.contents = this.message.sentMessageJson.chat; + } } catch (e) { this.logger.error(e); } } + + ngAfterViewInit(): void { + if ( + !!this.elementRef.nativeElement && + !!this.elementRef.nativeElement.querySelector('a') + ) { + const elements = this.elementRef.nativeElement.querySelectorAll('a'); + elements.forEach(element => { + element.addEventListener('click', this.onClickEvent.bind(this)); + }); + } + } + + onClickEvent(event: MouseEvent) { + this.nativeService.openDefaultBrowser( + (event.target as HTMLAnchorElement).text + ); + } } diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_general.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_general.scss index c643d734..d1c55201 100644 --- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_general.scss +++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_general.scss @@ -68,3 +68,7 @@ input { border: none; padding: 0 16px; } + +a { + cursor: pointer; +}