Skip to content

M
mySkill-x
Project 'angular/myAppraisal' was moved to 'angular/mySkill-x'. Please update any links and bookmarks that may still have the old path.
Commit 0cfe742a by Nakarin Luankla
Options

*****************UPDATE เปลี่ยน modal แบบใหม่ ใช้ MatDialog

parent d10ab523
Showing with 129 additions and 15 deletions
src/app/components/company-components/company-registration/company-registration-page/company-registration-page.component.html
......@@ -38,15 +38,14 @@
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
(click)="modalStatus='add';setData()" data-hs-overlay="#company-registration-page-modal">
(click)="modalStatus='add';setData()" (click)="openDialog()">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
(click)="modalStatus='deleteGroup';setData()"
data-hs-overlay="#company-registration-page-alert-modal">
(click)="modalStatus='deleteGroup';setData();deleteCompany()">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
......@@ -109,8 +108,7 @@
<td>{{item.data.edesc}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
(click)="modalStatus='edit';setData(item.data)"
data-hs-overlay="#company-registration-page-modal"></i>
(click)="modalStatus='edit';setData(item.data);openDialog()"></i>
<!-- <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" *ngIf="item.data.code!='100'"
(click)="modalStatus='delete';setData(item.data)"
data-hs-overlay="#company-registration-page-alert-modal"></i> -->
......@@ -123,7 +121,54 @@
(pageSizeChange)="pageSize = $event;currentPage = 1"></app-pagination>
</div>
<ng-template #registrationModal let-modal>
<h3 mat-dialog-title>
{{modalStatus=='add'?'เพิ่มข้อมูลบริษัท':'แก้ไขข้อมูลบริษัท'}}
</h3>
<div class="w-full flex justify-end">
<div class="absolute flex">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md"
(click)="clearData()">
<i class="ti ti-eraser text-base"></i>
Clear
</button>
</div>
</div>
</div>
<mat-dialog-content class="mt-2">
<label for="input-label" class="ti-form-label mt-2rem">รหัสบริษัท<span class="text-danger">
*
<ng-container *ngIf="modalStatus=='add'&&checkPrimary()">
รหัสบริษัทซ้ำ
</ng-container>
</span></label>
<input type="text" id="input-label" class="ti-form-input w-1/2"
[class.!border-red]="modalStatus=='add'&&checkPrimary()"
[ngClass]="{'!bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'"
[(ngModel)]="dataSelect.code" [maxLength]="5">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)<span
class="text-danger">*</span></label>
<input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="dataSelect.tdesc">
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="dataSelect.edesc">
<label for="input-label" class="ti-form-label mt-2rem">ที่อยู่ บริษัท</label>
<textarea type="text" rows="2" class="ti-form-input" [(ngModel)]="dataSelect.address"></textarea>
<label for="input-label" class="ti-form-label mt-2rem">ข้อมูล ติดต่อ</label>
<textarea type="text" rows="2" class="ti-form-input" [(ngModel)]="dataSelect.contact"></textarea>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button type="button" mat-button [mat-dialog-close]
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
ย้อนกลับ
</button>
<button type="button" class="ti-btn ti-btn-success" mat-button [mat-dialog-close]="true"
[class.ti-btn-disabled]="!dataSelect.code||!dataSelect.tdesc||(modalStatus=='add'&&checkPrimary())"
[disabled]="!dataSelect.code||!dataSelect.tdesc||(modalStatus=='add'&&checkPrimary())">
บันทึกข้อมูล
</button>
</mat-dialog-actions>
</ng-template>
<div id="company-registration-page-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
......
src/app/components/company-components/company-registration/company-registration-page/company-registration-page.component.ts
import { ChangeDetectorRef, Component } from '@angular/core';
import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ToastrService } from 'ngx-toastr';
import { CompanyModel, MyCompanyModel } from 'src/app/shared/model/company.model';
import { CompanyService } from 'src/app/shared/services/company.service';
import { FileService } from 'src/app/shared/services/file.service';
import Swal from 'sweetalert2';
export interface DataModel {
code: string
tdesc: string
......@@ -16,6 +18,7 @@ export interface DataModel {
styleUrls: ['./company-registration-page.component.scss']
})
export class CompanyRegistrationPageComponent {
@ViewChild("registrationModal") registrationModal: any;
pageSize = 10
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
......@@ -34,6 +37,7 @@ export class CompanyRegistrationPageComponent {
constructor(private toastr: ToastrService,
private companyService: CompanyService,
private cdr: ChangeDetectorRef,
private dialog: MatDialog,
private fileService: FileService) { }
ngOnInit(): void {
this.getCompanyList()
......@@ -72,7 +76,18 @@ export class CompanyRegistrationPageComponent {
this.dataSelect = JSON.parse(JSON.stringify(data || { code: "", tdesc: "", edesc: "", address: "", contact: "" }));
}
addCompany() {
Swal.fire({
icon: 'question',
title: 'แจ้งเตือน',
text: 'ยืนยันการบันทึกข้อมูลหรือไม่',
showCancelButton: true,
confirmButtonText: 'บันทึกข้อมูล',
cancelButtonText: 'ย้อนกลับ',
reverseButtons: true,
}).then((result) => {
if (result.isConfirmed) {
const body = new MyCompanyModel({ companyId: this.dataSelect.code, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, addressText: this.dataSelect.address, contactText: this.dataSelect.contact })
this.dataLoading = true
this.companyService.post(body).subscribe({
......@@ -91,8 +106,27 @@ export class CompanyRegistrationPageComponent {
this.dataLoading = false
}
})
} else if (result.dismiss === Swal.DismissReason.cancel) {
this.openDialog();
}
});
}
deleteCompany() {
if(!this.numDataListChecked){
this.showAlert('กรุณาเลือกข้อมูลที่ต้องการลบ', 'error')
return
}
Swal.fire({
icon: 'question',
title: 'แจ้งเตือน',
text: 'ยืนยันการลบข้อมูลหรือไม่',
showCancelButton: true,
confirmButtonText: 'ลบข้อมูล',
cancelButtonText: 'ย้อนกลับ',
reverseButtons: true,
}).then((result) => {
if (result.isConfirmed) {
let body: CompanyModel | CompanyModel[] = []
if (this.dataSelect.code) {
body = new MyCompanyModel({ companyId: this.dataSelect.code, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, addressText: this.dataSelect.address, contactText: this.dataSelect.contact })
......@@ -117,11 +151,17 @@ export class CompanyRegistrationPageComponent {
}
})
}
});
}
showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
Swal.fire({
title: 'แจ้งเตือน',
text: text,
icon: type,
confirmButtonText: 'ตกลง',
});
}
......@@ -204,4 +244,17 @@ export class CompanyRegistrationPageComponent {
checkPrimary() {
return this.dataList.find(x => x.data.code == this.dataSelect.code)
}
openDialog() {
const dialogRef = this.dialog.open(this.registrationModal, {
width: '500px',
disableClose: false,
});
dialogRef.afterClosed().subscribe(result => {
console.log("🚀 ~ CompanyRegistrationPageComponent ~ dialogRef.afterClosed ~ result:", result)
if(result){
this.addCompany();
}
});
}
}
src/app/components/dashboard/dashboard.module.ts
......@@ -169,7 +169,7 @@ import { GridModule } from '@syncfusion/ej2-angular-grids'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { RatingModule } from '@syncfusion/ej2-angular-inputs';
import { DatagridSyncfutionComponent } from '../datagrid-syncfution/datagrid-syncfution.component';
import { MatDialogModule } from '@angular/material/dialog';
export const MY_DATE_FORMATS = {
parse: {
......@@ -320,7 +320,8 @@ export class CustomDateAdapter extends NativeDateAdapter {
MatIconModule,
GridModule,
DropDownListModule,
RatingModule
RatingModule,
MatDialogModule
],
providers: [
Bu1Service,
......
src/assets/css/style.css
......@@ -9255,13 +9255,13 @@ span.flatpickr-weekday,
}
.swal2-styled.swal2-confirm {
border-radius: 0.25rem !important;
background-color: rgb(var(--color-primary)) !important;
background-color: rgb(var(--color-success)) !important;
}
.swal2-styled.swal2-confirm:focus {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
--tw-shadow-color: rgb(var(--color-primary)) !important;
--tw-shadow-color: rgb(var(--color-success)) !important;
--tw-shadow: var(--tw-shadow-colored) !important;
}
.swal2-footer {
......@@ -9275,7 +9275,7 @@ span.flatpickr-weekday,
background-color: rgb(var(--color-danger)) !important;
}
.swal2-styled.swal2-cancel {
background-color: rgb(var(--color-secondary)) !important;
background-color: rgb(var(--color-danger)) !important;
}
.swal2-loader {
border-top-color: rgb(var(--color-primary)) !important;
......
src/styles.scss
......@@ -393,3 +393,17 @@ ngx-dropzone {
-webkit-box-shadow: 0px 0px 0px 9999px rgba(0,0,0,0.25)!important;
-moz-box-shadow: 0px 0px 0px 9999px rgba(0,0,0,0.25)!important;
}
.mat-mdc-dialog-container .mdc-dialog__title {
font-family: inherit!important;
color: rgb(var(--color-primary))!important;
font-weight: 700!important;
font-size: 1.25rem!important;
line-height: 2.5rem!important;
border-bottom-width: 1px!important;
border-bottom-color: rgb(226, 232, 240)!important;
}
.mdc-dialog__actions{
border-top-width: 1px!important;
border-top-color: rgb(226, 232, 240)!important;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment