add tiny to viewer

This commit is contained in:
Peter Maquiran
2024-02-22 15:42:04 +01:00
parent 7583bf5306
commit e778039632
9 changed files with 185 additions and 40 deletions
+14
View File
@@ -0,0 +1,14 @@
interface Document {
ApplicationId: string;
Assunto: string;
DocDate: string;
DocId: string;
DocNumber: string;
FolderId: string;
Sender: string;
SourceDocId: string;
content: string;
path: string;
ownerId: string;
status: string;
}
@@ -217,7 +217,7 @@ export class DespachoPage implements OnInit {
let object = {
"ApplicationId": "",
"Assunto": resd.data.description,
"DocDate": "",
"DocDate":resd?.createdAt,
"DocId": resd.data.id,
"DocNumber": "",
"FolderId": "",
@@ -7,15 +7,17 @@ import { IonicModule } from '@ionic/angular';
import { ViewerAttachmentPageRoutingModule } from './viewer-attachment-routing.module';
import { ViewerAttachmentPage } from './viewer-attachment.page';
import { EditorModule } from '@tinymce/tinymce-angular';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
ViewerAttachmentPageRoutingModule
ViewerAttachmentPageRoutingModule,
EditorModule
],
declarations: [ViewerAttachmentPage],
declarations: [ViewerAttachmentPage, ],
exports: [ViewerAttachmentPage],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
@@ -1,10 +1,10 @@
<div class="height-100 d-flex flex-column overflow-hidden width-100">
<div class="overflow-x-auto d-flex pa-10 attachment-list" style="background-color: #d9d9d9;" *ngIf="!DeviceService.isDesktop()">
<div class="overflow-x-auto d-flex pa-10 attachment-list" style="background-color: #d9d9d9;" *ngIf="showAttachmentList">
<div *ngFor="let attachment of taskViewerAttachment; let i = index"
class="ion-no-margin ion-no-padding cursor-pointer attachment-list" class="pa-10 mx-10 card-text"
[ngClass]="{'selected-card': i === selectedIndex}">
[ngClass]="{'selected-card': i === selectedIndex}" >
<div (click)="clickDocument(attachment, i )">
<div *ngIf="attachment.Assunto" class="attach-title-item tex-left">
@@ -20,9 +20,35 @@
</div>
<div #iframeContainer class="height-100 flex-1" >
<div [ngClass]="{'d-none': taskViewerAttachment[selectedIndex].content != ''}" #iframeContainer class="height-100 flex-1" >
</div>
<editor
*ngIf="taskViewerAttachment[selectedIndex].content"
class="container-img height-100"
apiKey="wr5dk69kive0qr9ig6y5spqvlj3a0tsiwnzdsexnz241k69p"
[(ngModel)]="editorContent"
[init]="{
save_onsavecallback: 'onSaveContent',
language: 'pt_PT',
height: '100%',
menubar: false,
autosave_interval:'3s',
plugins: [
'advlist autolink autosave lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount print'
],
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | print | save | help ' }"
initialValue='{{content}}'
[(ngModel)]="content"
(ngModelChange)="onEditorContentChange()"
></editor>
</div>
@@ -31,17 +31,3 @@ iframe {
.selected-attachment {
border: 2px solid #3498db; /* You can customize the border style and color */
}
@media screen and (orientation:portrait) {
.attachment-list {
}
}
@media screen and (orientation:landscape) {
.attachment-list {
display: none !important;
}
}
@@ -10,11 +10,15 @@ import { DeviceService } from "src/app/services/device.service"
})
export class ViewerAttachmentPage implements OnInit {
@Input() showAttachmentList = true;
@Input() selectedIndex = 0;
swiperModules = [IonicSlides];
@Input() taskViewerAttachment: ViewerAttachment[];
viewer: {[key: string]: HTMLDivElement} = {}
@ViewChild('iframeContainer') iframeContainer: ElementRef<HTMLDivElement>;
editorContent: "";
content: ""
private saveTimeout: any;
constructor(
public middlewareRepositoryService: MiddlewareRepositoryService,
@@ -87,4 +91,24 @@ export class ViewerAttachmentPage implements OnInit {
this.clickDocument(task, this.selectedIndex)
}
somefunction() {
console.log('Saved tinymce')
}
onEditorContentChange() {
console.log('Autosave successful! Content saved to local storage1.');
if (this.saveTimeout) {
clearTimeout(this.saveTimeout);
}
this.saveTimeout = setTimeout(() => {
this.saveDraft();
clearTimeout(this.saveTimeout);
}, 5000);
}
saveDraft() {}
}
@@ -12,6 +12,14 @@ import { TaskDetailContentPageModule } from '../task-detail-content/task-detail-
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { ViewerAttachmentPageModule } from "../../../../pages/gabinete-digital/viewer-attachment/viewer-attachment.module";
import {MatMenuModule} from '@angular/material/menu';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
@NgModule({
declarations: [TaskDetailsPage],
exports: [TaskDetailsPage],
@@ -24,7 +32,11 @@ import { ViewerAttachmentPageModule } from "../../../../pages/gabinete-digital/v
TaskDetailHeaderPageModule,
TaskDetailContentPageModule,
FontAwesomeModule,
ViewerAttachmentPageModule
ViewerAttachmentPageModule,
MatMenuModule,
MatButtonModule,
MatIconModule,
]
})
export class TaskDetailsPageModule {}
@@ -14,6 +14,9 @@
</div>
</div>
</div>
</ion-header>
<ion-content class="d-flex width-100 height-100">
@@ -21,7 +24,7 @@
<div class="d-flex height-100 width-100">
<div class="overflow-y-auto height-100 width-60 visionDesktop-block" style="overflow: hidden; margin-right:20px;">
<app-viewer-attachment *ngIf="mergedArray.length >= 1" [selectedIndex]="selectedIndex" [taskViewerAttachment]="mergedArray" class="height-100" ></app-viewer-attachment>
<app-viewer-attachment *ngIf="mergedArray.length >= 1" [showAttachmentList]=false [selectedIndex]="selectedIndex" [taskViewerAttachment]="mergedArray" class="height-100" ></app-viewer-attachment>
</div>
<div class=" flex-1 d-flex flex-column height-100 d-flex" >
@@ -84,12 +87,32 @@
<div class="d-flex" >
<div class="flex-1">
<p class="attach-title-item overflow-hidden">{{ Document.Assunto || "Sem assunto" }} <span class="document-type" *ngIf="Document.Assunto =='teste xss3'">Rascunho</span></p>
<p class="attach-title-item overflow-hidden">{{ Document.Assunto || "Sem assunto" }} <span class="document-type" *ngIf="Document.content">Rascunho</span></p>
<p class="overflow-hidden"><span class="span-left">{{ Document.Sender}}</span><span class="span-right">{{ Document.DocDate | date: 'dd-MM-yyyy HH:mm' }}</span></p>
</div>
<div class="d-flex justify-center align-center font-25" (click)="clickDocumentUPdateIndex(Document.DocId, Document, Document.content);">
<fa-icon icon="ellipsis-v" class="menu-icon font-awesome-1"></fa-icon>
<!-- <div class="d-flex justify-center align-center font-25" (click)="clickDocumentUPdateIndex(Document.DocId, Document, Document.content);"> -->
<div class="d-flex justify-center align-center font-25" >
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button (click)="openExpedientActionsModal('0', Document)" mat-menu-item>
<span>Efetuar Despacho</span>
</button>
<button (click)="openExpedientActionsModal('1', Document)" mat-menu-item >
<span>Solicitar Parecer</span>
</button>
<button *ngIf="!p.userRole(['PR']) && !p.userPermission([p.permissionList.Gabinete.pr_tasks])" (click)="openExpedientActionsModal('1', Document)" mat-menu-item >
<span>Pedido de Deferimento</span>
</button>
<button (click)="openBookMeetingModal(Document)" mat-menu-item>
<span>Marcar Reunião</span>
</button>
<button *ngIf="p.userRole('PR')" mat-menu-item>
<span>Assinar</span>
</button>
</mat-menu>
</div>
</div>
@@ -99,19 +122,6 @@
<div style="border-radius: 50px;position: relative;top: 3px;left: 50px;">
<ion-row class="timeline-date align-center pr-10 visionMobile-block" >
<button class="no-color" *ngIf="dropButton" (click)="dropButton=!dropButton" >
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="collaps font-25" src="assets/images/icons-collaps-up.svg" ></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="collaps font-25" src="assets/images/theme/gov/icons-collaps-up.svg" ></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="collaps font-25" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-collaps-up.svg"></ion-icon>
</button>
<button class="no-color" *ngIf="!dropButton" (click)="dropButton=!dropButton">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="collaps font-25" src="assets/images/icons-collaps-down.svg" ></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="collaps font-25" src="assets/images/theme/gov/icons-collaps-down.svg" ></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="collaps font-25" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-collaps-down.svg" ></ion-icon>
</button >
</ion-row>
</div>
<app-viewer-attachment *ngIf="mergedArray.length >= 1" [selectedIndex]="selectedIndex" [taskViewerAttachment]="mergedArray" class="visionMobile-flex height-100" ></app-viewer-attachment>
</div>
@@ -1,8 +1,12 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { customTask, fullTask } from 'src/app/models/dailyworktask.model';
import { customTask } from 'src/app/models/dailyworktask.model';
import { ThemeService } from 'src/app/services/theme.service'
import { DeviceService } from "src/app/services/device.service"
import { DocumentViewerOptionService } from "src/app/services/document-viewer-option.service";
import { PermissionService } from 'src/app/services/permission.service';
import { ExpedientTaskModalPage } from 'src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page';
import { ModalController } from '@ionic/angular';
import { DocumentSetUpMeetingPage } from 'src/app/modals/document-set-up-meeting/document-set-up-meeting.page';
@Component({
selector: 'app-task-details',
@@ -29,6 +33,8 @@ export class TaskDetailsPage implements OnInit {
public ThemeService: ThemeService,
public DeviceService: DeviceService,
private DocumentViewerOptionService: DocumentViewerOptionService,
public p: PermissionService,
private modalController: ModalController
) {
this.DeviceService.isDesktop();
}
@@ -52,4 +58,69 @@ export class TaskDetailsPage implements OnInit {
this.DocumentViewerOptionService.openOptions();
}
async openExpedientActionsModal( taskAction: any, Document) {
let classs;
if( window.innerWidth < 701) {
classs = 'modal modal-desktop'
} else {
classs = 'modal modal-desktop showAsideOptions'
}
// check passing
//console.log('this.Document----------openExpedientActionsModal', this.Document)
const modal = await this.modalController.create({
component: ExpedientTaskModalPage,
componentProps: {
taskAction: taskAction, // check
task: this.fulltask, // check
document: Document, // nope
aplicationId: Document.ApplicationId || Document.ApplicationID, // check
applicationId: Document.ApplicationId || Document.ApplicationID,
docId: Document.docId,
createProcessFromFile: true,
},
cssClass: classs,
});
modal.onDidDismiss().then(
async(res)=>{}
, (error) => {
console.log(error)
}
);
await modal.present();
}
async openBookMeetingModal(Document) {
//console.log('this.Document----------', this.Document)
let classs;
if( window.innerWidth < 701) {
classs = 'book-meeting-modal modal modal-desktop'
} else {
classs = 'modal modal-desktop showAsideOptions'
}
// check passing
const modal = await this.modalController.create({
component: DocumentSetUpMeetingPage,
componentProps: {
subject: this.task.Subject, // check
document: Document, // document
},
cssClass: classs,
backdropDismiss: false
});
modal.onDidDismiss().then(res=>{
//this.RouteService.goBack();
}, (error) => {
console.log(error)
});
await modal.present();
}
}