팝업 상세 page, 팝업 수정 page 추가

src/app/modules/admin/board/popup/components/edit.component.html

@@ -0,0 +1,2 @@
+<!-- Title -->
+<div class="text-4xl font-extrabold tracking-tight">팝업 수정</div>

src/app/modules/admin/board/popup/components/edit.component.ts

@@ -0,0 +1,183 @@
+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 'app/modules/admin/member/user/models/user';
+import { UserService } from 'app/modules/admin/member/user/services/user.service';
+
+@Component({
+  selector: 'popup-edit',
+  templateUrl: './edit.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;
+
+  isLoading = false;
+  searchInputControl = new FormControl();
+  selectedProductForm!: FormGroup;
+  selectedUser?: User;
+
+  private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+  /**
+   * Constructor
+   */
+  constructor(
+    private _changeDetectorRef: ChangeDetectorRef,
+    private _fuseConfirmationService: FuseConfirmationService,
+    private _formBuilder: FormBuilder,
+    private _userService: UserService
+  ) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Lifecycle hooks
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * On init
+   */
+  ngOnInit(): void {
+    this.selectedProductForm = this._formBuilder.group({
+      id: [''],
+      signinId: [{ value: '', disabled: true }],
+      signinPw: [{ value: '' }],
+      exchangePw: [''],
+      description: [''],
+      tags: [[]],
+      nickname: [{ value: '', disabled: true }],
+      ownCash: [''],
+      phoneNumber: [''],
+      level: [''],
+      status: [''],
+      isExcahngeMoney: [''],
+      bankname: [''],
+      accountNumber: [''],
+      accountHolder: [''],
+      comp: [''],
+      coupon: [''],
+      recommender: [{ value: '', disabled: true }],
+      changeSite: [''],
+      recommendCount: [''],
+      hodingGameMoney: [{ value: '0', disabled: true }],
+      memo: [''],
+      bacaraRate: [],
+      rulletRate: [],
+      dragonRate: [],
+      etcRate: [],
+      slotRate: [],
+      casinoRusingRate: [],
+      slotRusingRate: [],
+    });
+
+    // Get the User
+    this._userService.user$
+      .pipe(takeUntil(this._unsubscribeAll))
+      .subscribe((user: User | undefined) => {
+        if (!user) {
+          return;
+        }
+        this.selectedUser = user;
+
+        this.selectedProductForm.patchValue(user);
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+      });
+
+    /* this.user$ = this._userService.user$; */
+  }
+
+  /**
+   * After view init
+   */
+  ngAfterViewInit(): void {}
+
+  /**
+   * 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;
+  }
+}

src/app/modules/admin/board/popup/components/registration.component.html

@@ -1,4 +1,2 @@
 <!-- Title -->
-<div class="text-4xl font-extrabold tracking-tight">
+<div class="text-4xl font-extrabold tracking-tight">팝업-등록 page</div>
-  고객센터-중복로그인버튼클릭 page
-</div>

src/app/modules/admin/board/popup/components/view.component.html

@@ -0,0 +1,2 @@
+<!-- Title -->
+<div class="text-4xl font-extrabold tracking-tight">팝업-상세page</div>

src/app/modules/admin/board/popup/components/view.component.ts

@@ -0,0 +1,183 @@
+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 'app/modules/admin/member/user/models/user';
+import { UserService } from 'app/modules/admin/member/user/services/user.service';
+
+@Component({
+  selector: 'popup-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;
+
+  isLoading = false;
+  searchInputControl = new FormControl();
+  selectedProductForm!: FormGroup;
+  selectedUser?: User;
+
+  private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+  /**
+   * Constructor
+   */
+  constructor(
+    private _changeDetectorRef: ChangeDetectorRef,
+    private _fuseConfirmationService: FuseConfirmationService,
+    private _formBuilder: FormBuilder,
+    private _userService: UserService
+  ) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Lifecycle hooks
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * On init
+   */
+  ngOnInit(): void {
+    this.selectedProductForm = this._formBuilder.group({
+      id: [''],
+      signinId: [{ value: '', disabled: true }],
+      signinPw: [{ value: '' }],
+      exchangePw: [''],
+      description: [''],
+      tags: [[]],
+      nickname: [{ value: '', disabled: true }],
+      ownCash: [''],
+      phoneNumber: [''],
+      level: [''],
+      status: [''],
+      isExcahngeMoney: [''],
+      bankname: [''],
+      accountNumber: [''],
+      accountHolder: [''],
+      comp: [''],
+      coupon: [''],
+      recommender: [{ value: '', disabled: true }],
+      changeSite: [''],
+      recommendCount: [''],
+      hodingGameMoney: [{ value: '0', disabled: true }],
+      memo: [''],
+      bacaraRate: [],
+      rulletRate: [],
+      dragonRate: [],
+      etcRate: [],
+      slotRate: [],
+      casinoRusingRate: [],
+      slotRusingRate: [],
+    });
+
+    // Get the User
+    this._userService.user$
+      .pipe(takeUntil(this._unsubscribeAll))
+      .subscribe((user: User | undefined) => {
+        if (!user) {
+          return;
+        }
+        this.selectedUser = user;
+
+        this.selectedProductForm.patchValue(user);
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+      });
+
+    /* this.user$ = this._userService.user$; */
+  }
+
+  /**
+   * After view init
+   */
+  ngAfterViewInit(): void {}
+
+  /**
+   * 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;
+  }
+}