visualizar anexos, sem precisar baixar

src/Pages/Classroom/ClassroomOne/MeetingList/Meeting/ModalFiles/index.tsx

@@ -0,0 +1,26 @@
+import { Galleria } from "primereact/galleria";
+import { MeetingArc } from "../../../../../../Context/Classroom/Meeting/MeetingListRegistration/type";
+import { Dialog } from "primereact/dialog";
+import { Padding } from "../../../../../../Styles/styles";
+
+const ModalFiles = ({ item, onHide, visible, index }: { item: MeetingArc[], visible: boolean, onHide: () => void, index: number }) => {
+
+
+
+    const itemTemplate = (item: MeetingArc) => {
+        return <img src={item.archive_url} alt={item.original_name} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    return (
+        <Dialog onHide={onHide} visible={visible} header="Evidências do encontro" >
+            <Padding>
+
+                <div className="card">
+                    <Galleria value={item} style={{ maxWidth: '640px', maxHeight: "" }} showThumbnails={false} showIndicators activeIndex={index} item={itemTemplate} />
+                </div>
+            </Padding>
+        </Dialog>
+    )
+}
+
+export default ModalFiles

src/Pages/Classroom/ClassroomOne/MeetingList/Meeting/UploadArchivesAttendanceList/index.tsx

@@ -27,12 +27,12 @@ const ListArchivesAttendanceList = ({ item }: { item: MeetingArc }) => {
           marginBottom: "8px",
         }}
         onClick={() => {
-          window.open(
-            item.archive_url ??
-              process.env.REACT_APP_API_PATH +
-                `archive-meeting-bff/${item.id}/` +
-                item.original_name
-          );
+          // window.open(
+          //   item.archive_url ??
+          //     process.env.REACT_APP_API_PATH +
+          //       `archive-meeting-bff/${item.id}/` +
+          //       item.original_name
+          // );
         }}
       >
         <Row id="space-between">

src/Pages/Classroom/ClassroomOne/MeetingList/Meeting/index.tsx

@@ -1,5 +1,5 @@
 import { Message } from "primereact/message";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import Upload from "../../../../../Components/Upload";
 import { AplicationContext } from "../../../../../Context/Aplication/context";
 import MeetingListRegistrationProvider, {
@@ -15,6 +15,7 @@ import ListArchivesAttendanceList from "./UploadArchivesAttendanceList";
 import Loading from "../../../../../Components/Loading";
 import TextAreaComponent from "../../../../../Components/TextArea";
 import { Chip } from "primereact/chip";
+import ModalFiles from "./ModalFiles";
 
 const Meeting = () => {
   return (
@@ -29,6 +30,9 @@ const MeetingPage = () => {
     MeetingListRegistrationContext
   ) as MeetingListRegisterTypes;
 
+  const [visible, setVisible] = useState(false)
+  const [indexImage, setindexImage] = useState(0)
+
   const propsAplication = useContext(
     AplicationContext
   ) as PropsAplicationContext;
@@ -47,19 +51,19 @@ const MeetingPage = () => {
                     props.meeting?.status === Status.PENDING
                       ? "warn"
                       : props.meeting?.status === Status.APPROVED
-                      ? "success"
-                      : props.meeting?.status === Status.REPROVED
-                      ? "error"
-                      : "info"
+                        ? "success"
+                        : props.meeting?.status === Status.REPROVED
+                          ? "error"
+                          : "info"
                   }
                   text={
                     props.meeting?.status === Status.PENDING
                       ? "Pendente"
                       : props.meeting?.status === Status.APPROVED
-                      ? "Aprovado"
-                      : props.meeting?.status === Status.REPROVED
-                      ? "Pendente de Revisão"
-                      : "info"
+                        ? "Aprovado"
+                        : props.meeting?.status === Status.REPROVED
+                          ? "Pendente de Revisão"
+                          : "info"
                   }
                 />
               </div>
@@ -95,27 +99,28 @@ const MeetingPage = () => {
             props.meeting.status === Status.APPROVED &&
             propsAplication.user?.role === ROLE.REAPPLICATORS
           ) && (
-            <div className="grid">
-              <div className="col-12 md:col-6">
-                <label>Salve os arquivos do encontro</label>
-                <Padding />
-                <Upload />
+              <div className="grid">
+                <div className="col-12 md:col-6">
+                  <label>Salve os arquivos do encontro</label>
+                  <Padding />
+                  <Upload />
+                </div>
               </div>
-            </div>
-          )}
+            )}
           <Padding />
           {props.meeting?.meeting_archives?.length > 0 && (
             <label>Arquivos</label>
           )}
           <Padding />
           <div className="grid">
             <div className="col-12 md:col-6">
-              {props.meeting?.meeting_archives?.map((item) => {
-                return <ListArchivesAttendanceList item={item} />;
+              {props.meeting?.meeting_archives?.map((item, index) => {
+                return <div onClick={() => { setVisible(!visible); setindexImage(index) }}><ListArchivesAttendanceList item={item} /></div>;
               })}
             </div>
           </div>
           {/* {true ? <UploadArchivesAttendanceList /> : <AttendanceList />} */}
+          <ModalFiles item={props.meeting?.meeting_archives} visible={visible} index={indexImage} onHide={() => setVisible(!visible)} />
           <Padding padding="16px" />
           <Beneficiarios />
         </>