룰렛쿠폰 페이지 디자인

2019-09-20 21:48:48 +09:00 · 2019-09-20 21:48:48 +09:00 · afefbcf699
commit afefbcf699
parent 658d5eb3d6
10 changed files with 626 additions and 21 deletions
--- a/src/app/pages/specials/special/component/fix-bonus.component.html
+++ b/src/app/pages/specials/special/component/fix-bonus.component.html
@ -12,7 +12,7 @@
        <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
        <span class="secondary-text">User Interface</span>
      </div>
-      <div class="h1 mt-16">계좌분리 관리</div>
+      <div class="h1 mt-16">고정 보너스 관리</div>
    </div>
  </div>
  <!-- / HEADER -->
--- a/src/app/pages/specials/special/component/fix-bonus.component.ts
+++ b/src/app/pages/specials/special/component/fix-bonus.component.ts
@ -7,19 +7,9 @@ import {
  ViewChild,
  ElementRef
 } from '@angular/core';
-import {
-  FormControl,
-  FormsModule,
-  ReactiveFormsModule,
-  FormGroup,
-  FormBuilder,
-  Validators,
-  NgControl,
-  NgForm,
-  FormArray
-} from '@angular/forms';
+import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
 import { fuseAnimations } from 'src/@fuse/animations';
-import { Observable, of, fromEvent, Subject, BehaviorSubject } from 'rxjs';
+import { Subject } from 'rxjs';
 import { FixBonusDataSource } from './fix-bonus.data-source';
 import { FixBonusService } from 'src/modules/special/fix-bonus/service/fix-bonus.service';

