203 lines
11 KiB
HTML
203 lines
11 KiB
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 === 'pending'}" (click)="onTabs('pending')">รออนุมัติ</button>
|
|
<button type="button" class="btn" [ngClass]="{ 'active' : action === 'approved'}" (click)="onTabs('approved')">สัญญา</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="userFullName">
|
|
<th mat-header-cell *matHeaderCellDef class="tal">ชื่อคนขาย</th>
|
|
<td mat-cell *matCellDef="let item" style="min-width: 200px;" >{{item.userFullName }}</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="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="contractApprovedDate">
|
|
<th mat-header-cell *matHeaderCellDef class="tac">วันที่อนุมัติ</th>
|
|
<td mat-cell *matCellDef="let item" class="tac">{{item.contractApprovedDate | 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="sellerDeposit3rdTime">
|
|
<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-red" *ngIf="item.sellerDeposit3rdTime">{{item.sellerDeposit3rdTime | number : '1.2-2'}}</div>
|
|
</td>
|
|
</ng-container>
|
|
|
|
|
|
|
|
<ng-container matColumnDef="contractBy">
|
|
<th mat-header-cell *matHeaderCellDef class="tac">พนักงานทำรายการ</th>
|
|
<td mat-cell *matCellDef="let item" class="tac">{{item?.userContractBy?.name}}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="contractApprovedBy">
|
|
<th mat-header-cell *matHeaderCellDef class="tac">ผู้อนุมัติ</th>
|
|
<td mat-cell *matCellDef="let item" class="tac">{{item?.userApprovedBy?.name }}</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="['wait', 'approved'].includes(item.statusContract)" >
|
|
<i class="bi bi-pencil-square icon-edit" (click)="onAction('do', item.id)"></i>
|
|
</div>
|
|
<div class="item" *ngIf="['pending', 'approved'].includes(item.statusContract)">
|
|
<i class="bi bi-filetype-pdf color-red" (click)="onAction('pdf', item.id)"></i>
|
|
</div>
|
|
<div class="item" *ngIf="['pending', 'approved'].includes(item.statusContract)">
|
|
<i class="bi bi bi-arrow-clockwise color-green" (click)="onAction('refinance', 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>
|