From 34aeeb162f2a6d1209057b0f9d3734232efbdaea Mon Sep 17 00:00:00 2001 From: byung eun park Date: Tue, 24 Sep 2019 22:43:53 +0900 Subject: [PATCH] design --- .../component/service-center.component.html | 168 +++++++++++++++++- .../component/service-center.component.scss | 117 ++++++++++++ .../component/service-center.component.ts | 84 ++++++++- .../component/service-center.data-source.ts | 64 +++++++ src/modules/infos/infos.module.ts | 3 +- .../model/service-center.model.ts | 13 ++ .../infos/service-center/service/index.ts | 3 + .../service/service-center.service.ts | 26 +++ 8 files changed, 471 insertions(+), 7 deletions(-) create mode 100644 src/app/pages/infos/info/component/service-center.data-source.ts create mode 100644 src/modules/infos/service-center/model/service-center.model.ts create mode 100644 src/modules/infos/service-center/service/index.ts create mode 100644 src/modules/infos/service-center/service/service-center.service.ts diff --git a/src/app/pages/infos/info/component/service-center.component.html b/src/app/pages/infos/info/component/service-center.component.html index af63e6f..e48d551 100644 --- a/src/app/pages/infos/info/component/service-center.component.html +++ b/src/app/pages/infos/info/component/service-center.component.html @@ -1 +1,167 @@ -

service-center works!

+
+ +
+ + + +
+ +
+ + + + + + + + +
+ + + + +
+ + + 번호 + +

{{ i }}

+ + + + + + 제목 + +

{{ serviceCenter.title }}

+ + + + + + 내용 + + +

010-3004-2001

+ + + + + + 작성자 + +

+ + 1,000,000 +

+ + + + + + 작성일 + +

+ + 5000 +

+ + + + + + 문의상태 + + +

+ + 브론즈 +

+ + + + + + 삭제버튼 + +

+ +

