diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts index d527406..283e846 100644 --- a/src/app/app.routing.ts +++ b/src/app/app.routing.ts @@ -497,6 +497,13 @@ export const appRoutes: Route[] = [ (m: any) => m.ServiceModule ), }, + { + path: 'customer-template', + loadChildren: () => + import( + 'app/modules/admin/board/customer-template/customer-template.module' + ).then((m: any) => m.CustomerTemplateModule), + }, ], }, ], diff --git a/src/app/mock-api/apps/board/customer-template/api.ts b/src/app/mock-api/apps/board/customer-template/api.ts new file mode 100644 index 0000000..86e02da --- /dev/null +++ b/src/app/mock-api/apps/board/customer-template/api.ts @@ -0,0 +1,225 @@ +import { Injectable } from '@angular/core'; +import { assign, cloneDeep } from 'lodash-es'; +import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api'; +import { customerTemplates as customerTemplatesData } from './data'; + +@Injectable({ + providedIn: 'root', +}) +export class BoardCustomerTemplateMockApi { + private _customerTemplates: any[] = customerTemplatesData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ CustomerTemplates - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/board/customer-template/customer-templates', 300) + .reply(({ request }) => { + // Get available queries + const search = request.params.get('search'); + const sort = request.params.get('sort') || 'name'; + const order = request.params.get('order') || 'asc'; + const page = parseInt(request.params.get('page') ?? '1', 10); + const size = parseInt(request.params.get('size') ?? '10', 10); + + // Clone the customerTemplates + let customerTemplates: any[] | null = cloneDeep( + this._customerTemplates + ); + + // Sort the customerTemplates + if (sort === 'sku' || sort === 'name' || sort === 'active') { + customerTemplates.sort((a, b) => { + const fieldA = a[sort].toString().toUpperCase(); + const fieldB = b[sort].toString().toUpperCase(); + return order === 'asc' + ? fieldA.localeCompare(fieldB) + : fieldB.localeCompare(fieldA); + }); + } else { + customerTemplates.sort((a, b) => + order === 'asc' ? a[sort] - b[sort] : b[sort] - a[sort] + ); + } + + // If search exists... + if (search) { + // Filter the customerTemplates + customerTemplates = customerTemplates.filter( + (contact: any) => + contact.name && + contact.name.toLowerCase().includes(search.toLowerCase()) + ); + } + + // Paginate - Start + const customerTemplatesLength = customerTemplates.length; + + // Calculate pagination details + const begin = page * size; + const end = Math.min(size * (page + 1), customerTemplatesLength); + const lastPage = Math.max(Math.ceil(customerTemplatesLength / size), 1); + + // Prepare the pagination object + let pagination = {}; + + // If the requested page number is bigger than + // the last possible page number, return null for + // customerTemplates but also send the last possible page so + // the app can navigate to there + if (page > lastPage) { + customerTemplates = null; + pagination = { + lastPage, + }; + } else { + // Paginate the results by size + customerTemplates = customerTemplates.slice(begin, end); + + // Prepare the pagination mock-api + pagination = { + length: customerTemplatesLength, + size: size, + page: page, + lastPage: lastPage, + startIndex: begin, + endIndex: end - 1, + }; + } + + // Return the response + return [ + 200, + { + customerTemplates, + pagination, + }, + ]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ CustomerTemplate - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/board/customer-template/customer-template') + .reply(({ request }) => { + // Get the id from the params + const id = request.params.get('id'); + + // Clone the customerTemplates + const customerTemplates = cloneDeep(this._customerTemplates); + + // Find the customerTemplate + const customerTemplate = customerTemplates.find( + (item: any) => item.id === id + ); + + // Return the response + return [200, customerTemplate]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ CustomerTemplate - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/apps/board/customer-template/customer-template') + .reply(() => { + // Generate a new customerTemplate + const newCustomerTemplate = { + id: FuseMockApiUtils.guid(), + category: '', + name: 'A New User', + description: '', + tags: [], + sku: '', + barcode: '', + brand: '', + vendor: '', + stock: '', + reserved: '', + cost: '', + basePrice: '', + taxPercent: '', + price: '', + weight: '', + thumbnail: '', + images: [], + active: false, + }; + + // Unshift the new customerTemplate + this._customerTemplates.unshift(newCustomerTemplate); + + // Return the response + return [200, newCustomerTemplate]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ CustomerTemplate - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/apps/board/customer-template/customer-template') + .reply(({ request }) => { + // Get the id and customerTemplate + const id = request.body.id; + const customerTemplate = cloneDeep(request.body.customerTemplate); + + // Prepare the updated customerTemplate + let updatedCustomerTemplate = null; + + // Find the customerTemplate and update it + this._customerTemplates.forEach((item, index, customerTemplates) => { + if (item.id === id) { + // Update the customerTemplate + customerTemplates[index] = assign( + {}, + customerTemplates[index], + customerTemplate + ); + + // Store the updated CustomerTemplate + updatedCustomerTemplate = customerTemplates[index]; + } + }); + + // Return the response + return [200, updatedCustomerTemplate]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ CustomerTemplate - DELETE + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onDelete('api/apps/board/customer-template/customer-template') + .reply(({ request }) => { + // Get the id + const id = request.params.get('id'); + + // Find the customerTemplate and delete it + this._customerTemplates.forEach((item, index) => { + if (item.id === id) { + this._customerTemplates.splice(index, 1); + } + }); + + // Return the response + return [200, true]; + }); + } +} diff --git a/src/app/mock-api/apps/board/customer-template/data.ts b/src/app/mock-api/apps/board/customer-template/data.ts new file mode 100644 index 0000000..32bd342 --- /dev/null +++ b/src/app/mock-api/apps/board/customer-template/data.ts @@ -0,0 +1,33 @@ +/* eslint-disable */ + +export const customerTemplates = [ + { + id: 'on00', + totalPartnerCount: '5', + totalHoldingMoney: 303675, + totalComp: 108933, + total: 412608, + branchCount: 1, + divisionCount: 1, + officeCount: 1, + storeCount: 1, + memberCount: 1, + nickname: 'on00', + accountHolder: '11', + phoneNumber: '010-1111-1111', + calculateType: '롤링', + ownCash: 50000, + ownComp: 1711, + ownCoupon: 50000, + gameMoney: 0, + todayComp: 0, + totalDeposit: 0, + totalWithdraw: 0, + balance: 0, + registDate: '2022-06-12 15:38', + finalSigninDate: '', + ip: '', + state: '정상', + note: '', + }, +]; diff --git a/src/app/mock-api/common/navigation/data.ts b/src/app/mock-api/common/navigation/data.ts index 25b1596..7b32b42 100644 --- a/src/app/mock-api/common/navigation/data.ts +++ b/src/app/mock-api/common/navigation/data.ts @@ -363,6 +363,13 @@ export const defaultNavigation: FuseNavigationItem[] = [ icon: 'heroicons_outline:academic-cap', link: '/board/service', }, + { + id: 'board.customer-template', + title: 'Customer Template', + type: 'basic', + icon: 'heroicons_outline:academic-cap', + link: '/board/customer-template', + }, ], }, { diff --git a/src/app/mock-api/index.ts b/src/app/mock-api/index.ts index 041a816..24871c7 100644 --- a/src/app/mock-api/index.ts +++ b/src/app/mock-api/index.ts @@ -68,6 +68,7 @@ import { BoardNoticeOnelineMockApi } from './apps/board/notice-oneline/api'; import { BoardPopupMockApi } from './apps/board/popup/api'; import { BoardMessageMockApi } from './apps/board/message/api'; import { BoardServiceMockApi } from './apps/board/service/api'; +import { BoardCustomerTemplateMockApi } from './apps/board/customer-template/api'; export const mockApiServices = [ AcademyMockApi, @@ -140,4 +141,5 @@ export const mockApiServices = [ BoardPopupMockApi, BoardMessageMockApi, BoardServiceMockApi, + BoardCustomerTemplateMockApi, ]; diff --git a/src/app/modules/admin/board/customer-template/components/index.ts b/src/app/modules/admin/board/customer-template/components/index.ts new file mode 100644 index 0000000..04759eb --- /dev/null +++ b/src/app/modules/admin/board/customer-template/components/index.ts @@ -0,0 +1,3 @@ +import { ListComponent } from './list.component'; + +export const COMPONENTS = [ListComponent]; diff --git a/src/app/modules/admin/board/customer-template/components/list.component.html b/src/app/modules/admin/board/customer-template/components/list.component.html new file mode 100644 index 0000000..9b79375 --- /dev/null +++ b/src/app/modules/admin/board/customer-template/components/list.component.html @@ -0,0 +1,363 @@ +
+ +
+ +
+ +
+ +
고객센터 템플릿
+ +
+ + + + + + + 40 + 60 + 80 + 100 + + + + + LV.1 + LV.2 + LV.3 + LV.4 + + + + + 정상 + 대기 + 탈퇴 + 휴면 + 블랙 + 정지 + + + + + 카지노제한 + 슬롯제한 + + + + + 계좌입금 + + + + + 카지노콤프 + 슬롯콤프 + 배팅콤프 + 첫충콤프 + + + + + + + + + + + + +
+
+ + +
+ +
+ + +
+ +
+ + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + +
+ There are no customerTemplates! +
+ +
+
+
diff --git a/src/app/modules/admin/board/customer-template/components/list.component.ts b/src/app/modules/admin/board/customer-template/components/list.component.ts new file mode 100644 index 0000000..40d8746 --- /dev/null +++ b/src/app/modules/admin/board/customer-template/components/list.component.ts @@ -0,0 +1,198 @@ +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 '../../../member/user/models/user'; +import { CustomerTemplate } from '../models/ customer-template'; +import { CustomerTemplatePagination } from '../models/customer-template-pagination'; +import { CustomerTemplateService } from '../services/customer-template.service'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'customer-template-list', + templateUrl: './list.component.html', + styles: [ + /* language=SCSS */ + ` + .inventory-grid { + grid-template-columns: 60px auto 40px; + + @screen sm { + grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px; + } + + @screen md { + grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px; + } + + @screen lg { + grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px; + } + } + `, + ], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + animations: fuseAnimations, +}) +export class ListComponent implements OnInit, AfterViewInit, OnDestroy { + @ViewChild(MatPaginator) private _paginator!: MatPaginator; + @ViewChild(MatSort) private _sort!: MatSort; + + customerTemplates$!: Observable; + users$!: Observable; + + isLoading = false; + searchInputControl = new FormControl(); + selectedCustomerTemplate?: CustomerTemplate; + pagination?: CustomerTemplatePagination; + + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _fuseConfirmationService: FuseConfirmationService, + private _formBuilder: FormBuilder, + private _customerTemplateService: CustomerTemplateService, + private router: Router + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Get the pagination + this._customerTemplateService.pagination$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((pagination: CustomerTemplatePagination | undefined) => { + // Update the pagination + this.pagination = pagination; + + // Mark for check + this._changeDetectorRef.markForCheck(); + }); + + // Get the products + this.customerTemplates$ = this._customerTemplateService.customerTemplates$; + } + + /** + * 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 customerTemplate 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._customerTemplateService.getCustomerTemplates( + 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 + // ----------------------------------------------------------------------------------------------------- + + viewUserDetail(id: string): void { + let url: string = 'member/user/' + id; + this.router.navigateByUrl(url); + } + // ----------------------------------------------------------------------------------------------------- + // @ 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; + } +} diff --git a/src/app/modules/admin/board/customer-template/customer-template.module.ts b/src/app/modules/admin/board/customer-template/customer-template.module.ts new file mode 100644 index 0000000..0eb5b57 --- /dev/null +++ b/src/app/modules/admin/board/customer-template/customer-template.module.ts @@ -0,0 +1,50 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { MatButtonModule } from '@angular/material/button'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatProgressBarModule } from '@angular/material/progress-bar'; +import { MatRippleModule } from '@angular/material/core'; +import { MatSortModule } from '@angular/material/sort'; +import { MatSelectModule } from '@angular/material/select'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { MatGridListModule } from '@angular/material/grid-list'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; +import { MatRadioModule } from '@angular/material/radio'; +import { MatCheckboxModule } from '@angular/material/checkbox'; + +import { TranslocoModule } from '@ngneat/transloco'; + +import { SharedModule } from 'app/shared/shared.module'; + +import { COMPONENTS } from './components'; + +import { customerTemplateRoutes } from './customer-template.routing'; + +@NgModule({ + declarations: [COMPONENTS], + imports: [ + TranslocoModule, + SharedModule, + RouterModule.forChild(customerTemplateRoutes), + + MatButtonModule, + MatFormFieldModule, + MatIconModule, + MatInputModule, + MatPaginatorModule, + MatProgressBarModule, + MatRippleModule, + MatSortModule, + MatSelectModule, + MatTooltipModule, + MatGridListModule, + MatSlideToggleModule, + MatRadioModule, + MatCheckboxModule, + ], +}) +export class CustomerTemplateModule {} diff --git a/src/app/modules/admin/board/customer-template/customer-template.routing.ts b/src/app/modules/admin/board/customer-template/customer-template.routing.ts new file mode 100644 index 0000000..8586b95 --- /dev/null +++ b/src/app/modules/admin/board/customer-template/customer-template.routing.ts @@ -0,0 +1,24 @@ +import { Route } from '@angular/router'; + +import { ListComponent } from './components/list.component'; +import { ViewComponent } from '../../member/user/components/view.component'; + +import { CustomerTemplatesResolver } from './resolvers/customer-template.resolver'; +import { UserResolver } from '../../member/user/resolvers/user.resolver'; + +export const customerTemplateRoutes: Route[] = [ + { + path: '', + component: ListComponent, + resolve: { + customerTemplates: CustomerTemplatesResolver, + }, + }, + { + path: ':id', + component: ViewComponent, + resolve: { + users: UserResolver, + }, + }, +]; diff --git a/src/app/modules/admin/board/customer-template/models/ customer-template.ts b/src/app/modules/admin/board/customer-template/models/ customer-template.ts new file mode 100644 index 0000000..18acbad --- /dev/null +++ b/src/app/modules/admin/board/customer-template/models/ customer-template.ts @@ -0,0 +1,29 @@ +export interface CustomerTemplate { + id?: string; + totalPartnerCount?: number; + totalHoldingMoney?: number; + totalComp?: number; + total?: number; + branchCount?: number; + divisionCount?: number; + officeCount?: number; + storeCount?: number; + memberCount?: number; + nickname?: string; + accountHolder?: string; + phoneNumber?: string; + calculateType?: string; + ownCash?: number; + ownComp?: number; + ownCoupon?: number; + gameMoney?: number; + todayComp?: number; + totalDeposit?: number; + totalWithdraw?: number; + balance?: number; + registDate?: string; + finalSigninDate?: string; + ip?: string; + state?: string; + note?: string; +} diff --git a/src/app/modules/admin/board/customer-template/models/customer-template-pagination.ts b/src/app/modules/admin/board/customer-template/models/customer-template-pagination.ts new file mode 100644 index 0000000..c53bebd --- /dev/null +++ b/src/app/modules/admin/board/customer-template/models/customer-template-pagination.ts @@ -0,0 +1,8 @@ +export interface CustomerTemplatePagination { + length: number; + size: number; + page: number; + lastPage: number; + startIndex: number; + endIndex: number; +} diff --git a/src/app/modules/admin/board/customer-template/resolvers/customer-template.resolver.ts b/src/app/modules/admin/board/customer-template/resolvers/customer-template.resolver.ts new file mode 100644 index 0000000..d462dd7 --- /dev/null +++ b/src/app/modules/admin/board/customer-template/resolvers/customer-template.resolver.ts @@ -0,0 +1,89 @@ +import { Injectable } from '@angular/core'; +import { + ActivatedRouteSnapshot, + Resolve, + Router, + RouterStateSnapshot, +} from '@angular/router'; +import { catchError, Observable, throwError } from 'rxjs'; + +import { CustomerTemplate } from '../models/ customer-template'; +import { CustomerTemplatePagination } from '../models/customer-template-pagination'; +import { CustomerTemplateService } from '../services/customer-template.service'; + +@Injectable({ + providedIn: 'root', +}) +export class CustomerTemplateResolver implements Resolve { + /** + * Constructor + */ + constructor( + private _customerTemplateService: CustomerTemplateService, + private _router: Router + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Resolver + * + * @param route + * @param state + */ + resolve( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot + ): Observable { + return this._customerTemplateService + .getCustomerTemplateById(route.paramMap.get('id')) + .pipe( + // Error here means the requested product is not available + catchError((error) => { + // Log the error + console.error(error); + + // Get the parent url + const parentUrl = state.url.split('/').slice(0, -1).join('/'); + + // Navigate to there + this._router.navigateByUrl(parentUrl); + + // Throw an error + return throwError(error); + }) + ); + } +} + +@Injectable({ + providedIn: 'root', +}) +export class CustomerTemplatesResolver implements Resolve { + /** + * Constructor + */ + constructor(private _customerTemplateService: CustomerTemplateService) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Resolver + * + * @param route + * @param state + */ + resolve( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot + ): Observable<{ + pagination: CustomerTemplatePagination; + customerTemplates: CustomerTemplate[]; + }> { + return this._customerTemplateService.getCustomerTemplates(); + } +} diff --git a/src/app/modules/admin/board/customer-template/services/customer-template.service.ts b/src/app/modules/admin/board/customer-template/services/customer-template.service.ts new file mode 100644 index 0000000..41964d3 --- /dev/null +++ b/src/app/modules/admin/board/customer-template/services/customer-template.service.ts @@ -0,0 +1,164 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { + BehaviorSubject, + filter, + map, + Observable, + of, + switchMap, + take, + tap, + throwError, +} from 'rxjs'; + +import { CustomerTemplate } from '../models/ customer-template'; +import { CustomerTemplatePagination } from '../models/customer-template-pagination'; + +@Injectable({ + providedIn: 'root', +}) +export class CustomerTemplateService { + // Private + private __pagination = new BehaviorSubject< + CustomerTemplatePagination | undefined + >(undefined); + private __customerTemplate = new BehaviorSubject< + CustomerTemplate | undefined + >(undefined); + private __customerTemplates = new BehaviorSubject< + CustomerTemplate[] | undefined + >(undefined); + + /** + * Constructor + */ + constructor(private _httpClient: HttpClient) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for pagination + */ + get pagination$(): Observable { + return this.__pagination.asObservable(); + } + + /** + * Getter for customerTemplate + */ + get customerTemplate$(): Observable { + return this.__customerTemplate.asObservable(); + } + + /** + * Getter for customerTemplates + */ + get customerTemplates$(): Observable { + return this.__customerTemplates.asObservable(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Get CustomerTemplates + * + * + * @param page + * @param size + * @param sort + * @param order + * @param search + */ + getCustomerTemplates( + page: number = 0, + size: number = 10, + sort: string = 'name', + order: 'asc' | 'desc' | '' = 'asc', + search: string = '' + ): Observable<{ + pagination: CustomerTemplatePagination; + customerTemplates: CustomerTemplate[]; + }> { + return this._httpClient + .get<{ + pagination: CustomerTemplatePagination; + customerTemplates: CustomerTemplate[]; + }>('api/apps/board/customer-template/customer-templates', { + params: { + page: '' + page, + size: '' + size, + sort, + order, + search, + }, + }) + .pipe( + tap((response) => { + this.__pagination.next(response.pagination); + this.__customerTemplates.next(response.customerTemplates); + }) + ); + } + + /** + * Get product by id + */ + getCustomerTemplateById(id: string | null): Observable { + return this.__customerTemplates.pipe( + take(1), + map((customerTemplates) => { + // Find the product + const customerTemplate = + customerTemplates?.find((item) => item.id === id) || undefined; + + // Update the product + this.__customerTemplate.next(customerTemplate); + + // Return the product + return customerTemplate; + }), + switchMap((product) => { + if (!product) { + return throwError('Could not found product with id of ' + id + '!'); + } + + return of(product); + }) + ); + } + + /** + * Create product + */ + createCustomerTemplate(): Observable { + return this.customerTemplates$.pipe( + take(1), + switchMap((customerTemplates) => + this._httpClient + .post( + 'api/apps/board/customer-template/product', + {} + ) + .pipe( + map((newCustomerTemplate) => { + // Update the customerTemplates with the new product + if (!!customerTemplates) { + this.__customerTemplates.next([ + newCustomerTemplate, + ...customerTemplates, + ]); + } + + // Return the new product + return newCustomerTemplate; + }) + ) + ) + ); + } +} diff --git a/src/app/modules/admin/board/popup copy/components/index.ts b/src/app/modules/admin/board/popup copy/components/index.ts new file mode 100644 index 0000000..04759eb --- /dev/null +++ b/src/app/modules/admin/board/popup copy/components/index.ts @@ -0,0 +1,3 @@ +import { ListComponent } from './list.component'; + +export const COMPONENTS = [ListComponent]; diff --git a/src/app/modules/admin/board/popup copy/components/list.component.html b/src/app/modules/admin/board/popup copy/components/list.component.html new file mode 100644 index 0000000..68c5687 --- /dev/null +++ b/src/app/modules/admin/board/popup copy/components/list.component.html @@ -0,0 +1,353 @@ +
+ +
+ +
+ +
+ +
팝업
+ +
+ + + + + + + 40 + 60 + 80 + 100 + + + + + LV.1 + LV.2 + LV.3 + LV.4 + + + + + 정상 + 대기 + 탈퇴 + 휴면 + 블랙 + 정지 + + + + + 카지노제한 + 슬롯제한 + + + + + 계좌입금 + + + + + 카지노콤프 + 슬롯콤프 + 배팅콤프 + 첫충콤프 + + + + + + + + + + + + +
+
+ + +
+ +
+ + +
+ +
+ + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + +
+ There are no popups! +
+ +
+
+
diff --git a/src/app/modules/admin/board/popup copy/components/list.component.ts b/src/app/modules/admin/board/popup copy/components/list.component.ts new file mode 100644 index 0000000..9effff6 --- /dev/null +++ b/src/app/modules/admin/board/popup copy/components/list.component.ts @@ -0,0 +1,198 @@ +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 '../../../member/user/models/user'; +import { Popup } from '../models/popup'; +import { PopupPagination } from '../models/popup-pagination'; +import { PopupService } from '../services/popup.service'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'popup-list', + templateUrl: './list.component.html', + styles: [ + /* language=SCSS */ + ` + .inventory-grid { + grid-template-columns: 60px auto 40px; + + @screen sm { + grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px; + } + + @screen md { + grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px; + } + + @screen lg { + grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px; + } + } + `, + ], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + animations: fuseAnimations, +}) +export class ListComponent implements OnInit, AfterViewInit, OnDestroy { + @ViewChild(MatPaginator) private _paginator!: MatPaginator; + @ViewChild(MatSort) private _sort!: MatSort; + + popups$!: Observable; + users$!: Observable; + + isLoading = false; + searchInputControl = new FormControl(); + selectedPopup?: Popup; + pagination?: PopupPagination; + + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _fuseConfirmationService: FuseConfirmationService, + private _formBuilder: FormBuilder, + private _popupService: PopupService, + private router: Router + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Get the pagination + this._popupService.pagination$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((pagination: PopupPagination | undefined) => { + // Update the pagination + this.pagination = pagination; + + // Mark for check + this._changeDetectorRef.markForCheck(); + }); + + // Get the products + this.popups$ = this._popupService.popups$; + } + + /** + * 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 popup 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._popupService.getPopups( + 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 + // ----------------------------------------------------------------------------------------------------- + + viewUserDetail(id: string): void { + let url: string = 'member/user/' + id; + this.router.navigateByUrl(url); + } + // ----------------------------------------------------------------------------------------------------- + // @ 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; + } +} diff --git a/src/app/modules/admin/board/popup copy/models/popup-pagination.ts b/src/app/modules/admin/board/popup copy/models/popup-pagination.ts new file mode 100644 index 0000000..64182c5 --- /dev/null +++ b/src/app/modules/admin/board/popup copy/models/popup-pagination.ts @@ -0,0 +1,8 @@ +export interface PopupPagination { + length: number; + size: number; + page: number; + lastPage: number; + startIndex: number; + endIndex: number; +} diff --git a/src/app/modules/admin/board/popup copy/models/popup.ts b/src/app/modules/admin/board/popup copy/models/popup.ts new file mode 100644 index 0000000..533f1bf --- /dev/null +++ b/src/app/modules/admin/board/popup copy/models/popup.ts @@ -0,0 +1,29 @@ +export interface Popup { + id?: string; + totalPartnerCount?: number; + totalHoldingMoney?: number; + totalComp?: number; + total?: number; + branchCount?: number; + divisionCount?: number; + officeCount?: number; + storeCount?: number; + memberCount?: number; + nickname?: string; + accountHolder?: string; + phoneNumber?: string; + calculateType?: string; + ownCash?: number; + ownComp?: number; + ownCoupon?: number; + gameMoney?: number; + todayComp?: number; + totalDeposit?: number; + totalWithdraw?: number; + balance?: number; + registDate?: string; + finalSigninDate?: string; + ip?: string; + state?: string; + note?: string; +} diff --git a/src/app/modules/admin/board/popup copy/popup.module.ts b/src/app/modules/admin/board/popup copy/popup.module.ts new file mode 100644 index 0000000..0691ccc --- /dev/null +++ b/src/app/modules/admin/board/popup copy/popup.module.ts @@ -0,0 +1,50 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { MatButtonModule } from '@angular/material/button'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatProgressBarModule } from '@angular/material/progress-bar'; +import { MatRippleModule } from '@angular/material/core'; +import { MatSortModule } from '@angular/material/sort'; +import { MatSelectModule } from '@angular/material/select'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { MatGridListModule } from '@angular/material/grid-list'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; +import { MatRadioModule } from '@angular/material/radio'; +import { MatCheckboxModule } from '@angular/material/checkbox'; + +import { TranslocoModule } from '@ngneat/transloco'; + +import { SharedModule } from 'app/shared/shared.module'; + +import { COMPONENTS } from './components'; + +import { popupRoutes } from './popup.routing'; + +@NgModule({ + declarations: [COMPONENTS], + imports: [ + TranslocoModule, + SharedModule, + RouterModule.forChild(popupRoutes), + + MatButtonModule, + MatFormFieldModule, + MatIconModule, + MatInputModule, + MatPaginatorModule, + MatProgressBarModule, + MatRippleModule, + MatSortModule, + MatSelectModule, + MatTooltipModule, + MatGridListModule, + MatSlideToggleModule, + MatRadioModule, + MatCheckboxModule, + ], +}) +export class PopupModule {} diff --git a/src/app/modules/admin/board/popup copy/popup.routing.ts b/src/app/modules/admin/board/popup copy/popup.routing.ts new file mode 100644 index 0000000..4a53e31 --- /dev/null +++ b/src/app/modules/admin/board/popup copy/popup.routing.ts @@ -0,0 +1,24 @@ +import { Route } from '@angular/router'; + +import { ListComponent } from './components/list.component'; +import { ViewComponent } from '../../member/user/components/view.component'; + +import { PopupsResolver } from './resolvers/popup.resolver'; +import { UserResolver } from '../../member/user/resolvers/user.resolver'; + +export const popupRoutes: Route[] = [ + { + path: '', + component: ListComponent, + resolve: { + popups: PopupsResolver, + }, + }, + { + path: ':id', + component: ViewComponent, + resolve: { + users: UserResolver, + }, + }, +]; diff --git a/src/app/modules/admin/board/popup copy/resolvers/popup.resolver.ts b/src/app/modules/admin/board/popup copy/resolvers/popup.resolver.ts new file mode 100644 index 0000000..ebd8222 --- /dev/null +++ b/src/app/modules/admin/board/popup copy/resolvers/popup.resolver.ts @@ -0,0 +1,84 @@ +import { Injectable } from '@angular/core'; +import { + ActivatedRouteSnapshot, + Resolve, + Router, + RouterStateSnapshot, +} from '@angular/router'; +import { catchError, Observable, throwError } from 'rxjs'; + +import { Popup } from '../models/popup'; +import { PopupPagination } from '../models/popup-pagination'; +import { PopupService } from '../services/popup.service'; + +@Injectable({ + providedIn: 'root', +}) +export class PopupResolver implements Resolve { + /** + * Constructor + */ + constructor(private _popupService: PopupService, private _router: Router) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Resolver + * + * @param route + * @param state + */ + resolve( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot + ): Observable { + return this._popupService.getPopupById(route.paramMap.get('id')).pipe( + // Error here means the requested product is not available + catchError((error) => { + // Log the error + console.error(error); + + // Get the parent url + const parentUrl = state.url.split('/').slice(0, -1).join('/'); + + // Navigate to there + this._router.navigateByUrl(parentUrl); + + // Throw an error + return throwError(error); + }) + ); + } +} + +@Injectable({ + providedIn: 'root', +}) +export class PopupsResolver implements Resolve { + /** + * Constructor + */ + constructor(private _popupService: PopupService) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Resolver + * + * @param route + * @param state + */ + resolve( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot + ): Observable<{ + pagination: PopupPagination; + popups: Popup[]; + }> { + return this._popupService.getPopups(); + } +} diff --git a/src/app/modules/admin/board/popup copy/services/popup.service.ts b/src/app/modules/admin/board/popup copy/services/popup.service.ts new file mode 100644 index 0000000..b228337 --- /dev/null +++ b/src/app/modules/admin/board/popup copy/services/popup.service.ts @@ -0,0 +1,151 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { + BehaviorSubject, + filter, + map, + Observable, + of, + switchMap, + take, + tap, + throwError, +} from 'rxjs'; + +import { Popup } from '../models/popup'; +import { PopupPagination } from '../models/popup-pagination'; + +@Injectable({ + providedIn: 'root', +}) +export class PopupService { + // Private + private __pagination = new BehaviorSubject( + undefined + ); + private __popup = new BehaviorSubject(undefined); + private __popups = new BehaviorSubject(undefined); + + /** + * Constructor + */ + constructor(private _httpClient: HttpClient) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for pagination + */ + get pagination$(): Observable { + return this.__pagination.asObservable(); + } + + /** + * Getter for popup + */ + get popup$(): Observable { + return this.__popup.asObservable(); + } + + /** + * Getter for popups + */ + get popups$(): Observable { + return this.__popups.asObservable(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Get Popups + * + * + * @param page + * @param size + * @param sort + * @param order + * @param search + */ + getPopups( + page: number = 0, + size: number = 10, + sort: string = 'name', + order: 'asc' | 'desc' | '' = 'asc', + search: string = '' + ): Observable<{ + pagination: PopupPagination; + popups: Popup[]; + }> { + return this._httpClient + .get<{ + pagination: PopupPagination; + popups: Popup[]; + }>('api/apps/board/popup/popups', { + params: { + page: '' + page, + size: '' + size, + sort, + order, + search, + }, + }) + .pipe( + tap((response) => { + this.__pagination.next(response.pagination); + this.__popups.next(response.popups); + }) + ); + } + + /** + * Get product by id + */ + getPopupById(id: string | null): Observable { + return this.__popups.pipe( + take(1), + map((popups) => { + // Find the product + const popup = popups?.find((item) => item.id === id) || undefined; + + // Update the product + this.__popup.next(popup); + + // Return the product + return popup; + }), + switchMap((product) => { + if (!product) { + return throwError('Could not found product with id of ' + id + '!'); + } + + return of(product); + }) + ); + } + + /** + * Create product + */ + createPopup(): Observable { + return this.popups$.pipe( + take(1), + switchMap((popups) => + this._httpClient.post('api/apps/board/popup/product', {}).pipe( + map((newPopup) => { + // Update the popups with the new product + if (!!popups) { + this.__popups.next([newPopup, ...popups]); + } + + // Return the new product + return newPopup; + }) + ) + ) + ); + } +} diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 3ae9aff..f56af24 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -44,5 +44,6 @@ "Notice Oneline": "Notice Oneline", "Popup": "Pop Up", "Message": "Message", - "Service": "Service Center" + "Service": "Service Center", + "Customer Template": "Custoner Template" } diff --git a/src/assets/i18n/ko.json b/src/assets/i18n/ko.json index 1c3901e..b318dc8 100644 --- a/src/assets/i18n/ko.json +++ b/src/assets/i18n/ko.json @@ -50,5 +50,6 @@ "Notice Oneline": "한줄공지", "Popup": "팝업", "Message": "쪽지함", - "Service": "고객센터" + "Service": "고객센터", + "Customer Template": "고객센터템플릿" }