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,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"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": {
|
"@angular-devkit/architect": {
|
||||||
"version": "0.801.2",
|
"version": "0.801.2",
|
||||||
"resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.801.2.tgz",
|
"resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.801.2.tgz",
|
||||||
|
|
@ -1758,10 +1753,39 @@
|
||||||
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
|
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"angular-in-memory-web-api": {
|
"angular-calendar": {
|
||||||
"version": "0.8.0",
|
"version": "0.27.8",
|
||||||
"resolved": "https://registry.npmjs.org/angular-in-memory-web-api/-/angular-in-memory-web-api-0.8.0.tgz",
|
"resolved": "https://registry.npmjs.org/angular-calendar/-/angular-calendar-0.27.8.tgz",
|
||||||
"integrity": "sha512-2n0YtCLFxZo4JePHvH6q8b7JmBmhZq44Ic8VaBPRSXE4vAmlKXHU+kI2quNa612EAETDRkZcvLOU8K8CkhIZgQ=="
|
"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": {
|
"ansi-colors": {
|
||||||
"version": "3.2.4",
|
"version": "3.2.4",
|
||||||
|
|
@ -1870,6 +1894,11 @@
|
||||||
"integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
|
"integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
|
||||||
"dev": true
|
"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": {
|
"array-union": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
|
||||||
|
|
@ -2604,6 +2633,11 @@
|
||||||
"unset-value": "^1.0.0"
|
"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": {
|
"caller-callsite": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
|
||||||
|
|
@ -3175,6 +3209,14 @@
|
||||||
"sha.js": "^2.4.8"
|
"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": {
|
"cross-spawn": {
|
||||||
"version": "6.0.5",
|
"version": "6.0.5",
|
||||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
|
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
|
||||||
|
|
@ -3538,6 +3580,11 @@
|
||||||
"assert-plus": "^1.0.0"
|
"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": {
|
"date-format": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/date-format/-/date-format-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/date-format/-/date-format-2.1.0.tgz",
|
||||||
|
|
@ -3818,6 +3865,32 @@
|
||||||
"buffer-indexof": "^1.0.0"
|
"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": {
|
"dom-serialize": {
|
||||||
"version": "2.2.1",
|
"version": "2.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",
|
||||||
|
|
@ -3830,6 +3903,16 @@
|
||||||
"void-elements": "^2.0.0"
|
"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": {
|
"domain-browser": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
|
"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": {
|
"is-arrayish": {
|
||||||
"version": "0.2.1",
|
"version": "0.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
|
||||||
|
|
@ -5556,6 +5644,11 @@
|
||||||
"buffer-alloc": "^1.2.0"
|
"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": {
|
"isexe": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
|
"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": {
|
"posix-character-classes": {
|
||||||
"version": "0.1.1",
|
"version": "0.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
|
"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=",
|
"integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
|
||||||
"dev": true
|
"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": {
|
"type-is": {
|
||||||
"version": "1.6.18",
|
"version": "1.6.18",
|
||||||
"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
|
"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,8 @@
|
||||||
"@ngrx/store": "^8.1.0",
|
"@ngrx/store": "^8.1.0",
|
||||||
"@ngx-translate/core": "^11.0.1",
|
"@ngx-translate/core": "^11.0.1",
|
||||||
"@swimlane/ngx-datatable": "^15.0.2",
|
"@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",
|
"d3": "^5.9.7",
|
||||||
"hammerjs": "^2.0.8",
|
"hammerjs": "^2.0.8",
|
||||||
"lodash": "^4.17.15",
|
"lodash": "^4.17.15",
|
||||||
|
|
@ -72,4 +73,4 @@
|
||||||
"tslint": "~5.15.0",
|
"tslint": "~5.15.0",
|
||||||
"typescript": "~3.4.3"
|
"typescript": "~3.4.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,7 @@ export const navigation: FuseNavigation[] = [
|
||||||
translate: 'NAV.USER_REGIST.TITLE',
|
translate: 'NAV.USER_REGIST.TITLE',
|
||||||
type: 'item',
|
type: 'item',
|
||||||
icon: 'email',
|
icon: 'email',
|
||||||
url: '/pages/users/user-connect1'
|
url: '/pages/users/management/regist'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'user_fees_management',
|
id: 'user_fees_management',
|
||||||
|
|
@ -47,7 +47,7 @@ export const navigation: FuseNavigation[] = [
|
||||||
translate: 'NAV.USER_FEES_MANAGEMENT.TITLE',
|
translate: 'NAV.USER_FEES_MANAGEMENT.TITLE',
|
||||||
type: 'item',
|
type: 'item',
|
||||||
icon: 'email',
|
icon: 'email',
|
||||||
url: '/pages/users/user-connect2'
|
url: '/pages/users/management/fees'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'user_attendance_management',
|
id: 'user_attendance_management',
|
||||||
|
|
@ -55,7 +55,7 @@ export const navigation: FuseNavigation[] = [
|
||||||
translate: 'NAV.USER_ATTENDANCE_MANAGEMENT.TITLE',
|
translate: 'NAV.USER_ATTENDANCE_MANAGEMENT.TITLE',
|
||||||
type: 'item',
|
type: 'item',
|
||||||
icon: 'email',
|
icon: 'email',
|
||||||
url: '/pages/users/user-connect3'
|
url: '/pages/users/management/attendance'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,15 @@
|
||||||
import { UserDetailComponent } from './user-detail.component';
|
import { UserDetailComponent } from './user-detail.component';
|
||||||
import { UserListComponent } from './user-list.component';
|
import { UserListComponent } from './user-list.component';
|
||||||
import { UserConnectComponent } from './user-connect/user-connect.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';
|
} from '@angular/core';
|
||||||
import { fuseAnimations } from 'src/@fuse/animations';
|
import { fuseAnimations } from 'src/@fuse/animations';
|
||||||
import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
|
import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
|
||||||
|
import { MatPaginator } from '@angular/material/paginator';
|
||||||
|
import { MatSort } from '@angular/material/sort';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-user-connect',
|
selector: 'app-user-connect',
|
||||||
|
|
@ -19,6 +21,28 @@ import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
|
||||||
})
|
})
|
||||||
export class UserConnectComponent implements OnInit, OnDestroy {
|
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>;
|
private _unsubscribeAll: Subject<any>;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -27,7 +51,6 @@ export class UserConnectComponent implements OnInit, OnDestroy {
|
||||||
constructor(
|
constructor(
|
||||||
|
|
||||||
) {
|
) {
|
||||||
|
|
||||||
// Set the private defaults
|
// Set the private defaults
|
||||||
this._unsubscribeAll = new Subject();
|
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 { UserDetailComponent } from './component/user-detail.component';
|
||||||
import { UserListComponent } from './component/user-list.component';
|
import { UserListComponent } from './component/user-list.component';
|
||||||
import { UserConnectComponent } from './component/user-connect/user-connect.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 = [
|
const routes: Routes = [
|
||||||
|
|
||||||
|
|
@ -18,6 +21,19 @@ const routes: Routes = [
|
||||||
{
|
{
|
||||||
path: 'connect',
|
path: 'connect',
|
||||||
component: UserConnectComponent
|
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 { MatSortModule } from '@angular/material/sort';
|
||||||
import { MatTableModule } from '@angular/material/table';
|
import { MatTableModule } from '@angular/material/table';
|
||||||
import { MatTabsModule } from '@angular/material/tabs';
|
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 { FuseSharedModule } from 'src/@fuse/shared.module';
|
||||||
import { UserRoutingModule } from './user-routing.module';
|
import { UserRoutingModule } from './user-routing.module';
|
||||||
import { COMPONENTS } from './component';
|
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({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
MatButtonModule,
|
MatButtonModule,
|
||||||
|
MatDatepickerModule,
|
||||||
|
MatDialogModule,
|
||||||
MatChipsModule,
|
MatChipsModule,
|
||||||
MatExpansionModule,
|
MatExpansionModule,
|
||||||
MatFormFieldModule,
|
MatFormFieldModule,
|
||||||
|
|
@ -33,12 +46,20 @@ import { COMPONENTS } from './component';
|
||||||
MatSnackBarModule,
|
MatSnackBarModule,
|
||||||
MatTableModule,
|
MatTableModule,
|
||||||
MatTabsModule,
|
MatTabsModule,
|
||||||
|
MatStepperModule,
|
||||||
|
MatToolbarModule,
|
||||||
|
MatTooltipModule,
|
||||||
|
|
||||||
|
AngularCalendarModule.forRoot({
|
||||||
|
provide: DateAdapter,
|
||||||
|
useFactory: adapterFactory
|
||||||
|
}),
|
||||||
|
|
||||||
FuseSharedModule,
|
FuseSharedModule,
|
||||||
|
|
||||||
UserRoutingModule
|
UserRoutingModule
|
||||||
],
|
],
|
||||||
declarations: [...COMPONENTS],
|
declarations: [...COMPONENTS, UserRegistComponent, UserFeesComponent, UserAttendanceComponent],
|
||||||
|
|
||||||
})
|
})
|
||||||
export class UserModule { }
|
export class UserModule { }
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user