bank-info eidt row
This commit is contained in:
byung eun park
parent
32f1b5a083
commit
5fefd19851
|
|
@ -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 {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}`, {});
|
||||
// }
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user