Skip to content

M
myjob-manage
Commit 36fa5d75 by DESKTOP-E3GSHH7\myhr
Options

เเก้ไขหน้าตาการเพิ่มรูป

parent a2ae82b1
Showing with 160 additions and 46 deletions
src/app/DPU/common/article-manage/article-manage.component.css
...@@ -24,4 +24,21 @@ ...@@ -24,4 +24,21 @@
} }
.font-36{ .font-36{
font-size: 36px; font-size: 36px;
}
.page {
display: flex;
height: auto;
flex-direction: column;
}
.hs-tab-active {
background-color: rgb(21, 76, 156) !important;
border-color: rgb(21, 76, 156) !important;
color: #FFFFFF !important;
}
.active {
background-color: rgb(21, 76, 156) !important;
border-color: rgb(21, 76, 156) !important;
color: #FFFFFF !important;
} }
\ No newline at end of file
src/app/DPU/common/article-manage/article-manage.component.html
...@@ -65,7 +65,8 @@ ...@@ -65,7 +65,8 @@
<td> <td>
<div class="flex items-center"> <div class="flex items-center">
<span class="p-3 me-1"> <span class="p-3 me-1">
<img [src]="item.getPicture()" alt="" id="profile-img" class="border-radius-1"> <img [src]="item.getPicture()" alt="" id="profile-img" class="border-radius-1"
style="width: 180px; height: 120px; object-fit: cover;">
</span> </span>
</div> </div>
</td> </td>
...@@ -178,32 +179,41 @@ ...@@ -178,32 +179,41 @@
</div> </div>
<ng-template #articleModel let-modal> <ng-template #articleModel let-modal>
<h3 mat-dialog-title> <div class="modal-headtitle ti-modal-header flex justify-between items-center p-4">
<h3 class="modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">{{ 'Create' | <h3 class="modal-title text-sm font-semibold text-defaulttextcolor" id="mail-ComposeLabel">{{ 'Create' |
translate }}{{ 'บทความ' | translate }} translate }}{{ 'บทความ' | translate }}
</h3> </h3>
</h3> <button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
(click)="closeDialog()" #closeModal>
<span class="sr-only">{{'Close' | translate}}</span>
<i class="ri-close-line"></i>
</button>
</div>
<div class="w-full flex justify-end"> <div class="w-full flex justify-end">
<div class="absolute flex"> <div class="absolute flex">
<div class="px-1"> <div class="px-1">
</div> </div>
</div> </div>
</div> </div>
<mat-dialog-content> <mat-dialog-content style="padding: 0px; padding-left: 20px; padding-right: 20px;">
<div class="box p-9 top-4"> <div class="box p-9 top-4">
<div class="grid grid-cols-12 gap-4"> <div class="grid grid-cols-12 gap-4">
<div class="xl:col-span-12 col-span-12 justify-items-center"> <div class="xl:col-span-12 col-span-12 justify-items-center">
<div class="mb-0 text-center"> <div class="relative w-[300px] h-[200px] overflow-hidden rounded-md group mx-auto">
<span class=""> <img [src]="selectModel.getPicture()" alt="Profile Picture"
<img [src]="selectModel.getPicture()" alt="" id="profile-img" class="border-radius-1" class="w-full h-full block transition-all duration-300 ease-in-out group-hover:blur-md">
style="width: 300px; height: 200px;">
<span class="badge rounded-full bg-primary avatar-badge"> <div
<input ng2FileSelect [uploader]="uploaderProfile" type="file" name="photo" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100 cursor-pointer"
class="absolute w-full h-full opacity-[0]" id="profile-change"> (click)="triggerFileInput()"> <input #profileChangeInput ng2FileSelect [uploader]="uploaderProfile"
<i class="fe fe-camera text-[.625rem]"></i> type="file" name="photo" class="hidden" id="profile-change-input">
</span>
</span> <button
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg opacity-100 transition-opacity duration-300 ease-in-out">
<i class="fe fe-camera text-[.625rem]"></i> Upload
</button>
</div>
</div> </div>
</div> </div>
<div class="xl:col-span-6 col-span-12"> <div class="xl:col-span-6 col-span-12">
...@@ -225,7 +235,7 @@ ...@@ -225,7 +235,7 @@
<div class="xl:col-span-12 col-span-12"> <div class="xl:col-span-12 col-span-12">
<label for="author" class="form-label">{{'ผู้เขียนบทความ' | translate}}</label> <label for="author" class="text-primary mt-4 font-bold font-14">{{'ผู้เขียนบทความ' | translate}}</label>
<input type="text" class="form-control" id="author" placeholder="" [(ngModel)]="selectModel.author"> <input type="text" class="form-control" id="author" placeholder="" [(ngModel)]="selectModel.author">
<div class="text-danger" *ngIf="!selectModel.author"> <div class="text-danger" *ngIf="!selectModel.author">
{{'Please fill in information' | translate}} {{'Please fill in information' | translate}}
...@@ -233,7 +243,7 @@ ...@@ -233,7 +243,7 @@
</div> </div>
<div class="xl:col-span-6 col-span-12"> <div class="xl:col-span-6 col-span-12">
<label for="createdDate" class="form-label">{{'วันที่สร้าง' | translate}}</label> <label for="createdDate" class="mt-4 font-bold font-14 text-primary">{{'วันที่สร้าง' | translate}}</label>
<input type="datetime-local" class="form-control" id="createdDate" placeholder="" <input type="datetime-local" class="form-control" id="createdDate" placeholder=""
[(ngModel)]="selectModel.createdDate"> [(ngModel)]="selectModel.createdDate">
<div class="text-danger" *ngIf="!selectModel.createdDate"> <div class="text-danger" *ngIf="!selectModel.createdDate">
...@@ -242,7 +252,8 @@ ...@@ -242,7 +252,8 @@
</div> </div>
<div class="xl:col-span-6 col-span-12"> <div class="xl:col-span-6 col-span-12">
<label for="lastModifiedDate" class="form-label">{{'วันที่เเก้ไขล่าสุด' | translate}}</label> <label for="lastModifiedDate" class="mt-4 font-bold font-14 text-primary">{{'วันที่เเก้ไขล่าสุด' |
translate}}</label>
<input type="datetime-local" class="form-control" id="lastModifiedDate" placeholder="" <input type="datetime-local" class="form-control" id="lastModifiedDate" placeholder=""
[(ngModel)]="selectModel.lastModifiedDate"> [(ngModel)]="selectModel.lastModifiedDate">
<div class="text-danger" *ngIf="!selectModel.lastModifiedDate"> <div class="text-danger" *ngIf="!selectModel.lastModifiedDate">
...@@ -250,18 +261,100 @@ ...@@ -250,18 +261,100 @@
</div> </div>
</div> </div>
<div class="xl:col-span-6 col-span-12"> <!-- ย่อความ -->
<label for="Detail_d">{{"เรื่องย่อ" | translate}}: <span class="text-danger">*</span></label> <div class="xl:col-span-12 col-span-12">
<quill-editor [(ngModel)]="!selectModel.excerpt" [modules]="quillConfig" [styles]="{height: '200px'}" <label class="mt-4 font-bold font-14 text-primary" for="Detail_ex">{{ "บทความเเบบย่อ" | translate }}: <span
theme="snow" (onEditorCreated)="onEditorCreated($event)" (onContentChanged)="onContentChanged($event)" class="text-danger">*</span></label>
#excerpt="ngModel"> <nav class="flex rtl:space-x-reverse space-x-2 border-b border-gray-200 mt-3">
</quill-editor> <a (click)="currentExcerptTab = 1" [class.active]="currentExcerptTab === 1"
[class.hs-tab-active]="currentExcerptTab === 1"
class="border w-32 justify-center rounded-4px -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
href="javascript:void(0);" id="card-type-item-con-excerpt-1" aria-controls="card-type-con-excerpt-1">
ไทย
</a>
<a (click)="currentExcerptTab = 2" [class.active]="currentExcerptTab === 2"
[class.hs-tab-active]="currentExcerptTab === 2"
class="border w-32 justify-center rounded-4px -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
href="javascript:void(0);" id="card-type-item-con-excerpt-2" aria-controls="card-type-con-excerpt-2">
อังกฤษ
</a>
<a (click)="currentExcerptTab = 3" [class.active]="currentExcerptTab === 3"
[class.hs-tab-active]="currentExcerptTab === 3"
class="border w-32 justify-center rounded-4px -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
href="javascript:void(0);" id="card-type-item-con-excerpt-3" aria-controls="card-type-con-excerpt-3">
จีน
</a>
</nav>
<div *ngIf="currentExcerptTab === 1" id="card-type-con-excerpt-1" role="tabpanel"
aria-labelledby="card-type-item-con-excerpt-1" class="" style="background-color: rgb(255, 255, 255);">
<quill-editor [(ngModel)]="selectModel.excerpt" [modules]="quillConfig"
[styles]="{'max-height': '200px','overflow-y': 'auto'}" theme="snow">
</quill-editor>
</div>
<div *ngIf="currentExcerptTab === 2" id="card-type-con-excerpt-2" role="tabpanel"
aria-labelledby="card-type-item-con-excerpt-2" class="" style="background-color: rgb(255, 255, 255);">
<quill-editor [(ngModel)]="selectModel.engexcerpt" [modules]="quillConfig"
[styles]="{'max-height': '200px','overflow-y': 'auto'}" theme="snow">
</quill-editor>
</div>
<div *ngIf="currentExcerptTab === 3" id="card-type-con-excerpt-3" role="tabpanel"
aria-labelledby="card-type-item-con-excerpt-3" class="" style="background-color: rgb(255, 255, 255);">
<quill-editor [(ngModel)]="selectModel.zhexcerpt" [modules]="quillConfig"
[styles]="{'max-height': '200px','overflow-y': 'auto'}" theme="snow">
</quill-editor>
</div>
</div> </div>
<div class="xl:col-span-12 col-span-12">
<label class="mt-4 font-bold font-14 text-primary" for="Detail_content">{{ "เนื้อหาบทความ" | translate }}:
<span class="text-danger">*</span></label>
<nav class="flex rtl:space-x-reverse space-x-2 border-b border-gray-200 mt-3">
<a (click)="currentContentTab = 1" [class.active]="currentContentTab === 1"
[class.hs-tab-active]="currentContentTab === 1"
class="border w-32 justify-center rounded-4px -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
href="javascript:void(0);" id="card-type-item-con-content-1" aria-controls="card-type-con-content-1">
ไทย
</a>
<a (click)="currentContentTab = 2" [class.active]="currentContentTab === 2"
[class.hs-tab-active]="currentContentTab === 2"
class="border w-32 justify-center rounded-4px -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
href="javascript:void(0);" id="card-type-item-con-content-2" aria-controls="card-type-con-content-2">
อังกฤษ
</a>
<a (click)="currentContentTab = 3" [class.active]="currentContentTab === 3"
[class.hs-tab-active]="currentContentTab === 3"
class="border w-32 justify-center rounded-4px -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
href="javascript:void(0);" id="card-type-item-con-content-3" aria-controls="card-type-con-content-3">
จีน
</a>
</nav>
<div *ngIf="currentContentTab === 1" id="card-type-con-content-1" role="tabpanel"
aria-labelledby="card-type-item-con-content-1" class="" style="background-color: rgb(255, 255, 255);">
<quill-editor [(ngModel)]="selectModel.content" [modules]="quillConfig"
[styles]="{'max-height': '200px','overflow-y': 'auto'}" theme="snow">
</quill-editor>
</div>
<div *ngIf="currentContentTab === 2" id="card-type-con-content-2" role="tabpanel"
aria-labelledby="card-type-item-con-content-2" class="" style="background-color: rgb(255, 255, 255);">
<quill-editor [(ngModel)]="selectModel.engcontent" [modules]="quillConfig"
[styles]="{'max-height': '200px','overflow-y': 'auto'}" theme="snow">
</quill-editor>
</div>
<div *ngIf="currentContentTab === 3" id="card-type-con-content-3" role="tabpanel"
aria-labelledby="card-type-item-con-content-3" class="" style="background-color: rgb(255, 255, 255);">
<quill-editor [(ngModel)]="selectModel.zhcontent" [modules]="quillConfig"
[styles]="{'max-height': '200px','overflow-y': 'auto'}" theme="snow">
</quill-editor>
</div>
</div>
</div> </div>
</div> </div>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions> <mat-dialog-actions style="justify-content: end;">
<button type="button" class="hs-dropdown-toggle ti-btn ti-btn-light align-middle" data-hs-overlay="#modal-detail"> <button type="button" class="hs-dropdown-toggle ti-btn ti-btn-light align-middle" data-hs-overlay="#modal-detail"
(click)="closeDialog()">
{{'Cancel' | translate}} {{'Cancel' | translate}}
</button> </button>
<button type="button" (click)="save()" class="ti-btn bg-primary text-white !font-medium">{{'Save' | <button type="button" (click)="save()" class="ti-btn bg-primary text-white !font-medium">{{'Save' |
......
src/app/DPU/common/article-manage/article-manage.component.ts
...@@ -62,7 +62,10 @@ export class ArticleManageComponent { ...@@ -62,7 +62,10 @@ export class ArticleManageComponent {
@ViewChild('closeModal') public childModal?: ElementRef; @ViewChild('closeModal') public childModal?: ElementRef;
@ViewChild('modalDetail') public modalDetail?: ElementRef; @ViewChild('modalDetail') public modalDetail?: ElementRef;
@ViewChild("articleModel") articleModel: any; @ViewChild("articleModel") articleModel: any;
@ViewChild('profileChangeInput') profileChangeInputRef!: ElementRef;
dialogRef: any dialogRef: any
currentContentTab: number = 1;
currentExcerptTab: number = 1;
action = "new"; action = "new";
allSelected = false; allSelected = false;
...@@ -71,7 +74,6 @@ export class ArticleManageComponent { ...@@ -71,7 +74,6 @@ export class ArticleManageComponent {
filterList: ArticleModel[] = []; filterList: ArticleModel[] = [];
selectModel: ArticleModel = new ArticleModel(); selectModel: ArticleModel = new ArticleModel();
selectedItems = new Map<string, boolean>(); selectedItems = new Map<string, boolean>();
editorInstance: any;
// empList: ArticleModel[] = []; // empList: ArticleModel[] = [];
// descName = 'engName'; // descName = 'engName';
pageIndex = 0; pageIndex = 0;
...@@ -98,24 +100,6 @@ export class ArticleManageComponent { ...@@ -98,24 +100,6 @@ export class ArticleManageComponent {
this.uploadConfig(); this.uploadConfig();
} }
isDescriptionValid(): boolean {
const plainText = this.editorInstance?.getText()?.trim() || '';
return plainText.length > 0;
}
onEditorCreated(quill: any) {
this.editorInstance = quill;
}
onContentChanged(event: any) {
const text = event.editor.getText().trim();
if (text.length === 0 && this.editorInstance) {
this.editorInstance.formatLine(0, 1, 'header', false);
}
this.selectModel.content = event.html;
}
...@@ -210,7 +194,7 @@ export class ArticleManageComponent { ...@@ -210,7 +194,7 @@ export class ArticleManageComponent {
}) })
.then((willDelete: any) => { .then((willDelete: any) => {
if (willDelete) { if (willDelete) {
this.articleService.deletearticle(item).subscribe(result => { this.articleService.deletearticleById(item.articleId).subscribe(result => {
swal("ลบสำเร็จ!!", "ลบข้อมูลสำเร็จ", "success"); swal("ลบสำเร็จ!!", "ลบข้อมูลสำเร็จ", "success");
this.ngOnInit(); this.ngOnInit();
}, error => { }, error => {
...@@ -258,6 +242,7 @@ export class ArticleManageComponent { ...@@ -258,6 +242,7 @@ export class ArticleManageComponent {
swal("บันทึกสำเร็จ!!", "บันทึกข้อมูลสมาชิก", "success"); swal("บันทึกสำเร็จ!!", "บันทึกข้อมูลสมาชิก", "success");
this.ngOnInit(); this.ngOnInit();
this.childModal?.nativeElement.click(); this.childModal?.nativeElement.click();
this.closeDialog();
}, error => { }, error => {
console.error("เกิดข้อผิดพลาดในการบันทึก/อัปเดต:", error); console.error("เกิดข้อผิดพลาดในการบันทึก/อัปเดต:", error);
swal("ข้อผิดพลาด!!", "ไม่สามารถบันทึก/อัปเดตข้อมูลได้", "error"); swal("ข้อผิดพลาด!!", "ไม่สามารถบันทึก/อัปเดตข้อมูลได้", "error");
...@@ -406,4 +391,9 @@ export class ArticleManageComponent { ...@@ -406,4 +391,9 @@ export class ArticleManageComponent {
closeDialog() { closeDialog() {
this.dialogRef.close() this.dialogRef.close()
} }
triggerFileInput(): void {
if (this.profileChangeInputRef) {
this.profileChangeInputRef.nativeElement.click();
}
}
} }
\ No newline at end of file
src/app/DPU/models/article.model.ts
...@@ -8,7 +8,11 @@ export interface ArticleModel { ...@@ -8,7 +8,11 @@ export interface ArticleModel {
companyId: CompanyModel[] companyId: CompanyModel[]
title: string title: string
content: string content: string
engcontent: string
zhcontent: string
excerpt: string excerpt: string
engexcerpt: string
zhexcerpt: string
category: string category: string
author: string author: string
picture: string picture: string
...@@ -23,7 +27,11 @@ export class ArticleModel extends BaseModel implements ArticleModel { ...@@ -23,7 +27,11 @@ export class ArticleModel extends BaseModel implements ArticleModel {
companyId: CompanyModel[] companyId: CompanyModel[]
title: string title: string
content: string content: string
engcontent: string
zhcontent: string
excerpt: string excerpt: string
engexcerpt: string
zhexcerpt: string
category: string category: string
author: string author: string
picture: string picture: string
...@@ -38,7 +46,11 @@ export class ArticleModel extends BaseModel implements ArticleModel { ...@@ -38,7 +46,11 @@ export class ArticleModel extends BaseModel implements ArticleModel {
this.companyId = dataToArray(data?.companyId).map((x:CompanyModel) => new CompanyModel(x,translateService)) this.companyId = dataToArray(data?.companyId).map((x:CompanyModel) => new CompanyModel(x,translateService))
this.title = data?.title! this.title = data?.title!
this.content = data?.content! this.content = data?.content!
this.engcontent = data?.engcontent!
this.zhcontent = data?.zhcontent!
this.excerpt = data?.excerpt! this.excerpt = data?.excerpt!
this.engexcerpt = data?.engexcerpt!
this.zhexcerpt = data?.zhexcerpt!
this.category = data?.category! this.category = data?.category!
this.author = data?.author! this.author = data?.author!
this.picture = data?.picture! this.picture = data?.picture!
......
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