totopia-backend/src/app/pages/infos/info/component/popup-set.component.html

<div id="popup-set" class="page-layout carded fullwidth inner-scroll">
  <!-- TOP BACKGROUND -->
  <div class="top-bg accent"></div>
  <!-- / TOP BACKGROUND -->

  <!-- CENTER -->
  <div class="center">
    <!-- HEADER -->
    <div
      class="header accent"
      fxLayout="column"
      fxLayoutAlign="center center"
      fxLayout.gt-xs="row"
      fxLayoutAlign.gt-xs="space-between center"
    >
      <!-- APP TITLE -->
      <div
        class="logo mb-24 mb-sm-0"
        fxLayout="row"
        fxLayoutAlign="start center"
      >
        <mat-icon
          class="logo-icon s-32 mr-16"
          [@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
        >
          shopping_basket
        </mat-icon>
        <span
          class="logo-text h1"
          [@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
          >팝업관리</span
        >
      </div>
      <!-- / APP TITLE -->

      <!-- SEARCH
      <div class="search-wrapper  ml-sm-32">
        <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
          <mat-icon>search</mat-icon>
          <input #filter placeholder="Search for an order" />
        </div>
      </div>-->
      <!-- / SEARCH -->
    </div>
    <!-- / HEADER -->

    <!-- CONTENT CARD -->
    <div class="content-card">
        <mat-table
          class="popup-set-table"
          #table
          [dataSource]="dataSource"
          matSort
          [@animateStagger]="{ value: '50' }"
          fusePerfectScrollbar
          formArrayName="formarray"
        >
          <!-- idx Column -->
          <ng-container matColumnDef="idx">
            <mat-header-cell *matHeaderCellDef mat-sort-header
              >번호</mat-header-cell
            >
            <mat-cell
              *matCellDef="let popup; let i = index"
              [formGroupName]="i"
            >
              <p class="text-truncate">{{ i + 1 }}</p>
              <!-- <p class="text-truncate">1</p> -->
            </mat-cell>
          </ng-container>

          <!-- thumbnail Column -->
          <ng-container matColumnDef="thumbNail">
            <mat-header-cell
              *matHeaderCellDef
              mat-sort-header
              fxHide
              fxShow.gt-sm
              >썸네일</mat-header-cell
            >
            <mat-cell
              *matCellDef="let popup; let i = index"
              [formGroupName]="i"
              fxHide
              fxShow.gt-sm
            >
              <p class="text-truncate">{{ popup.thumbNail }}</p>
            </mat-cell>
          </ng-container>

          <!-- title Column -->
          <ng-container matColumnDef="title">
            <mat-header-cell *matHeaderCellDef mat-sort-header
              >제목</mat-header-cell
            >
            <mat-cell
              *matCellDef="let popup; let i = index"
              [formGroupName]="i"
            >
              <p class="text-truncate">
                {{ popup.title }}
              </p>
            </mat-cell>
          </ng-container>

          <!-- imageWidth Price Column -->
          <ng-container matColumnDef="imageWidth">
            <mat-header-cell
              *matHeaderCellDef
              mat-sort-header
              fxHide
              fxShow.gt-md
              >이미지 넒이</mat-header-cell
            >
            <mat-cell
              *matCellDef="let popup; let i = index"
              [formGroupName]="i"
              fxHide
              fxShow.gt-md
            >
              <p class="total-price text-truncate">
                {{ popup.imageWidth }}
              </p>
            </mat-cell>
            px
          </ng-container>

          <!-- imageHegith Column -->
          <ng-container matColumnDef="imageHegith">
            <mat-header-cell
              *matHeaderCellDef
              mat-sort-header
              fxHide
              fxShow.gt-sm
              >이미지 높이</mat-header-cell
            >
            <mat-cell
              *matCellDef="let popup; let i = index"
              [formGroupName]="i"
              fxHide
              fxShow.gt-sm
            >
              <p class="text-truncate">
                {{ popup.imageHeight }}
              </p>
            </mat-cell>
            px
          </ng-container>

          <!-- imageX Column -->
          <ng-container matColumnDef="imageX">
            <mat-header-cell *matHeaderCellDef mat-sort-header
              >이미지 X</mat-header-cell
            >
            <mat-cell
              *matCellDef="let popup; let i = index"
              [formGroupName]="i"
            >
              <p class="status text-truncate h6 p-4">
                {{ popup.imageX }}
              </p>
            </mat-cell>
          </ng-container>

          <!-- imageY Column -->
          <ng-container matColumnDef="imageY">
            <mat-header-cell
              *matHeaderCellDef
              mat-sort-header
              fxHide
              fxShow.gt-sm
              >이미지 Y</mat-header-cell
            >
            <mat-cell
              *matCellDef="let popup; let i = index"
              [formGroupName]="i"
              fxHide
              fxShow.gt-sm
            >
              <p class="text-truncate">
                {{ popup.imageY }}
              </p>
            </mat-cell>
          </ng-container>

          <!-- openStatus Column -->
          <ng-container matColumnDef="openStatus">
            <mat-header-cell
              *matHeaderCellDef
              mat-sort-header
              fxHide
              fxShow.gt-sm
              >상태</mat-header-cell
            >
            <mat-cell
              *matCellDef="let popup; let i = index"
              [formGroupName]="i"
              fxHide
              fxShow.gt-sm
            >
              <p class="text-truncate">
                {{ popup.openStatus }}
              </p>
            </mat-cell>
          </ng-container>

          <!-- saveBtn Column -->
          <ng-container matColumnDef="saveBtn">
            <mat-header-cell
              *matHeaderCellDef
              mat-sort-header
              fxHide
              fxShow.gt-sm
              >수정</mat-header-cell
            >
            <mat-cell
              *matCellDef="let popup; let i = index"
              [formGroupName]="i"
              fxHide
              fxShow.gt-sm
            >
              <p class="text-truncate">
                6
              </p>
            </mat-cell>
          </ng-container>

          <mat-header-row
            *matHeaderRowDef="displayedColumns; sticky: true"
          ></mat-header-row>

          <!-- [routerLink]="'/pages/infos/management/popup-set/' + popup.id" -->
          <mat-row
            *matRowDef="let popup; columns: displayedColumns"
            class="popup-set"
            matRipple
            [routerLink]="'/pages/infos/management/popup-set/' + popup.id"
          >
          </mat-row>
        </mat-table>

      <mat-paginator
        #paginator
        [length]="10"
        [pageIndex]="0"
        [pageSize]="10"
        [pageSizeOptions]="[5, 10, 25, 100]"
      >
      </mat-paginator>
    </div>
    <!-- / CONTENT CARD -->
  </div>
  <!-- / CENTER -->
</div>