card ts and projects

ipti · May 19, 2024 · e3881d1 · e3881d1
1 parent fd5f3dd
commit e3881d1
Show file tree

Hide file tree

Showing 9 changed files with 297 additions and 45 deletions.
diff --git a/src/Components/Card/CardProject/index.tsx b/src/Components/Card/CardProject/index.tsx
@@ -0,0 +1,84 @@
+import { ConfirmDialog } from "primereact/confirmdialog";
+import { useContext, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { ClassroomContext } from "../../../Context/Classroom/context";
+import { ClassroomTypes } from "../../../Context/Classroom/type";
+import { Column, Padding, Row } from "../../../Styles/styles";
+import IconClassroom from "./../../../Assets/images/cardturmas.svg";
+import { Container } from "./style";
+import Icon from "../../Icon";
+
+import pessoas from "../../../Assets/images/pessoasgray.svg"
+import meeting from "../../../Assets/images/school_teacher.svg"
+import styles from "../../../Styles";
+
+
+const CardProject = ({
+  title,
+  meetingCount,
+  registrationCount,
+  id,
+}: {
+  title: string;
+  meetingCount?: number;
+  registrationCount?: number,
+  id: number;
+}) => {
+  const history = useNavigate();
+  const [visible, setVisible] = useState(false);
+
+  const props = useContext(ClassroomContext) as ClassroomTypes;
+
+  return (
+    <>
+      <Container className="card" onClick={() => {}}>
+        <Row id="space-between">
+          <Row >
+            <div className={`boxQuantity`}>
+              <img src={IconClassroom} alt="" style={{ height: 32 }} />
+            </div>
+            <Padding padding="4px" />
+            <Column id="center">
+              <h3>{title}</h3>
+            </Column>
+          </Row>
+          {/* <div
+            className="cursor-pointer"
+            onClick={(e) => {
+              e.stopPropagation();
+              setVisible(true);
+            }}
+          >
+            <Icon icon="pi pi-trash" color={styles.colors.colorGrayElephant} size="1rem" fontWeight="900" />
+          </div> */}
+        </Row>
+        {/* < Padding padding="8px" />
+        <Row style={{ gap: 16 }}>
+          <Row style={{ gap: 8, alignItems: "center" }}>
+            <img src={pessoas} alt="" style={{ width: 24 }} />
+            <p>
+              Alunos: {registrationCount}
+            </p>
+          </Row>
+          <Row style={{ gap: 8, alignItems: "center" }}>
+            <img src={meeting} alt="" style={{ width: 19 }} />
+            <p>
+              Encontros: {meetingCount}
+            </p>
+          </Row>
+        </Row> */}
+      </Container>
+      <ConfirmDialog
+        visible={visible}
+        onHide={() => setVisible(false)}
+        message="Tem certeza de que deseja prosseguir?"
+        header="Confirmation"
+        icon="pi pi-exclamation-triangle"
+        accept={() => props.DeleteClassroom(id)}
+        reject={() => setVisible(false)}
+      />
+    </>
+  );
+};
+
+export default CardProject;
diff --git a/src/Components/Card/CardProject/style.tsx b/src/Components/Card/CardProject/style.tsx
@@ -0,0 +1,28 @@
+import styled from "styled-components";
+import styles from "../../../Styles";
+
+export const Container = styled.div`
+  font-size: ${styles.typography.font.extraSmall};
+  justify-content: space-between;
+  cursor: pointer;
+
+  border: 1.22px solid rgba(219, 230, 255, 1);
+  background: ${styles.colors.colorCard};
+  
+  border-radius: 16px;
+
+  .boxQuantity {
+    display: flex;
+    color: white;
+    font-size: ${styles.typography.font.extraSmall};
+  }
+  .boxYear {
+    border-radius: 25px;
+    background-color: ${styles.colors.green};
+    width: 64px;
+    height: 24px;
+    text-align: center;
+    color: white;
+    padding: 9px, 16px, 9px, 16px;
+  }
+`;
diff --git a/src/Components/Card/CardTs/index.tsx b/src/Components/Card/CardTs/index.tsx
@@ -0,0 +1,80 @@
+import { ConfirmDialog } from "primereact/confirmdialog";
+import { useContext, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { ClassroomContext } from "../../../Context/Classroom/context";
+import { ClassroomTypes } from "../../../Context/Classroom/type";
+import { Column, Padding, Row } from "../../../Styles/styles";
+import IconClassroom from "./../../../Assets/images/cardturmas.svg";
+import { Container } from "./style";
+
+
+
+const CardTs = ({
+  title,
+  meetingCount,
+  registrationCount,
+  id,
+}: {
+  title: string;
+  meetingCount?: number;
+  registrationCount?: number,
+  id: number;
+}) => {
+  const history = useNavigate();
+  const [visible, setVisible] = useState(false);
+
+  const props = useContext(ClassroomContext) as ClassroomTypes;
+
+  return (
+    <>
+      <Container className="card" onClick={() => {}}>
+        <Row id="space-between">
+          <Row >
+            <div className={`boxQuantity`}>
+              <img src={IconClassroom} alt="" style={{ height: 32 }} />
+            </div>
+            <Padding padding="4px" />
+            <Column id="center">
+              <h3>{title}</h3>
+            </Column>
+          </Row>
+          {/* <div
+            className="cursor-pointer"
+            onClick={(e) => {
+              e.stopPropagation();
+              setVisible(true);
+            }}
+          >
+            <Icon icon="pi pi-trash" color={styles.colors.colorGrayElephant} size="1rem" fontWeight="900" />
+          </div> */}
+        </Row>
+        {/* < Padding padding="8px" />
+        <Row style={{ gap: 16 }}>
+          <Row style={{ gap: 8, alignItems: "center" }}>
+            <img src={pessoas} alt="" style={{ width: 24 }} />
+            <p>
+              Alunos: {registrationCount}
+            </p>
+          </Row>
+          <Row style={{ gap: 8, alignItems: "center" }}>
+            <img src={meeting} alt="" style={{ width: 19 }} />
+            <p>
+              Encontros: {meetingCount}
+            </p>
+          </Row>
+        </Row> */}
+      </Container>
+      <ConfirmDialog
+        visible={visible}
+        onHide={() => setVisible(false)}
+        message="Tem certeza de que deseja prosseguir?"
+        header="Confirmation"
+        icon="pi pi-exclamation-triangle"
+        accept={() => props.DeleteClassroom(id)}
+        reject={() => setVisible(false)}
+      />
+    </>
+  );
+};
+
+export default CardTs;
diff --git a/src/Components/Card/CardTs/style.tsx b/src/Components/Card/CardTs/style.tsx
@@ -0,0 +1,28 @@
+import styled from "styled-components";
+import styles from "../../../Styles";
+
+export const Container = styled.div`
+  font-size: ${styles.typography.font.extraSmall};
+  justify-content: space-between;
+  cursor: pointer;
+
+  border: 1.22px solid rgba(219, 230, 255, 1);
+  background: ${styles.colors.colorCard};
+  
+  border-radius: 16px;
+
+  .boxQuantity {
+    display: flex;
+    color: white;
+    font-size: ${styles.typography.font.extraSmall};
+  }
+  .boxYear {
+    border-radius: 25px;
+    background-color: ${styles.colors.green};
+    width: 64px;
+    height: 24px;
+    text-align: center;
+    color: white;
+    padding: 9px, 16px, 9px, 16px;
+  }
+`;
diff --git a/src/Components/Menu/index.tsx b/src/Components/Menu/index.tsx
@@ -162,7 +162,7 @@ const Menu = ({ viewdMenu }: { viewdMenu: boolean }) => {
       ) : null}
       <ModalYear
         visible={visibleModal}
-        onHide={() => setVisibleModal(!visibleModal)}
+        onHide={() => setVisibleModal(false)}
       />
     </Container>
   );