--- a/src/app/pages/specials/special/component/roulette-coupon.component.html
+++ b/src/app/pages/specials/special/component/roulette-coupon.component.html
@ -1 +1,158 @@
-<p>roulette-coupon works!</p>
+<div id="fix-bonus" class="page-layout simple fullwidth" fxLayout="column">
+  <!-- <div id="orders" class="page-layout carded fullwidth inner-scroll"> -->
+  <!-- HEADER -->
+  <div
+    class="header accent p-24 h-160"
+    fxLayout="row"
+    fxLayoutAlign="start center"
+  >
+    <div fxLayout="column" fxLayoutAlign="center start">
+      <div fxLayout="row" fxLayoutAlign="start center">
+        <mat-icon class="secondary-text s-18">home</mat-icon>
+        <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
+        <span class="secondary-text">User Interface</span>
+      </div>
+      <div class="h1 mt-16">룰렛쿠폰관리</div>
+    </div>
+  </div>
+  <!-- / HEADER -->
+
+  <!-- CONTENT -->
+  <div class="content p-24">
+    <div class="h1">
+      고정보너스
+    </div>
+
+    <div
+      class="mb-24"
+      fxLayout="column"
+      fxLayoutAlign="start"
+      fxLayout.gt-md="row"
+    >
+      <div
+        class="mat-elevation-z8 p-24 mr-24"
+        fxFlex="3 0 auto"
+        fxLayout="column"
+      >
+        <form
+          name="fixBonusForm"
+          [formGroup]="mtformgroup"
+          (ngSubmit)="fixBonusUpdate()"
+          novalidate
+        >
+          <mat-table
+            class="fix-bonus-table"
+            #table
+            [dataSource]="dataSource"
+            [@animateStagger]="{ value: '50' }"
+            matSort
+            formArrayName="formarray"
+          >
+            <!-- Game Type Column [formGroupName] -->
+            <ng-container matColumnDef="gameType">
+              <mat-header-cell *matHeaderCellDef>타입</mat-header-cell>
+              <mat-cell
+                *matCellDef="let fixBonus; let i = index"
+                [formGroupName]="i"
+                >{{ fixBonus.gameType }}</mat-cell
+              >
+            </ng-container>
+
+            <!-- Game Description Column -->
+            <ng-container matColumnDef="gameDescription">
+              <mat-header-cell *matHeaderCellDef>설명</mat-header-cell>
+              <mat-cell
+                *matCellDef="let fixBonus; let i = index"
+                [formGroupName]="i"
+              >
+                {{ fixBonus.gameDescription }}
+              </mat-cell>
+            </ng-container>
+
+            <!-- User Description Column -->
+            <ng-container matColumnDef="userDescription">
+              <mat-header-cell *matHeaderCellDef>설명</mat-header-cell>
+              <mat-cell
+                *matCellDef="let fixBonus; let i = index"
+                [formGroupName]="i"
+              >
+                <mat-form-field appearance="outline">
+                  <input
+                    name="inputUserDescription={{ fixBonus.userDescription }}"
+                    matInput
+                    type="text"
+                    formControlName="userDescription"
+                  />
+                </mat-form-field>
+              </mat-cell>
+            </ng-container>
+
+            <!-- Odds Column -->
+            <ng-container matColumnDef="odds">
+              <mat-header-cell *matHeaderCellDef>배당설정</mat-header-cell>
+              <mat-cell
+                *matCellDef="let fixBonus; let i = index"
+                [formGroupName]="i"
+              >
+                <mat-form-field appearance="outline">
+                  <input
+                    name="inputHolder={{ fixBonus.odds }}"
+                    matInput
+                    type="text"
+                    formControlName="odds"
+                  />
+                </mat-form-field>
+              </mat-cell>
+            </ng-container>
+
+            <!-- Folder Column -->
+            <ng-container matColumnDef="folder">
+              <mat-header-cell *matHeaderCellDef>폴더설정</mat-header-cell>
+              <mat-cell
+                *matCellDef="let fixBonus; let i = index"
+                [formGroupName]="i"
+              >
+                <mat-form-field appearance="outline">
+                  <input
+                    name="inputFolder={{ fixBonus.folder }}"
+                    matInput
+                    type="text"
+                    formControlName="folder"
+                  />
+                </mat-form-field>
+              </mat-cell>
+            </ng-container>
+
+            <!-- Allow Column -->
+            <ng-container matColumnDef="allow">
+              <mat-header-cell *matHeaderCellDef>허용불가</mat-header-cell>
+              <mat-cell
+                *matCellDef="let fixBonus; let i = index"
+                [formGroupName]="i"
+              >
+                <mat-form-field appearance="outline">
+                  <input
+                    name="inputFolder={{ fixBonus.allow }}"
+                    matInput
+                    type="text"
+                    formControlName="allow"
+                  />
+                </mat-form-field>
+              </mat-cell>
+            </ng-container>
+
+            <mat-header-row
+              *matHeaderRowDef="displayedColumns"
+            ></mat-header-row>
+            <mat-row
+              *matRowDef="let row; columns: displayedColumns"
+              class="fix-bonus"
+              matRipple
+            ></mat-row>
+          </mat-table>
+        </form>
+      </div>
+    </div>
+  </div>
+  <!-- / CONTENT -->
+</div>
--- a/src/app/pages/specials/special/component/roulette-coupon.component.scss
+++ b/src/app/pages/specials/special/component/roulette-coupon.component.scss
@ -0,0 +1,140 @@
+@import 'src/@fuse/scss/fuse';
+
+app-fix-bonus {
+  #fix-bonus {
+    .top-bg {
+      @include media-breakpoint('xs') {
+        height: 224px;
+      }
+    }
+    > .center {
+      > .header {
+        .search-wrapper {
+          width: 100%;
+          max-width: 480px;
+          border-radius: 28px;
+          overflow: hidden;
+          @include mat-elevation(1);
+
+          @include media-breakpoint('xs') {
+            width: 100%;
+          }
+
+          .search {
+            width: 100%;
+            height: 48px;
+            line-height: 48px;
+            padding: 0 18px;
+
+            input {
+              width: 100%;
+              height: 48px;
+              min-height: 48px;
+              max-height: 48px;
+              padding: 0 16px;
+              border: none;
+              outline: none;
+            }
+          }
+        }
+
+        @include media-breakpoint('xs') {
+          padding: 8px 0;
+          height: 160px !important;
+          min-height: 160px !important;
+          max-height: 160px !important;
+        }
+      }
+    }
+  }
+
+  .fix-bonus-table {
+    color: black;
+    flex: 1 1 auto;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.301);
+    overflow: auto;
+    // -webkit-overflow-scrolling: touch;
+
+    .fix-bonus {
+      position: relative;
+      cursor: pointer;
+      // height: 84px;
+    }
+    .mat-cell {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    //First column and header
+    // .mat-header-cell:first-child,
+    // .mat-cell:first-child {
+    //   flex: 10%;
+    // }
+    // //Second column and header
+    // .mat-header-cell:nth-child(2),
+    // .mat-cell:nth-child(2) {
+    //   flex: 30%;
+    // }
+    // .mat-header-cell:nth-child(3),
+    // .mat-cell:nth-child(2) {
+    //   flex: 20%;
+    // }
+    // .mat-header-cell:nth-child(4),
+    // .mat-cell:nth-child(2) {
+    //   flex: 15%;
+    // }
+    // //Last column and header
+    // .mat-header-cell:last-child,
+    // .mat-cell:last-child {
+    //   flex: 15%;
+    // }
+
+    .mat-column-icon {
+      max-width: 11%;
+      // justify-content: start;
+    }
+    .mat-column-korName {
+      max-width: 22%;
+    }
+    .mat-column-addMethod {
+      max-width: 22%;
+    }
+    .mat-column-sportsEntities {
+      max-width: 22%;
+    }
+    .mat-column-test {
+      max-width: 22%;
+      // justify-content: flex-end;
+    }
+    .mat-column-image {
+      flex: 1 0 84px;
+
+      .product-image {
+        width: 52px;
+        height: 52px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+      }
+    }
+    .mat-column-buttons {
+      flex: 0 0 80px;
+    }
+    .quantity-indicator {
+      display: inline-block;
+      vertical-align: middle;
+      width: 8px;
+      height: 8px;
+      border-radius: 4px;
+      margin-right: 8px;
+
+      & + span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+
+    .active-icon {
+      border-radius: 50%;
+    }
+  }
+}
--- a/src/app/pages/specials/special/component/roulette-coupon.component.ts
+++ b/src/app/pages/specials/special/component/roulette-coupon.component.ts
@ -1,12 +1,75 @@
-import { Component, OnInit } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ViewEncapsulation,
+  AfterViewInit,
+  ViewChild,
+  ElementRef
+} from '@angular/core';
+
+import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
+import { fuseAnimations } from 'src/@fuse/animations';
+import { Subject } from 'rxjs';
+import { RouletteCouponDataSource } from './roulette-coupon.data-source';
+import { RouletteCouponService } from 'src/modules/special/roulette-coupon/service/roulette-coupon.service';

