diff --git a/package-lock.json b/package-lock.json index e6fe127..6a710c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 57a77f4..3b71081 100644 --- a/package.json +++ b/package.json @@ -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", @@ -72,4 +73,4 @@ "tslint": "~5.15.0", "typescript": "~3.4.3" } -} \ No newline at end of file +} diff --git a/src/app/navigation/navigation.ts b/src/app/navigation/navigation.ts index 4a77a63..18a2cc9 100644 --- a/src/app/navigation/navigation.ts +++ b/src/app/navigation/navigation.ts @@ -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' } ] }, diff --git a/src/app/pages/users/user/component/index.ts b/src/app/pages/users/user/component/index.ts index e432fcf..1276eaa 100644 --- a/src/app/pages/users/user/component/index.ts +++ b/src/app/pages/users/user/component/index.ts @@ -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 +]; diff --git a/src/app/pages/users/user/component/user-attendance/user-attendance.component.html b/src/app/pages/users/user/component/user-attendance/user-attendance.component.html new file mode 100644 index 0000000..f78f946 --- /dev/null +++ b/src/app/pages/users/user/component/user-attendance/user-attendance.component.html @@ -0,0 +1,97 @@ +
+ + +
+ +
+ +
+ + + + +
+ + + + + + + + + + +
+
+ + + +
+ + + +
+ {{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }} +
+ + +
+ +
+ + + + +
+ + + +
+
+ + + + + + +
+ +
+ +
\ No newline at end of file diff --git a/src/app/pages/users/user/component/user-attendance/user-attendance.component.scss b/src/app/pages/users/user/component/user-attendance/user-attendance.component.scss new file mode 100644 index 0000000..2864918 --- /dev/null +++ b/src/app/pages/users/user/component/user-attendance/user-attendance.component.scss @@ -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; + } +} diff --git a/src/app/pages/users/user/component/user-attendance/user-attendance.component.spec.ts b/src/app/pages/users/user/component/user-attendance/user-attendance.component.spec.ts new file mode 100644 index 0000000..26b1cec --- /dev/null +++ b/src/app/pages/users/user/component/user-attendance/user-attendance.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ UserAttendanceComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(UserAttendanceComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/users/user/component/user-attendance/user-attendance.component.ts b/src/app/pages/users/user/component/user-attendance/user-attendance.component.ts new file mode 100644 index 0000000..e720791 --- /dev/null +++ b/src/app/pages/users/user/component/user-attendance/user-attendance.component.ts @@ -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; + dialogRef: any; + events: CalendarEvent[]; + refresh: Subject = 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: 'edit', + onClick: ({ event }: { event: CalendarEvent }): void => { + } + }, + { + label: 'delete', + 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); + }); + } +} diff --git a/src/app/pages/users/user/component/user-connect/user-connect.component.html b/src/app/pages/users/user/component/user-connect/user-connect.component.html index 081164d..bdc097f 100644 --- a/src/app/pages/users/user/component/user-connect/user-connect.component.html +++ b/src/app/pages/users/user/component/user-connect/user-connect.component.html @@ -1 +1,125 @@ -

user-connect worksddddddddddd!

\ No newline at end of file +
+ +
+ + + +
+ +
+ + + + + +
+
+ search + +
+
+ +
+ + + +
+ + + + 아이디 + +

{{ order.id }}

+ + + + + + 연락처 + +

{{ order.reference }}

+ + + + + + 현재위치 + +

+ {{ order.customer.firstName }} + {{ order.customer.lastName }} +

+ + + + + + 등록아이피 + +

+ {{ order.total | currency: 'USD':'symbol' }} +

+ + + + + + 등록시간 + +

+ {{ order.payment.method }} +

+ + + + + + 보유머니 + +

+ {{ order.status[0].name }} +

+ + + + + + 포인트 + +

+ {{ order.status[0].name }} +

+ + + + + + 강퇴 + +

+ {{ order.status[0].name }} +

