알림 컴포넌트 추가

src/app/modules/admin/board/customer-template/components/list.component.html

@@ -94,6 +94,7 @@
                       mat-flat-button
                       class="bet-mat-small-8"
                       [color]="'primary'"
+                      (click)="__onClickRemoveBtn($event, customerTemplate.id)"
                     >
                       삭제
                     </button>

src/app/modules/admin/board/customer-template/components/list.component.ts

@@ -77,6 +77,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   searchInputControl = new FormControl();
   selectedCustomerTemplate?: CustomerTemplate;
   pagination?: CustomerTemplatePagination;
+  configForm!: FormGroup;
 
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -99,6 +100,29 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
    * On init
    */
   ngOnInit(): void {
+    // Build the config form
+    this.configForm = this._formBuilder.group({
+      title: '알림',
+      message:
+        '정말로 삭제하시겠습니까? <span class="font-medium">삭제!</span>',
+      icon: this._formBuilder.group({
+        show: true,
+        name: 'heroicons_outline:exclamation',
+        color: 'warn',
+      }),
+      actions: this._formBuilder.group({
+        confirm: this._formBuilder.group({
+          show: true,
+          label: '삭제',
+          color: 'warn',
+        }),
+        cancel: this._formBuilder.group({
+          show: true,
+          label: '취소',
+        }),
+      }),
+      dismissible: true,
+    });
     // Get the pagination
     this._customerTemplateService.pagination$
       .pipe(takeUntil(this._unsubscribeAll))
@@ -190,6 +214,16 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
     this.router.navigateByUrl(url);
   }
 
+  __onClickRemoveBtn(event: MouseEvent, id: string): void {
+    // Open the dialog and save the reference of it
+    const dialogRef = this._fuseConfirmationService.open(this.configForm.value);
+
+    // Subscribe to afterClosed from the dialog reference
+    dialogRef.afterClosed().subscribe((result) => {
+      console.log(result);
+    });
+  }
+
   /**
    * Track by function for ngFor loops
    *

src/app/modules/admin/board/customer-template/components/redit.component.html

@@ -52,6 +52,30 @@
               </mat-form-field>
             </form>
           </div>
+          <!-- Actions -->
+          <div
+            class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
+          >
+            <div class="flex items-center mt-4 sm:mt-0">
+              <!-- Save as draft -->
+              <button
+                class="sm:mx-3"
+                mat-stroked-button
+                (click)="__onClickeCancel()"
+              >
+                <span>취소</span>
+              </button>
+              <!-- Send -->
+              <button
+                class="order-first sm:order-last"
+                mat-flat-button
+                [color]="'primary'"
+                (click)="__onClickReditBtn(targetTemplate)"
+              >
+                {{ !targetTemplate ? "등록" : "수정" }}
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/app/modules/admin/board/customer-template/components/redit.component.ts

@@ -31,7 +31,7 @@ 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 } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { CustomerTemplateService } from '../services/customer-template.service';
 import { CustomerTemplate } from '../models/ customer-template';
 
@@ -84,7 +84,8 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy {
     private _formBuilder: FormBuilder,
     private _customerTemplateService: CustomerTemplateService,
     private _userService: UserService,
-    private _route: ActivatedRoute
+    private _route: ActivatedRoute,
+    private _router: Router
   ) {}
 
   // -----------------------------------------------------------------------------------------------------
@@ -155,6 +156,13 @@ 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);
+  }
 
   /**
    * Track by function for ngFor loops