From b9b9514bb3308c4b6e0da2397d35ce6ab083b4a8 Mon Sep 17 00:00:00 2001 From: Park Byung Eun Date: Wed, 27 Jul 2022 09:07:05 +0000 Subject: [PATCH] =?UTF-8?q?=ED=8C=9D=EC=97=85=20=EC=83=81=EC=84=B8=20?= =?UTF-8?q?=EB=B0=8F=20=EC=88=98=EC=A0=95=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/board/popup/components/index.ts | 3 +- .../popup/components/redit.component.html | 327 ++++++++++++++---- .../board/popup/components/redit.component.ts | 171 ++++++--- .../modules/admin/board/popup/popup.module.ts | 4 + .../admin/board/popup/popup.routing.ts | 27 +- 5 files changed, 393 insertions(+), 139 deletions(-) diff --git a/src/app/modules/admin/board/popup/components/index.ts b/src/app/modules/admin/board/popup/components/index.ts index 04759eb..d187813 100644 --- a/src/app/modules/admin/board/popup/components/index.ts +++ b/src/app/modules/admin/board/popup/components/index.ts @@ -1,3 +1,4 @@ import { ListComponent } from './list.component'; +import { ReditComponent } from './redit.component'; -export const COMPONENTS = [ListComponent]; +export const COMPONENTS = [ListComponent, ReditComponent]; 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 eb397d8..844b557 100644 --- a/src/app/modules/admin/board/popup/components/redit.component.html +++ b/src/app/modules/admin/board/popup/components/redit.component.html @@ -1,83 +1,260 @@
-
-
-
- -
-
- 고객센터템플릿 {{ !targetTemplate ? "등록" : "수정" }} -
-
-
- + + + +
+ - -
- - 제목 - - -
- - -
- - 순번 - - -
- - - - - 내용 - - -
+ +
+
+ +
+
+ +
-
-
- - - - -
+
+ +
+
+ + +
+ +
사이트선택
+
{{ contact.title }}
+
+ + + + +
+ +
팝업사이즈
+
+ +
+
+ • + {{ email.label }} +
+
+ • + 180 +
+
+ +
+
+ + + + +
+ +
팝업좌표
+
+ +
+
+ • + {{ + phoneNumber.phoneNumber + }} +
+
+ • + 180 +
+
+ +
+
+ + + + +
+
팝업제목
+
{{ contact.address }}
+
+ + + + +
팝업내용
+
+ + +
+
+ + + +
+ +
사용여부
+
+ {{ contact.birthday | date: "longDate" }} +
+
+ +
-
+ + + + + +
+
+
+ +
+ + 사이트 + + + + {{ category.name }} + + + + +
+ + +
+ + 팝업 가로 사이즈 + + + + 팝업 세로 사이즈 + + +
+ +
+ + 팝업 좌표 TOP + + + + 팝업 좌표 LEFT + + +
+ + +
+ + 팝업제목 + + + +
+ + +
+ + 팝업내용 + + + +
+ +
+ + 표시여부 + + + + {{ 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 0816d2f..25c34cc 100644 --- a/src/app/modules/admin/board/popup/components/redit.component.ts +++ b/src/app/modules/admin/board/popup/components/redit.component.ts @@ -8,35 +8,17 @@ import { ViewChild, ViewEncapsulation, } from '@angular/core'; -import { - FormBuilder, - FormControl, - FormGroup, - Validators, -} from '@angular/forms'; -import { MatCheckboxChange } from '@angular/material/checkbox'; +import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; -import { - debounceTime, - map, - merge, - Observable, - Subject, - switchMap, - takeUntil, -} from 'rxjs'; +import { Subject, takeUntil } from 'rxjs'; import { fuseAnimations } from '@fuse/animations'; import { FuseConfirmationService } from '@fuse/services/confirmation'; -import { User } from 'app/modules/admin/member/user/models/user'; -import { UserService } from 'app/modules/admin/member/user/services/user.service'; import { ActivatedRoute, Router } from '@angular/router'; -import { CustomerTemplateService } from '../services/customer-template.service'; -import { CustomerTemplate } from '../models/ customer-template'; @Component({ - selector: 'customer-template-redit', + selector: 'popup-redit', templateUrl: './redit.component.html', styles: [ /* language=SCSS */ @@ -68,10 +50,10 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy { isLoading = false; searchInputControl = new FormControl(); - targetTemplateForm!: FormGroup; - selectedUser?: User; - - targetTemplate?: CustomerTemplate | undefined; + contactForm!: FormGroup; + editMode: boolean = false; + contact = contacts[0]; + categories = categories; private _unsubscribeAll: Subject = new Subject(); @@ -82,8 +64,6 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy { private _changeDetectorRef: ChangeDetectorRef, private _fuseConfirmationService: FuseConfirmationService, private _formBuilder: FormBuilder, - private _customerTemplateService: CustomerTemplateService, - private _userService: UserService, private _route: ActivatedRoute, private _router: Router ) {} @@ -96,31 +76,19 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy { * On init */ ngOnInit(): void { - this.targetTemplateForm = this._formBuilder.group({ + // Create the contact form + this.contactForm = this._formBuilder.group({ + id: [''], + name: [''], + emails: this._formBuilder.array([]), + phoneNumbers: this._formBuilder.array([]), title: [''], - order: [''], - content: [''], + company: [''], + birthday: [null], + address: [null], + notes: [null], + tags: [[]], }); - const idx = this._route.snapshot.params['id']; - - // Get the User - this._customerTemplateService.customerTemplate$ - .pipe(takeUntil(this._unsubscribeAll)) - .subscribe((targetTemplate: CustomerTemplate | undefined) => { - this.targetTemplate = targetTemplate; - - if (!this.targetTemplate) { - return; - } - - this.targetTemplateForm.patchValue({ - title: this.targetTemplate.title, - content: this.targetTemplate.content, - order: this.targetTemplate.order, - }); - // Mark for check - this._changeDetectorRef.markForCheck(); - }); } /** @@ -156,14 +124,36 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy { * @param productId */ __toggleDetails(productId: string): void {} - __onClickeCancel(): void { - let url: string = 'board/customer-template/'; - this._router.navigateByUrl(url); - } - __onClickReditBtn(targetTemplate: CustomerTemplate | undefined): void { - console.log('click: ', targetTemplate?.id); - } + /** + * Toggle edit mode + * + * @param editMode + */ + toggleEditMode(editMode: boolean | null = null): void { + if (editMode === null) { + this.editMode = !this.editMode; + } else { + this.editMode = editMode; + } + + // Mark for check + this._changeDetectorRef.markForCheck(); + } + /** + * Get country info by iso code + * + * @param iso + */ + getCountryByIso(iso: string): Country { + return { + id: '19430ee3-b0fe-4987-a7c8-74453ad5504d', + iso: 'af', + name: 'Afghanistan', + code: '+93', + flagImagePos: '-1px -3180px', + } as Country; + } /** * Track by function for ngFor loops * @@ -174,3 +164,70 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy { return item.id || index; } } + +export const contacts = [ + { + id: 'cd5fa417-b667-482d-b208-798d9da3213c', + avatar: 'assets/images/avatars/male-01.jpg', + background: 'assets/images/cards/14-640x480.jpg', + name: 'Dejesus Michael', + emails: [ + { + email: 'dejesusmichael@mail.org', + label: '가로', + }, + { + email: 'michael.dejesus@vitricomp.io', + label: '세로', + }, + ], + phoneNumbers: [ + { + country: 'bs', + phoneNumber: 'TOP', + label: 'Mobile', + }, + { + country: 'bs', + phoneNumber: 'LEFT', + label: 'Work', + }, + ], + title: 'Track Service Worker', + company: 'Vitricomp', + birthday: '1975-01-10T12:00:00.000Z', + address: '279 Independence Avenue, Calvary, Guam, PO4127', + notes: + '

Do incididunt cillum duis eu pariatur enim proident minim officia amet proident consequat consequat qui consequat magna magna occaecat aliquip culpa pariatur velit nisi nostrud irure eu ullamco exercitation sint.

Cillum deserunt laborum laborum quis nisi enim et aliquip labore excepteur in excepteur labore amet in ipsum ipsum nostrud deserunt lorem nisi voluptate dolor minim enim ut eu cupidatat enim.

', + tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'], + }, +]; + +export interface Country { + id: string; + iso: string; + name: string; + code: string; + flagImagePos: string; +} + +export const categories = [ + { + id: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + parentId: null, + name: 'test.com', + slug: 'mens', + }, + { + id: '07986d93-d4eb-4de1-9448-2538407f7254', + parentId: null, + name: 'kgon.com', + slug: 'ladies', + }, + { + id: 'ad12aa94-3863-47f8-acab-a638ef02a3e9', + parentId: null, + name: 'kkk.com', + slug: 'unisex', + }, +]; diff --git a/src/app/modules/admin/board/popup/popup.module.ts b/src/app/modules/admin/board/popup/popup.module.ts index 619b1ac..2e38a79 100644 --- a/src/app/modules/admin/board/popup/popup.module.ts +++ b/src/app/modules/admin/board/popup/popup.module.ts @@ -13,6 +13,8 @@ import { MatSelectModule } from '@angular/material/select'; import { MatTooltipModule } from '@angular/material/tooltip'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatTableModule } from '@angular/material/table'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatMenuModule } from '@angular/material/menu'; import { TranslocoModule } from '@ngneat/transloco'; @@ -41,6 +43,8 @@ import { popupRoutes } from './popup.routing'; MatTooltipModule, MatCheckboxModule, MatTableModule, + MatDividerModule, + MatMenuModule, ], }) export class PopupModule {} diff --git a/src/app/modules/admin/board/popup/popup.routing.ts b/src/app/modules/admin/board/popup/popup.routing.ts index 4a53e31..6492012 100644 --- a/src/app/modules/admin/board/popup/popup.routing.ts +++ b/src/app/modules/admin/board/popup/popup.routing.ts @@ -1,24 +1,39 @@ import { Route } from '@angular/router'; import { ListComponent } from './components/list.component'; -import { ViewComponent } from '../../member/user/components/view.component'; import { PopupsResolver } from './resolvers/popup.resolver'; import { UserResolver } from '../../member/user/resolvers/user.resolver'; +import { ReditComponent } from './components/redit.component'; export const popupRoutes: Route[] = [ { path: '', + pathMatch: 'full', + redirectTo: 'list', + }, + + { + path: 'list', component: ListComponent, resolve: { popups: PopupsResolver, }, }, { - path: ':id', - component: ViewComponent, - resolve: { - users: UserResolver, - }, + path: 'redit', + component: ReditComponent, }, + + // { + // path: 'redit', + // component: ReditComponent, + // }, + // { + // path: 'redit/:id', + // component: ReditComponent, + // resolve: { + // customerTemplates: CustomerTemplateResolver, + // }, + // }, ];