popupset 화면
This commit is contained in:
byung eun park
parent
9d7a244d5d
commit
bb3c3f9413
|
|
@ -1,3 +1,4 @@
|
||||||
|
<!--
|
||||||
<mat-toolbar class="p-0 mat-elevation-z1">
|
<mat-toolbar class="p-0 mat-elevation-z1">
|
||||||
<div fxFlex fxFill fxLayout="row" fxLayoutAlign="start center">
|
<div fxFlex fxFill fxLayout="row" fxLayoutAlign="start center">
|
||||||
<div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
|
<div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
|
@ -28,6 +29,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="start center">
|
<div class="" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="start center">
|
||||||
<button mat-button [matMenuTriggerFor]="userMenu" class="user-button">
|
<button mat-button [matMenuTriggerFor]="userMenu" class="user-button">
|
||||||
<div fxLayout="row" fxLayoutAlign="center center">
|
<div fxLayout="row" fxLayoutAlign="center center">
|
||||||
|
|
@ -123,5 +125,6 @@
|
||||||
<mat-icon class="secondary-text">menu</mat-icon>
|
<mat-icon class="secondary-text">menu</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</mat-toolbar>
|
</mat-toolbar>-->
|
||||||
|
|
|
||||||
|
|
@ -378,41 +378,41 @@ export const navigation: FuseNavigation[] = [
|
||||||
url: '/pages/specials/management/check-notice'
|
url: '/pages/specials/management/check-notice'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'support_management',
|
|
||||||
title: '받치기 관리',
|
|
||||||
translate: 'NAV.SUPPORT.TITLE',
|
|
||||||
type: 'collapsable',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 'sample',
|
|
||||||
title: 'Sample',
|
|
||||||
translate: 'NAV.SAMPLE.TITLE',
|
|
||||||
type: 'item',
|
|
||||||
icon: 'email',
|
|
||||||
url: '/sample',
|
|
||||||
badge: {
|
|
||||||
title: '25',
|
|
||||||
translate: 'NAV.SAMPLE.BADGE',
|
|
||||||
bg: '#F44336',
|
|
||||||
fg: '#FFFFFF'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'sample',
|
|
||||||
title: 'Sample',
|
|
||||||
translate: 'NAV.SAMPLE.TITLE',
|
|
||||||
type: 'item',
|
|
||||||
icon: 'email',
|
|
||||||
url: '/sample',
|
|
||||||
badge: {
|
|
||||||
title: '25',
|
|
||||||
translate: 'NAV.SAMPLE.BADGE',
|
|
||||||
bg: '#F44336',
|
|
||||||
fg: '#FFFFFF'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
// {
|
||||||
|
// id: 'support_management',
|
||||||
|
// title: '받치기 관리',
|
||||||
|
// translate: 'NAV.SUPPORT.TITLE',
|
||||||
|
// type: 'collapsable',
|
||||||
|
// children: [
|
||||||
|
// {
|
||||||
|
// id: 'sample',
|
||||||
|
// title: 'Sample',
|
||||||
|
// translate: 'NAV.SAMPLE.TITLE',
|
||||||
|
// type: 'item',
|
||||||
|
// icon: 'email',
|
||||||
|
// url: '/sample',
|
||||||
|
// badge: {
|
||||||
|
// title: '25',
|
||||||
|
// translate: 'NAV.SAMPLE.BADGE',
|
||||||
|
// bg: '#F44336',
|
||||||
|
// fg: '#FFFFFF'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// id: 'sample',
|
||||||
|
// title: 'Sample',
|
||||||
|
// translate: 'NAV.SAMPLE.TITLE',
|
||||||
|
// type: 'item',
|
||||||
|
// icon: 'email',
|
||||||
|
// url: '/sample',
|
||||||
|
// badge: {
|
||||||
|
// title: '25',
|
||||||
|
// translate: 'NAV.SAMPLE.BADGE',
|
||||||
|
// bg: '#F44336',
|
||||||
|
// fg: '#FFFFFF'
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// }
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@ import { PopupSetComponent } from './popup-set.component';
|
||||||
import { EventRegistComponent } from './event-regist.component';
|
import { EventRegistComponent } from './event-regist.component';
|
||||||
import { NoticeBoardComponent } from './notice-board.component';
|
import { NoticeBoardComponent } from './notice-board.component';
|
||||||
import { FreeBoardRegistComponent } from './free-board-regist.component';
|
import { FreeBoardRegistComponent } from './free-board-regist.component';
|
||||||
|
import { PopupSetDetailComponent } from './popup-set-detail.component';
|
||||||
|
|
||||||
export const COMPONENTS = [
|
export const COMPONENTS = [
|
||||||
ServiceCenterComponent,
|
ServiceCenterComponent,
|
||||||
|
|
@ -15,5 +16,6 @@ export const COMPONENTS = [
|
||||||
PopupSetComponent,
|
PopupSetComponent,
|
||||||
EventRegistComponent,
|
EventRegistComponent,
|
||||||
NoticeBoardComponent,
|
NoticeBoardComponent,
|
||||||
FreeBoardRegistComponent
|
FreeBoardRegistComponent,
|
||||||
|
PopupSetDetailComponent
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -46,109 +46,200 @@
|
||||||
|
|
||||||
<!-- CONTENT CARD -->
|
<!-- CONTENT CARD -->
|
||||||
<div class="content-card">
|
<div class="content-card">
|
||||||
<mat-table
|
<form name="popupSetForm" [formGroup]="mtformgroup" novalidate>
|
||||||
class="popup-set-table"
|
<mat-table
|
||||||
#table
|
class="popup-set-table"
|
||||||
[dataSource]="dataSource"
|
#table
|
||||||
matSort
|
[dataSource]="dataSource"
|
||||||
[@animateStagger]="{ value: '50' }"
|
matSort
|
||||||
fusePerfectScrollbar
|
[@animateStagger]="{ value: '50' }"
|
||||||
>
|
fusePerfectScrollbar
|
||||||
<!-- ID Column -->
|
formArrayName="formarray"
|
||||||
<ng-container matColumnDef="id">
|
|
||||||
<mat-header-cell *matHeaderCellDef mat-sort-header
|
|
||||||
>ID</mat-header-cell
|
|
||||||
>
|
|
||||||
<mat-cell *matCellDef="let order">
|
|
||||||
<p class="text-truncate">1</p>
|
|
||||||
</mat-cell>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<!-- Reference Column -->
|
|
||||||
<ng-container matColumnDef="reference">
|
|
||||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
|
|
||||||
>Reference</mat-header-cell
|
|
||||||
>
|
|
||||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
|
||||||
<p class="text-truncate">{{ order.reference }}</p>
|
|
||||||
</mat-cell>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<!-- Name Column -->
|
|
||||||
<ng-container matColumnDef="customer">
|
|
||||||
<mat-header-cell *matHeaderCellDef mat-sort-header
|
|
||||||
>Customer</mat-header-cell
|
|
||||||
>
|
|
||||||
<mat-cell *matCellDef="let order">
|
|
||||||
<p class="text-truncate">
|
|
||||||
2
|
|
||||||
</p>
|
|
||||||
</mat-cell>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<!-- Total Price Column -->
|
|
||||||
<ng-container matColumnDef="total">
|
|
||||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md
|
|
||||||
>Total</mat-header-cell
|
|
||||||
>
|
|
||||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-md>
|
|
||||||
<p class="total-price text-truncate">
|
|
||||||
1
|
|
||||||
</p>
|
|
||||||
</mat-cell>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<!-- Payment Column -->
|
|
||||||
<ng-container matColumnDef="payment">
|
|
||||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
|
|
||||||
>Payment</mat-header-cell
|
|
||||||
>
|
|
||||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
|
||||||
<p class="text-truncate">
|
|
||||||
3
|
|
||||||
</p>
|
|
||||||
</mat-cell>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<!-- Status Column -->
|
|
||||||
<ng-container matColumnDef="status">
|
|
||||||
<mat-header-cell *matHeaderCellDef mat-sort-header
|
|
||||||
>Status</mat-header-cell
|
|
||||||
>
|
|
||||||
<mat-cell *matCellDef="let order">
|
|
||||||
<p
|
|
||||||
class="status text-truncate h6 p-4"
|
|
||||||
[ngClass]="order.status[0].color"
|
|
||||||
>
|
|
||||||
4
|
|
||||||
</p>
|
|
||||||
</mat-cell>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<!-- Date Column -->
|
|
||||||
<ng-container matColumnDef="date">
|
|
||||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
|
|
||||||
>Date</mat-header-cell
|
|
||||||
>
|
|
||||||
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
|
||||||
<p class="text-truncate">
|
|
||||||
6
|
|
||||||
</p>
|
|
||||||
</mat-cell>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<mat-header-row
|
|
||||||
*matHeaderRowDef="displayedColumns; sticky: true"
|
|
||||||
></mat-header-row>
|
|
||||||
|
|
||||||
<mat-row
|
|
||||||
*matRowDef="let order; columns: displayedColumns"
|
|
||||||
class="popup-set"
|
|
||||||
matRipple
|
|
||||||
>
|
>
|
||||||
</mat-row>
|
<!-- idx Column -->
|
||||||
</mat-table>
|
<ng-container matColumnDef="idx">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>번호</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell
|
||||||
|
*matCellDef="let popup; let i = index"
|
||||||
|
[formGroupName]="i"
|
||||||
|
>
|
||||||
|
<p class="text-truncate">{{ i + 1 }}</p>
|
||||||
|
<!-- <p class="text-truncate">1</p> -->
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- thumbnail Column -->
|
||||||
|
<ng-container matColumnDef="thumbNail">
|
||||||
|
<mat-header-cell
|
||||||
|
*matHeaderCellDef
|
||||||
|
mat-sort-header
|
||||||
|
fxHide
|
||||||
|
fxShow.gt-sm
|
||||||
|
>썸네일</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell
|
||||||
|
*matCellDef="let popup; let i = index"
|
||||||
|
[formGroupName]="i"
|
||||||
|
fxHide
|
||||||
|
fxShow.gt-sm
|
||||||
|
>
|
||||||
|
<p class="text-truncate">{{ popup.thumbNail }}</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- title Column -->
|
||||||
|
<ng-container matColumnDef="title">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>제목</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell
|
||||||
|
*matCellDef="let popup; let i = index"
|
||||||
|
[formGroupName]="i"
|
||||||
|
>
|
||||||
|
<p class="text-truncate">
|
||||||
|
{{ popup.title }}
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- imageWidth Price Column -->
|
||||||
|
<ng-container matColumnDef="imageWidth">
|
||||||
|
<mat-header-cell
|
||||||
|
*matHeaderCellDef
|
||||||
|
mat-sort-header
|
||||||
|
fxHide
|
||||||
|
fxShow.gt-md
|
||||||
|
>이미지 넒이</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell
|
||||||
|
*matCellDef="let popup; let i = index"
|
||||||
|
[formGroupName]="i"
|
||||||
|
fxHide
|
||||||
|
fxShow.gt-md
|
||||||
|
>
|
||||||
|
<p class="total-price text-truncate">
|
||||||
|
{{ popup.imageWidth }}
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
px
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- imageHegith Column -->
|
||||||
|
<ng-container matColumnDef="imageHegith">
|
||||||
|
<mat-header-cell
|
||||||
|
*matHeaderCellDef
|
||||||
|
mat-sort-header
|
||||||
|
fxHide
|
||||||
|
fxShow.gt-sm
|
||||||
|
>이미지 높이</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell
|
||||||
|
*matCellDef="let popup; let i = index"
|
||||||
|
[formGroupName]="i"
|
||||||
|
fxHide
|
||||||
|
fxShow.gt-sm
|
||||||
|
>
|
||||||
|
<p class="text-truncate">
|
||||||
|
{{ popup.imageHeight }}
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
px
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- imageX Column -->
|
||||||
|
<ng-container matColumnDef="imageX">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>이미지 X</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell
|
||||||
|
*matCellDef="let popup; let i = index"
|
||||||
|
[formGroupName]="i"
|
||||||
|
>
|
||||||
|
<p class="status text-truncate h6 p-4">
|
||||||
|
{{ popup.imageX }}
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- imageY Column -->
|
||||||
|
<ng-container matColumnDef="imageY">
|
||||||
|
<mat-header-cell
|
||||||
|
*matHeaderCellDef
|
||||||
|
mat-sort-header
|
||||||
|
fxHide
|
||||||
|
fxShow.gt-sm
|
||||||
|
>이미지 Y</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell
|
||||||
|
*matCellDef="let popup; let i = index"
|
||||||
|
[formGroupName]="i"
|
||||||
|
fxHide
|
||||||
|
fxShow.gt-sm
|
||||||
|
>
|
||||||
|
<p class="text-truncate">
|
||||||
|
{{ popup.imageY }}
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- openStatus Column -->
|
||||||
|
<ng-container matColumnDef="openStatus">
|
||||||
|
<mat-header-cell
|
||||||
|
*matHeaderCellDef
|
||||||
|
mat-sort-header
|
||||||
|
fxHide
|
||||||
|
fxShow.gt-sm
|
||||||
|
>상태</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell
|
||||||
|
*matCellDef="let popup; let i = index"
|
||||||
|
[formGroupName]="i"
|
||||||
|
fxHide
|
||||||
|
fxShow.gt-sm
|
||||||
|
>
|
||||||
|
<p class="text-truncate">
|
||||||
|
{{ popup.openStatus }}
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- saveBtn Column -->
|
||||||
|
<ng-container matColumnDef="saveBtn">
|
||||||
|
<mat-header-cell
|
||||||
|
*matHeaderCellDef
|
||||||
|
mat-sort-header
|
||||||
|
fxHide
|
||||||
|
fxShow.gt-sm
|
||||||
|
>수정</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell
|
||||||
|
*matCellDef="let popup; let i = index"
|
||||||
|
[formGroupName]="i"
|
||||||
|
fxHide
|
||||||
|
fxShow.gt-sm
|
||||||
|
>
|
||||||
|
<p class="text-truncate">
|
||||||
|
6
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<mat-header-row
|
||||||
|
*matHeaderRowDef="displayedColumns; sticky: true"
|
||||||
|
></mat-header-row>
|
||||||
|
|
||||||
|
<!-- [routerLink]="'/pages/infos/management/popup-set/' + popup.id" -->
|
||||||
|
<mat-row
|
||||||
|
*matRowDef="let popup; columns: displayedColumns"
|
||||||
|
class="popup-set"
|
||||||
|
matRipple
|
||||||
|
[routerLink]="'/pages/infos/management/popup-set/' + popup.id"
|
||||||
|
>
|
||||||
|
</mat-row>
|
||||||
|
</mat-table>
|
||||||
|
</form>
|
||||||
<mat-paginator
|
<mat-paginator
|
||||||
#paginator
|
#paginator
|
||||||
[length]="10"
|
[length]="10"
|
||||||
|
|
|
||||||
|
|
@ -9,12 +9,14 @@ import {
|
||||||
import { MatPaginator } from '@angular/material/paginator';
|
import { MatPaginator } from '@angular/material/paginator';
|
||||||
import { MatSort } from '@angular/material/sort';
|
import { MatSort } from '@angular/material/sort';
|
||||||
import { DataSource } from '@angular/cdk/collections';
|
import { DataSource } from '@angular/cdk/collections';
|
||||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
|
||||||
import { Subject } from 'rxjs';
|
import { Subject } from 'rxjs';
|
||||||
import { takeUntil } from 'rxjs/operators';
|
import { takeUntil } from 'rxjs/operators';
|
||||||
|
|
||||||
import { fuseAnimations } from 'src/@fuse/animations';
|
import { fuseAnimations } from 'src/@fuse/animations';
|
||||||
|
|
||||||
|
import { PopupSetService } from 'src/modules/infos/popup-set/service/popup-set.service';
|
||||||
|
import { PopupSetDataSource } from './popup-set.data-source';
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-popup-set',
|
selector: 'app-popup-set',
|
||||||
templateUrl: './popup-set.component.html',
|
templateUrl: './popup-set.component.html',
|
||||||
|
|
@ -23,30 +25,38 @@ import { fuseAnimations } from 'src/@fuse/animations';
|
||||||
animations: fuseAnimations
|
animations: fuseAnimations
|
||||||
})
|
})
|
||||||
export class PopupSetComponent implements OnInit, OnDestroy {
|
export class PopupSetComponent implements OnInit, OnDestroy {
|
||||||
dataSource: null;
|
dataSource: PopupSetDataSource = new PopupSetDataSource(this.popupSetService);
|
||||||
displayedColumns = [
|
displayedColumns = [
|
||||||
'id',
|
'idx',
|
||||||
'reference',
|
'thumbNail',
|
||||||
'customer',
|
'title',
|
||||||
'total',
|
'imageWidth',
|
||||||
'payment',
|
'imageHegith',
|
||||||
'status',
|
'imageX',
|
||||||
'date'
|
'imageY',
|
||||||
|
'openStatus',
|
||||||
|
'saveBtn'
|
||||||
];
|
];
|
||||||
|
|
||||||
@ViewChild(MatPaginator, { static: true })
|
public mtformgroup: FormGroup;
|
||||||
paginator: MatPaginator;
|
public mtformarray: FormArray;
|
||||||
|
|
||||||
@ViewChild('filter', { static: true })
|
// @ViewChild(MatPaginator, { static: true })
|
||||||
filter: ElementRef;
|
// paginator: MatPaginator;
|
||||||
|
|
||||||
@ViewChild(MatSort, { static: true })
|
// @ViewChild('filter', { static: true })
|
||||||
sort: MatSort;
|
// filter: ElementRef;
|
||||||
|
|
||||||
|
// @ViewChild(MatSort, { static: true })
|
||||||
|
// sort: MatSort;
|
||||||
|
|
||||||
// Private
|
// Private
|
||||||
private unsubscribeAll: Subject<any>;
|
private unsubscribeAll: Subject<any>;
|
||||||
|
|
||||||
constructor(private fb: FormBuilder) {
|
constructor(
|
||||||
|
private fb: FormBuilder,
|
||||||
|
private popupSetService: PopupSetService
|
||||||
|
) {
|
||||||
// Set the private defaults
|
// Set the private defaults
|
||||||
this.unsubscribeAll = new Subject();
|
this.unsubscribeAll = new Subject();
|
||||||
}
|
}
|
||||||
|
|
@ -60,6 +70,9 @@ export class PopupSetComponent implements OnInit, OnDestroy {
|
||||||
*/
|
*/
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
// Subscribe to update order on changes
|
// Subscribe to update order on changes
|
||||||
|
this.mtformarray = this.fb.array([]);
|
||||||
|
this.mtformgroup = this.fb.group({ formarray: this.mtformarray });
|
||||||
|
this.dataSource.formg = this.mtformgroup;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
119
src/app/pages/infos/info/component/popup-set.data-source.ts
Normal file
119
src/app/pages/infos/info/component/popup-set.data-source.ts
Normal file
|
|
@ -0,0 +1,119 @@
|
||||||
|
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 { PopupSet } from 'src/modules/infos/popup-set/model/popup-set.model';
|
||||||
|
import { PopupSetService } from 'src/modules/infos/popup-set/service/popup-set.service';
|
||||||
|
|
||||||
|
import { FormControl, FormGroup, Validators, FormArray } from '@angular/forms';
|
||||||
|
|
||||||
|
const ELEMENT_DATA: PopupSet[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
thumbNail: '/images/thumbname/1.jpg',
|
||||||
|
title: '오픈기념 이벤트',
|
||||||
|
imageWidth: 200,
|
||||||
|
imageHeight: 200,
|
||||||
|
imageX: 100,
|
||||||
|
imageY: 100,
|
||||||
|
openStatus: true,
|
||||||
|
updatedAt: null,
|
||||||
|
createdAt: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
thumbNail: '/images/thumbname/2.jpg',
|
||||||
|
title: '첫충전 이벤트',
|
||||||
|
imageWidth: 200,
|
||||||
|
imageHeight: 200,
|
||||||
|
imageX: 100,
|
||||||
|
imageY: 100,
|
||||||
|
openStatus: true,
|
||||||
|
updatedAt: null,
|
||||||
|
createdAt: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
thumbNail: '/images/thumbname/3.jpg',
|
||||||
|
title: '친구초대 이벤트',
|
||||||
|
imageWidth: 200,
|
||||||
|
imageHeight: 200,
|
||||||
|
imageX: 100,
|
||||||
|
imageY: 100,
|
||||||
|
openStatus: true,
|
||||||
|
updatedAt: null,
|
||||||
|
createdAt: null
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export class PopupSetDataSource extends DataSource<PopupSet> {
|
||||||
|
private _objectStore: PopupSet[] = [];
|
||||||
|
private _ObjectsSubject$ = new BehaviorSubject<PopupSet[]>([]);
|
||||||
|
private _loadingSubject$ = new BehaviorSubject<boolean>(false);
|
||||||
|
|
||||||
|
public loading$ = this._loadingSubject$.asObservable();
|
||||||
|
public formg: FormGroup;
|
||||||
|
|
||||||
|
constructor(private fixBonusService: PopupSetService) {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
connect(collectionViewer: CollectionViewer): Observable<PopupSet[]> {
|
||||||
|
// return this.fixBonusService.getAll().pipe(
|
||||||
|
// map(res => {
|
||||||
|
// res.forEach(m => this._objectStore.push(m as FixBonus));
|
||||||
|
// 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 PopupSet));
|
||||||
|
this._ObjectsSubject$.next(this._objectStore);
|
||||||
|
let fa = <FormArray>this.formg.get('formarray');
|
||||||
|
res.forEach(r => fa.push(this.createRowFormGroup(r)));
|
||||||
|
return res;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// id: 3,
|
||||||
|
// thumbNail: '/images/thumbname/3.jpg',
|
||||||
|
// title: '친구초대 이벤트',
|
||||||
|
// imageWidth: 200,
|
||||||
|
// imageHeight: 200,
|
||||||
|
// imageX: 100,
|
||||||
|
// imageY: 100,
|
||||||
|
// openStatus: true,
|
||||||
|
// updatedAt: null,
|
||||||
|
// createdAt: null
|
||||||
|
createRowFormGroup(r: PopupSet): FormGroup {
|
||||||
|
let f = new FormGroup({
|
||||||
|
title: this.createNewFormContorl(r, 'title'),
|
||||||
|
imageWidth: this.createNewFormContorl(r, 'imageWidth'),
|
||||||
|
imageHeight: this.createNewFormContorl(r, 'imageHeight'),
|
||||||
|
imageX: this.createNewFormContorl(r, 'imageX'),
|
||||||
|
imageY: this.createNewFormContorl(r, 'imageY'),
|
||||||
|
openStatus: this.createNewFormContorl(r, 'openStatus')
|
||||||
|
});
|
||||||
|
return f;
|
||||||
|
}
|
||||||
|
|
||||||
|
createNewFormContorl(r: PopupSet, 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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -8,6 +8,8 @@ import { PopupSetComponent } from './component/popup-set.component';
|
||||||
import { EventRegistComponent } from './component/event-regist.component';
|
import { EventRegistComponent } from './component/event-regist.component';
|
||||||
import { NoticeBoardComponent } from './component/notice-board.component';
|
import { NoticeBoardComponent } from './component/notice-board.component';
|
||||||
import { FreeBoardRegistComponent } from './component/free-board-regist.component';
|
import { FreeBoardRegistComponent } from './component/free-board-regist.component';
|
||||||
|
import { PopupSetDetailComponent } from './component/popup-set-detail.component';
|
||||||
|
import { PopupSetDetailResolver } from './resolver/popup-set-detail.resolver';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{
|
{
|
||||||
|
|
@ -30,6 +32,13 @@ const routes: Routes = [
|
||||||
path: 'popup-set',
|
path: 'popup-set',
|
||||||
component: PopupSetComponent
|
component: PopupSetComponent
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'popup-set/:id',
|
||||||
|
component: PopupSetDetailComponent,
|
||||||
|
resolve: {
|
||||||
|
popupSet: PopupSetDetailResolver
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'event-regist',
|
path: 'event-regist',
|
||||||
component: EventRegistComponent
|
component: EventRegistComponent
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@ import { FuseWidgetModule } from 'src/@fuse/components/widget/widget.module';
|
||||||
import { InfoRoutingModule } from './info-routing.module';
|
import { InfoRoutingModule } from './info-routing.module';
|
||||||
|
|
||||||
import { COMPONENTS } from './component';
|
import { COMPONENTS } from './component';
|
||||||
|
import { RESOLVERS } from './resolver';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
|
|
@ -41,6 +42,6 @@ import { COMPONENTS } from './component';
|
||||||
InfoRoutingModule
|
InfoRoutingModule
|
||||||
],
|
],
|
||||||
declarations: [...COMPONENTS],
|
declarations: [...COMPONENTS],
|
||||||
providers: []
|
providers: [...RESOLVERS]
|
||||||
})
|
})
|
||||||
export class InfoModule {}
|
export class InfoModule {}
|
||||||
|
|
|
||||||
3
src/app/pages/infos/info/resolver/index.ts
Normal file
3
src/app/pages/infos/info/resolver/index.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { PopupSetDetailResolver } from './popup-set-detail.resolver';
|
||||||
|
|
||||||
|
export const RESOLVERS = [PopupSetDetailResolver];
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import {
|
||||||
|
ActivatedRouteSnapshot,
|
||||||
|
Resolve,
|
||||||
|
RouterStateSnapshot
|
||||||
|
} from '@angular/router';
|
||||||
|
import { Observable, of } from 'rxjs';
|
||||||
|
import { PopupSet } from 'src/modules/infos/popup-set/model/popup-set.model';
|
||||||
|
import { PopupSetService } from 'src/modules/infos/popup-set/service/popup-set.service';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class PopupSetDetailResolver implements Resolve<PopupSet> {
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*/
|
||||||
|
constructor(private popupSetService: PopupSetService) {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resolver
|
||||||
|
*/
|
||||||
|
resolve(
|
||||||
|
route: ActivatedRouteSnapshot,
|
||||||
|
state: RouterStateSnapshot
|
||||||
|
): Observable<PopupSet> | Promise<PopupSet> | any {
|
||||||
|
const id = route.params.id;
|
||||||
|
if ('0' === id) {
|
||||||
|
return of({});
|
||||||
|
}
|
||||||
|
// return this.popupSetService.getUser(route.params.id);
|
||||||
|
console.log('dddddddddddddddd');
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -2,8 +2,12 @@ import { DateAudit } from 'src/modules/common/data/model/audit';
|
||||||
|
|
||||||
export interface PopupSet extends DateAudit {
|
export interface PopupSet extends DateAudit {
|
||||||
id?: number;
|
id?: number;
|
||||||
name?: string;
|
thumbNail?: string;
|
||||||
number?: string;
|
title?: string;
|
||||||
holder?: string;
|
imageWidth?: number;
|
||||||
description?: string;
|
imageHeight?: number;
|
||||||
|
imageX?: number;
|
||||||
|
imageY?: number;
|
||||||
|
openStatus?: boolean;
|
||||||
|
popupEffect?: number;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user