루징 리스트 수정

src/app/modules/admin/report/loosing/components/index.ts

@@ -1,3 +1,4 @@
 import { ListComponent } from './list.component';
+import { ViewComponent } from './view.component';
 
-export const COMPONENTS = [ListComponent];
+export const COMPONENTS = [ListComponent, ViewComponent];

src/app/modules/admin/report/loosing/components/list.component.html

@@ -123,6 +123,7 @@
                       mat-flat-button
                       class="bet-mat-small-8"
                       [color]="'primary'"
+                      (click)="__viewLoosingDetail(info.id)"
                     >
                       상세보기
                     </button></span
@@ -152,6 +153,7 @@
                       mat-flat-button
                       class="bet-mat-small-8"
                       [color]="'primary'"
+                      (click)="__viewLoosingDetail(info.id)"
                     >
                       상세보기
                     </button></span
@@ -168,6 +170,7 @@
                       mat-flat-button
                       class="bet-mat-small-8"
                       [color]="'primary'"
+                      (click)="__onClickRemoveBtn($event, info.id)"
                     >
                       삭제
                     </button></span

src/app/modules/admin/report/loosing/components/list.component.ts

@@ -8,6 +8,7 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
 
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
@@ -31,15 +32,15 @@ import { MatTableDataSource } from '@angular/material/table';
         grid-template-columns: 60px auto 40px;
 
         @screen sm {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px;
+          grid-template-columns: 40px 70px 70px 70px 70px 100px;
         }
 
         @screen md {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
+          grid-template-columns: 40px 70px 70px 70px 70px 100px;
         }
 
         @screen lg {
-          grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px;
+          grid-template-columns: 40px 70px 70px 70px 70px 100px;
         }
       }
     `,
@@ -80,12 +81,15 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
     'removeBtn',
   ];
 
+  configForm!: FormGroup;
+
   /**
    * Constructor
    */
   constructor(
     private _changeDetectorRef: ChangeDetectorRef,
     private _fuseConfirmationService: FuseConfirmationService,
+    private _formBuilder: FormBuilder,
     private _loosingService: LoosingService,
     private router: Router
   ) {}
@@ -98,6 +102,28 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
    * On init
    */
   ngOnInit(): void {
+    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 products
     this._loosingService.loosings$
       .pipe(takeUntil(this._unsubscribeAll))
@@ -138,6 +164,20 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   // @ Private methods
   // -----------------------------------------------------------------------------------------------------
 
+  __viewLoosingDetail(loosing: Loosing): void {
+    let url: string = 'report/loosing/' + loosing.id;
+    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);
+    });
+  }
   /**
    * Create product
    */

src/app/modules/admin/report/loosing/components/view.component.html

@@ -0,0 +1,189 @@
+<div class="flex flex-col flex-auto min-w-0">
+  <div class="flex-auto border-t -mt-px pt-4 sm:pt-6">
+    <div class="w-full max-w-screen-xl mx-auto">
+      <div class="grid grid-cols-1 sm:grid-cols-6 gap-6 w-full min-w-0">
+        <!-- Budget distribution -->
+        <div
+          class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
+        >
+          <div class="text-lg font-medium tracking-tight leading-6 truncate">
+            기본데이터
+          </div>
+
+          <!-- Search -->
+          <div
+            class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-4 px-6 md:px-8 border-b"
+          >
+            <!-- Card inception -->
+            <div class="col-span-2 sm:col-span-1">
+              <mat-form-field
+                class="fuse-mat-no-subscript w-full"
+                [floatLabel]="'always'"
+              >
+                <input
+                  matInput
+                  [matDatepicker]="picker1"
+                  [placeholder]="'Choose a date'"
+                />
+                <mat-datepicker-toggle
+                  matSuffix
+                  [for]="picker1"
+                ></mat-datepicker-toggle>
+                <mat-datepicker #picker1></mat-datepicker>
+              </mat-form-field>
+            </div>
+            <!-- Card expiration -->
+            <div class="col-span-2 sm:col-span-1">
+              <mat-form-field
+                class="fuse-mat-no-subscript w-full"
+                [floatLabel]="'always'"
+              >
+                <input
+                  matInput
+                  [matDatepicker]="picker2"
+                  [placeholder]="'Choose a date'"
+                />
+                <mat-datepicker-toggle
+                  matSuffix
+                  [for]="picker2"
+                ></mat-datepicker-toggle>
+                <mat-datepicker #picker2></mat-datepicker>
+              </mat-form-field>
+            </div>
+            <!-- Actions -->
+            <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
+              <!-- Search -->
+              <!-- Add user button -->
+              <button
+                mat-flat-button
+                [color]="'primary'"
+                fxFlex
+                (click)="__createProduct()"
+              >
+                <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+                <span class="ml-2 mr-1">기본데이터생성</span>
+              </button>
+            </div>
+          </div>
+
+          <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
+            <table
+              class="min-w-240 overflow-y-visible"
+              mat-table
+              [dataSource]="loosingDataSource"
+            >
+              <!-- Index -->
+              <ng-container matColumnDef="index">
+                <th mat-header-cell *matHeaderCellDef>번호</th>
+                <td mat-cell *matCellDef="let info; let i = index">
+                  <span class="font-medium text-right">
+                    {{ i + 1 }}
+                  </span>
+                </td>
+              </ng-container>
+
+              <!-- 시작일 -->
+              <ng-container matColumnDef="startDate">
+                <th mat-header-cell *matHeaderCellDef>시작일</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">
+                    {{ info.startDate }}
+                  </span>
+                </td>
+              </ng-container>
+              <!-- 종료일 -->
+              <ng-container matColumnDef="endDate">
+                <th mat-header-cell *matHeaderCellDef>종료일</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">
+                    {{ info.endDate }}
+                  </span>
+                </td>
+              </ng-container>
+
+              <!-- 기본데이터 -->
+              <ng-container matColumnDef="defaultDataTotalCount">
+                <th mat-header-cell *matHeaderCellDef colspan="2">
+                  기본데이터
+                </th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.defaultCount
+                  }}</span>
+                </td>
+              </ng-container>
+              <ng-container matColumnDef="defaultDataViewBtn">
+                <td
+                  mat-cell
+                  *matCellDef="let info"
+                  style="border-left: 1px solid #e0e0e0"
+                >
+                  <span class="font-medium text-right"
+                    ><button
+                      mat-flat-button
+                      class="bet-mat-small-8"
+                      [color]="'primary'"
+                    >
+                      상세보기
+                    </button></span
+                  >
+                </td>
+              </ng-container>
+
+              <!-- 루징데이터 -->
+              <ng-container matColumnDef="loosingDataTotalCount">
+                <th mat-header-cell *matHeaderCellDef colspan="2">
+                  루징데이터
+                </th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.loosingCount
+                  }}</span>
+                </td>
+              </ng-container>
+              <ng-container matColumnDef="loosingDataViewBtn">
+                <td
+                  mat-cell
+                  *matCellDef="let info"
+                  style="border-left: 1px solid #e0e0e0"
+                >
+                  <span class="font-medium text-right"
+                    ><button
+                      mat-flat-button
+                      class="bet-mat-small-8"
+                      [color]="'primary'"
+                    >
+                      상세보기
+                    </button></span
+                  >
+                </td>
+              </ng-container>
+
+              <!-- 삭제 -->
+              <ng-container matColumnDef="removeBtn">
+                <th mat-header-cell *matHeaderCellDef>삭제</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right"
+                    ><button
+                      mat-flat-button
+                      class="bet-mat-small-8"
+                      [color]="'primary'"
+                    >
+                      삭제
+                    </button></span
+                  >
+                </td>
+              </ng-container>
+
+              <tr mat-header-row *matHeaderRowDef="headerTableColumns"></tr>
+              <tr
+                mat-row
+                *matRowDef="let row; columns: displayedTableColumns"
+              ></tr>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/modules/admin/report/loosing/components/view.component.ts

@@ -0,0 +1,162 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { map, merge, Observable, Subject, switchMap, takeUntil } from 'rxjs';
+import { fuseAnimations } from '@fuse/animations';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
+
+import { Loosing } from '../models/loosing';
+
+import { LoosingService } from '../services/loosing.service';
+import { Router } from '@angular/router';
+import { MatTableDataSource } from '@angular/material/table';
+
+@Component({
+  selector: 'loosing-view',
+  templateUrl: './view.component.html',
+  styles: [
+    /* language=SCSS */
+    `
+      .inventory-grid {
+        grid-template-columns: 60px auto 40px;
+
+        @screen sm {
+          grid-template-columns: 40px 70px 70px 70px 70px 100px;
+        }
+
+        @screen md {
+          grid-template-columns: 40px 70px 70px 70px 70px 100px;
+        }
+
+        @screen lg {
+          grid-template-columns: 40px 70px 70px 70px 70px 100px;
+        }
+      }
+    `,
+  ],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: fuseAnimations,
+})
+export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
+  @ViewChild(MatPaginator) private _paginator!: MatPaginator;
+  @ViewChild(MatSort) private _sort!: MatSort;
+
+  loosings$!: Observable<Loosing[] | undefined>;
+
+  isLoading = false;
+
+  loosingDataSource: MatTableDataSource<Loosing> = new MatTableDataSource();
+
+  private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+  headerTableColumns: string[] = [
+    'index',
+    'startDate',
+    'endDate',
+    'defaultDataTotalCount',
+    'loosingDataTotalCount',
+    'removeBtn',
+  ];
+
+  displayedTableColumns: string[] = [
+    'index',
+    'startDate',
+    'endDate',
+    'defaultDataTotalCount',
+    'defaultDataViewBtn',
+    'loosingDataTotalCount',
+    'loosingDataViewBtn',
+    'removeBtn',
+  ];
+
+  /**
+   * Constructor
+   */
+  constructor(
+    private _changeDetectorRef: ChangeDetectorRef,
+    private _fuseConfirmationService: FuseConfirmationService,
+    private _loosingService: LoosingService,
+    private router: Router
+  ) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Lifecycle hooks
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * On init
+   */
+  ngOnInit(): void {
+    // Get the products
+    this._loosingService.loosings$
+      .pipe(takeUntil(this._unsubscribeAll))
+      .subscribe((loosings: Loosing[] | undefined) => {
+        if (!loosings) {
+          return;
+        }
+
+        this.loosingDataSource.data = loosings;
+        // 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
+  // -----------------------------------------------------------------------------------------------------
+
+  /* viewUserDetail(id: string): void {
+    let url: string = 'member/user/' + id;
+    this.router.navigateByUrl(url);
+  } */
+  // -----------------------------------------------------------------------------------------------------
+  // @ Private methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Create product
+   */
+  __createProduct(): void {}
+
+  /**
+   * Toggle product details
+   *
+   * @param productId
+   */
+  __toggleDetails(productId: string): void {}
+
+  /**
+   * Track by function for ngFor loops
+   *
+   * @param index
+   * @param item
+   */
+  __trackByFn(index: number, item: any): any {
+    return item.id || index;
+  }
+}

src/app/modules/admin/report/loosing/loosing.routing.ts

@@ -1,10 +1,12 @@
 import { Route } from '@angular/router';
 
 import { ListComponent } from './components/list.component';
-import { ViewComponent } from '../../member/user/components/view.component';
+import { ViewComponent } from './components/view.component';
 
-import { LoosingsResolver } from './resolvers/loosing.resolver';
-import { UserResolver } from '../../member/user/resolvers/user.resolver';
+import {
+  LoosingsResolver,
+  LoosingResolver,
+} from './resolvers/loosing.resolver';
 
 export const loosingRoutes: Route[] = [
   {
@@ -18,7 +20,7 @@ export const loosingRoutes: Route[] = [
     path: ':id',
     component: ViewComponent,
     resolve: {
-      users: UserResolver,
+      loosing: LoosingResolver,
     },
   },
 ];