mirror-cathay/src/app/pages/appraisal/2nd-time/index/appraisal-2nd-time-index.component.html

<div class="card card-table">

  <div class="card-filter text-right">
    <div class="card-filter-section grid grid-cols-12  gap-4 md:gap-2 items-center">
      <div class="col-span-5 md:col-span-12 md:order-2">
        <mat-form-field>
          <i matTextPrefix class="bi bi-search"></i>
          <input matInput name="keyword" #keyword="ngModel" [(ngModel)]="dataFilter.keyword" (ngModelChange)="onFilter($event)">
        </mat-form-field>
      </div>
      <div class="col-span-7 md:col-span-12 md:order-1">
        <button type="button" class="btn btn-export" (click)="onExport()">Export</button>
      </div>
    </div>
    <div class="card-filter-section grid grid-cols-12  gap-4 items-center md:gap-2 ">
      <div class="col-span-6 md:col-span-12">
        <div class="tabs-btn">
          <button type="button" class="btn" [ngClass]="{ 'active' : action === 'wait'}" (click)="onTabs('wait')">รอประเมิน</button>
          <button type="button" class="btn" [ngClass]="{ 'active' : action === 'evaluated'}" (click)="onTabs('evaluated')">ประเมินแล้ว</button>
        </div>
      </div>

      <div class="col-span-6 md:col-span-12  ">
        <div class="flex w-full justify-end md:justify-start">
          <div class="">จำนวนทั้งหมด {{totalItem}} รายการ</div>
          <div class="pl-2 pr-2">|</div>
          <div class="">ค้นหาจำนวน {{totalOfElement}} รายการ</div>
        </div>
      </div>

    </div>
  </div>
  <div class="card-body">
    <div class="table-wrap">
      <table class="table table-main" mat-table [dataSource]="dataSource" matSort (matSortChange)="onSort($event)">
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

        <ng-container matColumnDef="quotationNo">
          <th mat-header-cell *matHeaderCellDef class="" mat-sort-header>เลขที่ใบเสนอราคา</th>
          <td mat-cell *matCellDef="let item" width="150" class="">{{item.quotationNo}}</td>
        </ng-container>

        <ng-container matColumnDef="customerFirstName">
          <th mat-header-cell *matHeaderCellDef class="" mat-sort-header>ชื่อลูกค้า</th>
          <td mat-cell *matCellDef="let item" width="150" class="">
            <ng-container *ngIf="item.customerId">  {{item.customer?.prefix}}{{item.customer?.firstName}} {{item.customer?.lastName}}</ng-container>
            <ng-container *ngIf="!item.customerId">{{item.customerFirstName}} {{item.customerLastName}}</ng-container>

          </td>
        </ng-container>

        <ng-container matColumnDef="productNo">
          <th mat-header-cell *matHeaderCellDef class="tac" mat-sort-header>BOM</th>
          <td mat-cell *matCellDef="let item" width="150" class="">{{item.productNo}}</td>
        </ng-container>

        <ng-container matColumnDef="productName">
          <th mat-header-cell *matHeaderCellDef class="tal">Model</th>
          <td mat-cell *matCellDef="let item" class="" style="min-width: 220px;">{{item.productName }}</td>
        </ng-container>

        <ng-container matColumnDef="productBrandName">
          <th mat-header-cell *matHeaderCellDef class="tal">Brand</th>
          <td mat-cell *matCellDef="let item" class="" >{{item.productBrandName }}</td>
        </ng-container>

        <ng-container matColumnDef="productSize">
          <th mat-header-cell *matHeaderCellDef class="tal">Main</th>
          <td mat-cell *matCellDef="let item" class="" >{{item.productSize }}</td>
        </ng-container>

        <ng-container matColumnDef="productWeight">
          <th mat-header-cell *matHeaderCellDef class="tal" >น้ำหนัก</th>
          <td mat-cell *matCellDef="let item" class="">{{item.productWeight }}</td>
        </ng-container>

        <ng-container matColumnDef="productColor">
          <th mat-header-cell *matHeaderCellDef class="tal">Color</th>
          <td mat-cell *matCellDef="let item" class="" >{{item.productColor }}</td>
        </ng-container>

        <ng-container matColumnDef="productYear">
          <th mat-header-cell *matHeaderCellDef class="tal">Year</th>
          <td mat-cell *matCellDef="let item" class="" >{{item.productYear }}</td>
        </ng-container>


        <ng-container matColumnDef="price">
          <th mat-header-cell *matHeaderCellDef class="tal" width="150" mat-sort-header>จำนวนเงิน</th>
          <td mat-cell *matCellDef="let item" class="">
            <div class="b-color-green">  {{item.price | number  : '1.2-2'}}</div>
          </td>
        </ng-container>

        <ng-container matColumnDef="deposit">
          <th mat-header-cell *matHeaderCellDef class="tal" width="150" mat-sort-header>จำนวนเงินมัดจำ</th>
          <td mat-cell *matCellDef="let item" class="">
            <div class="b-color-orange">  {{item.deposit | number  : '1.2-2'}}</div>
          </td>
        </ng-container>

        <ng-container matColumnDef="sellerDeposit2ndTime">
          <th mat-header-cell *matHeaderCellDef class="tal" width="150" mat-sort-header>เงินมัดจำเพิ่ม</th>
          <td mat-cell *matCellDef="let item" class="">
            <div class="b-color-red" *ngIf="item.sellerDeposit2ndTime">  {{item.sellerDeposit2ndTime | number  : '1.2-2'}}</div>
          </td>
        </ng-container>

        <ng-container matColumnDef="wantToInstallmentTerm">
          <th mat-header-cell *matHeaderCellDef class="tac" width="150" mat-sort-header>ระยะเวลาผ่อน</th>
          <td mat-cell *matCellDef="let item" class="tac">{{item.wantToInstallmentTerm }} งวด</td>
        </ng-container>


        <ng-container matColumnDef="createdDate">
          <th mat-header-cell *matHeaderCellDef class="tac">วันที่บันทึก</th>
          <td mat-cell *matCellDef="let item" class="tac">{{item.createdDate | date : 'dd/MM/YYYY'}}</td>
        </ng-container>

        <ng-container matColumnDef="status">
          <th mat-header-cell *matHeaderCellDef class="tac">สถานะ</th>
          <td mat-cell *matCellDef="let item" class="tac" style="min-width: 100px;">
            <div *ngIf="item.status === 'paid' " class="status status-active">ชำระแล้ว</div>
            <div *ngIf="item.status === 'pending'" class="status status-disabled">รอชำระ</div>
          </td>
        </ng-container>


        <ng-container matColumnDef="type">
          <th mat-header-cell *matHeaderCellDef class="tac" width="150" mat-sort-header>ประเภทการชำระ</th>
          <td mat-cell *matCellDef="let item" class="tac">
            <div *ngIf="item.type === 'deposit' " class="status-text status-deposit">ค่ามัดจำ</div>
            <div *ngIf="item.type === 'installment'" class="status-text status-installment">ผ่อนสินค้า</div>

          </td>
        </ng-container>

        <ng-container matColumnDef="paymentType">
          <th mat-header-cell *matHeaderCellDef class="tac" width="150" mat-sort-header>ประเภทการชำระ</th>
          <td mat-cell *matCellDef="let item" class="tac">
            <div *ngIf="item.paymentType === 'deposit' " class="status-text status-deposit">ค่ามัดจำ</div>
            <div *ngIf="item.paymentType === 'installment'" class="status-text status-installment">ผ่อนสินค้า</div>
          </td>
        </ng-container>

        <ng-container matColumnDef="paymentMethod">
          <th mat-header-cell *matHeaderCellDef class="tac" width="150" mat-sort-header>วิธีชำระ</th>
          <td mat-cell *matCellDef="let item" class="tac">
            <div *ngIf="item.paymentMethod === 'transfer' " class="status-text status-transfer">โอนเงิน</div>
            <div *ngIf="item.paymentMethod === 'cash'" class="status-text status-cash">เงินสด</div>
          </td>
        </ng-container>

        <ng-container matColumnDef="paymentAmountAll">
          <th mat-header-cell *matHeaderCellDef class="tac" width="150" mat-sort-header>จำนวนเงิน</th>
          <td mat-cell *matCellDef="let item" class="tac">
            <div class="b-color-green">{{item.paymentAmountAll | number  : '1.2-2'}}</div>
          </td>
        </ng-container>



        <ng-container matColumnDef="action">
          <th mat-header-cell *matHeaderCellDef width="80">Action</th>
          <td mat-cell *matCellDef="let item">
            <div class="action flex justify-center">


              <div class="item" *ngIf="item.status2ndTime === 'wait' " >
                <i class="bi bi-pencil-square icon-edit" (click)="onAction(item.id)"></i>
              </div>
<!--              <div class="item" *ngIf="item.status === 'paid' ">-->
<!--                <i class="bi bi-filetype-pdf color-main" (click)="onAction(item.id)"></i>-->
<!--              </div>-->


            </div>
          </td>
        </ng-container>
      </table>
      <div *ngIf="dataSource?.length === 0" class="no-data"></div>
    </div>
    <mat-paginator [pageSizeOptions]="pageSizeOptions" showFirstLastButtons (page)="getData($event)"></mat-paginator>
  </div>
</div>