diff --git a/src/Pages/Login/Login.tsx b/src/Pages/Login/Login.tsx
@@ -26,7 +26,13 @@ const Login = () => {
 const LoginPage = () => {
   const props = useContext(LoginContext) as LoginContextText;
 
-  const years = [2024, 2023, 2022, 2021];
+  const years = [
+    { value: 2024 },
+    { value: 2023 },
+    { value: 2022 },
+    { value: 2021 },
+  ];
+
 
   const [year, setYearState] = useState<any>();
 
@@ -147,7 +153,8 @@ const LoginPage = () => {
                               setYearState(e.target.value);
                               setYear(e.target.value.toString());
                             }}
-                            optionsLabel=""
+                            optionsLabel="value"
+                            optionsValue="value"
                             value={year}
                           />
                         </div>

diff --git a/src/Pages/Projects/ProjectsList/index.tsx b/src/Pages/Projects/ProjectsList/index.tsx
@@ -1,15 +1,15 @@
 import { Button } from "primereact/button";
-import { ROLE } from "../../../Controller/controllerGlobal";
-import { Container, Padding, Row } from "../../../Styles/styles";
-import { useNavigate } from "react-router-dom";
 import { useContext } from "react";
+import { useNavigate } from "react-router-dom";
+import CardProject from "../../../Components/Card/CardProject";
 import { AplicationContext } from "../../../Context/Aplication/context";
-import { PropsAplicationContext } from "../../../Types/types";
 import ProjectListProvider, {
   ProjectListContext,
 } from "../../../Context/Project/ProjectList/context";
 import { ProjectListTypes } from "../../../Context/Project/ProjectList/type";
-import CardClassroom from "../../../Components/Card/CardClassroom";
+import { ROLE } from "../../../Controller/controllerGlobal";
+import { Container, Padding, Row } from "../../../Styles/styles";
+import { PropsAplicationContext } from "../../../Types/types";
 
 const ProjectsList = () => {
   return (
@@ -42,11 +42,12 @@ const ProjectsListPage = () => {
           />
         </Row>
       )}
+      <Padding padding="16px" />
       <div className="grid">
         {props.tsOne?.project?.map((item, index) => {
           return (
             <div className="col-12 md:col-6 lg:col-4">
-              <CardClassroom title={item.name} id={item.id} />
+              <CardProject title={item.name} id={item.id} />
             </div>
           );
         })}

diff --git a/src/Pages/Register/Wizard/Steps/ChoiceYear/index.tsx b/src/Pages/Register/Wizard/Steps/ChoiceYear/index.tsx
@@ -11,42 +11,66 @@ import queryClient from "../../../../../Services/reactquery";
 // import { RegistrationContext } from "../../containers/Registration/Context/context";
 
 const ChoiceYear = () => {
+  const [year, setYearPage] = useState<number | undefined>();
 
-    const [year, setYearPage] = useState<number | undefined>()
+  useEffect(() => {
+    setYearPage(parseInt(getYear()!));
+  }, []);
 
-    useEffect(() => {
-        setYearPage(parseInt(getYear()!))
-    }, [])
+  const props = useContext(RegisterContext) as RegisterTypes;
 
-    const props = useContext(RegisterContext) as RegisterTypes;
+  const years = [
+    { value: 2024 },
+    { value: 2023 },
+    { value: 2022 },
+    { value: 2021 },
+  ];
 
-    return (
-        <>
-            <Column className="contentChoiceYear" id="center">
-                <ImageTextSteps img={homeImg} title="Matrícula Online" subTitle={<p style={{ textAlign: "center" }}>Bem-vindo ao Matrícula online, para <br /> iniciar escolha o ano
-                    e clique no botão abaixo</p>} />
-                <Row id="center">
-                    <div className="col-12 md:col-4">
-                        <DropdownComponent placerholder="Escolha o Ano" onChange={(e) => { setYearPage(e.target.value); setYear(e.target.value); queryClient.refetchQueries("useRequestProjectsAndClassroom") }} options={[2024, 2023, 2022, 2021, 2020]} optionsLabel="" value={year} />
-                    </div>
-                </Row>
-                <Padding padding={props.padding} />
-                <Row id="center" className={"marginTop marginButtom"}>
-                    <div className="col-4">
-                        <Button
-                            type="button"
-                            onClick={() => {
-                                props.NextStep({})
-                            }}
-                            className="t-button-primary"
-                            label="Iniciar"
-                        // disabled={!isValid}
-                        />
-                    </div>
-                </Row>
-            </Column>
-        </>
-    );
+  return (
+    <>
+      <Column className="contentChoiceYear" id="center">
+        <ImageTextSteps
+          img={homeImg}
+          title="Matrícula Online"
+          subTitle={
+            <p style={{ textAlign: "center" }}>
+              Bem-vindo ao Matrícula online, para <br /> iniciar escolha o ano e
+              clique no botão abaixo
+            </p>
+          }
+        />
+        <Row id="center">
+          <div className="col-12 md:col-4">
+            <DropdownComponent
+              placerholder="Escolha o Ano"
+              onChange={(e) => {
+                setYearPage(e.target.value);
+                setYear(e.target.value);
+                queryClient.refetchQueries("useRequestProjectsAndClassroom");
+              }}
+              options={years}
+              optionsLabel="value"
+              value={year}
+            />
+          </div>
+        </Row>
+        <Padding padding={props.padding} />
+        <Row id="center" className={"marginTop marginButtom"}>
+          <div className="col-4">
+            <Button
+              type="button"
+              onClick={() => {
+                props.NextStep({});
+              }}
+              className="t-button-primary"
+              label="Iniciar"
+              // disabled={!isValid}
+            />
+          </div>
+        </Row>
+      </Column>
+    </>
+  );
 };
 
 export default ChoiceYear;