@Component({
  selector: 'app-roulette-coupon',
  templateUrl: './roulette-coupon.component.html',
-  styleUrls: ['./roulette-coupon.component.scss']
+  styleUrls: ['./roulette-coupon.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  animations: fuseAnimations
 })
-export class RouletteCouponComponent implements OnInit {
-  constructor() {}
+export class RouletteCouponComponent
+  implements OnInit, OnDestroy, AfterViewInit {
+  displayedColumns = [
+    'gameType',
+    'gameDescription',
+    'userDescription',
+    'odds',
+    'folder',
+    'allow'
+  ];
+  constructor(
+    private fb: FormBuilder,
+    private rouletteCouponService: RouletteCouponService
+  ) {
+    this._unsubscribeAll = new Subject();
+  }

-  ngOnInit() {}
+  dataSource: RouletteCouponDataSource = new RouletteCouponDataSource(
+    this.rouletteCouponService
+  );
+
+  public inputChange$: Subject<string> = new Subject<string>();
+  // public ClickedRow: cObject; currentRow: cObject;
+
+  public mtformgroup: FormGroup;
+  public mtformarray: FormArray;
+
+  @ViewChild('filter', { static: true })
+  filter: ElementRef;
+
+  // Private
+  private _unsubscribeAll: Subject<any>;
+
+  ngOnInit() {
+    this.mtformarray = this.fb.array([]);
+    this.mtformgroup = this.fb.group({ formarray: this.mtformarray });
+    this.dataSource.formg = this.mtformgroup;
+  }
+
+  /**
+   * On destroy
+   */
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions
+    this._unsubscribeAll.next();
+    this._unsubscribeAll.complete();
+  }
+
+  ngAfterViewInit(): void {}
+
+  fixBonusfoUpdate(): void {}
 }
--- a/src/app/pages/specials/special/component/roulette-coupon.data-source.ts
+++ b/src/app/pages/specials/special/component/roulette-coupon.data-source.ts
@ -0,0 +1,216 @@
+import { DataSource } from '@angular/cdk/table';
+
+import { BehaviorSubject, Observable, merge, of } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { CollectionViewer } from '@angular/cdk/collections';
+
+import { RouletteCoupon } from 'src/modules/special/roulette-coupon/model/roulette-coupon.model';
+import { RouletteCouponService } from 'src/modules/special/roulette-coupon/service/roulette-coupon.service';
+
+import { FormControl, FormGroup, Validators, FormArray } from '@angular/forms';
+
+const ELEMENT_DATA: RouletteCoupon[] = [
+  {
+    gameType: 'gameType1',
+    gameDescription: '크로스',
+    userDescription:
+      '[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
+    odds: '1.03',
+    folder: 3,
+    allow: false,
+    createdAt: null,
+    updatedAt: null
+  },
+  {
+    gameType: 'gameType2',
+    gameDescription: '크로스',
+    userDescription:
+      '[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
+    odds: '1.03',
+    folder: 3,
+    allow: false,
+    createdAt: null,
+    updatedAt: null
+  },
+  {
+    gameType: 'gameType3',
+    gameDescription: '크로스',
+    userDescription:
+      '[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
+    odds: '1.03',
+    folder: 3,
+    allow: false,
+    createdAt: null,
+    updatedAt: null
+  },
+  {
+    gameType: 'gameType4',
+    gameDescription: '가상축구',
+    userDescription:
+      '[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
+    odds: '1.03',
+    folder: 3,
+    allow: false,
+    createdAt: null,
+    updatedAt: null
+  },
+  {
+    gameType: 'gameType5',
+    gameDescription: '가상축구',
+    userDescription:
+      '[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
+    odds: '1.03',
+    folder: 3,
+    allow: false,
+    createdAt: null,
+    updatedAt: null
+  },
+  {
+    gameType: 'gameType6',
+    gameDescription: '가상축구',
+    userDescription:
+      '[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
+    odds: '1.03',
+    folder: 3,
+    allow: false,
+    createdAt: null,
+    updatedAt: null
+  },
+  {
+    gameType: 'gameType7',
+    gameDescription: '스페셜',
+    userDescription:
+      '[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
+    odds: '1.03',
+    folder: 3,
+    allow: false,
+    createdAt: null,
+    updatedAt: null
+  },
+  {
+    gameType: 'gameType8',
+    gameDescription: '스페셜',
+    userDescription:
+      '[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
+    odds: '1.03',
+    folder: 3,
+    allow: false,
+    createdAt: null,
+    updatedAt: null
+  },
+  {
+    gameType: 'gameType9',
+    gameDescription: '스페셜',
+    userDescription:
+      '[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
+    odds: '1.03',
+    folder: 3,
+    allow: false,
+    createdAt: null,
+    updatedAt: null
+  },
+  {
+    gameType: 'gameType10',
+    gameDescription: '실시간',
+    userDescription:
+      '[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
+    odds: '1.03',
+    folder: 3,
+    allow: false,
+    createdAt: null,
+    updatedAt: null
+  },
+  {
+    gameType: 'gameType11',
+    gameDescription: '실시간',
+    userDescription:
+      '[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
+    odds: '1.03',
+    folder: 3,
+    allow: false,
+    createdAt: null,
+    updatedAt: null
+  },
+  {
+    gameType: 'gameType12',
+    gameDescription: '실시간',
+    userDescription:
+      '[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
+    odds: '1.03',
+    folder: 3,
+    allow: false,
+    createdAt: null,
+    updatedAt: null
+  },
+  {
+    gameType: 'gameType13',
+    gameDescription: '개경주',
+    userDescription:
+      '[ 3폴더 ] 이상 조합가능 보너스 ㅡㅡㅡ 1.2배당 이상경기만 인정',
+    odds: '1.03',
+    folder: 3,
+    allow: false,
+    createdAt: null,
+    updatedAt: null
+  }
+];
+
+export class RouletteCouponDataSource extends DataSource<RouletteCoupon> {
+  private _objectStore: RouletteCoupon[] = [];
+  private _ObjectsSubject$ = new BehaviorSubject<RouletteCoupon[]>([]);
+  private _loadingSubject$ = new BehaviorSubject<boolean>(false);
+
+  public loading$ = this._loadingSubject$.asObservable();
+  public formg: FormGroup;
+
+  constructor(private RouletteCouponService: RouletteCouponService) {
+    super();
+  }
+
+  connect(collectionViewer: CollectionViewer): Observable<RouletteCoupon[]> {
+    // return this.RouletteCouponService.getAll().pipe(
+    //   map(res => {
+    //     res.forEach(m => this._objectStore.push(m as RouletteCoupon));
+    //     this._ObjectsSubject$.next(this._objectStore);
+    //     let fa = <FormArray>this.formg.get('formarray');
+    //     res.forEach(r => fa.push(this.createRowFormGroup(r)));
+    //     return res;
+    //   })
+    // );
+    return of(ELEMENT_DATA).pipe(
+      map(res => {
+        res.forEach(m => this._objectStore.push(m as RouletteCoupon));
+        this._ObjectsSubject$.next(this._objectStore);
+        let fa = <FormArray>this.formg.get('formarray');
+        res.forEach(r => fa.push(this.createRowFormGroup(r)));
+        return res;
+      })
+    );
+  }
+
+  createRowFormGroup(r: RouletteCoupon): FormGroup {
+    let f = new FormGroup({
+      gameType: this.createNewFormContorl(r, 'gameType'),
+      gameDescription: this.createNewFormContorl(r, 'gameDescription'),
+      userDescription: this.createNewFormContorl(r, 'userDescription'),
+      odds: this.createNewFormContorl(r, 'odds'),
+      folder: this.createNewFormContorl(r, 'folder'),
+      allow: this.createNewFormContorl(r, 'allow')
+    });
+    return f;
+  }
+
+  createNewFormContorl(r: RouletteCoupon, propName: string): FormControl {
+    let m = new FormControl(r[propName], Validators.required);
+    m.valueChanges.subscribe(val => {
+      r[propName] = val;
+    });
+    return m;
+  }
+
+  disconnect(collectionViewer: CollectionViewer): void {
+    this._ObjectsSubject$.complete();
+    this._loadingSubject$.complete();
+  }
+}
--- a/src/modules/special/roulette-coupon/model/roulette-coupon.model.ts
+++ b/src/modules/special/roulette-coupon/model/roulette-coupon.model.ts
@ -0,0 +1,11 @@
+import { DateAudit } from 'src/modules/common/data/model/audit';
+
+export interface RouletteCoupon extends DateAudit {
+  id?: number;
+  gameType?: string;
+  gameDescription?: string;
+  userDescription?: string;
+  odds?: string;
+  folder?: number;
+  allow?: boolean;
+}
--- a/src/modules/special/roulette-coupon/service/index.ts
+++ b/src/modules/special/roulette-coupon/service/index.ts
@ -0,0 +1,3 @@
+import { RouletteCouponService } from './roulette-coupon.service';
+
+export const ROULETTE_COUPON_SERVICES = [RouletteCouponService];
--- a/src/modules/special/roulette-coupon/service/roulette-coupon.service.ts
+++ b/src/modules/special/roulette-coupon/service/roulette-coupon.service.ts
@ -0,0 +1,25 @@
+import { Injectable, Inject } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
+import { RouletteCoupon } from '../model/roulette-coupon.model';
+import { API_BASE_URL } from 'src/modules/common/type/injection-token.type';
+import { FormArray } from '@angular/forms';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RouletteCouponService {
+  constructor(
+    @Inject(API_BASE_URL) private apiBaseUrl: string,
+    private httpClient: HttpClient
+  ) {}
+
+  public getAll(): Observable<RouletteCoupon[]> {
+    return this.httpClient.get<RouletteCoupon[]>(
+      `${this.apiBaseUrl}/roulette_coupon`,
+      {}
+    );
+  }
+}
--- a/src/modules/special/special.module.ts
+++ b/src/modules/special/special.module.ts
@ -1,7 +1,7 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FIX_BONUS_SERVICES } from './fix-bonus/service';
-
+import { ROULETTE_COUPON_SERVICES } from './roulette-coupon/service';
@NgModule({
  imports: [],
  exports: []
@ -17,7 +17,7 @@ export class SpecialModule {
  public static forRoot(): ModuleWithProviders<SpecialRootModule> {
    return {
      ngModule: SpecialRootModule,
-      providers: [FIX_BONUS_SERVICES]
+      providers: [FIX_BONUS_SERVICES, ROULETTE_COUPON_SERVICES]
    };
  }
 }