ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

snackbar 에 html 태그 넣을 수 있도록 기능추가.

Browse Source
This commit is contained in:
leejinho 2020-01-10 09:37:29 +09:00
parent ed3f7e8ab5
commit 68e90ccd03
14 changed files with 250 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
projects/ucap-webmessenger-app/src/app/layouts/common/dialogs/file-viewer.dialog.component.ts
View File

@ -12,7 +12,11 @@ import { FileEventJson } from '@ucap-webmessenger/protocol-event';
import { DeviceType, FileUtil, MimeUtil } from '@ucap-webmessenger/core';
import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
import { take, map, finalize, tap } from 'rxjs/operators';
import { SnackBarService } from '@ucap-webmessenger/ui';
import {
SnackBarService,
AlertSnackbarComponent,
AlertSnackbarData
} from '@ucap-webmessenger/ui';
import { FileDownloadItem } from '@ucap-webmessenger/api';
import { CommonApiService } from '@ucap-webmessenger/api-common';
import { TranslateService } from '@ngx-translate/core';
@ -112,21 +116,35 @@ export class FileViewerDialogComponent implements OnInit, OnDestroy {
}
);
} else {
this.snackBarService.open(
this.translateService.instant(
'common.file.errors.failToSave'
),
this.translateService.instant('common.file.errors.label')
);
this.snackBarService.openFromComponent<
AlertSnackbarComponent,
AlertSnackbarData
>(AlertSnackbarComponent, {
data: {
html: this.translateService.instant(
'common.file.errors.failToSave'
),
buttonText: this.translateService.instant(
'common.file.errors.label'
)
}
});
}
})
.catch(reason => {
this.snackBarService.open(
this.translateService.instant(
'common.file.errors.failToSave'
),
this.translateService.instant('common.file.errors.label')
);
this.snackBarService.openFromComponent<
AlertSnackbarComponent,
AlertSnackbarData
>(AlertSnackbarComponent, {
data: {
html: this.translateService.instant(
'common.file.errors.failToSave'
),
buttonText: this.translateService.instant(
'common.file.errors.label'
)
}
});
});
})
.catch(reason => {

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

@ -20,7 +20,9 @@ import {
AlertDialogData,
AlertDialogResult,
FileUploadQueueComponent,
StringUtil
StringUtil,
AlertSnackbarComponent,
AlertSnackbarData
} from '@ucap-webmessenger/ui';
import { Store, select } from '@ngrx/store';
import { NGXLogger } from 'ngx-logger';
@ -1015,21 +1017,35 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
}
);
} else {
this.snackBarService.open(
this.translateService.instant(
'common.file.errors.failToSave'
),
this.translateService.instant('common.file.errors.label')
);
this.snackBarService.openFromComponent<
AlertSnackbarComponent,
AlertSnackbarData
>(AlertSnackbarComponent, {
data: {
html: this.translateService.instant(
'common.file.errors.failToSave'
),
buttonText: this.translateService.instant(
'common.file.errors.label'
)
}
});
}
})
.catch(reason => {
this.snackBarService.open(
this.translateService.instant(
'common.file.errors.failToSave'
),
this.translateService.instant('common.file.errors.label')
);
this.snackBarService.openFromComponent<
AlertSnackbarComponent,
AlertSnackbarData
>(AlertSnackbarComponent, {
data: {
html: this.translateService.instant(
'common.file.errors.failToSave'
),
buttonText: this.translateService.instant(
'common.file.errors.label'
)
}
});
});
})
.catch(reason => {
@ -1239,6 +1255,12 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
(message as Info<string>).sentMessage
)
) {
this.snackBarService.open(
this.translateService.instant(
'common.clipboard.results.copied'
),
'확인'
);
this.snackBarService.open(
this.translateService.instant(
'common.clipboard.results.copied'

45
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts
View File

@ -9,7 +9,6 @@ import { Store, select } from '@ngrx/store';
import * as AppStore from '@app/store';
import { tap, map, take, finalize } from 'rxjs/operators';
import { Info, FileEventJson } from '@ucap-webmessenger/protocol-event';
import { FileUtil, MimeUtil, DeviceType } from '@ucap-webmessenger/core';
import { CommonApiService } from '@ucap-webmessenger/api-common';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
@ -23,7 +22,11 @@ import {
import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
import { NGXLogger } from 'ngx-logger';
import { SnackBarService } from '@ucap-webmessenger/ui';
import {
SnackBarService,
AlertSnackbarComponent,
AlertSnackbarData
} from '@ucap-webmessenger/ui';
import { FileDownloadItem } from '@ucap-webmessenger/api';
import { ModuleConfig } from '@ucap-webmessenger/api-common';
import { _MODULE_CONFIG } from 'projects/ucap-webmessenger-api-common/src/lib/config/token';
@ -247,21 +250,35 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
}
);
} else {
this.snackBarService.open(
this.translateService.instant(
'common.file.errors.failToSave'
),
this.translateService.instant('common.file.errors.label')
);
this.snackBarService.openFromComponent<
AlertSnackbarComponent,
AlertSnackbarData
>(AlertSnackbarComponent, {
data: {
html: this.translateService.instant(
'common.file.errors.failToSave'
),
buttonText: this.translateService.instant(
'common.file.errors.label'
)
}
});
}
})
.catch(reason => {
this.snackBarService.open(
this.translateService.instant(
'common.file.errors.failToSave'
),
this.translateService.instant('common.file.errors.label')
);
this.snackBarService.openFromComponent<
AlertSnackbarComponent,
AlertSnackbarData
>(AlertSnackbarComponent, {
data: {
html: this.translateService.instant(
'common.file.errors.failToSave'
),
buttonText: this.translateService.instant(
'common.file.errors.label'
)
}
});
});
})
.catch(reason => {

42
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.ts
View File

@ -24,7 +24,9 @@ import {
ConfirmDialogComponent,
ConfirmDialogResult,
ConfirmDialogData,
DateOptions
DateOptions,
AlertSnackbarComponent,
AlertSnackbarData
} from '@ucap-webmessenger/ui';
import { CommonApiService } from '@ucap-webmessenger/api-common';
import { EventType } from '@ucap-webmessenger/protocol-event';
@ -291,21 +293,35 @@ export class FileBoxComponent implements OnInit, OnDestroy {
}
);
} else {
this.snackBarService.open(
this.translateService.instant(
'common.file.errors.failToSave'
),
this.translateService.instant('common.file.errors.label')
);
this.snackBarService.openFromComponent<
AlertSnackbarComponent,
AlertSnackbarData
>(AlertSnackbarComponent, {
data: {
html: this.translateService.instant(
'common.file.errors.failToSave'
),
buttonText: this.translateService.instant(
'common.file.errors.label'
)
}
});
}
})
.catch(reason => {
this.snackBarService.open(
this.translateService.instant(
'common.file.errors.failToSave'
),
this.translateService.instant('common.file.errors.label')
);
this.snackBarService.openFromComponent<
AlertSnackbarComponent,
AlertSnackbarData
>(AlertSnackbarComponent, {
data: {
html: this.translateService.instant(
'common.file.errors.failToSave'
),
buttonText: this.translateService.instant(
'common.file.errors.label'
)
}
});
});
})
.catch(reason => {

17
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.ts
View File

@ -16,7 +16,9 @@ import {
SnackBarService,
AlertDialogComponent,
AlertDialogResult,
AlertDialogData
AlertDialogData,
AlertSnackbarComponent,
AlertSnackbarData
} from '@ucap-webmessenger/ui';
import {
DetailResponse,
@ -400,9 +402,18 @@ export class MessageDetailDialogComponent implements OnInit {
'common.file.errors.failToSaveSomeOfAll'
);
}
this.snackBarService.open(errMsg, '', {
this.snackBarService.openFromComponent<
AlertSnackbarComponent,
AlertSnackbarData
>(AlertSnackbarComponent, {
duration: 8000,
verticalPosition: 'bottom'
verticalPosition: 'bottom',
data: {
html: errMsg,
buttonText: this.translateService.instant(
'common.file.errors.label'
)
}
});
} else {
// 성공종료.

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

@ -350,8 +350,8 @@
"errors": {
"label": "File errors",
"failToUpload": "File upload failed.",
"failToSave": "File save failed. Please 'Save As'.",
"failToSaveSomeOfAll": "Some of file(s) save failed. Please 'Save As'.",
"failToSave": "File save failed.<br/>Please 'Save As'.",
"failToSaveSomeOfAll": "Some of file(s) save failed.<br/>Please 'Save As'.",
"failToSpecifyPath": "Specifing of save path failed.",
"expired": "This file has expired",
"noPreview": "This file does not support preview.",

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

@ -350,8 +350,8 @@
"errors": {
"label": "파일 에러",
"failToUpload": "파일 업로드에 실패하였습니다.",
"failToSave": "파일 저장에 실패하였습니다. '다른 이름으로 저장' 하십시요.",
"failToSaveSomeOfAll": "파일 저장 중 일부 파일이 실패하였습니다. '다른 이름으로 저장' 하십시요.",
"failToSave": "파일 저장에 실패하였습니다.<br/>'다른 이름으로 저장' 하십시요.",
"failToSaveSomeOfAll": "파일 저장 중 일부 파일이 실패하였습니다.<br/>'다른 이름으로 저장' 하십시요.",
"failToSpecifyPath": "저장경로 지정에 실패하였습니다.",
"expired": "기간이 만료된 파일입니다",
"noPreview": "미리보기를 지원하지 않는 파일입니다.",

8
projects/ucap-webmessenger-ui/src/lib/services/snack-bar.service.ts
View File

@ -6,6 +6,7 @@ import {
MatSnackBarRef,
SimpleSnackBar
} from '@angular/material';
import { ComponentType } from '@angular/cdk/portal';
@Injectable({
providedIn: 'root'
@ -20,4 +21,11 @@ export class SnackBarService {
): MatSnackBarRef<SimpleSnackBar> {
return this.matSnackBar.open(message, action, config);
}
public openFromComponent<T, D = any>(
componentRef: ComponentType<T>,
config?: MatSnackBarConfig<D>
): MatSnackBarRef<T> {
return this.matSnackBar.openFromComponent<T>(componentRef, config);
}
}

18
projects/ucap-webmessenger-ui/src/lib/snackbars/alert.snackbar.component.html Normal file
View File

@ -0,0 +1,18 @@
<div fxFlex fxLayout="row" class="mat-simple-snackbar ng-star-inserted">
<span fxFlex #messageContainer></span>
<div
fxFlex="nogrow"
fxFlexAlign="center"
class="mat-simple-snackbar-action ng-star-inserted"
>
<button mat-stroked-button (click)="onClickConfirm()">
<ng-container
*ngIf="data.buttonText; then buttonText; else default"
></ng-container>
<ng-template #buttonText>{{ data.buttonText }}</ng-template>
<ng-template #default>{{
'common.messages.confirm' | translate
}}</ng-template>
</button>
</div>
</div>

0
projects/ucap-webmessenger-ui/src/lib/snackbars/alert.snackbar.component.scss Normal file
View File

24
projects/ucap-webmessenger-ui/src/lib/snackbars/alert.snackbar.component.spec.ts Normal file
View File

@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AlertSnackbarComponent } from './alert.snackbar.component';
describe('ui::AlertSnackbarComponent', () => {
let component: AlertSnackbarComponent;
let fixture: ComponentFixture<AlertSnackbarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [AlertSnackbarComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AlertSnackbarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

48
projects/ucap-webmessenger-ui/src/lib/snackbars/alert.snackbar.component.ts Normal file
View File

@ -0,0 +1,48 @@
import {
Component,
OnInit,
Inject,
ViewChild,
ElementRef
} from '@angular/core';
import {
MatDialogRef,
MAT_DIALOG_DATA,
MAT_SNACK_BAR_DATA,
MatSnackBarRef
} from '@angular/material';
export interface AlertSnackbarData {
html: string;
buttonText?: string;
}
// tslint:disable-next-line: no-empty-interface
export interface AlertSnackbarResult {}
@Component({
selector: 'ucap-ui-alert-snackbar',
templateUrl: './alert.snackbar.component.html',
styleUrls: ['./alert.snackbar.component.scss']
})
export class AlertSnackbarComponent implements OnInit {
@ViewChild('messageContainer', { static: true })
messageContainer: ElementRef;
tempAgeLimits = [];
constructor(
public dialogRef: MatSnackBarRef<AlertSnackbarComponent>,
@Inject(MAT_SNACK_BAR_DATA) public data: AlertSnackbarData
) {}
ngOnInit(): void {
if (!!this.data.html) {
this.messageContainer.nativeElement.innerHTML = this.data.html;
}
}
onClickConfirm(): void {
this.dialogRef.dismiss();
}
}

7
projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
View File

@ -75,6 +75,7 @@ import {
} from './pipes/string.pipe';
import { ClickDebounceDirective } from './directives/click-debounce.directive';
import { TranslationSectionComponent } from './components/translation-section.component';
import { AlertSnackbarComponent } from './snackbars/alert.snackbar.component';
const COMPONENTS = [
FileUploadQueueComponent,
@ -94,7 +95,11 @@ const COMPONENTS = [
SoundViewerComponent,
VideoViewerComponent
];
const DIALOGS = [AlertDialogComponent, ConfirmDialogComponent];
const DIALOGS = [
AlertDialogComponent,
ConfirmDialogComponent,
AlertSnackbarComponent
];
const DIRECTIVES = [
ClickOutsideDirective,
FileUploadForDirective,

2
projects/ucap-webmessenger-ui/src/public-api.ts
View File

@ -37,6 +37,8 @@ export * from './lib/services/translate.service';
export * from './lib/services/date.service';
export * from './lib/services/paginator-intl.service';
export * from './lib/snackbars/alert.snackbar.component';
export * from './lib/types/file-viewer.type';
export * from './lib/utils/string.util';