users menu
This commit is contained in:
byung eun park
parent
01bc665da3
commit
b58711e254
121
package-lock.json
generated
121
package-lock.json
generated
|
|
@ -4,11 +4,6 @@
|
|||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@agm/core": {
|
||||
"version": "1.0.0-beta.5",
|
||||
"resolved": "https://registry.npmjs.org/@agm/core/-/core-1.0.0-beta.5.tgz",
|
||||
"integrity": "sha512-LVENJqtBZEWpX+uJkGI0zgg+Xkm2KkktQm4ojZozArbeNvQkVL6pqVc04Mme6vvOzwJpD1cET5w4byC8Xaq1QQ=="
|
||||
},
|
||||
"@angular-devkit/architect": {
|
||||
"version": "0.801.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.801.2.tgz",
|
||||
|
|
@ -1758,10 +1753,39 @@
|
|||
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
|
||||
"dev": true
|
||||
},
|
||||
"angular-in-memory-web-api": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/angular-in-memory-web-api/-/angular-in-memory-web-api-0.8.0.tgz",
|
||||
"integrity": "sha512-2n0YtCLFxZo4JePHvH6q8b7JmBmhZq44Ic8VaBPRSXE4vAmlKXHU+kI2quNa612EAETDRkZcvLOU8K8CkhIZgQ=="
|
||||
"angular-calendar": {
|
||||
"version": "0.27.8",
|
||||
"resolved": "https://registry.npmjs.org/angular-calendar/-/angular-calendar-0.27.8.tgz",
|
||||
"integrity": "sha512-XDZtFOq6DVM0ba/JfdZwBk4dmCO8e+ZwYLor4USYaoBWUqfZC6qkpcRc1DvcbpGfIRo4kh/0RlHDcGSl55bjCQ==",
|
||||
"requires": {
|
||||
"angular-draggable-droppable": "^4.3.0",
|
||||
"angular-resizable-element": "^3.2.4",
|
||||
"calendar-utils": "^0.3.1",
|
||||
"positioning": "^1.4.0",
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"angular-draggable-droppable": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/angular-draggable-droppable/-/angular-draggable-droppable-4.3.2.tgz",
|
||||
"integrity": "sha512-x3Fg+mggoBumO41XNzEztWnl92ymGXoVgrYKX2InnIg8i/PIGv7npi8pBvMzKQSKHWtqww3nBHAVcWmIE/3Z0g==",
|
||||
"requires": {
|
||||
"dom-autoscroller": "^2.3.4",
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"angular-resizable-element": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-3.2.4.tgz",
|
||||
"integrity": "sha512-Qd/WRTaJgmDJoeWzmK0F52I3X0nLtFPirmsVC2ceic4EQ/3X2yYFCOWgCtH+PvMZct6Whoky3OQLqCpFXQsKHQ==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"animation-frame-polyfill": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/animation-frame-polyfill/-/animation-frame-polyfill-1.0.1.tgz",
|
||||
"integrity": "sha1-X1rZk6eHlL0Xas3lttzmKGdBDJ0="
|
||||
},
|
||||
"ansi-colors": {
|
||||
"version": "3.2.4",
|
||||
|
|
@ -1870,6 +1894,11 @@
|
|||
"integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
|
||||
"dev": true
|
||||
},
|
||||
"array-from": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/array-from/-/array-from-2.1.1.tgz",
|
||||
"integrity": "sha1-z+nYwmYoudxa7MYqn12PHzUsEZU="
|
||||
},
|
||||
"array-union": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
|
||||
|
|
@ -2604,6 +2633,11 @@
|
|||
"unset-value": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"calendar-utils": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/calendar-utils/-/calendar-utils-0.3.1.tgz",
|
||||
"integrity": "sha512-0XSJ/dP6QDeO9higbWZmf/ZE9mAUq05HdUONbSNpmwhKfKQ8zf6fMdU6M0ySv0q+TkdwjaGy0DFTRzSUZMsTVw=="
|
||||
},
|
||||
"caller-callsite": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
|
||||
|
|
@ -3175,6 +3209,14 @@
|
|||
"sha.js": "^2.4.8"
|
||||
}
|
||||
},
|
||||
"create-point-cb": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/create-point-cb/-/create-point-cb-1.2.0.tgz",
|
||||
"integrity": "sha1-G85H/E/AGFXuEhONZ2sMsqfLznE=",
|
||||
"requires": {
|
||||
"type-func": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"cross-spawn": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
|
||||
|
|
@ -3538,6 +3580,11 @@
|
|||
"assert-plus": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"date-fns": {
|
||||
"version": "1.30.1",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
|
||||
"integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
|
||||
},
|
||||
"date-format": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/date-format/-/date-format-2.1.0.tgz",
|
||||
|
|
@ -3818,6 +3865,32 @@
|
|||
"buffer-indexof": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"dom-autoscroller": {
|
||||
"version": "2.3.4",
|
||||
"resolved": "https://registry.npmjs.org/dom-autoscroller/-/dom-autoscroller-2.3.4.tgz",
|
||||
"integrity": "sha512-HcAdt/2Dq9x4CG6LWXc2x9Iq0MJPAu8fuzHncclq7byufqYEYVtx9sZ/dyzR+gdj4qwEC9p27Lw1G2HRRYX6jQ==",
|
||||
"requires": {
|
||||
"animation-frame-polyfill": "^1.0.0",
|
||||
"create-point-cb": "^1.0.0",
|
||||
"dom-mousemove-dispatcher": "^1.0.1",
|
||||
"dom-plane": "^1.0.1",
|
||||
"dom-set": "^1.0.1",
|
||||
"type-func": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"dom-mousemove-dispatcher": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dom-mousemove-dispatcher/-/dom-mousemove-dispatcher-1.0.1.tgz",
|
||||
"integrity": "sha1-okpt35Oye7NpT3IIdUalf8fpFA8="
|
||||
},
|
||||
"dom-plane": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/dom-plane/-/dom-plane-1.0.2.tgz",
|
||||
"integrity": "sha1-+MheaXxYfxR+j8L6wd4HjB/kFyw=",
|
||||
"requires": {
|
||||
"create-point-cb": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"dom-serialize": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",
|
||||
|
|
@ -3830,6 +3903,16 @@
|
|||
"void-elements": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"dom-set": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/dom-set/-/dom-set-1.1.1.tgz",
|
||||
"integrity": "sha1-XCxhDuSDm1IO1fmN28vjFMD6lUo=",
|
||||
"requires": {
|
||||
"array-from": "^2.1.1",
|
||||
"is-array": "^1.0.1",
|
||||
"iselement": "^1.1.4"
|
||||
}
|
||||
},
|
||||
"domain-browser": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
|
||||
|
|
@ -5334,6 +5417,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"is-array": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/is-array/-/is-array-1.0.1.tgz",
|
||||
"integrity": "sha1-6YUMwsyGDDvAl36EzPDdRkWEJ5o="
|
||||
},
|
||||
"is-arrayish": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
|
||||
|
|
@ -5556,6 +5644,11 @@
|
|||
"buffer-alloc": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"iselement": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/iselement/-/iselement-1.1.4.tgz",
|
||||
"integrity": "sha1-flW1Ko68pQp+LoDluNKEDzI1MUY="
|
||||
},
|
||||
"isexe": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
|
||||
|
|
@ -8143,6 +8236,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"positioning": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/positioning/-/positioning-1.4.0.tgz",
|
||||
"integrity": "sha512-LbN+mgAXtcDdN46xMJ3yZwjndqqYJODaO5qKmU+MVMu5tL3K2dlm1Qha/zh1k2JAFym5HDaZpnPfO4gr91VTRw=="
|
||||
},
|
||||
"posix-character-classes": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
|
||||
|
|
@ -10348,6 +10446,11 @@
|
|||
"integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
|
||||
"dev": true
|
||||
},
|
||||
"type-func": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/type-func/-/type-func-1.0.3.tgz",
|
||||
"integrity": "sha1-qxhCNK6A2NUAV87+/zstl9CK6bA="
|
||||
},
|
||||
"type-is": {
|
||||
"version": "1.6.18",
|
||||
"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
|
||||
|
|
|
|||
|
|
@ -33,7 +33,8 @@
|
|||
"@ngrx/store": "^8.1.0",
|
||||
"@ngx-translate/core": "^11.0.1",
|
||||
"@swimlane/ngx-datatable": "^15.0.2",
|
||||
"angular-in-memory-web-api": "0.8.0",
|
||||
"angular-calendar": "0.27.8",
|
||||
"date-fns": "1.30.1",
|
||||
"d3": "^5.9.7",
|
||||
"hammerjs": "^2.0.8",
|
||||
"lodash": "^4.17.15",
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export const navigation: FuseNavigation[] = [
|
|||
translate: 'NAV.USER_REGIST.TITLE',
|
||||
type: 'item',
|
||||
icon: 'email',
|
||||
url: '/pages/users/user-connect1'
|
||||
url: '/pages/users/management/regist'
|
||||
},
|
||||
{
|
||||
id: 'user_fees_management',
|
||||
|
|
@ -47,7 +47,7 @@ export const navigation: FuseNavigation[] = [
|
|||
translate: 'NAV.USER_FEES_MANAGEMENT.TITLE',
|
||||
type: 'item',
|
||||
icon: 'email',
|
||||
url: '/pages/users/user-connect2'
|
||||
url: '/pages/users/management/fees'
|
||||
},
|
||||
{
|
||||
id: 'user_attendance_management',
|
||||
|
|
@ -55,7 +55,7 @@ export const navigation: FuseNavigation[] = [
|
|||
translate: 'NAV.USER_ATTENDANCE_MANAGEMENT.TITLE',
|
||||
type: 'item',
|
||||
icon: 'email',
|
||||
url: '/pages/users/user-connect3'
|
||||
url: '/pages/users/management/attendance'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,15 @@
|
|||
import { UserDetailComponent } from './user-detail.component';
|
||||
import { UserListComponent } from './user-list.component';
|
||||
import { UserConnectComponent } from './user-connect/user-connect.component';
|
||||
import { UserRegistComponent } from './user-regist/user-regist.component';
|
||||
import { UserFeesComponent } from './user-fees/user-fees.component';
|
||||
import { UserAttendanceComponent } from './user-attendance/user-attendance.component';
|
||||
|
||||
export const COMPONENTS = [UserDetailComponent, UserListComponent, UserConnectComponent];
|
||||
export const COMPONENTS = [
|
||||
UserDetailComponent,
|
||||
UserListComponent,
|
||||
UserConnectComponent,
|
||||
UserRegistComponent,
|
||||
UserFeesComponent,
|
||||
UserAttendanceComponent
|
||||
];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,97 @@
|
|||
<div id="calendar" class="page-layout simple fullwidth">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header p-16 p-sm-24" [ngClass]="viewDate | date:'MMM'">
|
||||
|
||||
<div class="header-content" fxLayout="column" fxLayoutAlign="space-between">
|
||||
|
||||
<div class="header-top" fxLayout="row" fxLayoutAlign="space-between center" fxLayout.xs="column">
|
||||
|
||||
<div class="logo mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="logo-icon" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
|
||||
today
|
||||
</mat-icon>
|
||||
<span class="logo-text" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
|
||||
Calendar
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- TOOLBAR -->
|
||||
<div class="toolbar" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<button mat-icon-button aria-label="Search" matTooltip="Search">
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button mwlCalendarToday [(viewDate)]="viewDate"
|
||||
(viewDateChange)="selectedDay = {date:$event}" aria-label="Today" matTooltip="Today">
|
||||
<mat-icon>today</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button (click)="view='day'" aria-label="Day" matTooltip="Day">
|
||||
<mat-icon>view_day</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button (click)="view='week'" aria-label="Week" matTooltip="Week">
|
||||
<mat-icon>view_week</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button (click)="view='month'" aria-label="Month" matTooltip="Month">
|
||||
<mat-icon>view_module</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / TOOLBAR -->
|
||||
|
||||
<!-- HEADER BOTTOM -->
|
||||
<div class="header-bottom" fxLayout="row" fxLayoutAlign="center center"
|
||||
[@animate]="{value:'*',params:{delay:'150ms'}}">
|
||||
|
||||
<button mat-icon-button class="arrow" mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate"
|
||||
(viewDateChange)="selectedDay = {date:$event}" aria-label="Previous">
|
||||
<mat-icon>chevron_left</mat-icon>
|
||||
</button>
|
||||
|
||||
<div class="title">
|
||||
{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}
|
||||
</div>
|
||||
|
||||
<button mat-icon-button class="arrow" mwlCalendarNextView [view]="view" [(viewDate)]="viewDate"
|
||||
(viewDateChange)="selectedDay = {date:$event}" aria-label="Next">
|
||||
<mat-icon>chevron_right</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<!-- / HEADER BOTTOM -->
|
||||
</div>
|
||||
|
||||
<!-- ADD EVENT BUTTON -->
|
||||
<button mat-fab class="add-event-button mat-accent" (click)="addEvent()" aria-label="Add event"
|
||||
[@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
<!-- / ADD EVENT BUTTON -->
|
||||
</div>
|
||||
<!-- / HEADER -->
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content" fusePerfectScrollbar [@animate]="{value:'*',params:{delay:'200ms',y:'50px'}}">
|
||||
<div [ngSwitch]="view">
|
||||
<mwl-calendar-month-view *ngSwitchCase="'month'" [viewDate]="viewDate" [events]="events" [refresh]="refresh"
|
||||
[activeDayIsOpen]="activeDayIsOpen" (dayClicked)="dayClicked($event.day)"
|
||||
(eventClicked)="editEvent('edit', $event.event)" (eventTimesChanged)="eventTimesChanged($event)"
|
||||
(beforeViewRender)="beforeMonthViewRender($event)">
|
||||
</mwl-calendar-month-view>
|
||||
<mwl-calendar-week-view *ngSwitchCase="'week'" [viewDate]="viewDate"
|
||||
(viewDateChange)="selectedDay = {date:$event}" [events]="events" [refresh]="refresh"
|
||||
(dayClicked)="dayClicked($event.day)" (eventClicked)="editEvent('edit', $event.event)"
|
||||
(eventTimesChanged)="eventTimesChanged($event)">
|
||||
</mwl-calendar-week-view>
|
||||
<mwl-calendar-day-view *ngSwitchCase="'day'" [viewDate]="viewDate" (viewDateChange)="selectedDay = {date:$event}"
|
||||
[events]="events" [refresh]="refresh" (dayClicked)="dayClicked($event.day)"
|
||||
(eventClicked)="editEvent('edit', $event.event)" (eventTimesChanged)="eventTimesChanged($event)">
|
||||
</mwl-calendar-day-view>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- / CONTENT -->
|
||||
</div>
|
||||
|
|
@ -0,0 +1,310 @@
|
|||
@import "src/@fuse/scss/fuse";
|
||||
@import "node_modules/angular-calendar/scss/angular-calendar";
|
||||
|
||||
.cal-month-view {
|
||||
|
||||
.cal-header {
|
||||
|
||||
.cal-cell {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.cal-day-cell {
|
||||
|
||||
@include media-breakpoint(lg) {
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
@include media-breakpoint(gt-lg) {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
&.cal-selected {
|
||||
border: none;
|
||||
@include mat-elevation(9);
|
||||
}
|
||||
}
|
||||
|
||||
.cal-open-day-events {
|
||||
box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.54);
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> div {
|
||||
padding: 0 16px;
|
||||
margin: 8px 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
@include mat-elevation(1);
|
||||
transition: box-shadow 300ms ease;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include mat-elevation(3);
|
||||
}
|
||||
|
||||
.cal-event {
|
||||
top: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
mwl-calendar-event-title {
|
||||
flex: 1;
|
||||
|
||||
.cal-event-title {
|
||||
display: block;
|
||||
padding: 21px 24px;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
mwl-calendar-event-actions {
|
||||
|
||||
.cal-event-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.cal-event-action {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cal-week-view {
|
||||
|
||||
.cal-header > b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cal-event {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
mwl-calendar-event-title {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
order: 0;
|
||||
|
||||
.cal-event-title {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
mwl-calendar-event-actions {
|
||||
order: 1;
|
||||
|
||||
.cal-event-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.cal-event-action {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cal-day-view {
|
||||
|
||||
.cal-time {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cal-event {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
mwl-calendar-event-title {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
order: 0;
|
||||
|
||||
.cal-event-title {
|
||||
display: block;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
mwl-calendar-event-actions {
|
||||
order: 1;
|
||||
|
||||
.cal-event-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.cal-event-action {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cal-hour-segment {
|
||||
|
||||
&:after,
|
||||
&::after {
|
||||
content: '' !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#calendar {
|
||||
|
||||
.header {
|
||||
height: 200px;
|
||||
min-height: 200px;
|
||||
max-height: 200px;
|
||||
position: relative;
|
||||
background-size: 100% auto;
|
||||
background-position: 0 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #FAFAFA;
|
||||
color: #FFFFFF;
|
||||
|
||||
@include media-breakpoint(xs) {
|
||||
height: 164px;
|
||||
min-height: 164px;
|
||||
max-height: 164px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
&.Jan {
|
||||
background-image: url('/assets/images/calendar/winter.jpg');
|
||||
background-position: 0 85%;
|
||||
}
|
||||
&.Feb {
|
||||
background-image: url('/assets/images/calendar/winter.jpg');
|
||||
background-position: 0 85%;
|
||||
}
|
||||
&.Mar {
|
||||
background-image: url('/assets/images/calendar/spring.jpg');
|
||||
background-position: 0 40%;
|
||||
}
|
||||
&.Apr {
|
||||
background-image: url('/assets/images/calendar/spring.jpg');
|
||||
background-position: 0 40%;
|
||||
}
|
||||
&.May {
|
||||
background-image: url('/assets/images/calendar/spring.jpg');
|
||||
background-position: 0 40%;
|
||||
}
|
||||
&.Jun {
|
||||
background-image: url('/assets/images/calendar/summer.jpg');
|
||||
background-position: 0 80%;
|
||||
}
|
||||
&.Jul {
|
||||
background-image: url('/assets/images/calendar/summer.jpg');
|
||||
background-position: 0 80%;
|
||||
}
|
||||
&.Aug {
|
||||
background-image: url('/assets/images/calendar/summer.jpg');
|
||||
background-position: 0 80%;
|
||||
}
|
||||
&.Sep {
|
||||
background-image: url('/assets/images/calendar/autumn.jpg');
|
||||
background-position: 0 40%;
|
||||
}
|
||||
&.Oct {
|
||||
background-image: url('/assets/images/calendar/autumn.jpg');
|
||||
background-position: 0 40%;
|
||||
}
|
||||
&.Nov {
|
||||
background-image: url('/assets/images/calendar/autumn.jpg');
|
||||
background-position: 0 40%;
|
||||
}
|
||||
&.Dec {
|
||||
background-image: url('/assets/images/calendar/winter.jpg');
|
||||
background-position: 0 85%;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
height: 100%;
|
||||
|
||||
.header-top {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.logo {
|
||||
|
||||
.logo-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-bottom {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
min-width: 160px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-event-button {
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
bottom: -26px;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { UserAttendanceComponent } from './user-attendance.component';
|
||||
|
||||
describe('UserAttendanceComponent', () => {
|
||||
let component: UserAttendanceComponent;
|
||||
let fixture: ComponentFixture<UserAttendanceComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ UserAttendanceComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(UserAttendanceComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,238 @@
|
|||
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { FormGroup } from '@angular/forms';
|
||||
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
|
||||
import { Subject } from 'rxjs';
|
||||
import { CalendarEvent, CalendarEventAction, CalendarEventTimesChangedEvent, CalendarMonthViewDay } from 'angular-calendar';
|
||||
|
||||
import { FuseConfirmDialogComponent } from 'src/@fuse/components/confirm-dialog/confirm-dialog.component';
|
||||
import { fuseAnimations } from 'src/@fuse/animations';
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-attendance',
|
||||
templateUrl: './user-attendance.component.html',
|
||||
styleUrls: ['./user-attendance.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
animations: fuseAnimations
|
||||
})
|
||||
export class UserAttendanceComponent implements OnInit {
|
||||
|
||||
actions: CalendarEventAction[];
|
||||
activeDayIsOpen: boolean;
|
||||
confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;
|
||||
dialogRef: any;
|
||||
events: CalendarEvent[];
|
||||
refresh: Subject<any> = new Subject();
|
||||
selectedDay: any;
|
||||
view: string;
|
||||
viewDate: Date;
|
||||
|
||||
constructor(
|
||||
private _matDialog: MatDialog,
|
||||
) {
|
||||
// Set the defaults
|
||||
this.view = 'month';
|
||||
this.viewDate = new Date();
|
||||
this.activeDayIsOpen = true;
|
||||
this.selectedDay = {};
|
||||
|
||||
this.actions = [
|
||||
{
|
||||
label: '<i class="material-icons s-16">edit</i>',
|
||||
onClick: ({ event }: { event: CalendarEvent }): void => {
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '<i class="material-icons s-16">delete</i>',
|
||||
onClick: ({ event }: { event: CalendarEvent }): void => {
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
/**
|
||||
* Get events from service/server
|
||||
*/
|
||||
// this.setEvents();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
/**
|
||||
* Watch re-render-refresh for updating db
|
||||
*/
|
||||
this.refresh.subscribe(updateDB => {
|
||||
if (updateDB) {
|
||||
// this._calendarService.updateEvents(this.events);
|
||||
}
|
||||
});
|
||||
|
||||
// this._calendarService.onEventsUpdated.subscribe(events => {
|
||||
// this.setEvents();
|
||||
// this.refresh.next();
|
||||
// });
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Set events
|
||||
*/
|
||||
setEvents(): void {
|
||||
// this.events = this._calendarService.events.map(item => {
|
||||
// item.actions = this.actions;
|
||||
// return new CalendarEventModel(item);
|
||||
// });
|
||||
}
|
||||
/**
|
||||
* Before View Renderer
|
||||
*
|
||||
* @param {any} header
|
||||
* @param {any} body
|
||||
*/
|
||||
beforeMonthViewRender({ header, body }): void {
|
||||
/**
|
||||
* Get the selected day
|
||||
*/
|
||||
const _selectedDay = body.find((_day) => {
|
||||
return _day.date.getTime() === this.selectedDay.date.getTime();
|
||||
});
|
||||
|
||||
if (_selectedDay) {
|
||||
/**
|
||||
* Set selected day style
|
||||
* @type {string}
|
||||
*/
|
||||
_selectedDay.cssClass = 'cal-selected';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Day clicked
|
||||
*
|
||||
* @param { MonthViewDay } day
|
||||
*/
|
||||
dayClicked(day: CalendarMonthViewDay): void {
|
||||
const date: Date = day.date;
|
||||
const events: CalendarEvent[] = day.events;
|
||||
|
||||
// if (isSameMonth(date, this.viewDate)) {
|
||||
// if ((isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) || events.length === 0) {
|
||||
// this.activeDayIsOpen = false;
|
||||
// }
|
||||
// else {
|
||||
// this.activeDayIsOpen = true;
|
||||
// this.viewDate = date;
|
||||
// }
|
||||
// }
|
||||
this.selectedDay = day;
|
||||
this.refresh.next();
|
||||
}
|
||||
|
||||
/**
|
||||
* Event times changed
|
||||
* Event dropped or resized
|
||||
*
|
||||
* @param {CalendarEvent} event
|
||||
* @param {Date} newStart
|
||||
* @param {Date} newEnd
|
||||
*/
|
||||
eventTimesChanged({ event, newStart, newEnd }: CalendarEventTimesChangedEvent): void {
|
||||
event.start = newStart;
|
||||
event.end = newEnd;
|
||||
// console.warn('Dropped or resized', event);
|
||||
this.refresh.next(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete Event
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
deleteEvent(event): void {
|
||||
this.confirmDialogRef = this._matDialog.open(FuseConfirmDialogComponent, {
|
||||
disableClose: false
|
||||
});
|
||||
|
||||
this.confirmDialogRef.componentInstance.confirmMessage = 'Are you sure you want to delete?';
|
||||
|
||||
this.confirmDialogRef.afterClosed().subscribe(result => {
|
||||
if (result) {
|
||||
const eventIndex = this.events.indexOf(event);
|
||||
this.events.splice(eventIndex, 1);
|
||||
this.refresh.next(true);
|
||||
}
|
||||
this.confirmDialogRef = null;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Edit Event
|
||||
*
|
||||
* @param {string} action
|
||||
* @param {CalendarEvent} event
|
||||
*/
|
||||
editEvent(action: string, event: CalendarEvent): void {
|
||||
const eventIndex = this.events.indexOf(event);
|
||||
|
||||
// this.dialogRef = this._matDialog.open(CalendarEventFormDialogComponent, {
|
||||
// panelClass: 'event-form-dialog',
|
||||
// data: {
|
||||
// event: event,
|
||||
// action: action
|
||||
// }
|
||||
// });
|
||||
|
||||
this.dialogRef.afterClosed()
|
||||
.subscribe(response => {
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
const actionType: string = response[0];
|
||||
const formData: FormGroup = response[1];
|
||||
switch (actionType) {
|
||||
/**
|
||||
* Save
|
||||
*/
|
||||
case 'save':
|
||||
|
||||
this.events[eventIndex] = Object.assign(this.events[eventIndex], formData.getRawValue());
|
||||
this.refresh.next(true);
|
||||
|
||||
break;
|
||||
/**
|
||||
* Delete
|
||||
*/
|
||||
case 'delete':
|
||||
|
||||
this.deleteEvent(event);
|
||||
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Add Event
|
||||
*/
|
||||
addEvent(): void {
|
||||
// this.dialogRef = this._matDialog.open(CalendarEventFormDialogComponent, {
|
||||
// panelClass: 'event-form-dialog',
|
||||
// data: {
|
||||
// action: 'new',
|
||||
// date: this.selectedDay.date
|
||||
// }
|
||||
// });
|
||||
this.dialogRef.afterClosed()
|
||||
.subscribe((response: FormGroup) => {
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
const newEvent = response.getRawValue();
|
||||
newEvent.actions = this.actions;
|
||||
this.events.push(newEvent);
|
||||
this.refresh.next(true);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +1,125 @@
|
|||
<p>user-connect worksddddddddddd!</p>
|
||||
<div id="users" 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' } }">Users</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="users-table" #table matSort [@animateStagger]="{ value: '50' }" fusePerfectScrollbar>
|
||||
<!-- ID/Nickname Column -->
|
||||
<ng-container matColumnDef="id">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>아이디</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="text-truncate">{{ order.id }}</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Phone Column -->
|
||||
<ng-container matColumnDef="phone">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>연락처</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||
<p class="text-truncate">{{ order.reference }}</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Current Location Column -->
|
||||
<ng-container matColumnDef="currentLocation">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>현재위치</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="text-truncate">
|
||||
{{ order.customer.firstName }}
|
||||
{{ order.customer.lastName }}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Regist IP Column -->
|
||||
<ng-container matColumnDef="registIp">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>등록아이피</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-md>
|
||||
<p class="total-price text-truncate">
|
||||
{{ order.total | currency: 'USD':'symbol' }}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- RegistTime Column -->
|
||||
<ng-container matColumnDef="registTime">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>등록시간</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||
<p class="text-truncate">
|
||||
{{ order.payment.method }}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Holding Money Column -->
|
||||
<ng-container matColumnDef="holdMoney">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>보유머니</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
|
||||
{{ order.status[0].name }}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Point Column -->
|
||||
<ng-container matColumnDef="point">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>포인트</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
|
||||
{{ order.status[0].name }}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Fire Column -->
|
||||
<ng-container matColumnDef="fire">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>강퇴</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
|
||||
{{ order.status[0].name }}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
|
||||
|
||||
<mat-row *matRowDef="let order; columns: displayedColumns" class="order" matRipple
|
||||
[routerLink]="'/apps/e-commerce/users/' + order.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>
|
||||
쪽지보내기 들어갈 자리
|
||||
|
|
@ -9,6 +9,8 @@ import {
|
|||
} from '@angular/core';
|
||||
import { fuseAnimations } from 'src/@fuse/animations';
|
||||
import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-connect',
|
||||
|
|
@ -19,6 +21,28 @@ import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
|
|||
})
|
||||
export class UserConnectComponent implements OnInit, OnDestroy {
|
||||
|
||||
displayedColumns = [
|
||||
'id',
|
||||
'phone',
|
||||
'currentLocation',
|
||||
'registIp',
|
||||
'registTime',
|
||||
'holdMoney',
|
||||
'point',
|
||||
'fire',
|
||||
|
||||
];
|
||||
|
||||
@ViewChild(MatPaginator, { static: true })
|
||||
paginator: MatPaginator;
|
||||
|
||||
@ViewChild('filter', { static: true })
|
||||
filter: ElementRef;
|
||||
|
||||
@ViewChild(MatSort, { static: true })
|
||||
sort: MatSort;
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
/**
|
||||
|
|
@ -27,7 +51,6 @@ export class UserConnectComponent implements OnInit, OnDestroy {
|
|||
constructor(
|
||||
|
||||
) {
|
||||
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,124 @@
|
|||
<div id="users" 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' } }">Users</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="users-table" #table matSort [@animateStagger]="{ value: '50' }" fusePerfectScrollbar>
|
||||
<!-- ID/Nickname Column -->
|
||||
<ng-container matColumnDef="id">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>아이디</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="text-truncate">{{ order.id }}</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Charge/Exchange Fees Column -->
|
||||
<ng-container matColumnDef="chargeFees">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>충/환 커미션</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||
<p class="text-truncate">{{ order.reference }}</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Sport Bet Fees Column -->
|
||||
<ng-container matColumnDef="sportBetFees">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>(스)배팅 커미션</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="text-truncate">
|
||||
{{ order.customer.firstName }}
|
||||
{{ order.customer.lastName }}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Mini Game Bet Fees Column -->
|
||||
<ng-container matColumnDef="miniGameBetFees">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>(미)배팅 커미션</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-md>
|
||||
<p class="total-price text-truncate">
|
||||
{{ order.total | currency: 'USD':'symbol' }}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Rotus Bet Fees Column -->
|
||||
<ng-container matColumnDef="rotusBetFees">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>(로)배팅 커미션</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||
<p class="text-truncate">
|
||||
{{ order.payment.method }}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Loser Sport Fees Column -->
|
||||
<ng-container matColumnDef="loserSportFees">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>낙첨금(스)커미션</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
|
||||
{{ order.status[0].name }}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Loser Mini Fees Column -->
|
||||
<ng-container matColumnDef="loserMiniFees">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>낙첨금(미)커미션</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
|
||||
{{ order.status[0].name }}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Calculate Method Column -->
|
||||
<ng-container matColumnDef="calculateMethod">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>정산방식&적용</mat-header-cell>
|
||||
<mat-cell *matCellDef="let order">
|
||||
<p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
|
||||
{{ order.status[0].name }}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
|
||||
|
||||
<mat-row *matRowDef="let order; columns: displayedColumns" class="order" matRipple
|
||||
[routerLink]="'/apps/e-commerce/users/' + order.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,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { UserFeesComponent } from './user-fees.component';
|
||||
|
||||
describe('UserFeesComponent', () => {
|
||||
let component: UserFeesComponent;
|
||||
let fixture: ComponentFixture<UserFeesComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ UserFeesComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(UserFeesComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
import {
|
||||
Component,
|
||||
ElementRef,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
ViewChild,
|
||||
ViewEncapsulation
|
||||
} from '@angular/core';
|
||||
import { fuseAnimations } from 'src/@fuse/animations';
|
||||
import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-fees',
|
||||
templateUrl: './user-fees.component.html',
|
||||
styleUrls: ['./user-fees.component.scss']
|
||||
})
|
||||
export class UserFeesComponent implements OnInit {
|
||||
|
||||
displayedColumns = [
|
||||
'id',
|
||||
'chargeFees',
|
||||
'sportBetFees',
|
||||
'miniGameBetFees',
|
||||
'rotusBetFees',
|
||||
'loserSportFees',
|
||||
'loserMiniFees',
|
||||
'calculateMethod',
|
||||
];
|
||||
|
||||
@ViewChild(MatPaginator, { static: true })
|
||||
paginator: MatPaginator;
|
||||
|
||||
@ViewChild('filter', { static: true })
|
||||
filter: ElementRef;
|
||||
|
||||
@ViewChild(MatSort, { static: true })
|
||||
sort: MatSort;
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
|
||||
) {
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
<div id="forms" class="page-layout simple fullwidth" fxLayout="column">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header accent p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
|
||||
<div fxLayout="column" fxLayoutAlign="center start">
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="secondary-text s-18">home</mat-icon>
|
||||
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
|
||||
<span class="secondary-text">User Interface</span>
|
||||
</div>
|
||||
<div class="h1 mt-16">Forms</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / HEADER -->
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content p-24">
|
||||
|
||||
<div class="h1">
|
||||
Reactive Forms
|
||||
</div>
|
||||
|
||||
<p class="pt-16 pb-32">
|
||||
Angular reactive forms facilitate a reactive style of programming that favors explicit management of the
|
||||
data flowing between a non-UI data model (typically retrieved from a server) and a UI-oriented form model
|
||||
that retains the states and values of the HTML controls on screen. Reactive forms offer the ease of using
|
||||
reactive patterns, testing, and validation.
|
||||
</p>
|
||||
<div class="h1 pt-32">
|
||||
Horizontal Stepper
|
||||
</div>
|
||||
<div class="mb-24" fxLayout="column" fxLayoutAlign="start" fxLayout.gt-md="row">
|
||||
|
||||
|
||||
<!--
|
||||
<p class="pb-32">
|
||||
Angular Material's stepper provides a wizard-like workflow by dividing content into logical steps.
|
||||
<code>mat-horizontal-stepper</code> selector can be used to create a horizontal stepper.
|
||||
</p> -->
|
||||
|
||||
<div class="horizontal-stepper-wrapper">
|
||||
|
||||
<!-- HORIZONTAL STEPPER EXAMPLE -->
|
||||
<mat-horizontal-stepper class="mat-elevation-z4" [linear]="true">
|
||||
|
||||
<mat-step [stepControl]="horizontalStepperStep1">
|
||||
|
||||
<form fxLayout="column" [formGroup]="horizontalStepperStep1">
|
||||
|
||||
<ng-template matStepLabel>Fill out your name</ng-template>
|
||||
|
||||
<div fxFlex="1 0 auto" fxLayout="column">
|
||||
|
||||
<mat-form-field appearance="outline" fxFlex="100">
|
||||
<mat-label>First Name</mat-label>
|
||||
<input matInput formControlName="firstName" required>
|
||||
<mat-error>First Name is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" fxFlex="100">
|
||||
<mat-label>Last Name</mat-label>
|
||||
<input matInput formControlName="lastName" required>
|
||||
<mat-error>Last Name is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="center center">
|
||||
<button mat-raised-button matStepperNext type="button" color="accent">
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</mat-step>
|
||||
|
||||
<mat-step [stepControl]="horizontalStepperStep2">
|
||||
|
||||
<form fxLayout="column" [formGroup]="horizontalStepperStep2">
|
||||
|
||||
<ng-template matStepLabel>Fill out your address</ng-template>
|
||||
|
||||
<div fxFlex="1 0 auto" fxLayout="row">
|
||||
|
||||
<mat-form-field appearance="outline" fxFlex="100">
|
||||
<mat-label>Address</mat-label>
|
||||
<textarea matInput formControlName="address" required>
|
||||
1600 Amphitheatre Pkwy
|
||||
</textarea>
|
||||
<mat-error>Address is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="center center">
|
||||
<button class="mr-8" mat-raised-button matStepperPrevious type="button" color="accent">
|
||||
Previous
|
||||
</button>
|
||||
<button mat-raised-button matStepperNext type="button" color="accent">
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</mat-step>
|
||||
|
||||
<mat-step [stepControl]="horizontalStepperStep3">
|
||||
|
||||
<form fxLayout="column" [formGroup]="horizontalStepperStep3">
|
||||
|
||||
<ng-template matStepLabel>Fill out your address</ng-template>
|
||||
|
||||
<div fxFlex="1 0 auto" fxLayout="column">
|
||||
|
||||
<mat-form-field appearance="outline" fxFlex="100">
|
||||
<mat-label>City</mat-label>
|
||||
<input matInput formControlName="city" required>
|
||||
<mat-error>City is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" fxFlex="100">
|
||||
<mat-label>State</mat-label>
|
||||
<input matInput formControlName="state" required>
|
||||
<mat-error>State is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" fxFlex="100">
|
||||
<mat-label>Postal Code</mat-label>
|
||||
<input matInput #postalCode2 formControlName="postalCode" maxlength="5" required>
|
||||
<mat-hint align="end">{{postalCode2.value.length}} / 5</mat-hint>
|
||||
<mat-error>Postal Code is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="center center">
|
||||
<button class="mr-8" mat-raised-button matStepperPrevious type="button" color="accent">
|
||||
Previous
|
||||
</button>
|
||||
<button mat-raised-button matStepperNext type="button" color="accent">
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</mat-step>
|
||||
|
||||
<mat-step>
|
||||
|
||||
<ng-template matStepLabel>Done</ng-template>
|
||||
|
||||
<div class="h2 m-16" fxLayout="row" fxLayoutAlign="center center">
|
||||
Thank your for filling out our form.
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="center center">
|
||||
<button class="mr-8" mat-raised-button matStepperPrevious type="button" color="accent">
|
||||
Previous
|
||||
</button>
|
||||
<button mat-raised-button type="button" color="accent" (click)="finishHorizontalStepper()">
|
||||
Finish
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</mat-step>
|
||||
|
||||
</mat-horizontal-stepper>
|
||||
<!-- / HORIZONTAL STEPPER EXAMPLE -->
|
||||
|
||||
</div>
|
||||
<!-- / CONTENT -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
:host {
|
||||
|
||||
.content {
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
max-width: 800px !important;
|
||||
}
|
||||
|
||||
.form-errors-model {
|
||||
flex: 1;
|
||||
|
||||
code {
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-stepper-wrapper,
|
||||
.vertical-stepper-wrapper {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { UserRegistComponent } from './user-regist.component';
|
||||
|
||||
describe('UserRegistComponent', () => {
|
||||
let component: UserRegistComponent;
|
||||
let fixture: ComponentFixture<UserRegistComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ UserRegistComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(UserRegistComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { Subject } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-regist',
|
||||
templateUrl: './user-regist.component.html',
|
||||
styleUrls: ['./user-regist.component.scss']
|
||||
})
|
||||
export class UserRegistComponent implements OnInit, OnDestroy {
|
||||
|
||||
form: FormGroup;
|
||||
// Horizontal Stepper
|
||||
horizontalStepperStep1: FormGroup;
|
||||
horizontalStepperStep2: FormGroup;
|
||||
horizontalStepperStep3: FormGroup;
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
/*
|
||||
*
|
||||
* Constructor
|
||||
*
|
||||
* @param {FormBuilder} _formBuilder
|
||||
*/
|
||||
constructor(
|
||||
private _formBuilder: FormBuilder
|
||||
) {
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit() {
|
||||
// Reactive Form
|
||||
this.form = this._formBuilder.group({
|
||||
company: [
|
||||
{
|
||||
value: 'Google',
|
||||
disabled: true
|
||||
}, Validators.required
|
||||
],
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
address: ['', Validators.required],
|
||||
address2: ['', Validators.required],
|
||||
city: ['', Validators.required],
|
||||
state: ['', Validators.required],
|
||||
postalCode: ['', [Validators.required, Validators.maxLength(5)]],
|
||||
country: ['', Validators.required]
|
||||
});
|
||||
|
||||
// Horizontal Stepper form steps
|
||||
this.horizontalStepperStep1 = this._formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.horizontalStepperStep2 = this._formBuilder.group({
|
||||
address: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.horizontalStepperStep3 = this._formBuilder.group({
|
||||
city: ['', Validators.required],
|
||||
state: ['', Validators.required],
|
||||
postalCode: ['', [Validators.required, Validators.maxLength(5)]]
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Finish the horizontal stepper
|
||||
*/
|
||||
finishHorizontalStepper(): void {
|
||||
alert('You have finished the horizontal stepper!');
|
||||
}
|
||||
|
||||
/**
|
||||
* Finish the vertical stepper
|
||||
*/
|
||||
finishVerticalStepper(): void {
|
||||
alert('You have finished the vertical stepper!');
|
||||
}
|
||||
}
|
||||
|
|
@ -4,6 +4,9 @@ import { Routes, RouterModule } from '@angular/router';
|
|||
import { UserDetailComponent } from './component/user-detail.component';
|
||||
import { UserListComponent } from './component/user-list.component';
|
||||
import { UserConnectComponent } from './component/user-connect/user-connect.component';
|
||||
import { UserRegistComponent } from './component/user-regist/user-regist.component';
|
||||
import { UserFeesComponent } from './component/user-fees/user-fees.component';
|
||||
import { UserAttendanceComponent } from './component/user-attendance/user-attendance.component';
|
||||
|
||||
const routes: Routes = [
|
||||
|
||||
|
|
@ -18,6 +21,19 @@ const routes: Routes = [
|
|||
{
|
||||
path: 'connect',
|
||||
component: UserConnectComponent
|
||||
},
|
||||
{
|
||||
path: 'regist',
|
||||
component: UserRegistComponent
|
||||
},
|
||||
{
|
||||
path: 'fees',
|
||||
component: UserFeesComponent
|
||||
}
|
||||
,
|
||||
{
|
||||
path: 'attendance',
|
||||
component: UserAttendanceComponent
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -13,14 +13,27 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
|
|||
import { MatSortModule } from '@angular/material/sort';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { CalendarModule as AngularCalendarModule, DateAdapter } from 'angular-calendar';
|
||||
|
||||
import { FuseSharedModule } from 'src/@fuse/shared.module';
|
||||
import { UserRoutingModule } from './user-routing.module';
|
||||
import { COMPONENTS } from './component';
|
||||
import { UserRegistComponent } from './component/user-regist/user-regist.component';
|
||||
import { MatStepperModule } from '@angular/material/stepper';
|
||||
import { UserFeesComponent } from './component/user-fees/user-fees.component';
|
||||
import { UserAttendanceComponent } from './component/user-attendance/user-attendance.component';
|
||||
|
||||
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
MatButtonModule,
|
||||
MatDatepickerModule,
|
||||
MatDialogModule,
|
||||
MatChipsModule,
|
||||
MatExpansionModule,
|
||||
MatFormFieldModule,
|
||||
|
|
@ -33,12 +46,20 @@ import { COMPONENTS } from './component';
|
|||
MatSnackBarModule,
|
||||
MatTableModule,
|
||||
MatTabsModule,
|
||||
MatStepperModule,
|
||||
MatToolbarModule,
|
||||
MatTooltipModule,
|
||||
|
||||
AngularCalendarModule.forRoot({
|
||||
provide: DateAdapter,
|
||||
useFactory: adapterFactory
|
||||
}),
|
||||
|
||||
FuseSharedModule,
|
||||
|
||||
UserRoutingModule
|
||||
],
|
||||
declarations: [...COMPONENTS],
|
||||
declarations: [...COMPONENTS, UserRegistComponent, UserFeesComponent, UserAttendanceComponent],
|
||||
|
||||
})
|
||||
export class UserModule { }
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user