diff --git a/src/app/pages/infos/info/component/free-board.component.html b/src/app/pages/infos/info/component/free-board-list.component.html similarity index 80% rename from src/app/pages/infos/info/component/free-board.component.html rename to src/app/pages/infos/info/component/free-board-list.component.html index 3e34ff7..b58013e 100644 --- a/src/app/pages/infos/info/component/free-board.component.html +++ b/src/app/pages/infos/info/component/free-board-list.component.html @@ -60,7 +60,7 @@ 번호 - +

{{ i }}

 @@ -70,8 +70,8 @@ 제목 - -

{{ serviceCenter.title }}

+ +

{{ freeBoard.title }}

 @@ -80,22 +80,22 @@ 내용 - - -

010-3004-2001

+ +

{{ freeBoard.contents }}

+ - + 작성자 - -

- - 1,000,000 -

+ + + +

{{ freeBoard.createdBy }}

+ @@ -104,10 +104,9 @@ 작성일 - +

- - 5000 + {{ freeBoard.createdDate | date: 'yyyy.MM.dd, HH:mm:ss' }}

@@ -115,13 +114,13 @@ 문의상태상태 - +

- 브론즈 + 승인인증

@@ -129,7 +128,7 @@ 삭제버튼적용

diff --git a/src/app/pages/infos/info/component/free-board.component.scss b/src/app/pages/infos/info/component/free-board-list.component.scss similarity index 98% rename from src/app/pages/infos/info/component/free-board.component.scss rename to src/app/pages/infos/info/component/free-board-list.component.scss index 69e69f7..6feea0e 100644 --- a/src/app/pages/infos/info/component/free-board.component.scss +++ b/src/app/pages/infos/info/component/free-board-list.component.scss @@ -1,6 +1,6 @@ @import 'src/@fuse/scss/fuse'; -app-free-board { +app-free-board-list { #service-center { .top-bg { @include media-breakpoint('xs') { diff --git a/src/app/pages/infos/info/component/free-board.component.ts b/src/app/pages/infos/info/component/free-board-list.component.ts similarity index 73% rename from src/app/pages/infos/info/component/free-board.component.ts rename to src/app/pages/infos/info/component/free-board-list.component.ts index 255aced..967a762 100644 --- a/src/app/pages/infos/info/component/free-board.component.ts +++ b/src/app/pages/infos/info/component/free-board-list.component.ts @@ -15,24 +15,25 @@ import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { fuseAnimations } from 'src/@fuse/animations'; +import { FreeBoardDataSource } from './free-board-list.data-source'; +import { FreeBoardService } from 'src/modules/infos/service/free-board.service'; -import { ServiceCenterService } from 'src/modules/infos/service/service-center.service'; -import { ServiceCenterDataSource } from './service-center.data-source'; @Component({ - selector: 'app-free-board', - templateUrl: './free-board.component.html', - styleUrls: ['./free-board.component.scss'], + selector: 'app-free-board-list', + templateUrl: './free-board-list.component.html', + styleUrls: ['./free-board-list.component.scss'], encapsulation: ViewEncapsulation.None, animations: fuseAnimations }) -export class FreeBoardComponent implements OnInit, OnDestroy, AfterViewInit { - dataSource: ServiceCenterDataSource | null; +export class FreeBoardListComponent + implements OnInit, OnDestroy, AfterViewInit { + dataSource: FreeBoardDataSource | null; displayedColumns = [ 'idx', 'title', 'contents', - 'register', + 'createdBy', 'createdAt', 'contactStatus' ]; @@ -49,7 +50,7 @@ export class FreeBoardComponent implements OnInit, OnDestroy, AfterViewInit { constructor( private fb: FormBuilder, - private serviceCenterService: ServiceCenterService + private freeBoardService: FreeBoardService ) { // Set the private defaults this.unsubscribeAll = new Subject(); @@ -64,8 +65,8 @@ export class FreeBoardComponent implements OnInit, OnDestroy, AfterViewInit { */ ngOnInit(): void { // Subscribe to update order on changes - this.dataSource = new ServiceCenterDataSource( - this.serviceCenterService, + this.dataSource = new FreeBoardDataSource( + this.freeBoardService, this.paginator, this.sort ); diff --git a/src/app/pages/infos/info/component/free-board-list.data-source.ts b/src/app/pages/infos/info/component/free-board-list.data-source.ts new file mode 100644 index 0000000..15fd4a6 --- /dev/null +++ b/src/app/pages/infos/info/component/free-board-list.data-source.ts @@ -0,0 +1,73 @@ +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 { FreeBoard } from 'src/modules/infos/model/free-board.model'; +import { FreeBoardService } from 'src/modules/infos/service/free-board.service'; +import { Page } from 'src/modules/common/data/model/page'; + +export class FreeBoardDataSource extends DataSource { + private filterSubject = new BehaviorSubject(''); + private pageSubject = new BehaviorSubject>({}); + + constructor( + private freeBoardService: FreeBoardService, + private paginator: MatPaginator, + private sort: MatSort + ) { + super(); + } + + // Filter + get filter(): string { + return this.filterSubject.value; + } + + set filter(filter: string) { + this.filterSubject.next(filter); + } + + get page(): Page { + return this.pageSubject.value; + } + + set page(value: Page) { + this.pageSubject.next(value); + } + + 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.freeBoardService.getAll().pipe( + map(page => { + this.page = page; + return page.content; + }) + ); + }) + ); + } + + disconnect(collectionViewer: CollectionViewer): void { + this.filterSubject.complete(); + } +} diff --git a/src/app/pages/infos/info/component/free-board-regist.component.html b/src/app/pages/infos/info/component/free-board-regist.component.html index 3e424ce..95d8661 100644 --- a/src/app/pages/infos/info/component/free-board-regist.component.html +++ b/src/app/pages/infos/info/component/free-board-regist.component.html @@ -41,8 +41,8 @@

diff --git a/src/app/pages/infos/info/component/free-board-regist.component.ts b/src/app/pages/infos/info/component/free-board-regist.component.ts index f8b48c8..ff6b56e 100644 --- a/src/app/pages/infos/info/component/free-board-regist.component.ts +++ b/src/app/pages/infos/info/component/free-board-regist.component.ts @@ -1,10 +1,14 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; -import { FormBuilder, FormGroup } from '@angular/forms'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; +import { take } from 'rxjs/operators'; import { fuseAnimations } from 'src/@fuse/animations'; +import { FreeBoardService } from 'src/modules/infos/service/free-board.service'; +import { FreeBoard } from 'src/modules/infos/model/free-board.model'; + @Component({ selector: 'app-free-board-regist', templateUrl: './free-board-regist.component.html', @@ -15,7 +19,12 @@ import { fuseAnimations } from 'src/@fuse/animations'; export class FreeBoardRegistComponent implements OnInit, OnDestroy { private unsubscribeAll: Subject; - constructor(private fb: FormBuilder) { + registForm: FormGroup; + + constructor( + private fb: FormBuilder, + private freeboardService: FreeBoardService + ) { // Set the private defaults this.unsubscribeAll = new Subject(); } @@ -29,6 +38,10 @@ export class FreeBoardRegistComponent implements OnInit, OnDestroy { */ ngOnInit(): void { // Subscribe to update order on changes + this.registForm = this.fb.group({ + title: ['', [Validators.required]], + contents: ['', Validators.required] + }); } /** @@ -39,4 +52,20 @@ export class FreeBoardRegistComponent implements OnInit, OnDestroy { this.unsubscribeAll.next(); this.unsubscribeAll.complete(); } + + onSubmit(): void { + let board: FreeBoard = this.registForm.value; + console.log(board); + this.freeboardService + .regist(board) + .pipe(take(1)) + .subscribe( + res => { + console.log(res); + }, + err => { + console.log(err); + } + ); + } } diff --git a/src/app/pages/infos/info/component/index.ts b/src/app/pages/infos/info/component/index.ts index d9fb423..4623a76 100644 --- a/src/app/pages/infos/info/component/index.ts +++ b/src/app/pages/infos/info/component/index.ts @@ -1,6 +1,6 @@ import { ServiceCenterComponent } from './service-center.component'; import { SendMessageComponent } from './send-message.component'; -import { FreeBoardComponent } from './free-board.component'; +import { FreeBoardListComponent } from './free-board-list.component'; import { BettingRuleComponent } from './betting-rule.component'; import { PopupConfigComponent } from './popup-config.component'; import { EventRegistComponent } from './event-regist.component'; @@ -11,7 +11,7 @@ import { PopupConfigDetailComponent } from './popup-config-detail.component'; export const COMPONENTS = [ ServiceCenterComponent, SendMessageComponent, - FreeBoardComponent, + FreeBoardListComponent, BettingRuleComponent, PopupConfigComponent, EventRegistComponent, diff --git a/src/app/pages/infos/info/info-routing.module.ts b/src/app/pages/infos/info/info-routing.module.ts index 55b3d03..e38b51c 100644 --- a/src/app/pages/infos/info/info-routing.module.ts +++ b/src/app/pages/infos/info/info-routing.module.ts @@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { ServiceCenterComponent } from './component/service-center.component'; import { SendMessageComponent } from './component/send-message.component'; -import { FreeBoardComponent } from './component/free-board.component'; +import { FreeBoardListComponent } from './component/free-board-list.component'; import { BettingRuleComponent } from './component/betting-rule.component'; import { PopupConfigComponent } from './component/popup-config.component'; import { EventRegistComponent } from './component/event-regist.component'; @@ -22,7 +22,7 @@ const routes: Routes = [ }, { path: 'free-board', - component: FreeBoardComponent + component: FreeBoardListComponent }, { path: 'betting-rule', diff --git a/src/app/pages/users/user/component/user-regist/user-regist-tab.component.html b/src/app/pages/users/user/component/user-regist/user-regist-tab.component.html new file mode 100644 index 0000000..ba92776 --- /dev/null +++ b/src/app/pages/users/user/component/user-regist/user-regist-tab.component.html @@ -0,0 +1,249 @@ +
+ + +
+ + + +
+ + +
+ + +
+ + + +
+ + +
+ +
+
+ {{product.name}} +
+
+ New Product +
+
+ Product Detail +
+
+
+ + + + + +
+ + + +
+ + +
+ + + + + + + +
+ + + Product Name + + + + + Product Description + + + + + + Categories + + + + + {{category}} + cancel + + + + + + + + + + + Tags + + + + + {{tag}} + cancel + + + + + + + + +
+ + + + + +
+
+ +
+ +
+ +
+
+ +
+
+
+
+ + + + + +
+ + + Tax Excluded Price + + $  + + + + Tax Included Price + + $  + + + + Tax Rate + + %  + + + + Compared Price + + $  + Add a compare price to show next to the real price + + + +
+ + + + +
+ + + SKU + + + + + Quantity + + + +
+ + + + + +
+ +
+ + + Width + + cm + + + + Height + + cm + + + + Depth + + cm + + +
+ + + Weight + + kg + + + + Extra Shipping Fee + + $  + + +
+ + + + + + + +
+ + +
+ + +
+ + +
diff --git a/src/app/pages/users/user/component/user-regist/user-regist-tab.component.scss b/src/app/pages/users/user/component/user-regist/user-regist-tab.component.scss new file mode 100644 index 0000000..37c4be0 --- /dev/null +++ b/src/app/pages/users/user/component/user-regist/user-regist-tab.component.scss @@ -0,0 +1,62 @@ +#user-regist-tab { + .header { + .product-image { + overflow: hidden; + width: 56px; + min-width: 56px; + max-width: 56px; + height: 56px; + min-height: 56px; + max-height: 56px; + border-radius: 4px; + + img { + height: 100%; + width: auto; + max-width: none; + } + } + + .subtitle { + margin: 6px 0 0 0; + } + } + + .content { + .mat-tab-group, + .mat-tab-body-wrapper, + .tab-content { + flex: 1 1 auto; + max-width: 100%; + } + + .mat-tab-body-content { + display: flex; + } + + .mat-tab-label { + height: 64px; + } + + .product-image { + overflow: hidden; + width: 128px; + height: 128px; + margin-right: 16px; + margin-bottom: 16px; + border-radius: 4px; + + img { + height: 100%; + width: auto; + max-width: none; + } + } + + // Temporary prefix alignment fix + .mat-form-field-appearance-outline .mat-form-field-prefix, + .mat-form-field-appearance-outline .mat-form-field-suffix { + top: 0; + } + } +} diff --git a/src/app/pages/users/user/component/user-regist/user-regist-tab.component.ts b/src/app/pages/users/user/component/user-regist/user-regist-tab.component.ts new file mode 100644 index 0000000..72d5885 --- /dev/null +++ b/src/app/pages/users/user/component/user-regist/user-regist-tab.component.ts @@ -0,0 +1,161 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { Location } from '@angular/common'; +import { MatSnackBar } from '@angular/material/snack-bar'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; + +import { fuseAnimations } from 'src/@fuse/animations'; +import { FuseUtils } from 'src/@fuse/utils'; + +// import { Product } from 'app/main/apps/e-commerce/product/product.model'; +// import { EcommerceProductService } from 'app/main/apps/e-commerce/product/product.service'; + +@Component({ + selector: 'app-user-regist-tab', + templateUrl: './user-regist-tab.component.html', + styleUrls: ['./user-regist-tab.component.scss'], + encapsulation: ViewEncapsulation.None, + animations: fuseAnimations +}) +export class UserRegistTabComponent implements OnInit, OnDestroy { + // product: Product; + pageType: string; + productForm: FormGroup; + + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {EcommerceProductService} _ecommerceProductService + * @param {FormBuilder} _formBuilder + * @param {Location} _location + * @param {MatSnackBar} _matSnackBar + */ + constructor( + // private _ecommerceProductService: EcommerceProductService, + private _formBuilder: FormBuilder, + private _location: Location, + private _matSnackBar: MatSnackBar + ) { + // Set the default + // this.product = new Product(); + + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to update product on changes + // this._ecommerceProductService.onProductChanged + // .pipe(takeUntil(this._unsubscribeAll)) + // .subscribe(product => { + // if (product) { + // this.product = new Product(product); + // this.pageType = 'edit'; + // } else { + // this.pageType = 'new'; + // this.product = new Product(); + // } + // this.productForm = this.createProductForm(); + // }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Create product form + * + * @returns {FormGroup} + */ + createProductForm(): FormGroup { + // return this._formBuilder.group({ + // id: [this.product.id], + // name: [this.product.name], + // handle: [this.product.handle], + // description: [this.product.description], + // categories: [this.product.categories], + // tags: [this.product.tags], + // images: [this.product.images], + // priceTaxExcl: [this.product.priceTaxExcl], + // priceTaxIncl: [this.product.priceTaxIncl], + // taxRate: [this.product.taxRate], + // comparedPrice: [this.product.comparedPrice], + // quantity: [this.product.quantity], + // sku: [this.product.sku], + // width: [this.product.width], + // height: [this.product.height], + // depth: [this.product.depth], + // weight: [this.product.weight], + // extraShippingFee: [this.product.extraShippingFee], + // active: [this.product.active] + // }); + return null; + } + + /** + * Save product + */ + saveProduct(): void { + const data = this.productForm.getRawValue(); + data.handle = FuseUtils.handleize(data.name); + + // this._ecommerceProductService.saveProduct(data).then(() => { + // // Trigger the subscription with new data + // this._ecommerceProductService.onProductChanged.next(data); + + // // Show the success message + // this._matSnackBar.open('Product saved', 'OK', { + // verticalPosition: 'top', + // duration: 2000 + // }); + // }); + } + + /** + * Add product + */ + addProduct(): void { + const data = this.productForm.getRawValue(); + data.handle = FuseUtils.handleize(data.name); + + // this._ecommerceProductService.addProduct(data).then(() => { + // // Trigger the subscription with new data + // this._ecommerceProductService.onProductChanged.next(data); + + // // Show the success message + // this._matSnackBar.open('Product added', 'OK', { + // verticalPosition: 'top', + // duration: 2000 + // }); + + // // Change the location with new one + // this._location.go( + // 'apps/e-commerce/products/' + + // this.product.id + + // '/' + + // this.product.handle + // ); + // }); + } +} diff --git a/src/modules/infos/service/free-board.service.ts b/src/modules/infos/service/free-board.service.ts new file mode 100644 index 0000000..d1b1c2f --- /dev/null +++ b/src/modules/infos/service/free-board.service.ts @@ -0,0 +1,88 @@ +import { Injectable, Inject } from '@angular/core'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; + +import { Observable } from 'rxjs'; +import { map, takeUntil } from 'rxjs/operators'; +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'; + +import { UserDateAuditEntity } from 'src/modules/common/data/model/audit'; + +import { FreeBoard } from '../model/free-board.model'; + +@Injectable({ + providedIn: 'root' +}) +export class FreeBoardService { + constructor( + @Inject(API_BASE_URL) private apiBaseUrl: string, + private httpClient: HttpClient + ) {} + + public regist(freeBoard: FreeBoard): Observable { + // const engName = freeBoard.attachFile; + const title = freeBoard.title; + const contents = freeBoard.contents; + const owner = 1; + return this.httpClient + .post(`${this.apiBaseUrl}/free-board`, { + title, + contents, + owner + }) + .pipe( + map(res => { + console.log('free board regist response: ' + res); + return res; + }) + ); + } + + public modify(freeBoard: FreeBoard): Observable { + const id = freeBoard.id; + const title = freeBoard.title; + const contents = freeBoard.contents; + const createdBy = freeBoard.createdBy; + const owner = 1; + return this.httpClient + .put(`${this.apiBaseUrl}/free-board/${id}`, { + id, + title, + contents, + owner, + createdBy + }) + .pipe( + map(res => { + console.log('free board modify response: ' + res); + return res; + }) + ); + } + + public getById(boardId: number): Observable { + return this.httpClient.get( + `${this.apiBaseUrl}/free-board/${boardId}`, + {} + ); + } + public getAll(): Observable> { + return this.httpClient.get>( + `${this.apiBaseUrl}/free-board`, + {} + ); + } + + public removeById(boardId: number): Observable { + const id = boardId; + return this.httpClient + .delete(`${this.apiBaseUrl}/free-board/${boardId}`, {}) + .pipe( + map(res => { + console.log('free board modify response: ' + res); + return res; + }) + ); + } +} diff --git a/src/modules/infos/service/index.ts b/src/modules/infos/service/index.ts index 76d5cf1..0d1bac9 100644 --- a/src/modules/infos/service/index.ts +++ b/src/modules/infos/service/index.ts @@ -1,4 +1,9 @@ import { PopupConfigService } from './popup-config.service'; import { ServiceCenterService } from './service-center.service'; +import { FreeBoardService } from './free-board.service'; -export const SERVICES = [PopupConfigService, ServiceCenterService]; +export const SERVICES = [ + PopupConfigService, + ServiceCenterService, + FreeBoardService +];