totopia/totopia-backend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

money page design

Browse Source
This commit is contained in:
byung eun park 2019-09-27 23:14:37 +09:00
parent bb1b628b71
commit 82aa07b384
12 changed files with 1337 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
src/app/pages/moneys/money/component/deposit.component.html
View File

@ -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>

117
src/app/pages/moneys/money/component/deposit.component.scss
View File

@ -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%;
}
}
}

9
src/app/pages/moneys/money/component/deposit.component.ts
View File

@ -23,6 +23,15 @@ import { fuseAnimations } from 'src/@fuse/animations';
encapsulation: ViewEncapsulation.None
})
export class DepositComponent implements OnInit, OnDestroy, AfterViewInit {
displayedColumns = [
'idx',
'title',
'contents',
'register',
'createdAt',
'contactStatus'
];
@ViewChild(MatPaginator, { static: true })
paginator: MatPaginator;

168
src/app/pages/moneys/money/component/money-log.component.html
View File

@ -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>

117
src/app/pages/moneys/money/component/money-log.component.scss
View File

@ -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%;
}
}
}

71
src/app/pages/moneys/money/component/money-log.component.ts
View File

@ -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({
selector: 'app-money-log',
selector: 'app-money-log-list',
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 {
constructor() {}
export class MoneyLogComponent implements OnInit, OnDestroy, AfterViewInit {
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 {}
}

168
src/app/pages/moneys/money/component/point-log.component.html
View File

@ -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>

117
src/app/pages/moneys/money/component/point-log.component.scss
View File

@ -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%;
}
}
}

71
src/app/pages/moneys/money/component/point-log.component.ts
View File

@ -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({
selector: 'app-point-log',
selector: 'app-point-log-list',
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 {
constructor() {}
export class PointLogComponent implements OnInit, OnDestroy, AfterViewInit {
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 {}
}

168
src/app/pages/moneys/money/component/withdrawal.component.html
View File

@ -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>

117
src/app/pages/moneys/money/component/withdrawal.component.scss
View File

@ -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%;
}
}
}

71
src/app/pages/moneys/money/component/withdrawal.component.ts
View File

@ -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({
selector: 'app-withdrawal',
selector: 'app-withdrawal-list',
templateUrl: './withdrawal.component.html',
styleUrls: ['./withdrawal.component.scss']
styleUrls: ['./withdrawal.component.scss'],
animations: fuseAnimations,
encapsulation: ViewEncapsulation.None
})
export class WithdrawalComponent implements OnInit {
constructor() {}
export class WithdrawalComponent implements OnInit, OnDestroy, AfterViewInit {
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 {}
}