bank-info eidt row

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 {
+export class DepositComponent implements OnInit, OnDestroy, AfterViewInit {
-  constructor() {}
+  @ViewChild(MatPaginator, { static: true })
+  paginator: MatPaginator;
 
-  ngOnInit() {}
+  @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 {}
 }

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
+              <mat-cell *matCellDef="let bankInfo; let i = index">{{
-                *matCellDef="let bankInfo; let i = index"
+                bankInfo.id
-                [formGroupName]="i"
+              }}</mat-cell>
-                >{{ bankInfo.id }}</mat-cell
-              >
             </ng-container>
 
             <!-- KorName Column -->
             <ng-container matColumnDef="name">
               <mat-header-cell *matHeaderCellDef>은행명</mat-header-cell>
-              <mat-cell *matCellDef="let bankInfo">{{
+              <mat-cell
-                bankInfo.name
+                *matCellDef="let bankInfo; let i = index"
-              }}</mat-cell>
+                [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">{{
+              <mat-cell
-                bankInfo.number
+                *matCellDef="let bankInfo; let i = index"
-              }}</mat-cell>
+                [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">{{
+              <mat-cell
-                bankInfo.holder
+                *matCellDef="let bankInfo; let i = index"
-              }}</mat-cell>
+                [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">{{
+              <mat-cell
-                bankInfo.description
+                *matCellDef="let bankInfo; let i = index"
-              }}</mat-cell>
+                [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

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;
+  public bankInfoFormGroup: FormGroup;
-  bankInfoFormArray: FormArray;
+  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.bankInfoFormArray = this.fb.array([]);
-
+    this.bankInfoFormGroup = this.fb.group({
-    this.bankInfoForm = this.fb.group({
+      formarray: this.bankInfoFormArray
-      items: this.createFormArray()
     });
+    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
    */

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 _objectStore: BankInfo[] = [];
-  // private pageSubject = new BehaviorSubject<Page<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(
+  connect(collectionViewer: CollectionViewer): Observable<BankInfo[]> {
-    collectionViewer: CollectionViewer
+    return this.bankInfoService.getAllAsFormArray().pipe(
-  ): Observable<BankInfo[] | readonly BankInfo[]> {
+      map(res => {
-    const displayDataChanges = [this.filterSubject];
+        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;
+      })
+    );
+  }
 
-    return merge(...displayDataChanges).pipe(
+  createRowFormGroup(r: BankInfo): FormGroup {
-      switchMap(() => {
+    let f = new FormGroup({
-        return this.bankInfoService.getBankInfos().pipe(
+      id: this.createNewFormContorl(r, 'id'),
-          map(page => {
+      name: this.createNewFormContorl(r, 'name'),
-            return page.content;
+      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();
   }
 }

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}`, {});
   // }