팝업 상세 및 수정 추가

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];

src/app/modules/admin/board/popup/components/redit.component.html

@@ -1,83 +1,260 @@
 <div class="flex flex-col flex-auto min-w-0">
-  <div class="flex-auto border-t -mt-px pt-4 sm:pt-6">
+  <!-- View mode -->
-    <div class="w-full max-w-screen-xl mx-auto">
+  <ng-container *ngIf="!editMode">
-      <div class="grid grid-cols-1 sm:grid-cols-6 gap-6 w-full min-w-0">
+    <!-- Header -->
-        <!-- Budget distribution -->
     <div
-          class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
+      class="relative w-full h-40 sm:h-16 mt-10 x-8 sm:px-12 bg-accent-100 dark:bg-accent-700"
     >
-          <div class="text-lg font-medium tracking-tight leading-6 truncate">
+      <!-- Background -->
-            고객센터템플릿 {{ !targetTemplate ? "등록" : "수정" }}
-          </div>
-          <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
-            <form
-              [formGroup]="targetTemplateForm"
-              autocomplete="off"
-              class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
-            >
-              <mat-divider class="mt-6 mb-8"></mat-divider>
 
-              <!-- Title -->
+      <!-- Close button -->
-              <div>
+      <div
-                <mat-form-field
+        class="flex items-center justify-end w-full max-w-3xl mx-auto pt-6"
-                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+      ></div>
+    </div>
+    <!-- Contact -->
+    <div
+      class="relative flex flex-col flex-auto items-center p-6 pt-0 sm:p-12 sm:pt-0"
     >