+ + + + + + + + + + + +
+ +
+ +
+쪽지보내기 들어갈 자리 \ No newline at end of file diff --git a/src/app/pages/users/user/component/user-connect/user-connect.component.ts b/src/app/pages/users/user/component/user-connect/user-connect.component.ts index efaa6aa..6fb29d7 100644 --- a/src/app/pages/users/user/component/user-connect/user-connect.component.ts +++ b/src/app/pages/users/user/component/user-connect/user-connect.component.ts @@ -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; /** @@ -27,7 +51,6 @@ export class UserConnectComponent implements OnInit, OnDestroy { constructor( ) { - // Set the private defaults this._unsubscribeAll = new Subject(); } diff --git a/src/app/pages/users/user/component/user-fees/user-fees.component.html b/src/app/pages/users/user/component/user-fees/user-fees.component.html new file mode 100644 index 0000000..3ce041b --- /dev/null +++ b/src/app/pages/users/user/component/user-fees/user-fees.component.html @@ -0,0 +1,124 @@ +
+ +
+ + + +
+ +
+ + + + + +
+
+ search + +
+
+ +
+ + + +
+ + + + 아이디 + +

{{ order.id }}

+ + + + + + 충/환 커미션 + +

{{ order.reference }}

+ + + + + + (스)배팅 커미션 + +

+ {{ order.customer.firstName }} + {{ order.customer.lastName }} +

+ + + + + + (미)배팅 커미션 + +

+ {{ order.total | currency: 'USD':'symbol' }} +

+ + + + + + (로)배팅 커미션 + +

+ {{ order.payment.method }} +

+ + + + + + 낙첨금(스)커미션 + +

+ {{ order.status[0].name }} +

+ + + + + + 낙첨금(미)커미션 + +

+ {{ order.status[0].name }} +

+ + + + + + 정산방식&적용 + +

+ {{ order.status[0].name }} +

+ + + + + + + + + + + +
+ +
+ +
\ No newline at end of file diff --git a/src/app/pages/users/user/component/user-fees/user-fees.component.scss b/src/app/pages/users/user/component/user-fees/user-fees.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/users/user/component/user-fees/user-fees.component.spec.ts b/src/app/pages/users/user/component/user-fees/user-fees.component.spec.ts new file mode 100644 index 0000000..eeaab8c --- /dev/null +++ b/src/app/pages/users/user/component/user-fees/user-fees.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ UserFeesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(UserFeesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/users/user/component/user-fees/user-fees.component.ts b/src/app/pages/users/user/component/user-fees/user-fees.component.ts new file mode 100644 index 0000000..f8ec354 --- /dev/null +++ b/src/app/pages/users/user/component/user-fees/user-fees.component.ts @@ -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; + + /** + * Constructor + */ + constructor( + + ) { + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + ngOnInit() { + } + + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } +} diff --git a/src/app/pages/users/user/component/user-regist/user-regist.component.html b/src/app/pages/users/user/component/user-regist/user-regist.component.html new file mode 100644 index 0000000..962fbf0 --- /dev/null +++ b/src/app/pages/users/user/component/user-regist/user-regist.component.html @@ -0,0 +1,178 @@ +
+ + +
+
+
+ home + chevron_right + User Interface +
+
Forms
+
+
+ + + +
+ +
+ Reactive Forms +
+ +

+ 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. +

+
+ Horizontal Stepper +
+
+ + + + +
+ + + + + + +
+ + Fill out your name + +
+ + + First Name + + First Name is required! + + + + Last Name + + Last Name is required! + + +
+ +
+ +
+ +
+ + + + + +
+ + Fill out your address + +
+ + + Address + + Address is required! + + +
+ +
+ + +
+ +
+ + + + + +
+ + Fill out your address + +
+ + + City + + City is required! + + + + State + + State is required! + + + + Postal Code + + {{postalCode2.value.length}} / 5 + Postal Code is required! + + +
+ +
+ + +
+ +
+ + + + + + Done + +
+ Thank your for filling out our form. +
+ +
+ + +
+ + + + + + +
+ +
+ +
+
diff --git a/src/app/pages/users/user/component/user-regist/user-regist.component.scss b/src/app/pages/users/user/component/user-regist/user-regist.component.scss new file mode 100644 index 0000000..f0c8f94 --- /dev/null +++ b/src/app/pages/users/user/component/user-regist/user-regist.component.scss @@ -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; + } + } +} diff --git a/src/app/pages/users/user/component/user-regist/user-regist.component.spec.ts b/src/app/pages/users/user/component/user-regist/user-regist.component.spec.ts new file mode 100644 index 0000000..7fd5399 --- /dev/null +++ b/src/app/pages/users/user/component/user-regist/user-regist.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ UserRegistComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(UserRegistComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/users/user/component/user-regist/user-regist.component.ts b/src/app/pages/users/user/component/user-regist/user-regist.component.ts new file mode 100644 index 0000000..fb90397 --- /dev/null +++ b/src/app/pages/users/user/component/user-regist/user-regist.component.ts @@ -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; + + /* + * + * 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!'); + } +} diff --git a/src/app/pages/users/user/user-routing.module.ts b/src/app/pages/users/user/user-routing.module.ts index 6b5b75b..4392c73 100644 --- a/src/app/pages/users/user/user-routing.module.ts +++ b/src/app/pages/users/user/user-routing.module.ts @@ -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 } ]; diff --git a/src/app/pages/users/user/user.module.ts b/src/app/pages/users/user/user.module.ts index 13ef5f4..eae7b82 100644 --- a/src/app/pages/users/user/user.module.ts +++ b/src/app/pages/users/user/user.module.ts @@ -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 { }