This commit is contained in:
2023-10-18 18:25:42 +07:00
parent 63a58292d5
commit 480cbefd74
11 changed files with 110 additions and 38 deletions

View File

@@ -74,4 +74,8 @@ export class BaseList {
)
}
getIndex(i){
return this.paginator.pageIndex * this.paginator.pageSize + i + 1
}
}

View File

@@ -10,7 +10,7 @@ export class PromotionService extends BaseService{
constructor(
public http: HttpClient
) {
super('/common/promotionwwwwwwwwwwww', http)
super('/common/promotion', http)
}
}

View File

@@ -2,5 +2,6 @@
(add)="add()"
(edit)="edit($event)"
(delete)="delete($event)"
(search)="search($event)"
[bannerList]="banner$ | async">
</app-list>

View File

@@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { ChangeDetectorRef, Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Observable, catchError, filter, of, switchMap, tap, throwError } from 'rxjs';
import { CDialogConfig, IDialogConfig } from 'src/app/@common/interface/Dialog';
@@ -18,7 +18,8 @@ export class BannerContainer {
constructor(
private bannerService: BannerService,
private dialog: MatDialog,
private appService: AppService
private appService: AppService,
private cdr: ChangeDetectorRef
) {
this.banner$ = this.bannerService.getAll();
}
@@ -30,6 +31,7 @@ export class BannerContainer {
switchMap((res) => {
if(res === 'success'){
return this.banner$ = this.bannerService.getAll().pipe(
tap(() => this.cdr.detectChanges()),
catchError((err) => {
this.appService.message(EAction.ERROR, EText.ERROR);
return throwError(() => err)
@@ -51,7 +53,8 @@ export class BannerContainer {
catchError((err) => {
this.appService.message(EAction.ERROR, EText.ERROR);
return throwError(() => err)
})
}),
tap(() => this.cdr.detectChanges())
)
}
})
@@ -59,6 +62,12 @@ export class BannerContainer {
return edit$.subscribe();
}
search(value){
return this.banner$ = this.bannerService.queryString(`name=${value}`).pipe(
tap(() => this.cdr.detectChanges())
)
}
delete(uid){
const delete$ = this.appService.confirm(EAction.DELETE).pipe(
filter((res) => res.isConfirmed),
@@ -66,6 +75,7 @@ export class BannerContainer {
return this.bannerService.deleteData(uid).pipe(
tap(() => this.appService.message(EAction.SUCCESS, EText.DELETE)),
tap(() => this.banner$ = this.bannerService.getAll()),
tap(() => this.cdr.detectChanges()),
catchError((err) => {
this.appService.message(EAction.SUCCESS, EText.DELETE);
return throwError(() => err)

View File

@@ -5,7 +5,7 @@
<div class="col-span-4 md:col-span-6">
<mat-form-field>
<i matTextPrefix class="bi bi-search"></i>
<input matInput placeholder="ชื่อรายการ">
<input matInput placeholder="ชื่อรายการ" [(ngModel)]="name" (ngModelChange)="onFilter($event)">
</mat-form-field>
</div>
<div class="col-span-8 md:col-span-6">
@@ -22,10 +22,14 @@
<table class="table table-main" mat-table [dataSource]="bannerList" matSort>
<tr mat-header-row *matHeaderRowDef="['1','2','3','4','5','6','7','8']"></tr>
<tr mat-row *matRowDef="let row; columns: ['1','2','3','4','5','6','7','8'];"></tr>
<tr class="mat-row" *matNoDataRow>
<td class="no-data" colspan="100%">ไม่มีข้อมูล</td>
</tr>
<ng-container matColumnDef="1">
<th mat-header-cell *matHeaderCellDef class="tac" mat-sort-header>ลำดับ</th>
<td mat-cell *matCellDef="let item; let i = index" width="150" class="tac">{{getIndex(i)}}</td>
<th mat-header-cell *matHeaderCellDef class="tac">ลำดับ</th>
<td mat-cell *matCellDef="let item; let i = index" width="150" class="tac">
{{getIndex(i)}}
</td>
</ng-container>
<ng-container matColumnDef="2">
@@ -42,7 +46,7 @@
<ng-container matColumnDef="4">
<th mat-header-cell *matHeaderCellDef class="tal" mat-sort-header>คำอธิบาย</th>
<td mat-cell *matCellDef="let item" class="">{{item.description}}</td>
<td mat-cell *matCellDef="let item" class="">{{item.description? item.description : '-'}}</td>
</ng-container>
<ng-container matColumnDef="5">
@@ -52,23 +56,26 @@
<ng-container matColumnDef="6">
<th mat-header-cell *matHeaderCellDef class="tal" width="150">วันสิ้นสุด</th>
<td mat-cell *matCellDef="let item" class="">{{item.weight | date : 'dd/MM/YYYY'}}</td>
<td mat-cell *matCellDef="let item" class="">{{item.end_date | date : 'dd/MM/YYYY'}}</td>
</ng-container>
<ng-container matColumnDef="7">
<th mat-header-cell *matHeaderCellDef class="tal" width="150">สถานะ</th>
<td mat-cell *matCellDef="let item" class="">{{item.is_use === true? 'Open' : 'Close'}}</td>
<th mat-header-cell *matHeaderCellDef class="tac" width="150">สถานะ</th>
<td mat-cell *matCellDef="let item" class="">
<div *ngIf="item.is_use" class="status status-active">Open</div>
<div *ngIf="!item.is_use" class="status status-disabled">Close</div>
</td>
</ng-container>
<ng-container matColumnDef="8">
<th mat-header-cell *matHeaderCellDef class="tal" width="150">เครื่องมือ</th>
<td mat-cell *matCellDef="let item" class="">
<th mat-header-cell *matHeaderCellDef class="tac" width="100">เครื่องมือ</th>
<td mat-cell *matCellDef="let item">
<div class="action flex justify-center">
<div class="item">
<i class="bi bi-filetype-pdf color-main" (click)="onEdit(item.banner_uid)"></i>
<div class="item cursor-pointer">
<i class="bi bi-pencil-square icon-edit mr-2" (click)="onEdit(item.banner_uid)"></i>
</div>
<div class="item">
<div class="item cursor-pointer icon-delete">
<i class="bi bi-trash3 color-red" (click)="onDelete(item.banner_uid)"></i>
</div>
</div>
@@ -77,7 +84,6 @@
</table>
</div>
<!-- <div *ngIf="dataSourceCount === 0" class="no-data"></div> -->
<mat-paginator [pageSizeOptions]="[5,10,20]" showFirstLastButtons></mat-paginator>
</div>
</div>

View File

@@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core
import { DialogComponent } from '../dialog/dialog.component';
import { BaseList } from 'src/app/core/base/base-list';
import { EAction } from 'src/app/@config/app';
import { filter, lastValueFrom, switchMap, tap } from 'rxjs';
import { Subject, debounceTime, distinctUntilChanged, filter, lastValueFrom, switchMap, tap } from 'rxjs';
import { MatDialog } from '@angular/material/dialog';
@Component({
@@ -11,22 +11,42 @@ import { MatDialog } from '@angular/material/dialog';
styleUrls: ['./list.component.scss']
})
export class ListComponent extends BaseList implements OnChanges {
name: string;
filterKeyword: Subject<string> = new Subject<string>();
@Input() bannerList: any = [];
@Output() add = new EventEmitter();
@Output() edit = new EventEmitter();
@Output() delete = new EventEmitter();
@Output() search = new EventEmitter();
constructor() {
super()
this.filterKeyword.pipe(
debounceTime(1000),
distinctUntilChanged()
).subscribe(() => this.onSearch())
}
ngOnChanges(){
this.bannerList = this.updateMatTable(this.bannerList? this.bannerList : [])
ngOnChanges() {
this.bannerList = this.updateMatTable(this.bannerList ? this.bannerList : [])
}
onSearch(){
this.search.emit(this.name)
}
onAdd() {
this.add.emit()
}
onEdit(uid){
onEdit(uid) {
this.edit.emit(uid)
}
onDelete(uid) {
this.delete.emit(uid)
}
onFilter($event) {
this.filterKeyword.next($event);
}
}

View File

@@ -2,5 +2,6 @@
(add)="add()"
(edit)="edit($event)"
(delete)="delete($event)"
(search)="search($event)"
[promotionList]="promotion$ | async">
</app-list>

View File

@@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { ChangeDetectorRef, Component } from '@angular/core';
import { Observable, catchError, filter, switchMap, tap, throwError } from 'rxjs';
import { IDialogConfig, CDialogConfig } from 'src/app/@common/interface/Dialog';
import { EAction, EText } from 'src/app/@config/app';
@@ -18,7 +18,8 @@ export class PromotionContainer {
constructor(
private promotionSerivce: PromotionService,
private dialog: MatDialog,
private appService: AppService
private appService: AppService,
private cdr: ChangeDetectorRef
) {
this.promotion$ = this.promotionSerivce.getAll();
}
@@ -59,6 +60,12 @@ export class PromotionContainer {
return edit$.subscribe()
}
search(value){
return this.promotion$ = this.promotionSerivce.queryString(`name=${value}`).pipe(
tap(() => this.cdr.detectChanges())
)
}
delete(uid){
const delete$ = this.appService.confirm(EAction.DELETE).pipe(
filter((res) => res.isConfirmed),

View File

@@ -5,7 +5,7 @@
<div class="col-span-4 md:col-span-6">
<mat-form-field>
<i matTextPrefix class="bi bi-search"></i>
<input matInput placeholder="ชื่อรายการ">
<input matInput placeholder="ชื่อรายการ" [(ngModel)]="name" (ngModelChange)="onFilter($event)">
</mat-form-field>
</div>
<div class="col-span-8 md:col-span-6">
@@ -22,10 +22,14 @@
<table class="table table-main" mat-table [dataSource]="promotionList" matSort>
<tr mat-header-row *matHeaderRowDef="['1','2','3','4','5','6','7','8']"></tr>
<tr mat-row *matRowDef="let row; columns: ['1','2','3','4','5','6','7','8'];"></tr>
<tr class="mat-row" *matNoDataRow>
<td class="no-data" colspan="100%">ไม่มีข้อมูล</td>
</tr>
<ng-container matColumnDef="1">
<th mat-header-cell *matHeaderCellDef class="tac" mat-sort-header>ลำดับ</th>
<td mat-cell *matCellDef="let item; let i = index" width="150" class="tac">{{getIndex(i)}}</td>
<th mat-header-cell *matHeaderCellDef class="tac">ลำดับ</th>
<td mat-cell *matCellDef="let item; let i = index" width="150" class="tac">
{{getIndex(i)}}
</td>
</ng-container>
<ng-container matColumnDef="2">
@@ -42,7 +46,7 @@
<ng-container matColumnDef="4">
<th mat-header-cell *matHeaderCellDef class="tal" mat-sort-header>คำอธิบาย</th>
<td mat-cell *matCellDef="let item" class="">{{item.description}}</td>
<td mat-cell *matCellDef="let item" class="">{{item.description? item.description : '-'}}</td>
</ng-container>
<ng-container matColumnDef="5">
@@ -52,23 +56,26 @@
<ng-container matColumnDef="6">
<th mat-header-cell *matHeaderCellDef class="tal" width="150">วันสิ้นสุด</th>
<td mat-cell *matCellDef="let item" class="">{{item.weight | date : 'dd/MM/YYYY'}}</td>
<td mat-cell *matCellDef="let item" class="">{{item.end_date | date : 'dd/MM/YYYY'}}</td>
</ng-container>
<ng-container matColumnDef="7">
<th mat-header-cell *matHeaderCellDef class="tal" width="150">สถานะ</th>
<td mat-cell *matCellDef="let item" class="">{{item.is_use === true? 'Open' : 'Close'}}</td>
<th mat-header-cell *matHeaderCellDef class="tac" width="150">สถานะ</th>
<td mat-cell *matCellDef="let item" class="">
<div *ngIf="item.is_use" class="status status-active">Open</div>
<div *ngIf="!item.is_use" class="status status-disabled">Close</div>
</td>
</ng-container>
<ng-container matColumnDef="8">
<th mat-header-cell *matHeaderCellDef class="tal" width="150">เครื่องมือ</th>
<td mat-cell *matCellDef="let item" class="">
<th mat-header-cell *matHeaderCellDef class="tac" width="100">เครื่องมือ</th>
<td mat-cell *matCellDef="let item">
<div class="action flex justify-center">
<div class="item">
<i class="bi bi-filetype-pdf color-main" (click)="onEdit(item.promotion_uid)"></i>
<div class="item cursor-pointer">
<i class="bi bi-pencil-square icon-edit mr-2" (click)="onEdit(item.promotion_uid)"></i>
</div>
<div class="item">
<div class="item cursor-pointer icon-delete">
<i class="bi bi-trash3 color-red" (click)="onDelete(item.promotion_uid)"></i>
</div>
</div>
@@ -77,7 +84,6 @@
</table>
</div>
<!-- <div *ngIf="dataSourceCount === 0" class="no-data"></div> -->
<mat-paginator [pageSizeOptions]="[5,10,20]" showFirstLastButtons></mat-paginator>
</div>
</div>

View File

@@ -1,4 +1,5 @@
import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
import { Subject, debounceTime, distinctUntilChanged } from 'rxjs';
import { BaseList } from 'src/app/core/base/base-list';
@Component({
@@ -7,18 +8,29 @@ import { BaseList } from 'src/app/core/base/base-list';
styleUrls: ['./list.component.scss']
})
export class ListComponent extends BaseList implements OnChanges {
name: string;
filterKeyword: Subject<string> = new Subject<string>();
@Input() promotionList: any = [];
@Output() add = new EventEmitter();
@Output() edit = new EventEmitter();
@Output() delete = new EventEmitter();
@Output() search = new EventEmitter();
constructor() {
super()
this.filterKeyword.pipe(
debounceTime(1000),
distinctUntilChanged()
).subscribe(() => this.onSearch())
}
ngOnChanges(){
this.promotionList = this.updateMatTable(this.promotionList? this.promotionList : [])
}
onSearch(){
this.search.emit(this.name)
}
onAdd(){
this.add.emit()
}
@@ -30,4 +42,8 @@ export class ListComponent extends BaseList implements OnChanges {
onDelete(uid){
this.delete.emit(uid)
}
onFilter($event) {
this.filterKeyword.next($event);
}
}

View File

@@ -236,6 +236,7 @@ mat-label{
min-height: 100px;
text-align: center;
padding-top: 40px;
font-family: $fontFamily;
}
.status {