-                  <mat-label>제목</mat-label>
+      <div class="w-full max-w-3xl">
-                  <input matInput [formControlName]="'title'" />
+        <!-- Avatar and actions -->
+        <div class="flex flex-auto items-end -mt-16">
+          <!-- Actions -->
+          <div class="flex items-center ml-auto mb-1">
+            <button mat-stroked-button (click)="toggleEditMode(true)">
+              <mat-icon
+                class="icon-size-5"
+                [svgIcon]="'heroicons_solid:pencil-alt'"
+              ></mat-icon>
+              <span class="ml-2">수정</span>
+            </button>
+            <button mat-stroked-button (click)="toggleEditMode(true)">
+              <mat-icon
+                class="icon-size-5"
+                [svgIcon]="'heroicons_solid:pencil-alt'"
+              ></mat-icon>
+              <span class="ml-2">삭제</span>
+            </button>
+          </div>
+        </div>
+        <div class="flex flex-col mt-4 pt-6 border-t space-y-8">
+          <!-- Title -->
+          <ng-container *ngIf="contact.title">
+            <div class="flex sm:items-center">
+              <!-- <mat-icon [svgIcon]="'heroicons_outline:briefcase'"></mat-icon> -->
+              <div class="ml-6 leading-6">사이트선택</div>
+              <div class="ml-6 leading-6">{{ contact.title }}</div>
+            </div>
+          </ng-container>
+
+          <!-- 팝업사이즈 -->
+          <ng-container *ngIf="contact.emails.length">
+            <div class="flex">
+              <!-- <mat-icon [svgIcon]="'heroicons_outline:mail'"></mat-icon> -->
+              <div class="ml-6 leading-6">팝업사이즈</div>
+              <div class="min-w-0 ml-6 space-y-1">
+                <ng-container
+                  *ngFor="let email of contact.emails; trackBy: __trackByFn"
+                >
+                  <div class="flex items-center leading-6">
+                    <div class="text-md truncate text-secondary">
+                      <span class="mx-2">&bull;</span>
+                      <span class="font-medium">{{ email.label }}</span>
+                    </div>
+                    <div class="text-md truncate text-secondary">
+                      <span class="mx-2">&bull;</span>
+                      <span class="font-medium">180</span>
+                    </div>
+                  </div>
+                </ng-container>
+              </div>
+            </div>
+          </ng-container>
+
+          <!-- 팝업좌표 -->
+          <ng-container *ngIf="contact.phoneNumbers.length">
+            <div class="flex">
+              <!-- <mat-icon [svgIcon]="'heroicons_outline:phone'"></mat-icon> -->
+              <div class="ml-6 leading-6">팝업좌표</div>
+              <div class="min-w-0 ml-6 space-y-1">
+                <ng-container
+                  *ngFor="
+                    let phoneNumber of contact.phoneNumbers;
+                    trackBy: __trackByFn
+                  "
+                >
+                  <div class="flex items-center leading-6">
+                    <div class="text-md truncate text-secondary">
+                      <span class="mx-2">&bull;</span>
+                      <span class="font-medium">{{
+                        phoneNumber.phoneNumber
+                      }}</span>
+                    </div>
+                    <div class="text-md truncate text-secondary">
+                      <span class="mx-2">&bull;</span>
+                      <span class="font-medium">180</span>
+                    </div>
+                  </div>
+                </ng-container>
+              </div>
+            </div>
+          </ng-container>
+
+          <!-- Address -->
+          <ng-container *ngIf="contact.address">
+            <div class="flex sm:items-center">
+              <div class="ml-6 leading-6">팝업제목</div>
+              <div class="ml-6 leading-6">{{ contact.address }}</div>
+            </div>
+          </ng-container>
+
+          <!-- Notes -->
+          <ng-container *ngIf="contact.notes">
+            <div class="ml-6 leading-6">팝업내용</div>
+            <div class="flex">
+              <!-- <mat-icon [svgIcon]="'heroicons_outline:menu-alt-2'"></mat-icon> -->
+
+              <div
+                class="max-w-none ml-6 prose prose-sm"
+                [innerHTML]="contact.notes"
+              ></div>
+            </div>
+          </ng-container>
+          <!-- Birthday -->
+          <ng-container *ngIf="contact.birthday">
+            <div class="flex sm:items-center">
+              <!-- <mat-icon [svgIcon]="'heroicons_outline:cake'"></mat-icon> -->
+              <div class="ml-6 leading-6">사용여부</div>
+              <div class="ml-6 leading-6">
+                {{ contact.birthday | date: "longDate" }}
+              </div>
+            </div>
+          </ng-container>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+
+  <!-- Edit mode -->
+  <ng-container *ngIf="editMode">
+    <!-- Contact form -->
+    <div class="relative flex flex-col flex-auto items-center px-6 sm:px-12">
+      <div class="w-full max-w-3xl">
+        <form [formGroup]="contactForm">
+          <!-- Name -->
+          <div class="mt-8">
+            <mat-form-field class="fuse-mat-no-subscript w-full">
+              <mat-label>사이트</mat-label>
+              <mat-select>
+                <ng-container *ngFor="let category of categories">
+                  <mat-option [value]="category.id">
+                    {{ category.name }}
+                  </mat-option>
+                </ng-container>
+              </mat-select>
+            </mat-form-field>
+          </div>
+
+          <!-- 팝업 사이즈 -->
+          <div class="flex">
+            <mat-form-field class="w-1/2 pr-2 mt-4">
+              <mat-label>팝업 가로 사이즈</mat-label>
+              <input type="number" matInput />
+            </mat-form-field>
+            <mat-form-field class="w-1/2 pl-2 mt-4">
+              <mat-label>팝업 세로 사이즈</mat-label>
+              <input type="number" matInput />
+            </mat-form-field>
+          </div>
+          <!-- 팝업 좌표 -->
+          <div class="flex">
+            <mat-form-field class="w-1/2 pr-2 mt-4">
+              <mat-label>팝업 좌표 TOP</mat-label>
+              <input type="number" matInput />
+            </mat-form-field>
+            <mat-form-field class="w-1/2 pl-2 mt-4">
+              <mat-label>팝업 좌표 LEFT</mat-label>
+              <input type="number" matInput />
+            </mat-form-field>
+          </div>
+
+          <!-- 팝업제목 -->
+          <div class="mt-8">
+            <mat-form-field class="fuse-mat-no-subscript w-full">
+              <mat-label>팝업제목</mat-label>
+              <mat-icon
+                matPrefix
+                class="hidden sm:flex icon-size-5"
+                [svgIcon]="'heroicons_solid:briefcase'"
+              ></mat-icon>
+              <input matInput [placeholder]="'Job title'" />
             </mat-form-field>
           </div>
 
           <!-- Notes -->
           <div class="mt-8">
             <mat-form-field
