totopia/totopia-backend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

popupset 화면

Browse Source
This commit is contained in:
byung eun park 2019-09-24 16:58:43 +09:00
parent 9d7a244d5d
commit bb3c3f9413
11 changed files with 438 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/layout/components/toolbar/toolbar.component.html
View File

@ -1,3 +1,4 @@
<!--
<mat-toolbar class="p-0 mat-elevation-z1">
<div fxFlex fxFill fxLayout="row" fxLayoutAlign="start center">
<div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
@ -28,6 +29,7 @@
</div>
</div>
<div class="" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="start center">
<button mat-button [matMenuTriggerFor]="userMenu" class="user-button">
<div fxLayout="row" fxLayoutAlign="center center">
@ -123,5 +125,6 @@
<mat-icon class="secondary-text">menu</mat-icon>
</button>
</div>
</div>
</mat-toolbar>
</mat-toolbar>-->

72
src/app/navigation/navigation.ts
View File

@ -378,41 +378,41 @@ export const navigation: FuseNavigation[] = [
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'
// }
// }
// ]
// }
];

4
src/app/pages/infos/info/component/index.ts
View File

@ -6,6 +6,7 @@ import { PopupSetComponent } from './popup-set.component';
import { EventRegistComponent } from './event-regist.component';
import { NoticeBoardComponent } from './notice-board.component';
import { FreeBoardRegistComponent } from './free-board-regist.component';
import { PopupSetDetailComponent } from './popup-set-detail.component';
export const COMPONENTS = [
ServiceCenterComponent,
@ -15,5 +16,6 @@ export const COMPONENTS = [
PopupSetComponent,
EventRegistComponent,
NoticeBoardComponent,
FreeBoardRegistComponent
FreeBoardRegistComponent,
PopupSetDetailComponent
];

293
src/app/pages/infos/info/component/popup-set.component.html
View File

@ -46,109 +46,200 @@
<!-- CONTENT CARD -->
<div class="content-card">
<mat-table
class="popup-set-table"
#table
[dataSource]="dataSource"
matSort
[@animateStagger]="{ value: '50' }"
fusePerfectScrollbar
>
<!-- ID Column -->
<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
<form name="popupSetForm" [formGroup]="mtformgroup" novalidate>
<mat-table
class="popup-set-table"
#table
[dataSource]="dataSource"
matSort
[@animateStagger]="{ value: '50' }"
fusePerfectScrollbar
formArrayName="formarray"
>
</mat-row>
</mat-table>
<!-- idx Column -->
<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
#paginator
[length]="10"

45
src/app/pages/infos/info/component/popup-set.component.ts
View File

@ -9,12 +9,14 @@ import {
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { DataSource } from '@angular/cdk/collections';
import { FormBuilder, FormGroup } from '@angular/forms';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
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({
selector: 'app-popup-set',
templateUrl: './popup-set.component.html',
@ -23,30 +25,38 @@ import { fuseAnimations } from 'src/@fuse/animations';
animations: fuseAnimations
})
export class PopupSetComponent implements OnInit, OnDestroy {
dataSource: null;
dataSource: PopupSetDataSource = new PopupSetDataSource(this.popupSetService);
displayedColumns = [
'id',
'reference',
'customer',
'total',
'payment',
'status',
'date'
'idx',
'thumbNail',
'title',
'imageWidth',
'imageHegith',
'imageX',
'imageY',
'openStatus',
'saveBtn'
];
@ViewChild(MatPaginator, { static: true })
paginator: MatPaginator;
public mtformgroup: FormGroup;
public mtformarray: FormArray;
@ViewChild('filter', { static: true })
filter: ElementRef;
// @ViewChild(MatPaginator, { static: true })
// paginator: MatPaginator;
@ViewChild(MatSort, { static: true })
sort: MatSort;
// @ViewChild('filter', { static: true })
// filter: ElementRef;
// @ViewChild(MatSort, { static: true })
// sort: MatSort;
// Private
private unsubscribeAll: Subject<any>;
constructor(private fb: FormBuilder) {
constructor(
private fb: FormBuilder,
private popupSetService: PopupSetService
) {
// Set the private defaults
this.unsubscribeAll = new Subject();
}
@ -60,6 +70,9 @@ export class PopupSetComponent implements OnInit, OnDestroy {
*/
ngOnInit(): void {
// 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
View 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();
}
}

9
src/app/pages/infos/info/info-routing.module.ts
View File

@ -8,6 +8,8 @@ import { PopupSetComponent } from './component/popup-set.component';
import { EventRegistComponent } from './component/event-regist.component';
import { NoticeBoardComponent } from './component/notice-board.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 = [
{
@ -30,6 +32,13 @@ const routes: Routes = [
path: 'popup-set',
component: PopupSetComponent
},
{
path: 'popup-set/:id',
component: PopupSetDetailComponent,
resolve: {
popupSet: PopupSetDetailResolver
}
},
{
path: 'event-regist',
component: EventRegistComponent

3
src/app/pages/infos/info/info.module.ts
View File

@ -19,6 +19,7 @@ import { FuseWidgetModule } from 'src/@fuse/components/widget/widget.module';
import { InfoRoutingModule } from './info-routing.module';
import { COMPONENTS } from './component';
import { RESOLVERS } from './resolver';
@NgModule({
imports: [
@ -41,6 +42,6 @@ import { COMPONENTS } from './component';
InfoRoutingModule
],
declarations: [...COMPONENTS],
providers: []
providers: [...RESOLVERS]
})
export class InfoModule {}

3
src/app/pages/infos/info/resolver/index.ts Normal file
View File

@ -0,0 +1,3 @@
import { PopupSetDetailResolver } from './popup-set-detail.resolver';
export const RESOLVERS = [PopupSetDetailResolver];

33
src/app/pages/infos/info/resolver/popup-set-detail.resolver.ts Normal file
View File

@ -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;
}
}

12
src/modules/infos/popup-set/model/popup-set.model.ts
View File

@ -2,8 +2,12 @@ import { DateAudit } from 'src/modules/common/data/model/audit';
export interface PopupSet extends DateAudit {
id?: number;
name?: string;
number?: string;
holder?: string;
description?: string;
thumbNail?: string;
title?: string;
imageWidth?: number;
imageHeight?: number;
imageX?: number;
imageY?: number;
openStatus?: boolean;
popupEffect?: number;
}