From 9ba453fc5a3982cb5e7e15cfcd10f1486fa6f1b1 Mon Sep 17 00:00:00 2001 From: JUNG YI DAM Date: Thu, 29 Sep 2022 05:24:45 +0000 Subject: [PATCH] =?UTF-8?q?=EA=B3=B5=EC=A7=80=EC=82=AC=ED=95=AD,=20?= =?UTF-8?q?=EA=B3=A0=EA=B0=9D=EC=84=BC=ED=84=B0,=20=EB=AC=B8=EC=9D=98?= =?UTF-8?q?=ED=95=98=EA=B8=B0=20=ED=99=94=EB=A9=B4=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../compose/customer-compose.component.html | 136 ++++++------------ .../compose/customer-compose.component.ts | 102 ++++++++----- ...stomer-registration-compose.component.html | 52 +++++++ ...customer-registration-compose.component.ts | 114 +++++++++++++++ .../modules/beteran/compose/compose/index.ts | 2 + .../compose/notice-compose.component.html | 84 +++++------ .../compose/notice-compose.component.ts | 48 +++---- 7 files changed, 337 insertions(+), 201 deletions(-) create mode 100644 src/app/modules/beteran/compose/compose/customer-registration-compose.component.html create mode 100644 src/app/modules/beteran/compose/compose/customer-registration-compose.component.ts diff --git a/src/app/modules/beteran/compose/compose/customer-compose.component.html b/src/app/modules/beteran/compose/compose/customer-compose.component.html index 85d12de..bd57613 100644 --- a/src/app/modules/beteran/compose/compose/customer-compose.component.html +++ b/src/app/modules/beteran/compose/compose/customer-compose.component.html @@ -3,7 +3,7 @@
-
customer
+
고객센터
- -
- - - To - -
- - Cc - - - Bcc - -
- - - - - Cc - - - - - - Bcc - - - - - - Subject - - - - - - - -
-
- - - - - - - - -
+ + {{ column }} + {{ element[column] }} + -
- - + + +
+ {{ element.description }} +
+ + + + + + + + +
+
-
diff --git a/src/app/modules/beteran/compose/compose/customer-compose.component.ts b/src/app/modules/beteran/compose/compose/customer-compose.component.ts index 1f37b46..593f4ad 100644 --- a/src/app/modules/beteran/compose/compose/customer-compose.component.ts +++ b/src/app/modules/beteran/compose/compose/customer-compose.component.ts @@ -1,31 +1,44 @@ -import { Component, OnInit, ViewEncapsulation } from '@angular/core'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { + trigger, + state, + style, + transition, + animate, +} from '@angular/animations'; +import { Component, OnInit } from '@angular/core'; +import { FormGroup, FormBuilder, Validators } from '@angular/forms'; import { MatDialogRef } from '@angular/material/dialog'; +import { MatDialog } from '@angular/material/dialog'; +import { CustomerRegistrationComposeComponent } from './customer-registration-compose.component'; @Component({ selector: 'customer-compose', templateUrl: './customer-compose.component.html', - encapsulation: ViewEncapsulation.None, + animations: [ + trigger('detailExpand', [ + state('collapsed', style({ height: '0px', minHeight: '0' })), + state('expanded', style({ height: '*', minHeight: '50px' })), + transition( + 'expanded <=> collapsed', + animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)') + ), + ]), + ], }) export class CustomerComposeComponent implements OnInit { composeForm!: FormGroup; - copyFields: { cc: boolean; bcc: boolean } = { - cc: false, - bcc: false, - }; - quillModules: any = { - toolbar: [ - ['bold', 'italic', 'underline'], - [{ align: [] }, { list: 'ordered' }, { list: 'bullet' }], - ['clean'], - ], - }; + + dataSource = ELEMENT_DATA; + columnsToDisplay = ['state', 'content', 'applicationDate']; + expandedElement: PeriodicElement | null | undefined; + /** * Constructor */ constructor( public matDialogRef: MatDialogRef, - private _formBuilder: FormBuilder + private _formBuilder: FormBuilder, + private _matDialog: MatDialog ) {} // ----------------------------------------------------------------------------------------------------- @@ -38,11 +51,8 @@ export class CustomerComposeComponent implements OnInit { ngOnInit(): void { // Create the form this.composeForm = this._formBuilder.group({ - to: ['', [Validators.required, Validators.email]], - cc: ['', [Validators.email]], - bcc: ['', [Validators.email]], - subject: [''], - body: ['', [Validators.required]], + accountHolder: ['', [Validators.required]], + amount: ['', [Validators.required]], }); } @@ -50,21 +60,6 @@ export class CustomerComposeComponent implements OnInit { // @ Public methods // ----------------------------------------------------------------------------------------------------- - /** - * Show the copy field with the given field name - * - * @param name - */ - showCopyField(name: string): void { - // Return if the name is not one of the available names - if (name !== 'cc' && name !== 'bcc') { - return; - } - - // Show the field - this.copyFields[name] = true; - } - /** * Save and close */ @@ -90,4 +85,41 @@ export class CustomerComposeComponent implements OnInit { * Send the message */ send(): void {} + + __onClickRegistration(event: MouseEvent): void { + const dialogRef = this._matDialog.open( + CustomerRegistrationComposeComponent, + { + data: { price: '', memo: '' }, + } + ); + } } + +export interface PeriodicElement { + state: string; + content: string; + applicationDate: string; + description: string; +} + +const ELEMENT_DATA: PeriodicElement[] = [ + { + state: '답변대기중', + content: '입금계좌문의', + applicationDate: '2022-08-23', + description: `입금계좌를 알려달라`, + }, + { + state: '답변대기중', + content: '오토프로그램 이용 안내', + applicationDate: '2022-08-23', + description: `하단이미지를 참고해주시기바랍니다`, + }, + { + state: '답변대기중', + content: '입출금 규정 안내', + applicationDate: '2022-08-23', + description: `입금해라입금. 출금해라출금 이로이로ㅓㅁ;ㅇ롱러;올;ㅣㅁㄴ더ㅗ래;ㄷ로ㅑ`, + }, +]; diff --git a/src/app/modules/beteran/compose/compose/customer-registration-compose.component.html b/src/app/modules/beteran/compose/compose/customer-registration-compose.component.html new file mode 100644 index 0000000..6811bf7 --- /dev/null +++ b/src/app/modules/beteran/compose/compose/customer-registration-compose.component.html @@ -0,0 +1,52 @@ +
+ +
+
고객센터 문의
+ +
+ +
+ + 제목 + + +
+ + + 내용 + +
+
+ + +
+
+ +
diff --git a/src/app/modules/beteran/compose/compose/customer-registration-compose.component.ts b/src/app/modules/beteran/compose/compose/customer-registration-compose.component.ts new file mode 100644 index 0000000..a24b8fc --- /dev/null +++ b/src/app/modules/beteran/compose/compose/customer-registration-compose.component.ts @@ -0,0 +1,114 @@ +import { + animate, + state, + style, + transition, + trigger, +} from '@angular/animations'; +import { Component, OnInit } from '@angular/core'; +import { FormGroup, FormBuilder, Validators } from '@angular/forms'; +import { MatDialogRef } from '@angular/material/dialog'; + +@Component({ + selector: 'customer-registration-compose', + templateUrl: './customer-registration-compose.component.html', + + animations: [ + trigger('detailExpand', [ + state('collapsed', style({ height: '0px', minHeight: '0' })), + state('expanded', style({ height: '*', minHeight: '50px' })), + transition( + 'expanded <=> collapsed', + animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)') + ), + ]), + ], +}) +export class CustomerRegistrationComposeComponent implements OnInit { + composeForm!: FormGroup; + + dataSource = ELEMENT_DATA; + columnsToDisplay = ['idx', 'content', 'applicationDate']; + expandedElement: PeriodicElement | null | undefined; + + /** + * Constructor + */ + constructor( + public matDialogRef: MatDialogRef, + private _formBuilder: FormBuilder + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Create the form + this.composeForm = this._formBuilder.group({ + accountHolder: ['', [Validators.required]], + amount: ['', [Validators.required]], + }); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Save and close + */ + saveAndClose(): void { + // Save the message as a draft + this.saveAsDraft(); + + // Close the dialog + this.matDialogRef.close(); + } + + /** + * Discard the message + */ + discard(): void {} + + /** + * Save the message as a draft + */ + saveAsDraft(): void {} + + /** + * Send the message + */ + send(): void {} +} + +export interface PeriodicElement { + idx: number; + content: string; + applicationDate: string; + description: string; +} + +const ELEMENT_DATA: PeriodicElement[] = [ + { + idx: 1, + content: '계좌등록안내', + applicationDate: '2022-08-23', + description: `안녕하세요. 운영진입니다.`, + }, + { + idx: 2, + content: '오토프로그램 이용 안내', + applicationDate: '2022-08-23', + description: `하단이미지를 참고해주시기바랍니다`, + }, + { + idx: 3, + content: '입출금 규정 안내', + applicationDate: '2022-08-23', + description: `입금해라입금. 출금해라출금 이로이로ㅓㅁ;ㅇ롱러;올;ㅣㅁㄴ더ㅗ래;ㄷ로ㅑ`, + }, +]; diff --git a/src/app/modules/beteran/compose/compose/index.ts b/src/app/modules/beteran/compose/compose/index.ts index a571ff2..eb0e21d 100644 --- a/src/app/modules/beteran/compose/compose/index.ts +++ b/src/app/modules/beteran/compose/compose/index.ts @@ -3,6 +3,7 @@ import { CustomerComposeComponent } from './customer-compose.component'; import { DepositComposeComponent } from './deposit-compose.component'; import { DepositHistoryComposeComponent } from './deposit-history-compose.component'; import { NoticeComposeComponent } from './notice-compose.component'; +import { CustomerRegistrationComposeComponent } from './customer-registration-compose.component'; import { WithdrawComposeComponent } from './withdraw-compose.component'; import { WithdrawHistoryComposeComponent } from './withdraw-history-compose.component'; import { SignUpComposeComponent } from './sign-up-compose.component'; @@ -18,6 +19,7 @@ export const COMPOSE = [ DepositHistoryComposeComponent, WithdrawHistoryComposeComponent, NoticeComposeComponent, + CustomerRegistrationComposeComponent, SignUpComposeComponent, SignInComposeComponent, SlotGameComposeComponent, diff --git a/src/app/modules/beteran/compose/compose/notice-compose.component.html b/src/app/modules/beteran/compose/compose/notice-compose.component.html index 163344b..b55eae6 100644 --- a/src/app/modules/beteran/compose/compose/notice-compose.component.html +++ b/src/app/modules/beteran/compose/compose/notice-compose.component.html @@ -11,50 +11,50 @@ >
- - - {{ column }} - {{ element[column] }} - + + {{ column }} + + {{ element[column] }} + + - - -
- {{ element.description }} -
- - + + +
+ {{ element.description }} +
+ + - - - - - - - -
- There are no data! -
- + + + + + +
diff --git a/src/app/modules/beteran/compose/compose/notice-compose.component.ts b/src/app/modules/beteran/compose/compose/notice-compose.component.ts index e351853..9554454 100644 --- a/src/app/modules/beteran/compose/compose/notice-compose.component.ts +++ b/src/app/modules/beteran/compose/compose/notice-compose.component.ts @@ -1,6 +1,3 @@ -import { Component, OnInit, ViewEncapsulation } from '@angular/core'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { MatDialogRef } from '@angular/material/dialog'; import { animate, state, @@ -8,6 +5,9 @@ import { transition, trigger, } from '@angular/animations'; +import { Component, OnInit } from '@angular/core'; +import { FormGroup, FormBuilder, Validators } from '@angular/forms'; +import { MatDialogRef } from '@angular/material/dialog'; @Component({ selector: 'notice-compose', @@ -16,24 +16,17 @@ import { animations: [ trigger('detailExpand', [ state('collapsed', style({ height: '0px', minHeight: '0' })), - state('expanded', style({ height: '*', minHeight: '*' })), + state('expanded', style({ height: '*', minHeight: '50px' })), + transition( + 'expanded <=> collapsed', + animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)') + ), ]), ], - encapsulation: ViewEncapsulation.None, }) export class NoticeComposeComponent implements OnInit { composeForm!: FormGroup; - copyFields: { cc: boolean; bcc: boolean } = { - cc: false, - bcc: false, - }; - quillModules: any = { - toolbar: [ - ['bold', 'italic', 'underline'], - [{ align: [] }, { list: 'ordered' }, { list: 'bullet' }], - ['clean'], - ], - }; + dataSource = ELEMENT_DATA; columnsToDisplay = ['idx', 'content', 'applicationDate']; expandedElement: PeriodicElement | null | undefined; @@ -53,27 +46,18 @@ export class NoticeComposeComponent implements OnInit { /** * On init */ - ngOnInit(): void {} + ngOnInit(): void { + // Create the form + this.composeForm = this._formBuilder.group({ + accountHolder: ['', [Validators.required]], + amount: ['', [Validators.required]], + }); + } // ----------------------------------------------------------------------------------------------------- // @ Public methods // ----------------------------------------------------------------------------------------------------- - /** - * Show the copy field with the given field name - * - * @param name - */ - showCopyField(name: string): void { - // Return if the name is not one of the available names - if (name !== 'cc' && name !== 'bcc') { - return; - } - - // Show the field - this.copyFields[name] = true; - } - /** * Save and close */