-                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+              class="fuse-mat-textarea fuse-mat-no-subscript w-full"
-                >
-                  <mat-label>순번</mat-label>
-                  <input matInput [formControlName]="'order'" />
-                </mat-form-field>
-              </div>
-              <!-- Body -->
-              <!-- <quill-editor class="mt-2"></quill-editor> -->
-              <mat-form-field
-                class="mt-8 fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
             >
+              <mat-label>팝업내용</mat-label>
+              <mat-icon
+                matPrefix
+                class="hidden sm:flex icon-size-5"
+                [svgIcon]="'heroicons_solid:menu-alt-2'"
+              ></mat-icon>
               <textarea
                 matInput
-                  [required]="true"
+                [placeholder]="'Notes'"
                 [rows]="5"
+                [spellcheck]="false"
                 matTextareaAutosize
-                  [formControlName]="'content'"
               ></textarea>
-                <mat-label>내용</mat-label>
             </mat-form-field>
-            </form>
           </div>
+
+          <div class="mt-8">
+            <mat-form-field class="fuse-mat-no-subscript w-full">
+              <mat-label>표시여부</mat-label>
+              <mat-select>
+                <ng-container *ngFor="let category of categories">
+                  <mat-option [value]="category.id">
+                    {{ category.name }}
+                  </mat-option>
+                </ng-container>
+              </mat-select>
+            </mat-form-field>
+          </div>
+
           <!-- Actions -->
           <div
-            class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
+            class="flex items-center mt-10 -mx-6 sm:-mx-12 py-4 pr-4 pl-1 sm:pr-12 sm:pl-7 border-t bg-gray-50 dark:bg-transparent"
           >
-            <div class="flex items-center mt-4 sm:mt-0">
+            <!-- Delete -->
-              <!-- Save as draft -->
+            <button mat-button [color]="'warn'" [matTooltip]="'Delete'">
-              <button
+              Delete
-                class="sm:mx-3"
-                mat-stroked-button
-                (click)="__onClickeCancel()"
-              >
-                <span>취소</span>
             </button>
-              <!-- Send -->
+            <!-- Cancel -->
             <button
-                class="order-first sm:order-last"
+              class="ml-auto"
+              mat-button
+              [matTooltip]="'Cancel'"
+              (click)="toggleEditMode(false)"
+            >
+              Cancel
+            </button>
+            <!-- Save -->
+            <button
+              class="ml-2"
               mat-flat-button
               [color]="'primary'"
-                (click)="__onClickReditBtn(targetTemplate)"
+              [disabled]="contactForm.invalid"
+              [matTooltip]="'Save'"
             >
-                {{ !targetTemplate ? "등록" : "수정" }}
+              Save
             </button>
           </div>
+        </form>
       </div>
     </div>
-      </div>
+  </ng-container>
-    </div>
-  </div>
 </div>

src/app/modules/admin/board/popup/components/redit.component.ts

@@ -8,35 +8,17 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  Validators,
-} from '@angular/forms';
-import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import {
+import { Subject, takeUntil } from 'rxjs';
-  debounceTime,
-  map,
-  merge,
-  Observable,
-  Subject,
-  switchMap,
-  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;
+  contactForm!: FormGroup;
-  selectedUser?: User;
+  editMode: boolean = false;
-
+  contact = contacts[0];
-  targetTemplate?: CustomerTemplate | undefined;
+  categories = categories;
 
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -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,30 +76,18 @@ 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: [''],
+      company: [''],
-      content: [''],
+      birthday: [null],
-    });
+      address: [null],
-    const idx = this._route.snapshot.params['id'];
+      notes: [null],
-
+      tags: [[]],
-    // 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);
+   * Toggle edit mode
-  }
+   *
-  __onClickReditBtn(targetTemplate: CustomerTemplate | undefined): void {
+   * @param editMode
-    console.log('click: ', targetTemplate?.id);
+   */
+  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:
+      '<p>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.</p><p>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.</p>',
+    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',
+  },
+];

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 {}

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',
+    path: 'redit',
-    component: ViewComponent,
+    component: ReditComponent,
-    resolve: {
-      users: UserResolver,
-    },
   },
+
+  // {
+  //   path: 'redit',
+  //   component: ReditComponent,
+  // },
+  // {
+  //   path: 'redit/:id',
+  //   component: ReditComponent,
+  //   resolve: {
+  //     customerTemplates: CustomerTemplateResolver,
+  //   },
+  // },
 ];