archives card

ipti · Apr 4, 2024 · 7dd7090 · 7dd7090
1 parent ad9adce
commit 7dd7090
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 56 deletions.
diff --git a/src/Assets/images/notFind.svg b/src/Assets/images/notFind.svg
diff --git a/src/Components/Empty/index.tsx b/src/Components/Empty/index.tsx
@@ -1,10 +1,21 @@
-import Icon from "../Icon";
+import NotFind from "../../Assets/images/notFind.svg";
+import styles from "../../Styles";
+import { Column, Padding, Row } from "../../Styles/styles";
 
-const Empty = ({title}: {title: string}) => {
-    return(
+const Empty = ({ title }: { title: string }) => {
+    return (
         <div className="card w- md:w-full">
-            <Icon icon="pi pi-warning" />
-            Sem {title}
+            <Row id="center">
+                <Column id="center">
+                    <Row id="center">
+                        <img alt="" src={NotFind} style={{ width: "128px" }} />
+                    </Row>
+                    <Padding />
+                    <h4 style={{color: styles.colors.colorsBaseInkLight}}>
+                        Não encontramos {title}
+                    </h4>
+                </Column>
+            </Row>
         </div>
     )
 }

diff --git a/src/Components/Upload/index.tsx b/src/Components/Upload/index.tsx
@@ -0,0 +1,62 @@
+import { Button } from 'primereact/button';
+import { FileUpload, FileUploadHeaderTemplateOptions, ItemTemplateOptions } from 'primereact/fileupload';
+import { useState } from 'react';
+
+export default function Upload() {
+
+    const [file, setFile] = useState<Array<any>>([])
+
+    const headerTemplate = (options: FileUploadHeaderTemplateOptions) => {
+        const { className, chooseButton, cancelButton } = options;
+
+        return (
+            <div className={className} style={{ backgroundColor: 'transparent', display: 'flex', alignItems: 'center' }}>
+                {chooseButton}
+                <Button rounded outlined icon="pi pi-save" disabled={file.length === 0} onClick={() => console.log(file)} />
+                {cancelButton}
+
+            </div>
+        );
+    };
+
+    const onTemplateSelect = (e: any) => {
+        let files = e.files;
+        console.log(files)
+        setFile(files)
+    };
+
+    const chooseOptions = { icon: 'pi pi-fw pi-plus ', iconOnly: true, className: 'custom-choose-btn p-button-rounded p-button-outlined', };
+    const uploadOptions = { icon: 'pi pi-fw pi-cloud-upload', iconOnly: true, className: 'custom-upload-btn p-button-success p-button-rounded p-button-outlined', Upload: (e: any) => { console.log(e) } };
+    const cancelOptions = { icon: 'pi pi-fw pi-times', iconOnly: true, className: 'custom-cancel-btn p-button-danger p-button-rounded p-button-outlined' };
+
+    const onTemplateRemove = (files: File, callback: Function) => {
+        console.log(files)
+        setFile(file.filter(props => props.name !== files.name))
+        callback();
+    };
+
+
+    const itemTemplate = (inFile: object, props: ItemTemplateOptions) => {
+        const file = inFile as any;
+        return (
+            <div className="flex align-items-center flex-wrap">
+                <div className="flex align-items-center" style={{ width: '40%' }}>
+                    <img alt={file.name} role="presentation" src={file?.objectURL} width={100} />
+                    <span className="flex flex-column text-left ml-3">
+                        {file.name}
+                        <small>{new Date().toLocaleDateString()}</small>
+                    </span>
+                </div>
+                <Button type="button" icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger ml-auto" onClick={() => onTemplateRemove(file, props.onRemove)} />
+            </div>
+        );
+    };
+
+    const onTemplateClear = () => {
+        setFile([])
+    };
+
+    return (
+        <FileUpload chooseOptions={chooseOptions} onClear={onTemplateClear} itemTemplate={itemTemplate} uploadOptions={uploadOptions} cancelOptions={cancelOptions} name="demo[]" headerTemplate={headerTemplate} multiple accept="/*" onSelect={onTemplateSelect} emptyTemplate={<p className="m-0">Arraste e solte os arquivos aqui.</p>} />
+    )
+}
diff --git a/src/Pages/Classroom/ClassroomOne/MeetingList/Meeting/Beneficiarios/index.tsx b/src/Pages/Classroom/ClassroomOne/MeetingList/Meeting/Beneficiarios/index.tsx
@@ -82,7 +82,7 @@ const Beneficiarios = () => {
           }}
         />
         <Button
-          label="Gerar Lista de presença"
+          label={window.innerWidth > 600 ? "Gerar Lista de presença" : ""}
           icon="pi pi-download"
           onClick={() => {
             history(`/turma/${id}/encontros/${idMeeting}/generate`);
@@ -99,6 +99,7 @@ const Beneficiarios = () => {
             onSelectionChange={(e: any) => setSelectedProducts(e.value)}
             dataKey="id"
             tableStyle={{ minWidth: "50rem" }}
+            emptyMessage="Não há alunos registrados"
           >
             {/* <Column
               selectionMode="multiple"

diff --git a/src/Pages/Classroom/ClassroomOne/MeetingList/Meeting/DataMeeting/index.tsx b/src/Pages/Classroom/ClassroomOne/MeetingList/Meeting/DataMeeting/index.tsx
@@ -1,14 +1,14 @@
 import { Form, Formik } from "formik";
-import { Column, Padding, Row } from "../../../../../../Styles/styles";
-import TextInput from "../../../../../../Components/TextInput";
 import { Button } from "primereact/button";
-import TextAreaComponent from "../../../../../../Components/TextArea";
-import DropdownComponent from "../../../../../../Components/Dropdown";
-import { ROLE, Status } from "../../../../../../Controller/controllerGlobal";
 import { useContext, useState } from "react";
+import DropdownComponent from "../../../../../../Components/Dropdown";
+import TextAreaComponent from "../../../../../../Components/TextArea";
+import TextInput from "../../../../../../Components/TextInput";
+import { AplicationContext } from "../../../../../../Context/Aplication/context";
 import { MeetingListRegistrationContext } from "../../../../../../Context/Classroom/Meeting/MeetingListRegistration/context";
 import { MeetingListRegisterTypes } from "../../../../../../Context/Classroom/Meeting/MeetingListRegistration/type";
-import { AplicationContext } from "../../../../../../Context/Aplication/context";
+import { ROLE, Status } from "../../../../../../Controller/controllerGlobal";
+import { Column, Padding, Row } from "../../../../../../Styles/styles";
 import { PropsAplicationContext } from "../../../../../../Types/types";
 
 const DataMeeting = () => {
@@ -101,35 +101,35 @@ const DataMeeting = () => {
             <Padding padding="16px" />
             {(propsAplication.user?.role === ROLE.ADMIN ||
               propsAplication.user?.role === ROLE.COORDINATORS) && (
-              <>
-                <div className="grid">
-                  <div className="col-12 md:col-6">
-                    <label>Status</label>
-                    <Padding />
-                    <DropdownComponent
-                      disabled={!edit}
-                      value={values.status}
-                      onChange={handleChange}
-                      name="status"
-                      placerholder="Status"
-                      optionsLabel="name"
-                      options={status}
-                    />
+                <>
+                  <div className="grid">
+                    <div className="col-12 md:col-6">
+                      <label>Status</label>
+                      <Padding />
+                      <DropdownComponent
+                        disabled={!edit}
+                        value={values.status}
+                        onChange={handleChange}
+                        name="status"
+                        placerholder="Status"
+                        optionsLabel="name"
+                        options={status}
+                      />
+                    </div>
+                    {values.status?.id === Status.REPROVED && <div className="col-12 md:col-6">
+                      <label>Justificativa</label>
+                      <Padding />
+                      <TextAreaComponent
+                        disabled={!edit}
+                        onChange={handleChange}
+                        value={values.justification}
+                        name="justification"
+                        placeholder="Justicativa sobre a escolha do status"
+                      />
+                    </div>}
                   </div>
-                  {values.status?.id === Status.REPROVED && <div className="col-12 md:col-6">
-                    <label>Justificativa</label>
-                    <Padding />
-                    <TextAreaComponent
-                      disabled={!edit}
-                      onChange={handleChange}
-                      value={values.justification}
-                      name="justification"
-                      placeholder="Justicativa sobre a escolha do status"
-                    />
-                  </div>}
-                </div>
-              </>
-            )}{" "}
+                </>
+              )}{" "}
             <div className="grid">
               <div className="col-12 md:col-6">
                 <label>Observações</label>

diff --git a/src/Pages/Classroom/ClassroomOne/MeetingList/Meeting/index.tsx b/src/Pages/Classroom/ClassroomOne/MeetingList/Meeting/index.tsx
@@ -1,17 +1,16 @@
 import { Message } from "primereact/message";
 import { useContext } from "react";
+import Upload from "../../../../../Components/Upload";
+import { AplicationContext } from "../../../../../Context/Aplication/context";
 import MeetingListRegistrationProvider, {
   MeetingListRegistrationContext,
 } from "../../../../../Context/Classroom/Meeting/MeetingListRegistration/context";
 import { MeetingListRegisterTypes } from "../../../../../Context/Classroom/Meeting/MeetingListRegistration/type";
 import { ROLE, Status } from "../../../../../Controller/controllerGlobal";
 import { Container, Padding } from "../../../../../Styles/styles";
-import AttendanceList from "./AttendanceListArchives";
+import { PropsAplicationContext } from "../../../../../Types/types";
 import Beneficiarios from "./Beneficiarios";
 import DataMeeting from "./DataMeeting";
-import UploadArchivesAttendanceList from "./UploadArchivesAttendanceList";
-import { AplicationContext } from "../../../../../Context/Aplication/context";
-import { PropsAplicationContext } from "../../../../../Types/types";
 
 const Meeting = () => {
   return (
@@ -39,19 +38,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
-                ? "Reprovado"
-                : "info"
+                  ? "Aprovado"
+                  : props.meeting?.status === Status.REPROVED
+                    ? "Reprovado"
+                    : "info"
             }
           />
           <Padding />
@@ -62,7 +61,13 @@ const MeetingPage = () => {
           <Padding padding="16px" />
           <DataMeeting />
           <Padding padding="16px" />
-          {true ? <UploadArchivesAttendanceList /> : <AttendanceList />}
+
+          <div className="col-12 md:col-6">
+            <label>Arquivos</label>
+            <Padding />
+            <Upload />
+          </div>
+          {/* {true ? <UploadArchivesAttendanceList /> : <AttendanceList />} */}
           <Padding padding="16px" />
           <Beneficiarios />
         </>

diff --git a/src/Pages/Classroom/ClassroomOne/RegistrationList/index.tsx b/src/Pages/Classroom/ClassroomOne/RegistrationList/index.tsx
@@ -9,6 +9,7 @@ import {
 } from "../../../../Context/Classroom/RegistrationsList/type";
 import { useFetchRequestClassroomOne } from "../../../../Services/Classroom/query";
 import { Container, Padding } from "../../../../Styles/styles";
+import Empty from "../../../../Components/Empty";
 
 const RegistrationList = () => {
   return (
@@ -30,15 +31,15 @@ const RegistrationListPage = () => {
     <Container>
       <h2>{classroom?.name}</h2>
       <Padding padding="16px" />
-      <div className="grid">
+      {classroom.length > 0 ? <div className="grid">
         {props.registrations?.map((item, index) => {
           return (
             <div className="col-12 md:col-6 lg:col-4" key={index}>
               <CardRegistration title={item.id.toString()} subtitle={item.name} idRegistration={item.id} status={item.status} />
             </div>
           );
         })}
-      </div>
+      </div> : <Empty title="Matriculas" />}
     </Container>
   );
 };

diff --git a/src/Pages/Classroom/ClassroomOne/index.tsx b/src/Pages/Classroom/ClassroomOne/index.tsx
@@ -80,7 +80,7 @@ const ClassroomOnePage = () => {
           </Column>
           <Padding />
           {propsAplication.user?.role === (ROLE.ADMIN || ROLE.COORDINATORS) && (
-            <Button text icon="pi pi-pencil" onClick={() => setEdit(true)} />
+            <Button text label="Editar" icon="pi pi-pencil" onClick={() => setEdit(true)} />
           )}
         </Row>
       )}