Phet/mirror-cathay
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[update]

Browse Source
This commit is contained in:
Supichai Pothong
2023-10-18 18:25:42 +07:00
parent 63a58292d5
commit 480cbefd74
11 changed files with 110 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/core/base/base-list.ts
View File

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

2
src/app/core/service/common/promotion.service.ts
View File

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

1
src/app/pages/setting/banner/container/banner/banner.container.html
View File

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

16
src/app/pages/setting/banner/container/banner/banner.container.ts
View File

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

34
src/app/pages/setting/banner/presenter/list/list.component.html
View File

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

28
src/app/pages/setting/banner/presenter/list/list.component.ts
View File

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

1
src/app/pages/setting/promotion/container/promotion/promotion.container.html
View File

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

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

34
src/app/pages/setting/promotion/presenter/list/list.component.html
View File

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

16
src/app/pages/setting/promotion/presenter/list/list.component.ts
View File

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

1
src/styles/app.scss
View File

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