공지사항, 고객센터, 문의하기 화면수정
This commit is contained in:
parent
c8ec647f1b
commit
9ba453fc5a
|
|
@ -3,7 +3,7 @@
|
|||
<div
|
||||
class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary"
|
||||
>
|
||||
<div class="text-lg font-medium">customer</div>
|
||||
<div class="text-lg font-medium">고객센터</div>
|
||||
<button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
|
||||
<mat-icon
|
||||
class="text-current"
|
||||
|
|
@ -11,111 +11,63 @@
|
|||
></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Compose form -->
|
||||
<form
|
||||
class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
|
||||
[formGroup]="composeForm"
|
||||
>
|
||||
<!-- To -->
|
||||
<mat-form-field>
|
||||
<mat-label>To</mat-label>
|
||||
<input matInput [formControlName]="'to'" />
|
||||
<div class="copy-fields-toggles" matSuffix>
|
||||
<span
|
||||
class="text-sm font-medium cursor-pointer select-none hover:underline"
|
||||
*ngIf="!copyFields.cc"
|
||||
(click)="showCopyField('cc')"
|
||||
<mat-table
|
||||
[dataSource]="dataSource"
|
||||
multiTemplateDataRows
|
||||
class="mat-elevation-z8"
|
||||
>
|
||||
Cc
|
||||
</span>
|
||||
<span
|
||||
class="ml-2 text-sm font-medium cursor-pointer select-none hover:underline"
|
||||
*ngIf="!copyFields.bcc"
|
||||
(click)="showCopyField('bcc')"
|
||||
<ng-container
|
||||
matColumnDef="{{ column }}"
|
||||
*ngFor="let column of columnsToDisplay"
|
||||
>
|
||||
Bcc
|
||||
</span>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
<mat-header-cell *matHeaderCellDef> {{ column }} </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{ element[column] }} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Cc -->
|
||||
<mat-form-field *ngIf="copyFields.cc">
|
||||
<mat-label>Cc</mat-label>
|
||||
<input matInput [formControlName]="'cc'" />
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Bcc -->
|
||||
<mat-form-field *ngIf="copyFields.bcc">
|
||||
<mat-label>Bcc</mat-label>
|
||||
<input matInput [formControlName]="'bcc'" />
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Subject -->
|
||||
<mat-form-field>
|
||||
<mat-label>Subject</mat-label>
|
||||
<input matInput [formControlName]="'subject'" />
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Body -->
|
||||
<!-- <quill-editor
|
||||
class="mt-2"
|
||||
[formControlName]="'body'"
|
||||
[modules]="quillModules"
|
||||
></quill-editor> -->
|
||||
|
||||
<!-- Actions -->
|
||||
<ng-container matColumnDef="expandedDetail">
|
||||
<mat-cell *matCellDef="let element">
|
||||
<div
|
||||
class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
|
||||
[@detailExpand]="
|
||||
element == expandedElement ? 'expanded' : 'collapsed'
|
||||
"
|
||||
>
|
||||
<div class="-ml-2">
|
||||
<!-- Attach file -->
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:paper-clip'"
|
||||
></mat-icon>
|
||||
</button>
|
||||
<!-- Insert link -->
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:link'"
|
||||
></mat-icon>
|
||||
</button>
|
||||
<!-- Insert emoji -->
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:emoji-happy'"
|
||||
></mat-icon>
|
||||
</button>
|
||||
<!-- Insert image -->
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:photograph'"
|
||||
></mat-icon>
|
||||
</button>
|
||||
{{ element.description }}
|
||||
</div>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<div class="flex items-center mt-4 sm:mt-0">
|
||||
<!-- Discard -->
|
||||
<button class="ml-auto sm:ml-0" mat-stroked-button (click)="discard()">
|
||||
Discard
|
||||
</button>
|
||||
<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
|
||||
<mat-row
|
||||
*matRowDef="let element; columns: columnsToDisplay"
|
||||
class="example-element-row"
|
||||
[class.example-expanded-row]="expandedElement === element"
|
||||
(click)="expandedElement = expandedElement === element ? null : element"
|
||||
>
|
||||
</mat-row>
|
||||
<mat-row
|
||||
*matRowDef="let row; columns: ['expandedDetail']"
|
||||
class="example-detail-row"
|
||||
style="min-height: 0"
|
||||
></mat-row>
|
||||
</mat-table>
|
||||
<div class="flex flex-col sm:flex-row sm:items-center mt-4 sm:mt-6">
|
||||
<div class="flex mt-4 sm:mt-0">
|
||||
<!-- Save as draft -->
|
||||
<button class="sm:mx-3" mat-stroked-button (click)="saveAsDraft()">
|
||||
<span>Save as draft</span>
|
||||
<button class="sm:mx-3" mat-stroked-button>
|
||||
<span>빠른계좌문의</span>
|
||||
</button>
|
||||
<!-- Send -->
|
||||
<button
|
||||
class="order-first sm:order-last"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="send()"
|
||||
(click)="__onClickRegistration($event)"
|
||||
>
|
||||
Send
|
||||
문의하기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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<CustomerComposeComponent>,
|
||||
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: `입금해라입금. 출금해라출금 이로이로ㅓㅁ;ㅇ롱러;올;ㅣㅁㄴ더ㅗ래;ㄷ로ㅑ`,
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
<div class="flex flex-col max-w-240 md:min-w-160 max-h-screen -m-6">
|
||||
<!-- Header -->
|
||||
<div
|
||||
class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary"
|
||||
>
|
||||
<div class="text-lg font-medium">고객센터 문의</div>
|
||||
<button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
|
||||
<mat-icon
|
||||
class="text-current"
|
||||
[svgIcon]="'heroicons_outline:x'"
|
||||
></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<form
|
||||
class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
|
||||
[formGroup]="composeForm"
|
||||
>
|
||||
<div>
|
||||
<mat-form-field
|
||||
class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
|
||||
>
|
||||
<mat-label>제목</mat-label>
|
||||
<input matInput [formControlName]="'title'" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<mat-form-field
|
||||
class="mt-8 fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
|
||||
>
|
||||
<textarea
|
||||
matInput
|
||||
[required]="true"
|
||||
[rows]="5"
|
||||
matTextareaAutosize
|
||||
[formControlName]="'content'"
|
||||
></textarea>
|
||||
<mat-label>내용</mat-label>
|
||||
</mat-form-field>
|
||||
<div class="flex flex-col sm:flex-row sm:items-center mt-4 sm:mt-6">
|
||||
<div class="flex mt-4 sm:mt-0">
|
||||
<!-- Send -->
|
||||
<button
|
||||
class="order-first sm:order-last"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="send()"
|
||||
>
|
||||
문의하기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -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<CustomerRegistrationComposeComponent>,
|
||||
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: `입금해라입금. 출금해라출금 이로이로ㅓㅁ;ㅇ롱러;올;ㅣㅁㄴ더ㅗ래;ㄷ로ㅑ`,
|
||||
},
|
||||
];
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -11,6 +11,10 @@
|
|||
></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<form
|
||||
class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
|
||||
[formGroup]="composeForm"
|
||||
>
|
||||
<mat-table
|
||||
[dataSource]="dataSource"
|
||||
multiTemplateDataRows
|
||||
|
|
@ -21,7 +25,9 @@
|
|||
*ngFor="let column of columnsToDisplay"
|
||||
>
|
||||
<mat-header-cell *matHeaderCellDef> {{ column }} </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{ element[column] }} </mat-cell>
|
||||
<mat-cell *matCellDef="let element">
|
||||
{{ element[column] }}
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="expandedDetail">
|
||||
|
|
@ -47,14 +53,8 @@
|
|||
<mat-row
|
||||
*matRowDef="let row; columns: ['expandedDetail']"
|
||||
class="example-detail-row"
|
||||
style="min-height: 0"
|
||||
></mat-row>
|
||||
</mat-table>
|
||||
|
||||
<ng-template #noNotice>
|
||||
<div
|
||||
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
|
||||
>
|
||||
There are no data!
|
||||
</div>
|
||||
</ng-template>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user