diff --git a/src/app/mock-api/apps/board/popup/api.ts b/src/app/mock-api/apps/board/popup/api.ts index 2cdc93a..b9dd8dc 100644 --- a/src/app/mock-api/apps/board/popup/api.ts +++ b/src/app/mock-api/apps/board/popup/api.ts @@ -42,19 +42,19 @@ export class BoardPopupMockApi { let popups: any[] | null = cloneDeep(this._popups); // Sort the popups - if (sort === 'sku' || sort === 'name' || sort === 'active') { - popups.sort((a, b) => { - const fieldA = a[sort].toString().toUpperCase(); - const fieldB = b[sort].toString().toUpperCase(); - return order === 'asc' - ? fieldA.localeCompare(fieldB) - : fieldB.localeCompare(fieldA); - }); - } else { - popups.sort((a, b) => - order === 'asc' ? a[sort] - b[sort] : b[sort] - a[sort] - ); - } + // if (sort === 'sku' || sort === 'name' || sort === 'active') { + // popups.sort((a, b) => { + // const fieldA = a[sort].toString().toUpperCase(); + // const fieldB = b[sort].toString().toUpperCase(); + // return order === 'asc' + // ? fieldA.localeCompare(fieldB) + // : fieldB.localeCompare(fieldA); + // }); + // } else { + // popups.sort((a, b) => + // order === 'asc' ? a[sort] - b[sort] : b[sort] - a[sort] + // ); + // } // If search exists... if (search) { diff --git a/src/app/mock-api/apps/board/popup/data.ts b/src/app/mock-api/apps/board/popup/data.ts index 05cfd91..cd154e0 100644 --- a/src/app/mock-api/apps/board/popup/data.ts +++ b/src/app/mock-api/apps/board/popup/data.ts @@ -2,6 +2,7 @@ export const popups = [ { + id: '1', index: 10, title: '악성배팅 제제 안내', widthSize: 500, @@ -10,5 +11,66 @@ export const popups = [ leftMargin: 100, site: 'all', useOrNot: 'N', + content: 'test', + }, + { + id: '2', + index: 10, + title: '악성배팅 제제 안내2', + widthSize: 500, + heightSize: 830, + topMargin: 100, + leftMargin: 100, + site: 'all', + useOrNot: 'N', + content: 'test', + }, + { + id: '3', + index: 10, + title: '악성배팅 제제 안내3', + widthSize: 500, + heightSize: 830, + topMargin: 100, + leftMargin: 100, + site: 'all', + useOrNot: 'N', + content: 'test', + }, + { + id: '4', + index: 10, + title: '악성배팅 제제 안내4', + widthSize: 500, + heightSize: 830, + topMargin: 100, + leftMargin: 100, + site: 'all', + useOrNot: 'N', + content: 'test', + }, + { + id: '5', + index: 10, + title: '악성배팅 제제 안내5', + widthSize: 500, + heightSize: 830, + topMargin: 100, + leftMargin: 100, + site: 'all', + useOrNot: 'N', + content: 'test', + }, + { + id: '6', + index: 10, + title: '악성배팅 제제 안내6', + widthSize: 500, + heightSize: 830, + topMargin: 100, + leftMargin: 100, + site: 'all', + useOrNot: 'N', + content: 'test', }, ]; diff --git a/src/app/modules/admin/board/popup/components/index.ts b/src/app/modules/admin/board/popup/components/index.ts index d187813..dfb4808 100644 --- a/src/app/modules/admin/board/popup/components/index.ts +++ b/src/app/modules/admin/board/popup/components/index.ts @@ -1,4 +1,5 @@ import { ListComponent } from './list.component'; +import { ViewComponent } from './view.component'; import { ReditComponent } from './redit.component'; -export const COMPONENTS = [ListComponent, ReditComponent]; +export const COMPONENTS = [ListComponent, ViewComponent, ReditComponent]; diff --git a/src/app/modules/admin/board/popup/components/list.component.html b/src/app/modules/admin/board/popup/components/list.component.html index d300d76..376bda2 100644 --- a/src/app/modules/admin/board/popup/components/list.component.html +++ b/src/app/modules/admin/board/popup/components/list.component.html @@ -28,7 +28,12 @@ 제목 - + {{ info.title }} @@ -98,7 +103,12 @@ 비고
- +
diff --git a/src/app/modules/admin/board/popup/components/list.component.ts b/src/app/modules/admin/board/popup/components/list.component.ts index 8180d66..7be1a98 100644 --- a/src/app/modules/admin/board/popup/components/list.component.ts +++ b/src/app/modules/admin/board/popup/components/list.component.ts @@ -179,14 +179,24 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy { // @ Public methods // ----------------------------------------------------------------------------------------------------- - viewUserDetail(id: string): void { - let url: string = 'member/user/' + id; - this.router.navigateByUrl(url); - } // ----------------------------------------------------------------------------------------------------- // @ Private methods // ----------------------------------------------------------------------------------------------------- + __viewPopupDetail(id: string): void { + let url: string = 'board/popup/view/' + id; + this.router.navigateByUrl(url); + } + + __createPopup(): void { + let url: string = 'board/popup/redit/'; + this.router.navigateByUrl(url); + } + + __modifyPopup(id: string): void { + let url: string = 'board/popup/redit/' + id; + this.router.navigateByUrl(url); + } /** * Create product */ diff --git a/src/app/modules/admin/board/popup/components/redit.component.html b/src/app/modules/admin/board/popup/components/redit.component.html index 844b557..f64a01b 100644 --- a/src/app/modules/admin/board/popup/components/redit.component.html +++ b/src/app/modules/admin/board/popup/components/redit.component.html @@ -1,260 +1,127 @@
- - - -
- - - -
-
- -
-
- -
- -
- - -
-
-
- - -
- -
사이트선택
-
{{ contact.title }}
-
- - - - -
- -
팝업사이즈
-
- -
-
- • - {{ email.label }} -
-
- • - 180 -
-
- -
-
- - - - -
- -
팝업좌표
-
- -
-
- • - {{ - phoneNumber.phoneNumber - }} -
-
- • - 180 -
-
- -
-
- - - - -
-
팝업제목
-
{{ contact.address }}
-
- - - - -
팝업내용
-
- - -
-
- - - -
- -
사용여부
-
- {{ contact.birthday | date: "longDate" }} -
-
- -
-
-
- - - - -
-
-
- -
- - 사이트 - - - - {{ category.name }} - - - - -
+ +
+
+ + +
+ + 사이트 + + + + {{ category.name }} + + + + +
- -
- - 팝업 가로 사이즈 - - - - 팝업 세로 사이즈 - - -
- -
- - 팝업 좌표 TOP - - - - 팝업 좌표 LEFT - - -
+ +
+ + 팝업 가로 사이즈 + + + + 팝업 세로 사이즈 + + +
+ +
+ + 팝업 좌표 TOP + + + + 팝업 좌표 LEFT + + +
- -
- - 팝업제목 - - - -
+ +
+ + 팝업제목 + + + +
- -
- - 팝업내용 - - - -
- -
- - 표시여부 - - - - {{ category.name }} - - - - -
- - -
+
+ - - - - - - -
- -
+ 팝업내용 + + + +
+ +
+ + 표시여부 + + + + {{ category.name }} + + + + +
+ + +
+ + + + + + +
+
- +
diff --git a/src/app/modules/admin/board/popup/components/redit.component.ts b/src/app/modules/admin/board/popup/components/redit.component.ts index 25c34cc..cb8f2f3 100644 --- a/src/app/modules/admin/board/popup/components/redit.component.ts +++ b/src/app/modules/admin/board/popup/components/redit.component.ts @@ -8,6 +8,8 @@ import { ViewChild, ViewEncapsulation, } from '@angular/core'; + +import { ActivatedRoute, Router } from '@angular/router'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; @@ -15,7 +17,8 @@ import { Subject, takeUntil } from 'rxjs'; import { fuseAnimations } from '@fuse/animations'; import { FuseConfirmationService } from '@fuse/services/confirmation'; -import { ActivatedRoute, Router } from '@angular/router'; +import { Popup } from '../models/popup'; +import { PopupService } from '../services/popup.service'; @Component({ selector: 'popup-redit', @@ -50,10 +53,11 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy { isLoading = false; searchInputControl = new FormControl(); - contactForm!: FormGroup; + popupForm!: FormGroup; editMode: boolean = false; contact = contacts[0]; categories = categories; + popup: Popup | undefined; private _unsubscribeAll: Subject = new Subject(); @@ -65,7 +69,8 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy { private _fuseConfirmationService: FuseConfirmationService, private _formBuilder: FormBuilder, private _route: ActivatedRoute, - private _router: Router + private _router: Router, + private _popupService: PopupService ) {} // ----------------------------------------------------------------------------------------------------- @@ -77,18 +82,32 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy { */ ngOnInit(): void { // Create the contact form - this.contactForm = this._formBuilder.group({ + this.popupForm = this._formBuilder.group({ id: [''], - name: [''], - emails: this._formBuilder.array([]), - phoneNumbers: this._formBuilder.array([]), + index: [''], title: [''], - company: [''], - birthday: [null], - address: [null], - notes: [null], - tags: [[]], + widthSize: [''], + heightSize: [''], + topMargin: [''], + leftMargin: [''], + site: [''], + useOrNot: [''], + content: [''], }); + + this._popupService.popup$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((popup: Popup | undefined) => { + if (!popup) { + return; + } + + this.popup = popup; + this.popupForm.patchValue(popup); + + // Mark for check + this._changeDetectorRef.markForCheck(); + }); } /** diff --git a/src/app/modules/admin/board/popup/components/view.component.html b/src/app/modules/admin/board/popup/components/view.component.html new file mode 100644 index 0000000..cdfc715 --- /dev/null +++ b/src/app/modules/admin/board/popup/components/view.component.html @@ -0,0 +1,143 @@ +
+ + + +
+ + + +
+
+ +
+
+ +
+ +
+ + +
+
+
+ + +
+ +
사이트선택
+
{{ popup?.site }}
+
+ + + + +
+ +
팝업사이즈
+
+
+
+ • + 가로 +
+
+ • + {{ popup?.widthSize }} +
+
+
+
+ • + 세로 +
+
+ • + {{ popup?.heightSize }} +
+
+
+
+ + + + +
+ +
팝업좌표
+
+
+
+ • + TOP +
+
+ • + {{ popup?.topMargin }} +
+
+
+
+ • + LEFT +
+
+ • + {{ popup?.leftMargin }} +
+
+
+
+ + + + +
+
팝업제목
+
{{ popup?.title }}
+
+ + + + +
팝업내용
+
+ + +
+
+ + + +
+ +
사용여부
+
+ {{ popup?.useOrNot }} +
+
+ +
+
+
+
diff --git a/src/app/modules/admin/board/popup/components/view.component.ts b/src/app/modules/admin/board/popup/components/view.component.ts new file mode 100644 index 0000000..fe3e925 --- /dev/null +++ b/src/app/modules/admin/board/popup/components/view.component.ts @@ -0,0 +1,113 @@ +import { + AfterViewInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + OnDestroy, + OnInit, + ViewEncapsulation, +} from '@angular/core'; +import { FormBuilder } from '@angular/forms'; +import { Subject, takeUntil } from 'rxjs'; +import { fuseAnimations } from '@fuse/animations'; +import { FuseConfirmationService } from '@fuse/services/confirmation'; + +import { Popup } from '../models/popup'; +import { PopupService } from '../services/popup.service'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'popup-view', + templateUrl: './view.component.html', + styles: [ + /* language=SCSS */ + ` + .inventory-grid { + grid-template-columns: 60px auto 40px; + + @screen sm { + grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px; + } + + @screen md { + grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px; + } + + @screen lg { + grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px; + } + } + `, + ], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + animations: fuseAnimations, +}) +export class ViewComponent implements OnInit, AfterViewInit, OnDestroy { + isLoading = false; + + private _unsubscribeAll: Subject = new Subject(); + + popup: Popup | undefined; + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _fuseConfirmationService: FuseConfirmationService, + private _formBuilder: FormBuilder, + private _popupService: PopupService, + private router: Router + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + this._popupService.popup$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((popup: Popup | undefined) => { + if (!popup) { + return; + } + + this.popup = popup; + // Mark for check + this._changeDetectorRef.markForCheck(); + }); + } + + /** + * After view init + */ + ngAfterViewInit(): void {} + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle edit mode + * + * @param editMode + */ + toggleEditMode(): void {} +} diff --git a/src/app/modules/admin/board/popup/models/popup.ts b/src/app/modules/admin/board/popup/models/popup.ts index 7c342ce..9747767 100644 --- a/src/app/modules/admin/board/popup/models/popup.ts +++ b/src/app/modules/admin/board/popup/models/popup.ts @@ -2,6 +2,7 @@ export interface Popup { id?: string; index?: number; title?: string; + content?: string; widthSize?: number; heightSize?: number; topMargin?: number; diff --git a/src/app/modules/admin/board/popup/popup.routing.ts b/src/app/modules/admin/board/popup/popup.routing.ts index 6492012..91e20c9 100644 --- a/src/app/modules/admin/board/popup/popup.routing.ts +++ b/src/app/modules/admin/board/popup/popup.routing.ts @@ -2,9 +2,9 @@ import { Route } from '@angular/router'; import { ListComponent } from './components/list.component'; -import { PopupsResolver } from './resolvers/popup.resolver'; -import { UserResolver } from '../../member/user/resolvers/user.resolver'; +import { PopupsResolver, PopupResolver } from './resolvers/popup.resolver'; import { ReditComponent } from './components/redit.component'; +import { ViewComponent } from './components/view.component'; export const popupRoutes: Route[] = [ { @@ -24,6 +24,21 @@ export const popupRoutes: Route[] = [ path: 'redit', component: ReditComponent, }, + { + path: 'redit/:id', + component: ReditComponent, + resolve: { + popup: PopupResolver, + }, + }, + + { + path: 'view/:id', + component: ViewComponent, + resolve: { + popup: PopupResolver, + }, + }, // { // path: 'redit',