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 @@
}
.font-36{
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 @@
<td>
<div class="flex items-center">
<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>
</div>
</td>
......@@ -178,32 +179,41 @@
</div>
<ng-template #articleModel let-modal>
<h3 mat-dialog-title>
<h3 class="modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">{{ 'Create' |
<div class="modal-headtitle ti-modal-header flex justify-between items-center p-4">
<h3 class="modal-title text-sm font-semibold text-defaulttextcolor" id="mail-ComposeLabel">{{ 'Create' |
translate }}{{ 'บทความ' | translate }}
</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="absolute flex">
<div class="px-1">
</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="grid grid-cols-12 gap-4">
<div class="xl:col-span-12 col-span-12 justify-items-center">
<div class="mb-0 text-center">
<span class="">
<img [src]="selectModel.getPicture()" alt="" id="profile-img" class="border-radius-1"
style="width: 300px; height: 200px;">
<span class="badge rounded-full bg-primary avatar-badge">
<input ng2FileSelect [uploader]="uploaderProfile" type="file" name="photo"
class="absolute w-full h-full opacity-[0]" id="profile-change">
<i class="fe fe-camera text-[.625rem]"></i>
</span>
</span>
<div class="relative w-[300px] h-[200px] overflow-hidden rounded-md group mx-auto">
<img [src]="selectModel.getPicture()" alt="Profile Picture"
class="w-full h-full block transition-all duration-300 ease-in-out group-hover:blur-md">
<div
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"
(click)="triggerFileInput()"> <input #profileChangeInput ng2FileSelect [uploader]="uploaderProfile"
type="file" name="photo" class="hidden" id="profile-change-input">
<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 class="xl:col-span-6 col-span-12">
......@@ -225,7 +235,7 @@
<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">
<div class="text-danger" *ngIf="!selectModel.author">
{{'Please fill in information' | translate}}
......@@ -233,7 +243,7 @@
</div>
<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=""
[(ngModel)]="selectModel.createdDate">
<div class="text-danger" *ngIf="!selectModel.createdDate">
......@@ -242,7 +252,8 @@
</div>
<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=""
[(ngModel)]="selectModel.lastModifiedDate">
<div class="text-danger" *ngIf="!selectModel.lastModifiedDate">
......@@ -250,18 +261,100 @@
</div>
</div>
<div class="xl:col-span-6 col-span-12">
<label for="Detail_d">{{"เรื่องย่อ" | translate}}: <span class="text-danger">*</span></label>
<quill-editor [(ngModel)]="!selectModel.excerpt" [modules]="quillConfig" [styles]="{height: '200px'}"
theme="snow" (onEditorCreated)="onEditorCreated($event)" (onContentChanged)="onContentChanged($event)"
#excerpt="ngModel">
</quill-editor>
<!-- ย่อความ -->
<div class="xl:col-span-12 col-span-12">
<label class="mt-4 font-bold font-14 text-primary" for="Detail_ex">{{ "บทความเเบบย่อ" | 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)="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 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>
</mat-dialog-content>
<mat-dialog-actions>
<button type="button" class="hs-dropdown-toggle ti-btn ti-btn-light align-middle" data-hs-overlay="#modal-detail">
<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"
(click)="closeDialog()">
{{'Cancel' | translate}}
</button>
<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 {
@ViewChild('closeModal') public childModal?: ElementRef;
@ViewChild('modalDetail') public modalDetail?: ElementRef;
@ViewChild("articleModel") articleModel: any;
@ViewChild('profileChangeInput') profileChangeInputRef!: ElementRef;
dialogRef: any
currentContentTab: number = 1;
currentExcerptTab: number = 1;
action = "new";
allSelected = false;
......@@ -71,7 +74,6 @@ export class ArticleManageComponent {
filterList: ArticleModel[] = [];
selectModel: ArticleModel = new ArticleModel();
selectedItems = new Map<string, boolean>();
editorInstance: any;
// empList: ArticleModel[] = [];
// descName = 'engName';
pageIndex = 0;
......@@ -98,24 +100,6 @@ export class ArticleManageComponent {
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 {
})
.then((willDelete: any) => {
if (willDelete) {
this.articleService.deletearticle(item).subscribe(result => {
this.articleService.deletearticleById(item.articleId).subscribe(result => {
swal("ลบสำเร็จ!!", "ลบข้อมูลสำเร็จ", "success");
this.ngOnInit();
}, error => {
......@@ -258,6 +242,7 @@ export class ArticleManageComponent {
swal("บันทึกสำเร็จ!!", "บันทึกข้อมูลสมาชิก", "success");
this.ngOnInit();
this.childModal?.nativeElement.click();
this.closeDialog();
}, error => {
console.error("เกิดข้อผิดพลาดในการบันทึก/อัปเดต:", error);
swal("ข้อผิดพลาด!!", "ไม่สามารถบันทึก/อัปเดตข้อมูลได้", "error");
......@@ -406,4 +391,9 @@ export class ArticleManageComponent {
closeDialog() {
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 {
companyId: CompanyModel[]
title: string
content: string
engcontent: string
zhcontent: string
excerpt: string
engexcerpt: string
zhexcerpt: string
category: string
author: string
picture: string
......@@ -23,7 +27,11 @@ export class ArticleModel extends BaseModel implements ArticleModel {
companyId: CompanyModel[]
title: string
content: string
engcontent: string
zhcontent: string
excerpt: string
engexcerpt: string
zhexcerpt: string
category: string
author: string
picture: string
......@@ -38,7 +46,11 @@ export class ArticleModel extends BaseModel implements ArticleModel {
this.companyId = dataToArray(data?.companyId).map((x:CompanyModel) => new CompanyModel(x,translateService))
this.title = data?.title!
this.content = data?.content!
this.engcontent = data?.engcontent!
this.zhcontent = data?.zhcontent!
this.excerpt = data?.excerpt!
this.engexcerpt = data?.engexcerpt!
this.zhexcerpt = data?.zhexcerpt!
this.category = data?.category!
this.author = data?.author!
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