+ + + + + + + + + + + +
+ +
+ +
diff --git a/src/app/pages/infos/info/component/service-center.component.scss b/src/app/pages/infos/info/component/service-center.component.scss index e69de29..e65611c 100644 --- a/src/app/pages/infos/info/component/service-center.component.scss +++ b/src/app/pages/infos/info/component/service-center.component.scss @@ -0,0 +1,117 @@ +@import 'src/@fuse/scss/fuse'; + +app-service-center { + #service-center { + .top-bg { + @include media-breakpoint('xs') { + height: 224px; + } + } + + > .center { + > .header { + .search-wrapper { + width: 100%; + max-width: 480px; + border-radius: 28px; + overflow: hidden; + @include mat-elevation(1); + + @include media-breakpoint('xs') { + width: 100%; + } + + .search { + width: 100%; + height: 48px; + line-height: 48px; + padding: 0 18px; + + input { + width: 100%; + height: 48px; + min-height: 48px; + max-height: 48px; + padding: 0 16px; + border: none; + outline: none; + } + } + } + + @include media-breakpoint('xs') { + padding: 8px 0; + height: 160px !important; + min-height: 160px !important; + max-height: 160px !important; + } + } + } + } + + .mat-tab-group, + .mat-tab-body-wrapper, + .tab-content { + flex: 1 1 auto; + max-width: 100%; + } + + .service-center-table { + flex: 1 1 auto; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + overflow: auto; + -webkit-overflow-scrolling: touch; + + .mat-header-row { + min-height: 64px; + } + + .user { + position: relative; + cursor: pointer; + height: 84px; + } + + .mat-cell { + min-width: 0; + display: flex; + align-items: center; + } + + .mat-column-id { + flex: 0 1 84px; + } + + .mat-column-image { + flex: 0 1 84px; + + .product-image { + width: 52px; + height: 52px; + border: 1px solid rgba(0, 0, 0, 0.12); + } + } + + .mat-column-buttons { + flex: 0 1 80px; + } + + .quantity-indicator { + display: inline-block; + vertical-align: middle; + width: 8px; + height: 8px; + border-radius: 4px; + margin-right: 8px; + + & + span { + display: inline-block; + vertical-align: middle; + } + } + + .active-icon { + border-radius: 50%; + } + } +} diff --git a/src/app/pages/infos/info/component/service-center.component.ts b/src/app/pages/infos/info/component/service-center.component.ts index 8976900..1766de4 100644 --- a/src/app/pages/infos/info/component/service-center.component.ts +++ b/src/app/pages/infos/info/component/service-center.component.ts @@ -1,12 +1,86 @@ -import { Component, OnInit } from '@angular/core'; +import { + Component, + ElementRef, + OnDestroy, + OnInit, + ViewChild, + ViewEncapsulation, + AfterViewInit +} from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { MatPaginator } from '@angular/material/paginator'; +import { MatSort } from '@angular/material/sort'; + +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; + +import { fuseAnimations } from 'src/@fuse/animations'; + +import { ServiceCenterService } from 'src/modules/infos/service-center/service/service-center.service'; +import { ServiceCenterDataSource } from './service-center.data-source'; @Component({ selector: 'app-service-center', templateUrl: './service-center.component.html', - styleUrls: ['./service-center.component.scss'] + styleUrls: ['./service-center.component.scss'], + encapsulation: ViewEncapsulation.None, + animations: fuseAnimations }) -export class ServiceCenterComponent implements OnInit { - constructor() {} +export class ServiceCenterComponent + implements OnInit, OnDestroy, AfterViewInit { + dataSource: ServiceCenterDataSource | null; - ngOnInit() {} + displayedColumns = [ + 'idx', + 'title', + 'contents', + 'register', + 'createdAt', + 'contactStatus' + ]; + private unsubscribeAll: Subject; + + @ViewChild(MatPaginator, { static: true }) + paginator: MatPaginator; + + @ViewChild('filter', { static: true }) + filter: ElementRef; + + @ViewChild(MatSort, { static: true }) + sort: MatSort; + + constructor( + private fb: FormBuilder, + private serviceCenterService: ServiceCenterService + ) { + // Set the private defaults + this.unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to update order on changes + this.dataSource = new ServiceCenterDataSource( + this.serviceCenterService, + this.paginator, + this.sort + ); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this.unsubscribeAll.next(); + this.unsubscribeAll.complete(); + } + + ngAfterViewInit(): void {} } diff --git a/src/app/pages/infos/info/component/service-center.data-source.ts b/src/app/pages/infos/info/component/service-center.data-source.ts new file mode 100644 index 0000000..9e4541d --- /dev/null +++ b/src/app/pages/infos/info/component/service-center.data-source.ts @@ -0,0 +1,64 @@ +import { DataSource } from '@angular/cdk/table'; + +import { BehaviorSubject, Observable, merge } from 'rxjs'; +import { switchMap, map } from 'rxjs/operators'; + +import { MatPaginator } from '@angular/material/paginator'; +import { MatSort } from '@angular/material/sort'; +import { CollectionViewer } from '@angular/cdk/collections'; + +import { ServiceCenter } from 'src/modules/infos/service-center/model/service-center.model'; +import { ServiceCenterService } from 'src/modules/infos/service-center/service/service-center.service'; + +export class ServiceCenterDataSource extends DataSource { + private filterSubject = new BehaviorSubject(''); + + constructor( + private serviceCenterService: ServiceCenterService, + private paginator: MatPaginator, + private sort: MatSort + ) { + super(); + } + + // Filter + get filter(): string { + return this.filterSubject.value; + } + + set filter(filter: string) { + this.filterSubject.next(filter); + } + + connect( + collectionViewer: CollectionViewer + ): Observable { + const displayDataChanges = [ + this.paginator.page, + this.sort.sortChange, + this.filterSubject + ]; + + // return merge(...displayDataChanges).pipe( + // switchMap(() => { + // const filter = this.filter; + // const sortActive = this.sort.active; + // const sortDirection = this.sort.direction; + // const pageIndex = this.paginator.pageIndex; + // const pageSize = this.paginator.pageSize; + + // return this.userService.getAllUsers().pipe( + // map(page => { + // return page.content; + // }) + // ); + // }) + // ); + + return null; + } + + disconnect(collectionViewer: CollectionViewer): void { + this.filterSubject.complete(); + } +} diff --git a/src/modules/infos/infos.module.ts b/src/modules/infos/infos.module.ts index 18fb69b..efa26f8 100644 --- a/src/modules/infos/infos.module.ts +++ b/src/modules/infos/infos.module.ts @@ -1,6 +1,7 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; import { POPUP_SET_SERVICES } from './popup-set/service'; +import { SERVICE_CENTER_SERVICES } from './service-center/service'; @NgModule({ imports: [], @@ -17,7 +18,7 @@ export class InfosModule { public static forRoot(): ModuleWithProviders { return { ngModule: InfosRootModule, - providers: [POPUP_SET_SERVICES] + providers: [POPUP_SET_SERVICES, SERVICE_CENTER_SERVICES] }; } } diff --git a/src/modules/infos/service-center/model/service-center.model.ts b/src/modules/infos/service-center/model/service-center.model.ts new file mode 100644 index 0000000..666b849 --- /dev/null +++ b/src/modules/infos/service-center/model/service-center.model.ts @@ -0,0 +1,13 @@ +import { DateAudit } from 'src/modules/common/data/model/audit'; + +export interface ServiceCenter extends DateAudit { + id?: number; + thumbNail?: string; + title?: string; + imageWidth?: number; + imageHeight?: number; + imageX?: number; + imageY?: number; + openStatus?: boolean; + popupEffect?: number; +} diff --git a/src/modules/infos/service-center/service/index.ts b/src/modules/infos/service-center/service/index.ts new file mode 100644 index 0000000..7796c45 --- /dev/null +++ b/src/modules/infos/service-center/service/index.ts @@ -0,0 +1,3 @@ +import { ServiceCenterService } from './service-center.service'; + +export const SERVICE_CENTER_SERVICES = [ServiceCenterService]; diff --git a/src/modules/infos/service-center/service/service-center.service.ts b/src/modules/infos/service-center/service/service-center.service.ts new file mode 100644 index 0000000..7025f97 --- /dev/null +++ b/src/modules/infos/service-center/service/service-center.service.ts @@ -0,0 +1,26 @@ +import { Injectable, Inject } from '@angular/core'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; + +import { Observable } from 'rxjs'; +import { map, takeUntil } from 'rxjs/operators'; +import { ServiceCenter } from '../model/service-center.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' +}) +export class ServiceCenterService { + constructor( + @Inject(API_BASE_URL) private apiBaseUrl: string, + private httpClient: HttpClient + ) {} + + // public getBankInfos(): Observable> { + // return this.httpClient.get>( + // `${this.apiBaseUrl}/bank_info`, + // {} + // ); + // } +}