add viewer do task details

2026-04-21 13:55:51 +00:00 · 2024-02-15 13:03:38 +01:00
parent eb2a665d2a
commit b7bccfa25d
17 changed files with 353 additions and 52 deletions
@@ -1,12 +1,18 @@
 import { z } from "zod";

-const Bodyschema = z.object({
-  SerialNumber: z.string(),
-  DispatchDocId: z.number(),
-  FolderID: z.any(),
-  Subject: z.string(),
-  Comment: z.string().optional(),
-  DelegatedUserEmail: z.string().email(),
-  UserId: z.any(),
-  DraftIds: z.string(),
+export const ViewerAttachmentParams = z.object({
+  ApplicationId: z.string().optional(),
+  Assunto: z.string({}).nonempty(),
+  DocDate: z.string(),
+  DocId: z.string().nonempty(),
+  DocNumber: z.string(),
+  FolderId: z.string(),
+  Sender: z.string(),
+  SourceDocId: z.string(),
+  content: z.string().nonempty(),
+  path: z.string().nonempty(),
+  ownerId: z.string().nonempty(),
+  status: z.string().nonempty(),
 })
+
+export type ViewerAttachment = z.infer<typeof ViewerAttachmentParams>;
@@ -1,18 +1,26 @@
 <div class="height-100 d-flex flex-column overflow-hidden">

-  <div class="overflow-x-auto d-flex pa-10" style="background-color: #d9d9d9;">
-    <div class="pa-10 mx-10 card-text selected-card ">
-      <div style="overflow: auto;">
-        Attachment 1 sdhnfjanshdfhnasdhfahsdfja shdf asdf
-      123123
+  <div class="overflow-x-auto d-flex pa-10" style="background-color: #d9d9d9;" *ngIf="!DeviceService.isDesktop()">
+
+    <div *ngFor="let attachment of taskViewerAttachment; let i = index"
+      class="ion-no-margin ion-no-padding cursor-pointer" class="pa-10 mx-10 card-text"
+      [ngClass]="{'selected-card': i === selectedIndex}" (click)="clickDocumentUPdateIndex(i)">
+      <div (click)="clickDocument(attachment)">
+
+        <div *ngIf="attachment.Assunto" class="attach-title-item tex-left">
+          {{ attachment.Assunto }}<span class="document-type" *ngIf="attachment.content != ''">Rascunho</span>
+          <br>
+          {{ attachment.Sender }}
+          <br>
+          {{ attachment.DocDate | date: 'dd/MM/yy' }}
+        </div>
+
      </div>
    </div>
-    <div class="pa-10 mx-10 card-text">
-      <div style="overflow: auto;"s>Attachment 2</div>
-    </div>
+
  </div>

-  <div class="height-100" >
+  <div #iframeContainer class="height-100" >

    <iframe _ngcontent-lxc-c492="" height="100%" width="100%" title="Iframe Example" class="iframe" src="https://gdviewer-dev.dyndns.info/pdfjs/web/viewpdf.aspx?file=/arq/638429873997432492.pdf&amp;i=MjYxIzgjMTA2IzE3IzEyODA5MSNEb2N1bWVudENlbnRlcg==&amp;e=MA==&amp;p=MA==&amp;m=cGF1bG8ucGludG9AZ2FiaW5ldGVkaWdpdGFsLmxvY2Fs&amp;d=MA==&amp;n=UGF1bG8gUGludG8=&amp;mId=MA==&amp;al=MA==&amp;cn=T0E=&amp;wm=RmFsc2U=&amp;L=MA==&amp;attInstance=MA==&amp;OpenFromMail=MA=="></iframe>
  </div>
@@ -1,13 +1,14 @@


 .card-text  {
-  width: 150px;
-  border: 1px solid black;
-  text-align: center;
+  max-width: 250px;
+  border: 1px solid #3498db;
+  color: #3498db;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
+  cursor: pointer;
  p {

    margin: 0px;
@@ -17,6 +18,16 @@

 .selected-card {
  border: 3px solid #ffb703;
-  color: blue;
+  color: #3498db;

 }
+
+iframe {
+  height: 100%;
+  width: 100%;
+}
+
+
+.selected-attachment {
+  border: 2px solid #3498db; /* You can customize the border style and color */
+}
@@ -1,6 +1,8 @@
-import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA, Input, ViewChild, ElementRef } from '@angular/core';
 import { IonicSlides } from '@ionic/angular';
-
+import { ViewerAttachment, ViewerAttachmentParams } from './prop';
+import { MiddlewareRepositoryService } from "src/app/shared/repository/middleware/middleware-repository.service"
+import { DeviceService } from "src/app/services/device.service"
@Component({
  selector: 'app-viewer-attachment',
  templateUrl: './viewer-attachment.page.html',
@@ -8,12 +10,72 @@ import { IonicSlides } from '@ionic/angular';
 })
 export class ViewerAttachmentPage implements OnInit {

+  @Input() selectedIndex = 0;
  swiperModules = [IonicSlides];
-  @Input() task: string;
+  @Input() taskViewerAttachment: ViewerAttachment[];
+  viewer: {[key: string]: HTMLDivElement} = {}
+  @ViewChild('iframeContainer') iframeContainer: ElementRef<HTMLDivElement>;

-  constructor() { }
+  constructor(
+    public middlewareRepositoryService: MiddlewareRepositoryService,
+    public DeviceService: DeviceService
+  ) { }

  ngOnInit() {
+    this.validateParams()
  }

+
+  clickDocumentUPdateIndex(index: number) {
+    // Update the selected index
+    this.selectedIndex = index;
+  }
+
+  async clickDocument(viewerAttachment: ViewerAttachment) {
+    const hasIframe = this.iframeContainer.nativeElement.querySelector("iframe")
+    if(hasIframe) {}
+
+    this.iframeContainer.nativeElement.innerHTML = ""
+    this.iframeContainer
+
+
+    const linkRequest = await this.middlewareRepositoryService.getViewerLink({
+      ApplicationId: viewerAttachment.ApplicationId,
+      DocId: viewerAttachment.DocId
+    })
+
+    if(linkRequest.isOk()) {
+
+      // Optionally, you can add new content or recreate the iframe
+      var newIframe = document.createElement('iframe');
+      newIframe.src = linkRequest.value;
+
+      newIframe.width = '100%'
+      newIframe.height = '100%'
+
+      this.iframeContainer.nativeElement.appendChild(newIframe)
+    }
+
+  }
+
+  validateParams() {
+    console.log(this.taskViewerAttachment)
+    try {
+      const validatedObjects = this.taskViewerAttachment.map((item, index) => {
+        return ViewerAttachmentParams.parse(item);
+      });
+
+      console.log('Validation successful for all elements:', validatedObjects);
+    } catch (error) {
+      // console.error('Validation failed:', error, this.taskViewerAttachment);
+    }
+  }
+
+
+  ngOnChanges() {
+    this.clickDocumentUPdateIndex(this.selectedIndex)
+    const task = this.taskViewerAttachment[this.selectedIndex]
+
+    this.clickDocument(task)
+  }
 }