From d572098e11133717881af81bdcbf43f4b46eebff Mon Sep 17 00:00:00 2001 From: JUNG YI DAM Date: Mon, 4 Jul 2022 12:30:42 +0900 Subject: [PATCH] =?UTF-8?q?=ED=9A=8C=EC=9B=90=20=EB=A6=AC=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/member/user/components/index.ts | 4 + .../user/components/view.component.html | 36 ++++ .../member/user/components/view.component.ts | 190 ++++++++++++++++++ 3 files changed, 230 insertions(+) create mode 100644 src/app/modules/admin/member/user/components/index.ts create mode 100644 src/app/modules/admin/member/user/components/view.component.html create mode 100644 src/app/modules/admin/member/user/components/view.component.ts diff --git a/src/app/modules/admin/member/user/components/index.ts b/src/app/modules/admin/member/user/components/index.ts new file mode 100644 index 0000000..4e9e32b --- /dev/null +++ b/src/app/modules/admin/member/user/components/index.ts @@ -0,0 +1,4 @@ +import { ListComponent } from './list.component'; +import { ViewComponent } from './view.component'; + +export const COMPONENTS = [ListComponent, ViewComponent]; diff --git a/src/app/modules/admin/member/user/components/view.component.html b/src/app/modules/admin/member/user/components/view.component.html new file mode 100644 index 0000000..43b16c7 --- /dev/null +++ b/src/app/modules/admin/member/user/components/view.component.html @@ -0,0 +1,36 @@ +

view compoent

+
+ +
+ + + + +
User View
+ +
+
+ + +
+ +
+ ddddd + + +
+ There are no user! +
+ +
+
+
diff --git a/src/app/modules/admin/member/user/components/view.component.ts b/src/app/modules/admin/member/user/components/view.component.ts new file mode 100644 index 0000000..483958e --- /dev/null +++ b/src/app/modules/admin/member/user/components/view.component.ts @@ -0,0 +1,190 @@ +import { + AfterViewInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + OnDestroy, + OnInit, + ViewChild, + ViewEncapsulation, +} from '@angular/core'; +import { + FormBuilder, + FormControl, + FormGroup, + Validators, +} from '@angular/forms'; +import { MatCheckboxChange } from '@angular/material/checkbox'; +import { MatPaginator } from '@angular/material/paginator'; +import { MatSort } from '@angular/material/sort'; +import { + debounceTime, + map, + merge, + Observable, + Subject, + switchMap, + takeUntil, +} from 'rxjs'; +import { fuseAnimations } from '@fuse/animations'; +import { FuseConfirmationService } from '@fuse/services/confirmation'; + +import { User } from '../models/user'; +import { UserPagination } from '../models/user-pagination'; +import { UserService } from '../services/user.service'; + +@Component({ + selector: 'user-view', + templateUrl: './view.component.html', + styles: [ + /* language=SCSS */ + ` + .inventory-grid { + grid-template-columns: 48px auto 40px; + + @screen sm { + grid-template-columns: 48px auto 112px 72px; + } + + @screen md { + grid-template-columns: 48px 112px auto 112px 72px; + } + + @screen lg { + grid-template-columns: 48px 112px auto 112px 96px 96px 72px; + } + } + `, + ], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + animations: fuseAnimations, +}) +export class ViewComponent implements OnInit, AfterViewInit, OnDestroy { + @ViewChild(MatPaginator) private _paginator!: MatPaginator; + @ViewChild(MatSort) private _sort!: MatSort; + + users$!: Observable; + + isLoading = false; + searchInputControl = new FormControl(); + selectedUser?: User; + pagination?: UserPagination; + + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _fuseConfirmationService: FuseConfirmationService, + private _formBuilder: FormBuilder, + private _userService: UserService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Get the pagination + this._userService.pagination$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((pagination: UserPagination | undefined) => { + // Update the pagination + this.pagination = pagination; + + // Mark for check + this._changeDetectorRef.markForCheck(); + }); + + // Get the products + this.users$ = this._userService.users$; + } + + /** + * After view init + */ + ngAfterViewInit(): void { + if (this._sort && this._paginator) { + // Set the initial sort + this._sort.sort({ + id: 'name', + start: 'asc', + disableClear: true, + }); + + // Mark for check + this._changeDetectorRef.markForCheck(); + + // If the user changes the sort order... + this._sort.sortChange + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + // Reset back to the first page + this._paginator.pageIndex = 0; + }); + + // Get products if sort or page changes + merge(this._sort.sortChange, this._paginator.page) + .pipe( + switchMap(() => { + this.isLoading = true; + return this._userService.getUsers( + this._paginator.pageIndex, + this._paginator.pageSize, + this._sort.active, + this._sort.direction + ); + }), + map(() => { + this.isLoading = false; + }) + ) + .subscribe(); + } + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Create product + */ + __createProduct(): void {} + + /** + * Toggle product details + * + * @param productId + */ + __toggleDetails(productId: string): void {} + + /** + * Track by function for ngFor loops + * + * @param index + * @param item + */ + __trackByFn(index: number, item: any): any { + return item.id || index; + } +}