money page design
This commit is contained in:
byung eun park
parent
bb1b628b71
commit
82aa07b384
|
|
@ -1 +1,167 @@
|
||||||
<p>deposit works!</p>
|
<div id="deposit-list" class="page-layout carded fullwidth inner-scroll">
|
||||||
|
<!-- TOP BACKGROUND -->
|
||||||
|
<div class="top-bg accent"></div>
|
||||||
|
<!-- / TOP BACKGROUND -->
|
||||||
|
|
||||||
|
<!-- CENTER -->
|
||||||
|
<div class="center">
|
||||||
|
<!-- HEADER -->
|
||||||
|
<div
|
||||||
|
class="header accent"
|
||||||
|
fxLayout="column"
|
||||||
|
fxLayoutAlign="center center"
|
||||||
|
fxLayout.gt-xs="row"
|
||||||
|
fxLayoutAlign.gt-xs="space-between center"
|
||||||
|
>
|
||||||
|
<!-- APP TITLE -->
|
||||||
|
<div
|
||||||
|
class="logo mb-24 mb-sm-0"
|
||||||
|
fxLayout="row"
|
||||||
|
fxLayoutAlign="start center"
|
||||||
|
>
|
||||||
|
<mat-icon
|
||||||
|
class="logo-icon s-32 mr-16"
|
||||||
|
[@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
|
||||||
|
>
|
||||||
|
shopping_basket
|
||||||
|
</mat-icon>
|
||||||
|
<span
|
||||||
|
class="logo-text h1"
|
||||||
|
[@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
|
||||||
|
>고객센터 관리</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<!-- / APP TITLE -->
|
||||||
|
|
||||||
|
<!-- SEARCH -->
|
||||||
|
|
||||||
|
<!-- <div class="search-wrapper ml-sm-32">
|
||||||
|
<div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<mat-icon>search</mat-icon>
|
||||||
|
<input #filter placeholder="Search for an order" />
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<!-- / SEARCH -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- / HEADER -->
|
||||||
|
|
||||||
|
<!-- CONTENT CARD -->
|
||||||
|
<div class="content-card">
|
||||||
|
<mat-table
|
||||||
|
class="service-center"
|
||||||
|
#table
|
||||||
|
[dataSource]="dataSource"
|
||||||
|
matSort
|
||||||
|
[@animateStagger]="{ value: '50' }"
|
||||||
|
fusePerfectScrollbar
|
||||||
|
>
|
||||||
|
<ng-container matColumnDef="idx">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>번호</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter; let i = index">
|
||||||
|
<p class="text-truncate">{{ i }}</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- ID/Nickname Column -->
|
||||||
|
<ng-container matColumnDef="title">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>제목</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter">
|
||||||
|
<p class="text-truncate">{{ serviceCenter.title }}</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Phone Column -->
|
||||||
|
<ng-container matColumnDef="contents">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
|
||||||
|
>내용</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
|
||||||
|
<!-- <p class="text-truncate">{{ serviceCenter.contents }}</p> -->
|
||||||
|
<p class="text-truncate">010-3004-2001</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Total Price Column -->
|
||||||
|
<ng-container matColumnDef="register">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md
|
||||||
|
>작성자</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-md>
|
||||||
|
<p class="total-price text-truncate">
|
||||||
|
<!-- {{ user.totalprice | currency: 'USD':'symbol' }} -->
|
||||||
|
1,000,000
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Point Column -->
|
||||||
|
<ng-container matColumnDef="createdAt">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
|
||||||
|
>작성일</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
|
||||||
|
<p class="text-truncate">
|
||||||
|
<!-- {{ user.point }} -->
|
||||||
|
5000
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Level Column -->
|
||||||
|
<ng-container matColumnDef="contactStatus">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>문의상태</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter">
|
||||||
|
<!-- <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color"> -->
|
||||||
|
<p class="text-truncate">
|
||||||
|
<!-- {{ user.level }} -->
|
||||||
|
브론즈
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Charge Money Column -->
|
||||||
|
<ng-container matColumnDef="removeBtn">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>삭제버튼</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let user">
|
||||||
|
<p class="text-truncate ">
|
||||||
|
<button mat-raised-button class="mat-accent">
|
||||||
|
삭제
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<mat-header-row
|
||||||
|
*matHeaderRowDef="displayedColumns; sticky: true"
|
||||||
|
></mat-header-row>
|
||||||
|
|
||||||
|
<mat-row
|
||||||
|
*matRowDef="let user; columns: displayedColumns"
|
||||||
|
class="user"
|
||||||
|
matRipple
|
||||||
|
[routerLink]="'/pages/users/management/list/' + user.id"
|
||||||
|
>
|
||||||
|
</mat-row>
|
||||||
|
</mat-table>
|
||||||
|
|
||||||
|
<mat-paginator
|
||||||
|
#paginator
|
||||||
|
[pageIndex]="0"
|
||||||
|
[pageSize]="10"
|
||||||
|
[pageSizeOptions]="[5, 10, 25, 100]"
|
||||||
|
>
|
||||||
|
</mat-paginator>
|
||||||
|
</div>
|
||||||
|
<!-- / CONTENT CARD -->
|
||||||
|
</div>
|
||||||
|
<!-- / CENTER -->
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
@import 'src/@fuse/scss/fuse';
|
||||||
|
|
||||||
|
app-pages-deposit-list {
|
||||||
|
#deposit-list {
|
||||||
|
.top-bg {
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
height: 224px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .center {
|
||||||
|
> .header {
|
||||||
|
.search-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 480px;
|
||||||
|
border-radius: 28px;
|
||||||
|
overflow: hidden;
|
||||||
|
@include mat-elevation(1);
|
||||||
|
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
line-height: 48px;
|
||||||
|
padding: 0 18px;
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
min-height: 48px;
|
||||||
|
max-height: 48px;
|
||||||
|
padding: 0 16px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
padding: 8px 0;
|
||||||
|
height: 160px !important;
|
||||||
|
min-height: 160px !important;
|
||||||
|
max-height: 160px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-tab-group,
|
||||||
|
.mat-tab-body-wrapper,
|
||||||
|
.tab-content {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-center-table {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
overflow: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
|
.mat-header-row {
|
||||||
|
min-height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-cell {
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-id {
|
||||||
|
flex: 0 1 84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-image {
|
||||||
|
flex: 0 1 84px;
|
||||||
|
|
||||||
|
.product-image {
|
||||||
|
width: 52px;
|
||||||
|
height: 52px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-buttons {
|
||||||
|
flex: 0 1 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-indicator {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-right: 8px;
|
||||||
|
|
||||||
|
& + span {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-icon {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -23,6 +23,15 @@ import { fuseAnimations } from 'src/@fuse/animations';
|
||||||
encapsulation: ViewEncapsulation.None
|
encapsulation: ViewEncapsulation.None
|
||||||
})
|
})
|
||||||
export class DepositComponent implements OnInit, OnDestroy, AfterViewInit {
|
export class DepositComponent implements OnInit, OnDestroy, AfterViewInit {
|
||||||
|
displayedColumns = [
|
||||||
|
'idx',
|
||||||
|
'title',
|
||||||
|
'contents',
|
||||||
|
'register',
|
||||||
|
'createdAt',
|
||||||
|
'contactStatus'
|
||||||
|
];
|
||||||
|
|
||||||
@ViewChild(MatPaginator, { static: true })
|
@ViewChild(MatPaginator, { static: true })
|
||||||
paginator: MatPaginator;
|
paginator: MatPaginator;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1 +1,167 @@
|
||||||
<p>money-log works!</p>
|
<div id="money-log-list" class="page-layout carded fullwidth inner-scroll">
|
||||||
|
<!-- TOP BACKGROUND -->
|
||||||
|
<div class="top-bg accent"></div>
|
||||||
|
<!-- / TOP BACKGROUND -->
|
||||||
|
|
||||||
|
<!-- CENTER -->
|
||||||
|
<div class="center">
|
||||||
|
<!-- HEADER -->
|
||||||
|
<div
|
||||||
|
class="header accent"
|
||||||
|
fxLayout="column"
|
||||||
|
fxLayoutAlign="center center"
|
||||||
|
fxLayout.gt-xs="row"
|
||||||
|
fxLayoutAlign.gt-xs="space-between center"
|
||||||
|
>
|
||||||
|
<!-- APP TITLE -->
|
||||||
|
<div
|
||||||
|
class="logo mb-24 mb-sm-0"
|
||||||
|
fxLayout="row"
|
||||||
|
fxLayoutAlign="start center"
|
||||||
|
>
|
||||||
|
<mat-icon
|
||||||
|
class="logo-icon s-32 mr-16"
|
||||||
|
[@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
|
||||||
|
>
|
||||||
|
shopping_basket
|
||||||
|
</mat-icon>
|
||||||
|
<span
|
||||||
|
class="logo-text h1"
|
||||||
|
[@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
|
||||||
|
>고객센터 관리</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<!-- / APP TITLE -->
|
||||||
|
|
||||||
|
<!-- SEARCH -->
|
||||||
|
|
||||||
|
<!-- <div class="search-wrapper ml-sm-32">
|
||||||
|
<div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<mat-icon>search</mat-icon>
|
||||||
|
<input #filter placeholder="Search for an order" />
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<!-- / SEARCH -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- / HEADER -->
|
||||||
|
|
||||||
|
<!-- CONTENT CARD -->
|
||||||
|
<div class="content-card">
|
||||||
|
<mat-table
|
||||||
|
class="service-center"
|
||||||
|
#table
|
||||||
|
[dataSource]="dataSource"
|
||||||
|
matSort
|
||||||
|
[@animateStagger]="{ value: '50' }"
|
||||||
|
fusePerfectScrollbar
|
||||||
|
>
|
||||||
|
<ng-container matColumnDef="idx">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>번호</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter; let i = index">
|
||||||
|
<p class="text-truncate">{{ i }}</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- ID/Nickname Column -->
|
||||||
|
<ng-container matColumnDef="title">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>제목</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter">
|
||||||
|
<p class="text-truncate">{{ serviceCenter.title }}</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Phone Column -->
|
||||||
|
<ng-container matColumnDef="contents">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
|
||||||
|
>내용</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
|
||||||
|
<!-- <p class="text-truncate">{{ serviceCenter.contents }}</p> -->
|
||||||
|
<p class="text-truncate">010-3004-2001</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Total Price Column -->
|
||||||
|
<ng-container matColumnDef="register">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md
|
||||||
|
>작성자</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-md>
|
||||||
|
<p class="total-price text-truncate">
|
||||||
|
<!-- {{ user.totalprice | currency: 'USD':'symbol' }} -->
|
||||||
|
1,000,000
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Point Column -->
|
||||||
|
<ng-container matColumnDef="createdAt">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
|
||||||
|
>작성일</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
|
||||||
|
<p class="text-truncate">
|
||||||
|
<!-- {{ user.point }} -->
|
||||||
|
5000
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Level Column -->
|
||||||
|
<ng-container matColumnDef="contactStatus">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>문의상태</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter">
|
||||||
|
<!-- <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color"> -->
|
||||||
|
<p class="text-truncate">
|
||||||
|
<!-- {{ user.level }} -->
|
||||||
|
브론즈
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Charge Money Column -->
|
||||||
|
<ng-container matColumnDef="removeBtn">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>삭제버튼</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let user">
|
||||||
|
<p class="text-truncate ">
|
||||||
|
<button mat-raised-button class="mat-accent">
|
||||||
|
삭제
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<mat-header-row
|
||||||
|
*matHeaderRowDef="displayedColumns; sticky: true"
|
||||||
|
></mat-header-row>
|
||||||
|
|
||||||
|
<mat-row
|
||||||
|
*matRowDef="let user; columns: displayedColumns"
|
||||||
|
class="user"
|
||||||
|
matRipple
|
||||||
|
[routerLink]="'/pages/users/management/list/' + user.id"
|
||||||
|
>
|
||||||
|
</mat-row>
|
||||||
|
</mat-table>
|
||||||
|
|
||||||
|
<mat-paginator
|
||||||
|
#paginator
|
||||||
|
[pageIndex]="0"
|
||||||
|
[pageSize]="10"
|
||||||
|
[pageSizeOptions]="[5, 10, 25, 100]"
|
||||||
|
>
|
||||||
|
</mat-paginator>
|
||||||
|
</div>
|
||||||
|
<!-- / CONTENT CARD -->
|
||||||
|
</div>
|
||||||
|
<!-- / CENTER -->
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
@import 'src/@fuse/scss/fuse';
|
||||||
|
|
||||||
|
app-money-log-list {
|
||||||
|
#money-log-list {
|
||||||
|
.top-bg {
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
height: 224px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .center {
|
||||||
|
> .header {
|
||||||
|
.search-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 480px;
|
||||||
|
border-radius: 28px;
|
||||||
|
overflow: hidden;
|
||||||
|
@include mat-elevation(1);
|
||||||
|
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
line-height: 48px;
|
||||||
|
padding: 0 18px;
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
min-height: 48px;
|
||||||
|
max-height: 48px;
|
||||||
|
padding: 0 16px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
padding: 8px 0;
|
||||||
|
height: 160px !important;
|
||||||
|
min-height: 160px !important;
|
||||||
|
max-height: 160px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-tab-group,
|
||||||
|
.mat-tab-body-wrapper,
|
||||||
|
.tab-content {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-center-table {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
overflow: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
|
.mat-header-row {
|
||||||
|
min-height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-cell {
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-id {
|
||||||
|
flex: 0 1 84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-image {
|
||||||
|
flex: 0 1 84px;
|
||||||
|
|
||||||
|
.product-image {
|
||||||
|
width: 52px;
|
||||||
|
height: 52px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-buttons {
|
||||||
|
flex: 0 1 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-indicator {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-right: 8px;
|
||||||
|
|
||||||
|
& + span {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-icon {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,12 +1,71 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import {
|
||||||
|
Component,
|
||||||
|
ElementRef,
|
||||||
|
OnDestroy,
|
||||||
|
OnInit,
|
||||||
|
ViewChild,
|
||||||
|
ViewEncapsulation,
|
||||||
|
AfterViewInit
|
||||||
|
} from '@angular/core';
|
||||||
|
import { MatPaginator } from '@angular/material/paginator';
|
||||||
|
import { MatSort } from '@angular/material/sort';
|
||||||
|
|
||||||
|
import { fromEvent, Subject } from 'rxjs';
|
||||||
|
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
||||||
|
|
||||||
|
import { fuseAnimations } from 'src/@fuse/animations';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-money-log',
|
selector: 'app-money-log-list',
|
||||||
templateUrl: './money-log.component.html',
|
templateUrl: './money-log.component.html',
|
||||||
styleUrls: ['./money-log.component.scss']
|
styleUrls: ['./money-log.component.scss'],
|
||||||
|
animations: fuseAnimations,
|
||||||
|
encapsulation: ViewEncapsulation.None
|
||||||
})
|
})
|
||||||
export class MoneyLogComponent implements OnInit {
|
export class MoneyLogComponent implements OnInit, OnDestroy, AfterViewInit {
|
||||||
constructor() {}
|
displayedColumns = [
|
||||||
|
'idx',
|
||||||
|
'title',
|
||||||
|
'contents',
|
||||||
|
'register',
|
||||||
|
'createdAt',
|
||||||
|
'contactStatus'
|
||||||
|
];
|
||||||
|
|
||||||
ngOnInit() {}
|
@ViewChild(MatPaginator, { static: true })
|
||||||
|
paginator: MatPaginator;
|
||||||
|
|
||||||
|
@ViewChild('filter', { static: true })
|
||||||
|
filter: ElementRef;
|
||||||
|
|
||||||
|
@ViewChild(MatSort, { static: true })
|
||||||
|
sort: MatSort;
|
||||||
|
|
||||||
|
// Private
|
||||||
|
private _unsubscribeAll: Subject<any>;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
// Set the private defaults
|
||||||
|
this._unsubscribeAll = new Subject();
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Lifecycle hooks
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On init
|
||||||
|
*/
|
||||||
|
ngOnInit() {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On destroy
|
||||||
|
*/
|
||||||
|
ngOnDestroy(): void {
|
||||||
|
// Unsubscribe from all subscriptions
|
||||||
|
this._unsubscribeAll.next();
|
||||||
|
this._unsubscribeAll.complete();
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1 +1,167 @@
|
||||||
<p>point-log works!</p>
|
<div id="point-log-list" class="page-layout carded fullwidth inner-scroll">
|
||||||
|
<!-- TOP BACKGROUND -->
|
||||||
|
<div class="top-bg accent"></div>
|
||||||
|
<!-- / TOP BACKGROUND -->
|
||||||
|
|
||||||
|
<!-- CENTER -->
|
||||||
|
<div class="center">
|
||||||
|
<!-- HEADER -->
|
||||||
|
<div
|
||||||
|
class="header accent"
|
||||||
|
fxLayout="column"
|
||||||
|
fxLayoutAlign="center center"
|
||||||
|
fxLayout.gt-xs="row"
|
||||||
|
fxLayoutAlign.gt-xs="space-between center"
|
||||||
|
>
|
||||||
|
<!-- APP TITLE -->
|
||||||
|
<div
|
||||||
|
class="logo mb-24 mb-sm-0"
|
||||||
|
fxLayout="row"
|
||||||
|
fxLayoutAlign="start center"
|
||||||
|
>
|
||||||
|
<mat-icon
|
||||||
|
class="logo-icon s-32 mr-16"
|
||||||
|
[@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
|
||||||
|
>
|
||||||
|
shopping_basket
|
||||||
|
</mat-icon>
|
||||||
|
<span
|
||||||
|
class="logo-text h1"
|
||||||
|
[@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
|
||||||
|
>고객센터 관리</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<!-- / APP TITLE -->
|
||||||
|
|
||||||
|
<!-- SEARCH -->
|
||||||
|
|
||||||
|
<!-- <div class="search-wrapper ml-sm-32">
|
||||||
|
<div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<mat-icon>search</mat-icon>
|
||||||
|
<input #filter placeholder="Search for an order" />
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<!-- / SEARCH -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- / HEADER -->
|
||||||
|
|
||||||
|
<!-- CONTENT CARD -->
|
||||||
|
<div class="content-card">
|
||||||
|
<mat-table
|
||||||
|
class="service-center"
|
||||||
|
#table
|
||||||
|
[dataSource]="dataSource"
|
||||||
|
matSort
|
||||||
|
[@animateStagger]="{ value: '50' }"
|
||||||
|
fusePerfectScrollbar
|
||||||
|
>
|
||||||
|
<ng-container matColumnDef="idx">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>번호</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter; let i = index">
|
||||||
|
<p class="text-truncate">{{ i }}</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- ID/Nickname Column -->
|
||||||
|
<ng-container matColumnDef="title">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>제목</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter">
|
||||||
|
<p class="text-truncate">{{ serviceCenter.title }}</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Phone Column -->
|
||||||
|
<ng-container matColumnDef="contents">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
|
||||||
|
>내용</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
|
||||||
|
<!-- <p class="text-truncate">{{ serviceCenter.contents }}</p> -->
|
||||||
|
<p class="text-truncate">010-3004-2001</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Total Price Column -->
|
||||||
|
<ng-container matColumnDef="register">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md
|
||||||
|
>작성자</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-md>
|
||||||
|
<p class="total-price text-truncate">
|
||||||
|
<!-- {{ user.totalprice | currency: 'USD':'symbol' }} -->
|
||||||
|
1,000,000
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Point Column -->
|
||||||
|
<ng-container matColumnDef="createdAt">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
|
||||||
|
>작성일</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
|
||||||
|
<p class="text-truncate">
|
||||||
|
<!-- {{ user.point }} -->
|
||||||
|
5000
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Level Column -->
|
||||||
|
<ng-container matColumnDef="contactStatus">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>문의상태</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter">
|
||||||
|
<!-- <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color"> -->
|
||||||
|
<p class="text-truncate">
|
||||||
|
<!-- {{ user.level }} -->
|
||||||
|
브론즈
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Charge Money Column -->
|
||||||
|
<ng-container matColumnDef="removeBtn">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>삭제버튼</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let user">
|
||||||
|
<p class="text-truncate ">
|
||||||
|
<button mat-raised-button class="mat-accent">
|
||||||
|
삭제
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<mat-header-row
|
||||||
|
*matHeaderRowDef="displayedColumns; sticky: true"
|
||||||
|
></mat-header-row>
|
||||||
|
|
||||||
|
<mat-row
|
||||||
|
*matRowDef="let user; columns: displayedColumns"
|
||||||
|
class="user"
|
||||||
|
matRipple
|
||||||
|
[routerLink]="'/pages/users/management/list/' + user.id"
|
||||||
|
>
|
||||||
|
</mat-row>
|
||||||
|
</mat-table>
|
||||||
|
|
||||||
|
<mat-paginator
|
||||||
|
#paginator
|
||||||
|
[pageIndex]="0"
|
||||||
|
[pageSize]="10"
|
||||||
|
[pageSizeOptions]="[5, 10, 25, 100]"
|
||||||
|
>
|
||||||
|
</mat-paginator>
|
||||||
|
</div>
|
||||||
|
<!-- / CONTENT CARD -->
|
||||||
|
</div>
|
||||||
|
<!-- / CENTER -->
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
@import 'src/@fuse/scss/fuse';
|
||||||
|
|
||||||
|
app-point-log-list {
|
||||||
|
#point-log-list {
|
||||||
|
.top-bg {
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
height: 224px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .center {
|
||||||
|
> .header {
|
||||||
|
.search-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 480px;
|
||||||
|
border-radius: 28px;
|
||||||
|
overflow: hidden;
|
||||||
|
@include mat-elevation(1);
|
||||||
|
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
line-height: 48px;
|
||||||
|
padding: 0 18px;
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
min-height: 48px;
|
||||||
|
max-height: 48px;
|
||||||
|
padding: 0 16px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
padding: 8px 0;
|
||||||
|
height: 160px !important;
|
||||||
|
min-height: 160px !important;
|
||||||
|
max-height: 160px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-tab-group,
|
||||||
|
.mat-tab-body-wrapper,
|
||||||
|
.tab-content {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-center-table {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
overflow: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
|
.mat-header-row {
|
||||||
|
min-height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-cell {
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-id {
|
||||||
|
flex: 0 1 84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-image {
|
||||||
|
flex: 0 1 84px;
|
||||||
|
|
||||||
|
.product-image {
|
||||||
|
width: 52px;
|
||||||
|
height: 52px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-buttons {
|
||||||
|
flex: 0 1 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-indicator {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-right: 8px;
|
||||||
|
|
||||||
|
& + span {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-icon {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,12 +1,71 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import {
|
||||||
|
Component,
|
||||||
|
ElementRef,
|
||||||
|
OnDestroy,
|
||||||
|
OnInit,
|
||||||
|
ViewChild,
|
||||||
|
ViewEncapsulation,
|
||||||
|
AfterViewInit
|
||||||
|
} from '@angular/core';
|
||||||
|
import { MatPaginator } from '@angular/material/paginator';
|
||||||
|
import { MatSort } from '@angular/material/sort';
|
||||||
|
|
||||||
|
import { fromEvent, Subject } from 'rxjs';
|
||||||
|
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
||||||
|
|
||||||
|
import { fuseAnimations } from 'src/@fuse/animations';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-point-log',
|
selector: 'app-point-log-list',
|
||||||
templateUrl: './point-log.component.html',
|
templateUrl: './point-log.component.html',
|
||||||
styleUrls: ['./point-log.component.scss']
|
styleUrls: ['./point-log.component.scss'],
|
||||||
|
animations: fuseAnimations,
|
||||||
|
encapsulation: ViewEncapsulation.None
|
||||||
})
|
})
|
||||||
export class PointLogComponent implements OnInit {
|
export class PointLogComponent implements OnInit, OnDestroy, AfterViewInit {
|
||||||
constructor() {}
|
displayedColumns = [
|
||||||
|
'idx',
|
||||||
|
'title',
|
||||||
|
'contents',
|
||||||
|
'register',
|
||||||
|
'createdAt',
|
||||||
|
'contactStatus'
|
||||||
|
];
|
||||||
|
|
||||||
ngOnInit() {}
|
@ViewChild(MatPaginator, { static: true })
|
||||||
|
paginator: MatPaginator;
|
||||||
|
|
||||||
|
@ViewChild('filter', { static: true })
|
||||||
|
filter: ElementRef;
|
||||||
|
|
||||||
|
@ViewChild(MatSort, { static: true })
|
||||||
|
sort: MatSort;
|
||||||
|
|
||||||
|
// Private
|
||||||
|
private _unsubscribeAll: Subject<any>;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
// Set the private defaults
|
||||||
|
this._unsubscribeAll = new Subject();
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Lifecycle hooks
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On init
|
||||||
|
*/
|
||||||
|
ngOnInit() {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On destroy
|
||||||
|
*/
|
||||||
|
ngOnDestroy(): void {
|
||||||
|
// Unsubscribe from all subscriptions
|
||||||
|
this._unsubscribeAll.next();
|
||||||
|
this._unsubscribeAll.complete();
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1 +1,167 @@
|
||||||
<p>withdrawal works!</p>
|
<div id="withdrawal-list" class="page-layout carded fullwidth inner-scroll">
|
||||||
|
<!-- TOP BACKGROUND -->
|
||||||
|
<div class="top-bg accent"></div>
|
||||||
|
<!-- / TOP BACKGROUND -->
|
||||||
|
|
||||||
|
<!-- CENTER -->
|
||||||
|
<div class="center">
|
||||||
|
<!-- HEADER -->
|
||||||
|
<div
|
||||||
|
class="header accent"
|
||||||
|
fxLayout="column"
|
||||||
|
fxLayoutAlign="center center"
|
||||||
|
fxLayout.gt-xs="row"
|
||||||
|
fxLayoutAlign.gt-xs="space-between center"
|
||||||
|
>
|
||||||
|
<!-- APP TITLE -->
|
||||||
|
<div
|
||||||
|
class="logo mb-24 mb-sm-0"
|
||||||
|
fxLayout="row"
|
||||||
|
fxLayoutAlign="start center"
|
||||||
|
>
|
||||||
|
<mat-icon
|
||||||
|
class="logo-icon s-32 mr-16"
|
||||||
|
[@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
|
||||||
|
>
|
||||||
|
shopping_basket
|
||||||
|
</mat-icon>
|
||||||
|
<span
|
||||||
|
class="logo-text h1"
|
||||||
|
[@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
|
||||||
|
>고객센터 관리</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<!-- / APP TITLE -->
|
||||||
|
|
||||||
|
<!-- SEARCH -->
|
||||||
|
|
||||||
|
<!-- <div class="search-wrapper ml-sm-32">
|
||||||
|
<div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<mat-icon>search</mat-icon>
|
||||||
|
<input #filter placeholder="Search for an order" />
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<!-- / SEARCH -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- / HEADER -->
|
||||||
|
|
||||||
|
<!-- CONTENT CARD -->
|
||||||
|
<div class="content-card">
|
||||||
|
<mat-table
|
||||||
|
class="service-center"
|
||||||
|
#table
|
||||||
|
[dataSource]="dataSource"
|
||||||
|
matSort
|
||||||
|
[@animateStagger]="{ value: '50' }"
|
||||||
|
fusePerfectScrollbar
|
||||||
|
>
|
||||||
|
<ng-container matColumnDef="idx">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>번호</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter; let i = index">
|
||||||
|
<p class="text-truncate">{{ i }}</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- ID/Nickname Column -->
|
||||||
|
<ng-container matColumnDef="title">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>제목</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter">
|
||||||
|
<p class="text-truncate">{{ serviceCenter.title }}</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Phone Column -->
|
||||||
|
<ng-container matColumnDef="contents">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
|
||||||
|
>내용</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
|
||||||
|
<!-- <p class="text-truncate">{{ serviceCenter.contents }}</p> -->
|
||||||
|
<p class="text-truncate">010-3004-2001</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Total Price Column -->
|
||||||
|
<ng-container matColumnDef="register">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md
|
||||||
|
>작성자</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-md>
|
||||||
|
<p class="total-price text-truncate">
|
||||||
|
<!-- {{ user.totalprice | currency: 'USD':'symbol' }} -->
|
||||||
|
1,000,000
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Point Column -->
|
||||||
|
<ng-container matColumnDef="createdAt">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
|
||||||
|
>작성일</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
|
||||||
|
<p class="text-truncate">
|
||||||
|
<!-- {{ user.point }} -->
|
||||||
|
5000
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Level Column -->
|
||||||
|
<ng-container matColumnDef="contactStatus">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>문의상태</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter">
|
||||||
|
<!-- <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color"> -->
|
||||||
|
<p class="text-truncate">
|
||||||
|
<!-- {{ user.level }} -->
|
||||||
|
브론즈
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Charge Money Column -->
|
||||||
|
<ng-container matColumnDef="removeBtn">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>삭제버튼</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let user">
|
||||||
|
<p class="text-truncate ">
|
||||||
|
<button mat-raised-button class="mat-accent">
|
||||||
|
삭제
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<mat-header-row
|
||||||
|
*matHeaderRowDef="displayedColumns; sticky: true"
|
||||||
|
></mat-header-row>
|
||||||
|
|
||||||
|
<mat-row
|
||||||
|
*matRowDef="let user; columns: displayedColumns"
|
||||||
|
class="user"
|
||||||
|
matRipple
|
||||||
|
[routerLink]="'/pages/users/management/list/' + user.id"
|
||||||
|
>
|
||||||
|
</mat-row>
|
||||||
|
</mat-table>
|
||||||
|
|
||||||
|
<mat-paginator
|
||||||
|
#paginator
|
||||||
|
[pageIndex]="0"
|
||||||
|
[pageSize]="10"
|
||||||
|
[pageSizeOptions]="[5, 10, 25, 100]"
|
||||||
|
>
|
||||||
|
</mat-paginator>
|
||||||
|
</div>
|
||||||
|
<!-- / CONTENT CARD -->
|
||||||
|
</div>
|
||||||
|
<!-- / CENTER -->
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
@import 'src/@fuse/scss/fuse';
|
||||||
|
|
||||||
|
app-withdrawal-list {
|
||||||
|
#withdrawal-list {
|
||||||
|
.top-bg {
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
height: 224px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .center {
|
||||||
|
> .header {
|
||||||
|
.search-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 480px;
|
||||||
|
border-radius: 28px;
|
||||||
|
overflow: hidden;
|
||||||
|
@include mat-elevation(1);
|
||||||
|
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
line-height: 48px;
|
||||||
|
padding: 0 18px;
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
min-height: 48px;
|
||||||
|
max-height: 48px;
|
||||||
|
padding: 0 16px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
padding: 8px 0;
|
||||||
|
height: 160px !important;
|
||||||
|
min-height: 160px !important;
|
||||||
|
max-height: 160px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-tab-group,
|
||||||
|
.mat-tab-body-wrapper,
|
||||||
|
.tab-content {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-center-table {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
overflow: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
|
.mat-header-row {
|
||||||
|
min-height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-cell {
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-id {
|
||||||
|
flex: 0 1 84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-image {
|
||||||
|
flex: 0 1 84px;
|
||||||
|
|
||||||
|
.product-image {
|
||||||
|
width: 52px;
|
||||||
|
height: 52px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-buttons {
|
||||||
|
flex: 0 1 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-indicator {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-right: 8px;
|
||||||
|
|
||||||
|
& + span {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-icon {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,12 +1,71 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import {
|
||||||
|
Component,
|
||||||
|
ElementRef,
|
||||||
|
OnDestroy,
|
||||||
|
OnInit,
|
||||||
|
ViewChild,
|
||||||
|
ViewEncapsulation,
|
||||||
|
AfterViewInit
|
||||||
|
} from '@angular/core';
|
||||||
|
import { MatPaginator } from '@angular/material/paginator';
|
||||||
|
import { MatSort } from '@angular/material/sort';
|
||||||
|
|
||||||
|
import { fromEvent, Subject } from 'rxjs';
|
||||||
|
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
||||||
|
|
||||||
|
import { fuseAnimations } from 'src/@fuse/animations';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-withdrawal',
|
selector: 'app-withdrawal-list',
|
||||||
templateUrl: './withdrawal.component.html',
|
templateUrl: './withdrawal.component.html',
|
||||||
styleUrls: ['./withdrawal.component.scss']
|
styleUrls: ['./withdrawal.component.scss'],
|
||||||
|
animations: fuseAnimations,
|
||||||
|
encapsulation: ViewEncapsulation.None
|
||||||
})
|
})
|
||||||
export class WithdrawalComponent implements OnInit {
|
export class WithdrawalComponent implements OnInit, OnDestroy, AfterViewInit {
|
||||||
constructor() {}
|
displayedColumns = [
|
||||||
|
'idx',
|
||||||
|
'title',
|
||||||
|
'contents',
|
||||||
|
'register',
|
||||||
|
'createdAt',
|
||||||
|
'contactStatus'
|
||||||
|
];
|
||||||
|
|
||||||
ngOnInit() {}
|
@ViewChild(MatPaginator, { static: true })
|
||||||
|
paginator: MatPaginator;
|
||||||
|
|
||||||
|
@ViewChild('filter', { static: true })
|
||||||
|
filter: ElementRef;
|
||||||
|
|
||||||
|
@ViewChild(MatSort, { static: true })
|
||||||
|
sort: MatSort;
|
||||||
|
|
||||||
|
// Private
|
||||||
|
private _unsubscribeAll: Subject<any>;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
// Set the private defaults
|
||||||
|
this._unsubscribeAll = new Subject();
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Lifecycle hooks
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On init
|
||||||
|
*/
|
||||||
|
ngOnInit() {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On destroy
|
||||||
|
*/
|
||||||
|
ngOnDestroy(): void {
|
||||||
|
// Unsubscribe from all subscriptions
|
||||||
|
this._unsubscribeAll.next();
|
||||||
|
this._unsubscribeAll.complete();
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user