bank-info eidt row

2019-09-11 14:34:55 +09:00 · 2019-09-11 14:34:55 +09:00 · 5fefd19851
commit 5fefd19851
parent 32f1b5a083
5 changed files with 185 additions and 64 deletions
--- a/src/app/pages/moneys/money/component/deposit.component.ts
+++ b/src/app/pages/moneys/money/component/deposit.component.ts
@ -1,12 +1,62 @@
-import { Component, OnInit } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation,
+  AfterViewInit
+} from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+
+import { fromEvent, Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+import { fuseAnimations } from 'src/@fuse/animations';

@Component({
-  selector: 'app-deposit',
+  selector: 'app-pages-deposit-list',
  templateUrl: './deposit.component.html',
-  styleUrls: ['./deposit.component.scss']
+  styleUrls: ['./deposit.component.scss'],
+  animations: fuseAnimations,
+  encapsulation: ViewEncapsulation.None
 })
-export class DepositComponent implements OnInit {
-  constructor() {}
+export class DepositComponent implements OnInit, OnDestroy, AfterViewInit {
+  @ViewChild(MatPaginator, { static: true })
+  paginator: MatPaginator;

+  @ViewChild('filter', { static: true })
+  filter: ElementRef;
+
+  @ViewChild(MatSort, { static: true })
+  sort: MatSort;
+
+  // Private
+  private _unsubscribeAll: Subject<any>;
+
+  constructor() {
+    // Set the private defaults
+    this._unsubscribeAll = new Subject();
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Lifecycle hooks
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * On init
+   */
  ngOnInit() {}
+
+  /**
+   * On destroy
+   */
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions
+    this._unsubscribeAll.next();
+    this._unsubscribeAll.complete();
+  }
+
+  ngAfterViewInit(): void {}
 }
--- a/src/app/pages/sites/bank-info/component/list.component.html
+++ b/src/app/pages/sites/bank-info/component/list.component.html
@ -36,7 +36,7 @@
      >
        <form
          name="bankInfoForm"
-          [formGroup]="bankInfoForm"
+          [formGroup]="bankInfoFormGroup"
          (ngSubmit)="bankInfoUpdate()"
          novalidate
        >
@ -46,48 +46,88 @@
            [dataSource]="dataSource"
            [@animateStagger]="{ value: '50' }"
            matSort
-            formArrayName="items"
+            formArrayName="formarray"
          >
            <!-- Icon Column [formGroupName] -->
            <ng-container matColumnDef="id">
              <mat-header-cell *matHeaderCellDef>계좌순번</mat-header-cell>
-              <mat-cell
-                *matCellDef="let bankInfo; let i = index"
-                [formGroupName]="i"
-                >{{ bankInfo.id }}</mat-cell
-              >
+              <mat-cell *matCellDef="let bankInfo; let i = index">{{
+                bankInfo.id
+              }}</mat-cell>
            </ng-container>

            <!-- KorName Column -->
            <ng-container matColumnDef="name">
              <mat-header-cell *matHeaderCellDef>은행명</mat-header-cell>
-              <mat-cell *matCellDef="let bankInfo">{{
-                bankInfo.name
-              }}</mat-cell>
+              <mat-cell
+                *matCellDef="let bankInfo; let i = index"
+                [formGroupName]="i"
+              >
+                <!-- {{bankInfo.name}} -->
+                <mat-form-field appearance="outline">
+                  <!-- <mat-label>은행명</mat-label> -->
+                  <input
+                    name="inputName={{ bankInfo.name }}"
+                    matInput
+                    type="text"
+                    formControlName="name"
+                  />
+                </mat-form-field>
+              </mat-cell>
            </ng-container>

            <!-- 추가방식 Column -->
            <ng-container matColumnDef="number">
              <mat-header-cell *matHeaderCellDef>계좌번호</mat-header-cell>
-              <mat-cell *matCellDef="let bankInfo">{{
-                bankInfo.number
-              }}</mat-cell>
+              <mat-cell
+                *matCellDef="let bankInfo; let i = index"
+                [formGroupName]="i"
+              >
+                <mat-form-field appearance="outline">
+                  <input
+                    name="inputNumber={{ bankInfo.number }}"
+                    matInput
+                    type="text"
+                    formControlName="number"
+                  />
+                </mat-form-field>
+              </mat-cell>
            </ng-container>

            <!-- 종목 Column -->
            <ng-container matColumnDef="holder">
              <mat-header-cell *matHeaderCellDef>예금주</mat-header-cell>
-              <mat-cell *matCellDef="let bankInfo">{{
-                bankInfo.holder
-              }}</mat-cell>
+              <mat-cell
+                *matCellDef="let bankInfo; let i = index"
+                [formGroupName]="i"
+              >
+                <mat-form-field appearance="outline">
+                  <input
+                    name="inputHolder={{ bankInfo.holder }}"
+                    matInput
+                    type="text"
+                    formControlName="holder"
+                  />
+                </mat-form-field>
+              </mat-cell>
            </ng-container>

            <!-- Symbol Column -->
            <ng-container matColumnDef="description">
              <mat-header-cell *matHeaderCellDef>설명</mat-header-cell>
-              <mat-cell *matCellDef="let bankInfo">{{
-                bankInfo.description
-              }}</mat-cell>
+              <mat-cell
+                *matCellDef="let bankInfo; let i = index"
+                [formGroupName]="i"
+              >
+                <mat-form-field appearance="outline">
+                  <input
+                    name="inputDescription={{ bankInfo.description }}"
+                    matInput
+                    type="text"
+                    formControlName="description"
+                  />
+                </mat-form-field>
+              </mat-cell>
            </ng-container>

            <mat-header-row
--- a/src/app/pages/sites/bank-info/component/list.component.ts
+++ b/src/app/pages/sites/bank-info/component/list.component.ts
@ -10,7 +10,12 @@ import {
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { fromEvent, Subject } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import {
+  debounceTime,
+  distinctUntilChanged,
+  map,
+  switchMap
+} from 'rxjs/operators';
 import { takeUntil } from 'rxjs/internal/operators';

 import { MatTableDataSource } from '@angular/material/table';
@ -27,6 +32,8 @@ import {
  FormControl
 } from '@angular/forms';

+import { BankInfo } from 'src/modules/sites/bank-info/model/bank-info.model';
+
@Component({
  selector: 'app-page-sites-bank-info-list',
  templateUrl: './list.component.html',
@ -35,10 +42,11 @@ import {
  encapsulation: ViewEncapsulation.None
 })
 export class ListComponent implements OnInit, OnDestroy, AfterViewInit {
-  dataSource: BankInfoDataSource | null;
+  dataSource: BankInfoDataSource = new BankInfoDataSource(this.bankInfoService);
+  // dataSource: MatTableDataSource<any>;
  displayedColumns = ['id', 'name', 'number', 'holder', 'description'];
-  bankInfoForm: FormGroup;
-  bankInfoFormArray: FormArray;
+  public bankInfoFormGroup: FormGroup;
+  public bankInfoFormArray: FormArray;

  @ViewChild('filter', { static: true })
  filter: ElementRef;
@ -54,29 +62,13 @@ export class ListComponent implements OnInit, OnDestroy, AfterViewInit {
  }

  ngOnInit() {
-    this.dataSource = new BankInfoDataSource(this.bankInfoService);
-
-    this.bankInfoForm = this.fb.group({
-      items: this.createFormArray()
+    this.bankInfoFormArray = this.fb.array([]);
+    this.bankInfoFormGroup = this.fb.group({
+      formarray: this.bankInfoFormArray
    });
+    this.dataSource.formg = this.bankInfoFormGroup;
  }

-  createFormArray(): FormArray {
-    return new FormArray(
-      this.dataSource[0](
-        item =>
-          new FormGroup({
-            id: new FormControl(item.id),
-            name: new FormControl(item.name, [Validators.required]),
-            number: new FormControl(item.number, [Validators.required]),
-            holder: new FormControl(item.holder, [Validators.required]),
-            description: new FormControl(item.description, [
-              Validators.required
-            ])
-          })
-      )
-    );
-  }
  /**
   * On destroy
   */
--- a/src/app/pages/sites/bank-info/component/list.data-source.ts
+++ b/src/app/pages/sites/bank-info/component/list.data-source.ts
@ -1,7 +1,7 @@
 import { DataSource } from '@angular/cdk/table';

 import { BehaviorSubject, Observable, merge } from 'rxjs';
-import { switchMap, map } from 'rxjs/operators';
+import { switchMap, map, tap } from 'rxjs/operators';

 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
@ -10,32 +10,63 @@ import { CollectionViewer } from '@angular/cdk/collections';
 import { BankInfo } from 'src/modules/sites/bank-info/model/bank-info.model';
 import { BankInfoService } from 'src/modules/sites/bank-info/service/bank-info.service';
 import { Page } from 'src/modules/common/data/model/page';
+import {
+  FormControl,
+  FormsModule,
+  ReactiveFormsModule,
+  FormGroup,
+  FormBuilder,
+  Validators,
+  NgControl,
+  NgForm,
+  FormArray
+} from '@angular/forms';

 export class BankInfoDataSource extends DataSource<BankInfo> {
-  private filterSubject = new BehaviorSubject('');
-  // private pageSubject = new BehaviorSubject<Page<BankInfo>>({});
+  private _objectStore: BankInfo[] = [];
+  private _ObjectsSubject$ = new BehaviorSubject<BankInfo[]>([]);
+  private _loadingSubject$ = new BehaviorSubject<boolean>(false);
+
+  public loading$ = this._loadingSubject$.asObservable();
+  public formg: FormGroup;

  constructor(private bankInfoService: BankInfoService) {
    super();
  }

-  connect(
-    collectionViewer: CollectionViewer
-  ): Observable<BankInfo[] | readonly BankInfo[]> {
-    const displayDataChanges = [this.filterSubject];
-
-    return merge(...displayDataChanges).pipe(
-      switchMap(() => {
-        return this.bankInfoService.getBankInfos().pipe(
-          map(page => {
-            return page.content;
-          })
-        );
+  connect(collectionViewer: CollectionViewer): Observable<BankInfo[]> {
+    return this.bankInfoService.getAllAsFormArray().pipe(
+      map(res => {
+        res.forEach(m => this._objectStore.push(m as BankInfo));
+        this._ObjectsSubject$.next(this._objectStore);
+        let fa = <FormArray>this.formg.get('formarray');
+        res.forEach(r => fa.push(this.createRowFormGroup(r)));
+        return res;
      })
    );
  }

+  createRowFormGroup(r: BankInfo): FormGroup {
+    let f = new FormGroup({
+      id: this.createNewFormContorl(r, 'id'),
+      name: this.createNewFormContorl(r, 'name'),
+      number: this.createNewFormContorl(r, 'number'),
+      holder: this.createNewFormContorl(r, 'holder'),
+      description: this.createNewFormContorl(r, 'description')
+    });
+    return f;
+  }
+
+  createNewFormContorl(r: BankInfo, 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.filterSubject.complete();
+    this._ObjectsSubject$.complete();
+    this._loadingSubject$.complete();
  }
 }
--- a/src/modules/sites/bank-info/service/bank-info.service.ts
+++ b/src/modules/sites/bank-info/service/bank-info.service.ts
@ -2,9 +2,11 @@ import { Injectable, Inject } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';

 import { Observable } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
 import { BankInfo } from '../model/bank-info.model';
 import { API_BASE_URL } from 'src/modules/common/type/injection-token.type';
 import { Page } from 'src/modules/common/data/model/page';
+import { FormArray } from '@angular/forms';

@Injectable({
  providedIn: 'root'
@ -22,6 +24,12 @@ export class BankInfoService {
    );
  }

+  public getAllAsFormArray(): Observable<BankInfo[]> {
+    return this.httpClient.get<BankInfo[]>(
+      `${this.apiBaseUrl}/bank_info/test`,
+      {}
+    );
+  }
  // public getUser(id: number): Observable<User> {
  //   return this.httpClient.get<User>(`${this.apiBaseUrl}/users/${id}`, {});
  // }