UPDATE open image

src/app/apps/approve-course/approve-course.component.html

@@ -26,7 +26,7 @@
               </tr>
               <tr  *ngFor="let data of filterListCourse() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
                 <td class="text-center">{{i+1}}</td>
-                <td><img width="100" class="border p-1" src="{{data.getImage()}}"></td>
+                <td><img width="100" class="border p-1" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())"></td>
                 <td>{{ data.thName }}</td>
                 <td class="text-wrap">{{ data.thDesc }}</td>
                 <td>{{data.courseType}}</td>

src/app/apps/approve-course/approve-course.component.ts

@@ -4,6 +4,7 @@ import { CourseModel } from 'src/app/model/course.model';
 import { CourseService } from 'src/app/service/course.service';
 import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
 import { AlertModalComponent } from '../alert-modal/alert-modal.component';
+import { OpenImageComponent } from '../open-image/open-image.component';
 declare var require: any
 const FileSaver = require('file-saver');
 @Component({
@@ -18,6 +19,17 @@ export class ApproveCourseComponent implements OnInit {
   search:string = ''
   constructor(private modalService: NgbModal,private courseService:CourseService) {
   }
+  openEmployeeModal(image:string) {
+    const modalRef = this.modalService.open(OpenImageComponent, {
+      centered: true,
+      windowClass: 'my-dialog-img-preview'
+    })
+    modalRef.componentInstance.linkImage = image
+    modalRef.result.then(result => {
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
   async downloadFile(logId:string){
     try {
       const data = await this.courseService.downloadFile(logId).toPromise();

src/app/apps/approve-doc/approve-doc.component.html

@@ -27,7 +27,7 @@
               </tr>
               <tr  *ngFor="let data of filterListDoc() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
                 <td class="text-center">{{i+1}}</td>
-                <td><img width="100" class="border p-1" src="{{data.getImage()}}"></td>
+                <td><img width="100" class="border p-1" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())"></td>
                 <!-- <td >{{data.id}}</td> -->
                 <td>{{ data.thName }}</td>
                 <td>{{ data.thDesc }}</td>

src/app/apps/approve-doc/approve-doc.component.ts

@@ -4,6 +4,7 @@ import { DocumentModel } from 'src/app/model/document.model';
 import { AlertModalComponent } from '../alert-modal/alert-modal.component';
 import { DocumentService } from 'src/app/service/document.service';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { OpenImageComponent } from '../open-image/open-image.component';
 declare var require: any
 const FileSaver = require('file-saver');
 @Component({
@@ -18,6 +19,17 @@ export class ApproveDocComponent implements OnInit {
   search:string = ''
   constructor(private modalService: NgbModal,private documentService:DocumentService) {
   }
+  openEmployeeModal(image:string) {
+    const modalRef = this.modalService.open(OpenImageComponent, {
+      centered: true,
+      windowClass: 'my-dialog-img-preview'
+    })
+    modalRef.componentInstance.linkImage = image
+    modalRef.result.then(result => {
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
   async downloadFile(logId:string,lang:string){
     try {
       const data = await this.documentService.downloadFile(logId,lang).toPromise();

src/app/apps/approve-excel/approve-excel.component.html

@@ -26,7 +26,7 @@
             </tr>
             <tr  *ngFor="let data of filterListExcel() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
               <td class="text-center">{{i+1}}</td>
-              <td><img width="100" class="border p-1" src="{{data.getImage()}}"></td>
+              <td><img width="100" class="border p-1" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())"></td>
               <!-- <td >{{data.id}}</td> -->
               <td>{{ data.thName }}</td>
                 <td>{{ data.thDesc }}</td>

src/app/apps/approve-excel/approve-excel.component.ts

@@ -4,6 +4,7 @@ import { ExcelModel } from 'src/app/model/excel.model';
 import { ExcelService } from 'src/app/service/excel.service';
 import { AlertModalComponent } from '../alert-modal/alert-modal.component';
 import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
+import { OpenImageComponent } from '../open-image/open-image.component';
 declare var require: any
 const FileSaver = require('file-saver');
 @Component({
@@ -18,6 +19,17 @@ export class ApproveExcelComponent implements OnInit {
   search:string = ''
   constructor(private modalService: NgbModal,private excelService:ExcelService) {
   }
+  openEmployeeModal(image:string) {
+    const modalRef = this.modalService.open(OpenImageComponent, {
+      centered: true,
+      windowClass: 'my-dialog-img-preview'
+    })
+    modalRef.componentInstance.linkImage = image
+    modalRef.result.then(result => {
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
   async downloadFile(logId:string){
     try {
       const data = await this.excelService.downloadFile(logId).toPromise();

src/app/apps/apps.module.ts

@@ -95,6 +95,7 @@ import { ViewListDocComponent } from './view-list-doc/view-list-doc.component';
 import { ViewListCourseComponent } from './view-list-course/view-list-course.component';
 import { TagInputModule } from 'ngx-chips';
 import { ApprovedListComponent } from './approved-list/approved-list.component';
+import { OpenImageComponent } from './open-image/open-image.component';
 
 
 @NgModule({
@@ -167,7 +168,8 @@ import { ApprovedListComponent } from './approved-list/approved-list.component';
     ViewListExcelComponent,
     ViewListDocComponent,
     ViewListCourseComponent,
-    ApprovedListComponent
+    ApprovedListComponent,
+    OpenImageComponent
   ],
   providers: [
     ContactService,

src/app/apps/list-course/list-course.component.html

@@ -24,7 +24,7 @@
             <tbody>
               <tr  *ngFor="let data of filterListCourse() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
                 <td class="text-center">{{i+1}}</td>
-                <td><img width="100" class="border p-1" src="{{data.getImage()}}"></td>
+                <td><img width="100" class="border p-1" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())"></td>
                 <!-- <td >{{data.id}}</td> -->
                 <td>{{ data.thName }}</td>
                 <td class="text-wrap">{{ data.thDesc }}</td>

src/app/apps/list-course/list-course.component.ts

@@ -10,6 +10,7 @@ import { TagService } from 'src/app/service/tag.service';
 import { TagModel } from 'src/app/model/tag.mmodel';
 import { GroupModel } from 'src/app/model/group.mmodel';
 import { GroupService } from 'src/app/service/group.service';
+import { OpenImageComponent } from '../open-image/open-image.component';
 declare var require: any
 const FileSaver = require('file-saver');
 @Component({
@@ -228,6 +229,17 @@ export class ListCourseComponent implements OnInit {
       console.error('Error loading data:', error);
     }
   }
+  openEmployeeModal(image:string) {
+    const modalRef = this.modalService.open(OpenImageComponent, {
+      centered: true,
+      windowClass: 'my-dialog-img-preview'
+    })
+    modalRef.componentInstance.linkImage = image
+    modalRef.result.then(result => {
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
   openLink(url:string){
     window.open(url, "_blank");
   }

src/app/apps/list-doc/list-doc.component.html

@@ -25,11 +25,11 @@
           <tbody>
             <tr  *ngFor="let data of filterListDoc() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
               <td class="text-center">{{i+1}}</td>
-              <td><img width="100" class="border p-1" src="{{data.getImage()}}"></td>
+              <td><img width="100" class="border p-1" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())"></td>
               <!-- <td >{{data.id}}</td> -->
               <td>{{ data.thName }}</td>
               <td>{{ data.thDesc }}</td>
-              <td class="text-center"><i class="fas fa-link pointer" (click)="openLink(data.link1)"></i></td>
+              <td class="text-center"><i class="fas fa-link pointer" (click)="openLink(data.link1)" ></i></td>
               <td class="text-center"> <i class="fas fa-download pointer" (click)="downloadFile(data.logId,'tha')"></i></td>
               <td class="text-center"> <i class="fas fa-download pointer" (click)="downloadFile(data.logId,'eng')"></i></td>
               <td class="text-center">

src/app/apps/list-doc/list-doc.component.ts

@@ -9,6 +9,7 @@ import { TagService } from 'src/app/service/tag.service';
 import { TagModel } from 'src/app/model/tag.mmodel';
 import { GroupModel } from 'src/app/model/group.mmodel';
 import { GroupService } from 'src/app/service/group.service';
+import { OpenImageComponent } from '../open-image/open-image.component';
 declare var require: any
 const FileSaver = require('file-saver');
 @Component({
@@ -237,6 +238,17 @@ export class ListDocComponent implements OnInit {
       console.error('Error loading data:', error);
     }
   }
+  openEmployeeModal(image:string) {
+    const modalRef = this.modalService.open(OpenImageComponent, {
+      centered: true,
+      windowClass: 'my-dialog-img-preview'
+    })
+    modalRef.componentInstance.linkImage = image
+    modalRef.result.then(result => {
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
   closeBtnClick() {
     this.modalService.dismissAll();
   }

src/app/apps/list-excell/list-excell.component.html

@@ -24,11 +24,11 @@
             <tbody>
               <tr  *ngFor="let data of filterListExcel() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
                 <td class="text-center">{{i+1}}</td>
-                <td><img width="100" class="border p-1" src="{{data.getImage()}}"></td>
+                <td><img width="100" class="border p-1" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())"></td>
                 <!-- <td >{{data.id}}</td> -->
                 <td>{{ data.thName }}</td>
                 <td>{{ data.thDesc }}</td>
-                <td class="text-center"><i class="fas fa-link pointer" (click)="openLink(data.link1)"></i></td>
+                <td class="text-center"><i class="fas fa-link pointer" (click)="openLink(data.link1)" ></i></td>
                 <td class="text-center"> <i class="fas fa-download pointer" (click)="downloadFile(data.logId)"></i></td>
                 <td class="text-center">
 

src/app/apps/list-excell/list-excell.component.ts

@@ -9,6 +9,7 @@ import { TagService } from 'src/app/service/tag.service';
 import { TagModel } from 'src/app/model/tag.mmodel';
 import { GroupService } from 'src/app/service/group.service';
 import { GroupModel } from 'src/app/model/group.mmodel';
+import { OpenImageComponent } from '../open-image/open-image.component';
 declare var require: any
 const FileSaver = require('file-saver');
 
@@ -240,7 +241,17 @@ export class ListExcelComponent implements OnInit {
     this.getListGroup();
   }
 
-
+  openEmployeeModal(image:string) {
+    const modalRef = this.modalService.open(OpenImageComponent, {
+      centered: true,
+      windowClass: 'my-dialog-img-preview'
+    })
+    modalRef.componentInstance.linkImage = image
+    modalRef.result.then(result => {
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
   closeBtnClick() {
     this.modalService.dismissAll();
   }

src/app/apps/open-image/open-image.component.html

+<img [src]="linkImage" style="width:100%;transform: scale(1.4)">
\ No newline at end of file

src/app/apps/open-image/open-image.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-open-image',
+  templateUrl: './open-image.component.html',
+  styleUrls: ['./open-image.component.scss']
+})
+export class OpenImageComponent implements OnInit {
+  @Input() linkImage: string=''
+  constructor(public activeModal: NgbActiveModal) { }
+  
+  ngOnInit(): void {
+  }
+
+}

src/app/apps/view-list-course/view-list-course.component.html

@@ -28,7 +28,7 @@
               </tr>
               <tr  *ngFor="let data of filterListCourse() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
                 <td class="text-center">{{i+1}}</td>
-                <td><img width="100" class="border p-1" src="{{data.getImage()}}"></td>
+                <td><img width="100" class="border p-1" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())"></td>
                 <td>{{ data.thName }}</td>
                 <td class="text-wrap">{{ data.thDesc }}</td>
                 <td>{{data.courseType}}</td>

src/app/apps/view-list-course/view-list-course.component.ts

@@ -6,6 +6,7 @@ import { CourseModel } from 'src/app/model/course.model';
 import { CourseContentModel } from 'src/app/model/course-content.model';
 import { ActivatedRoute } from '@angular/router';
 import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
+import { OpenImageComponent } from '../open-image/open-image.component';
 declare var require: any
 const FileSaver = require('file-saver');
 @Component({
@@ -24,6 +25,17 @@ export class ViewListCourseComponent implements OnInit {
       this.checkType = result.get("type")!;
    });
   }
+  openEmployeeModal(image:string) {
+    const modalRef = this.modalService.open(OpenImageComponent, {
+      centered: true,
+      windowClass: 'my-dialog-img-preview'
+    })
+    modalRef.componentInstance.linkImage = image
+    modalRef.result.then(result => {
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
   async downloadFile(logId:string){
     try {
       const data = await this.courseService.downloadFileContent(logId).toPromise();

src/app/apps/view-list-doc/view-list-doc.component.html

@@ -29,7 +29,7 @@
               </tr>
               <tr  *ngFor="let data of filterListDoc() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
                 <td class="text-center">{{i+1}}</td>
-                <td><img width="100" class="border p-1" src="{{data.getImage()}}"></td>
+                <td><img width="100" class="border p-1" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())"></td>
                 <!-- <td >{{data.id}}</td> -->
                 <td>{{ data.thName }}</td>
                 <td>{{ data.thDesc }}</td>

src/app/apps/view-list-doc/view-list-doc.component.ts

@@ -5,6 +5,7 @@ import { DocumentService } from 'src/app/service/document.service';
 import { DocumentContentModel } from 'src/app/model/document-content.model';
 import { ActivatedRoute } from '@angular/router';
 import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
+import { OpenImageComponent } from '../open-image/open-image.component';
 declare var require: any
 const FileSaver = require('file-saver');
 @Component({
@@ -23,7 +24,17 @@ export class ViewListDocComponent implements OnInit {
       this.checkType = result.get("type")!;
    });
   }
-
+  openEmployeeModal(image:string) {
+    const modalRef = this.modalService.open(OpenImageComponent, {
+      centered: true,
+      windowClass: 'my-dialog-img-preview'
+    })
+    modalRef.componentInstance.linkImage = image
+    modalRef.result.then(result => {
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
   deleteFile(item:DocumentContentModel){
     const modalRef = this.modalService.open(ConfirmModalComponent, {
       centered: true,

src/app/apps/view-list-excel/view-list-excel.component.html

@@ -28,7 +28,7 @@
               </tr>
               <tr  *ngFor="let data of filterListExcel() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
                 <td class="text-center">{{i+1}}</td>
-                <td><img width="100" class="border p-1" src="{{data.getImage()}}"></td>
+                <td><img width="100" class="border p-1" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())"></td>
                 <!-- <td >{{data.id}}</td> -->
                 <td>{{ data.thName }}</td>
                   <td>{{ data.thDesc }}</td>

src/app/apps/view-list-excel/view-list-excel.component.ts

@@ -5,6 +5,7 @@ import { ExcelService } from 'src/app/service/excel.service';
 import { AlertModalComponent } from '../alert-modal/alert-modal.component';
 import { ExcelContentModel } from 'src/app/model/excel-content.model';
 import { ActivatedRoute } from '@angular/router';
+import { OpenImageComponent } from '../open-image/open-image.component';
 declare var require: any
 const FileSaver = require('file-saver');
 @Component({
@@ -23,6 +24,17 @@ export class ViewListExcelComponent implements OnInit {
        this.checkType = result.get("type")!;
     });
   }
+  openEmployeeModal(image:string) {
+    const modalRef = this.modalService.open(OpenImageComponent, {
+      centered: true,
+      windowClass: 'my-dialog-img-preview'
+    })
+    modalRef.componentInstance.linkImage = image
+    modalRef.result.then(result => {
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
   deleteFile(item:ExcelContentModel){
     const modalRef = this.modalService.open(ConfirmModalComponent, {
       centered: true,

src/styles.scss

@@ -73,4 +73,13 @@ body {
   }
   .pointer:hover{
     color: #2962ff;
-  }
+  }
\ No newline at end of file
+  .my-dialog-img-preview .modal-dialog {
+    display: flex !important;
+    justify-content: center !important;
+    .modal-content {
+        background-color: #fff0 !important;
+        border: none !important;
+        width: auto !important;
+    }
+}
\ No newline at end of file