쪽지함 화면 수정
This commit is contained in:
parent
82f34150f7
commit
0748c21303
|
|
@ -102,7 +102,11 @@
|
|||
>
|
||||
쪽지
|
||||
</div>
|
||||
<div class="font-medium">(0)</div>
|
||||
<div class="font-medium">
|
||||
<button (click)="__onClickMessage($event)">
|
||||
<mat-icon svgIcon="email-outline"></mat-icon></button
|
||||
>(0)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Search -->
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ import { Vendor } from 'app/modules/proto/models/api/vendor_pb';
|
|||
import { environment } from 'environments/environment';
|
||||
import { ModifyMemberComposeComponent } from '../compose/compose/modify-member-compose.component';
|
||||
import { SlotGameComposeComponent } from '../compose/compose/slot-game-compose.component';
|
||||
import { MessageComposeComponent } from '../compose/compose/message-compose.component';
|
||||
|
||||
export enum ComposeMenuType {
|
||||
signIn = 'SignIn',
|
||||
|
|
@ -312,4 +313,10 @@ export class HomeComponent implements OnInit {
|
|||
});
|
||||
});
|
||||
}
|
||||
|
||||
__onClickMessage(event: MouseEvent): void {
|
||||
const dialogRef = this._matDialog.open(MessageComposeComponent, {
|
||||
data: { price: '', memo: '' },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { SignUpComposeComponent } from './sign-up-compose.component';
|
|||
import { SignInComposeComponent } from './sign-in-compose.component';
|
||||
import { SlotGameComposeComponent } from './slot-game-compose.component';
|
||||
import { ModifyMemberComposeComponent } from './modify-member-compose.component';
|
||||
import { MessageComposeComponent } from './message-compose.component';
|
||||
|
||||
export const COMPOSE = [
|
||||
DepositComposeComponent,
|
||||
|
|
@ -24,4 +25,5 @@ export const COMPOSE = [
|
|||
SignInComposeComponent,
|
||||
SlotGameComposeComponent,
|
||||
ModifyMemberComposeComponent,
|
||||
MessageComposeComponent,
|
||||
];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,74 @@
|
|||
<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"
|
||||
>
|
||||
<mat-table
|
||||
[dataSource]="dataSource"
|
||||
multiTemplateDataRows
|
||||
class="mat-elevation-z8"
|
||||
>
|
||||
<ng-container
|
||||
matColumnDef="{{ column }}"
|
||||
*ngFor="let column of columnsToDisplay"
|
||||
>
|
||||
<mat-header-cell *matHeaderCellDef> {{ column }} </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{ element[column] }} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="expandedDetail">
|
||||
<mat-cell *matCellDef="let element">
|
||||
<div
|
||||
[@detailExpand]="
|
||||
element == expandedElement ? 'expanded' : 'collapsed'
|
||||
"
|
||||
>
|
||||
{{ element.description }}
|
||||
</div>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<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>
|
||||
<span>전체읽음처리</span>
|
||||
</button>
|
||||
<!-- Send -->
|
||||
<button
|
||||
class="order-first sm:order-last"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
>
|
||||
전체삭제처리
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
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: 'message-compose',
|
||||
templateUrl: './message-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 MessageComposeComponent implements OnInit {
|
||||
composeForm!: FormGroup;
|
||||
|
||||
dataSource = ELEMENT_DATA;
|
||||
columnsToDisplay = ['state', 'content', 'delete', 'applicationDate'];
|
||||
expandedElement: PeriodicElement | null | undefined;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
public matDialogRef: MatDialogRef<MessageComposeComponent>,
|
||||
private _formBuilder: FormBuilder,
|
||||
private _matDialog: MatDialog
|
||||
) {}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ 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 {
|
||||
state: string;
|
||||
content: string;
|
||||
delete: string;
|
||||
applicationDate: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const ELEMENT_DATA: PeriodicElement[] = [
|
||||
{
|
||||
state: '읽지않음',
|
||||
content: '쪽지받아',
|
||||
delete: '삭제하기',
|
||||
applicationDate: '2022-08-23',
|
||||
description: `입금계좌를 알려달라`,
|
||||
},
|
||||
{
|
||||
state: '읽음',
|
||||
content: '쪽지읽어랏',
|
||||
delete: '삭제하기',
|
||||
applicationDate: '2022-08-23',
|
||||
description: `하단이미지를 참고해주시기바랍니다`,
|
||||
},
|
||||
{
|
||||
state: '읽지않음',
|
||||
content: '함하맣마하맣ㅁ',
|
||||
delete: '삭제하기',
|
||||
applicationDate: '2022-08-23',
|
||||
description: `입금해라입금. 출금해라출금 이로이로ㅓㅁ;ㅇ롱러;올;ㅣㅁㄴ더ㅗ래;ㄷ로ㅑ`,
|
||||
},
|
||||
];
|
||||
Loading…
Reference in New Issue
Block a user