fix: listar atividades de uma turma, tipo de error

ipti · Nov 19, 2024 · 84b737a · 84b737a
1 parent de319ac
commit 84b737a
Show file tree

Hide file tree

Showing 26 changed files with 164 additions and 50 deletions.
diff --git a/.env b/.env
@@ -1,3 +1,3 @@
-# REACT_APP_API_PATH=http://localhost:3000/
+REACT_APP_API_PATH=http://localhost:3000/
 
-REACT_APP_API_PATH=https://coded-api.azurewebsites.net/
+# REACT_APP_API_PATH=https://coded-api.azurewebsites.net/
diff --git a/src/Components/Stamp/index.tsx b/src/Components/Stamp/index.tsx
@@ -1,10 +1,15 @@
-import { StampStyle } from "./style"
+import { HoverContainer, StampStyle } from "./style"
 
 
-const Stamp = ({url}:{url: string}) => {
-    return(
-        <StampStyle>
-            <img src={url}  alt="stamp" />
+const Stamp = ({ url, description, type }: { url: string, description?: string, type: string }) => {
+    console.log(type)
+    return (
+        <StampStyle type={type} >
+            {/* <HoverDiv /> */}
+            {description && <HoverContainer>
+                <p>{description}</p>
+            </HoverContainer>}
+            <img src={url} alt="stamp" />
         </StampStyle>
     )
 }

diff --git a/src/Components/Stamp/style.ts b/src/Components/Stamp/style.ts
@@ -1,14 +1,26 @@
 import styled from "styled-components";
 
 import stamp from '../../assets/image/stamp.svg'
+import stampGold from '../../assets/image/stamp_gold.svg'
 
-export const StampStyle = styled.div`
-    background: url(${stamp});
+import color from "../../Styles/colors";
+
+interface StampStyleType {
+    type: string
+}
+
+export const StampStyle = styled.div<StampStyleType>`
+
+    background: url(${props => props.type === "GOLD" ? stampGold : stamp});
     background-repeat: no-repeat;
     background-size: 100%;
     /* background-position: right top; */
     height: 90px;
     width: 90px;
+    position: relative;
+    display: inline-block;
+
+
 
     display: flex;
     flex-direction: column;
@@ -18,4 +30,38 @@ export const StampStyle = styled.div`
         width: 32px;
         height: 32px;
     }
+
+    #tooltip {
+        
+    }
+`;
+
+export const HoverDiv = styled.div`
+  width: 200px;
+  height: 100px;
+  background-color: lightblue;
+  border: 1px solid blue;
+`;
+
+export const HoverContainer = styled.div`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: ${color.colorBlueClean};
+  width: 256px;
+  /* width: auto; */
+  padding: 10px;
+  /* border: 1px solid gray; */
+  border-radius: 16px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition: all 0.3s ease-in-out;
+
+  ${StampStyle}:hover & {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
 `;
diff --git a/src/Components/TextInput/index.tsx b/src/Components/TextInput/index.tsx
@@ -10,7 +10,8 @@ const TextInput = ({
   onBlur,
   name,
   type,
-  required
+  required,
+  accept
 }: PropsInputText) => {
   return (
     <div>
@@ -23,6 +24,7 @@ const TextInput = ({
         name={name}
         required={required}
         onChange={onChange}
+        accept={accept}
         placeholder={placeholder}
       />
     </div>

diff --git a/src/Controller/controllerGlobal.tsx b/src/Controller/controllerGlobal.tsx
@@ -133,6 +133,10 @@ export const type_tags = [
   {id: "ACTIVITIES", name: "Atividades"}
 ]
 
+export const type_stamp = [
+  { id: "GOLD", name: "Ouro"},
+  {id: "STANDARD", name: "Padrão"}
+]
 export const Status = {
   APPROVED: "APPROVED",
   PENDING: "PENDING",

diff --git a/src/Types/types.tsx b/src/Types/types.tsx
@@ -15,6 +15,7 @@ export interface PropsInputText {
     name?: string
     type?: HTMLInputTypeAttribute | undefined
     required?: boolean
+    accept?: string | undefined
 }
 
 export interface PropsInputMask {

diff --git a/src/assets/image/stamp_gold.svg b/src/assets/image/stamp_gold.svg
diff --git a/src/page/classroom/activitiesClassroom/page.tsx b/src/page/classroom/activitiesClassroom/page.tsx
@@ -19,43 +19,43 @@ const ClassroomActivitiesPage = () => {
 
     const [value, setValue] = useState<ClassroomModule | undefined>()
 
-
 
-
+
+
     const propsActivitiesClassroom = useContext(ActivitiesClassroomContext)
 
     useEffect(() => {
         setValue(propsActivitiesClassroom?.classroomActivitiesList?.classroom_module[0])
-      }, [propsActivitiesClassroom?.classroomActivitiesList?.classroom_module])
-      
+    }, [propsActivitiesClassroom?.classroomActivitiesList?.classroom_module])
+
 
 
 
     return (
         <ContentPage title="Atividades" description="Lista atividades enviadas pelos alunos">
             <Padding padding="16px" />
-            {propsActivitiesClassroom?.classroomActivitiesList?.classroom_module?.length! > 0 ?<>
-            <div className="grid">
-                <div className="col-12 md:col-3">
-                    <label>Módulos</label>
-                    <Padding />
-                    <DropdownComponent options={propsActivitiesClassroom?.classroomActivitiesList?.classroom_module} optionsLabel="module.name" value={value} onChange={(e) => setValue(e.target.value)} />
+            {propsActivitiesClassroom?.classroomActivitiesList?.classroom_module?.length! > 0 ? <>
+                <div className="grid">
+                    <div className="col-12 md:col-3">
+                        <label>Módulos</label>
+                        <Padding />
+                        <DropdownComponent options={propsActivitiesClassroom?.classroomActivitiesList?.classroom_module} optionsLabel="module.name" value={value} onChange={(e) => setValue(e.target.value)} />
+                    </div>
                 </div>
-            </div>
-            <Padding padding="16px" />
-            <div className="grid">
-                {value?.classroom.classroom_activities.map((item, index) => {
-                    return (
-                        <div className="col-12 md:col-3" key={item.activities.id}>
-                            <CardActivities title={item.activities.name.toString()} id={item.id} index={index} idClassroom={propsActivitiesClassroom?.classroomActivitiesList?.id!} />
-                        </div>
-                    )
-                })}
-            </div>
-            </>: <Empty title="módulos associados a turma" />}
+                <Padding padding="16px" />
+                <div className="grid">
+                    {value?.classroom.classroom_activities.filter(props => props.activities?.classes.moduleId === value.module?.id).map((item, index) => {
+                        return (
+                            <div className="col-12 md:col-3" key={item.activities.id}>
+                                <CardActivities title={item.activities.name.toString()} id={item.id} index={index} idClassroom={propsActivitiesClassroom?.classroomActivitiesList?.id!} />
+                            </div>
+                        )
+                    })}
+                </div>
+            </> : <Empty title="módulos associados a turma" />}
 
             <>
-            
+
                 {/* <Accordion activeIndex={0}>
                     {
                         propsActivitiesClassroom?.classroomActivitiesList?.classroom_activities.map((item) => {

diff --git a/src/page/classroom/activitiesClassroom/service/types.tsx b/src/page/classroom/activitiesClassroom/service/types.tsx
@@ -21,8 +21,12 @@ export interface ClassroomActivity {
 export interface Activities {
   name: string
   id: number
+  classes: {
+    moduleId: number
+  }
 }
 
 export interface Module {
   name: string
+  id: number
 }
diff --git a/src/page/classroom/oneClassroom/modalDistributeStamps/index.tsx b/src/page/classroom/oneClassroom/modalDistributeStamps/index.tsx
@@ -63,7 +63,7 @@ const ModalDistributeStamps = ({ onHide, visible }: { visible: boolean, onHide()
                                                                 <Column>
                                                                     <Row id="center">
 
-                                                                        <Stamp url={item?.img_url} />
+                                                                        <Stamp url={item?.img_url} description={item?.description} type={item.type} />
                                                                     </Row>
                                                                     <Padding />
                                                                     <Row>

diff --git a/src/page/classroom/oneClassroom/service/type.tsx b/src/page/classroom/oneClassroom/service/type.tsx
@@ -44,6 +44,8 @@ export interface ClassroomOne {
     id: number
     name: string
     img_url: string
+    description: string
+    type: string
     createdAt: string
     updatedAt: string
   }

diff --git a/src/page/classroom/oneMember/modalDistributeStamps/index.tsx b/src/page/classroom/oneMember/modalDistributeStamps/index.tsx
@@ -53,7 +53,7 @@ const ModalDistributeStamps = ({ onHide, visible }: { visible: boolean, onHide()
                                                         <Column>
                                                             <Row id="center">
 
-                                                                <Stamp url={item?.img_url} />
+                                                                <Stamp url={item?.img_url} description={item?.description} type={item.type} />
                                                             </Row>
                                                             <Padding />
                                                             <Row>

diff --git a/src/page/classroom/oneMember/page.tsx b/src/page/classroom/oneMember/page.tsx
@@ -258,8 +258,8 @@ const MemberOnePage = () => {
                 {props.user.stamps_user.map((item) => {
                     return (
 
-                         <Column>
-                            <Stamp url={item?.stamps.img_url} />
+                        <Column>
+                            <Stamp url={item?.stamps.img_url} description={item?.stamps?.description} type={item.stamps.type} />
                             <Row id="center">
                                 <p style={{ color: color.colorPrimary }}>{item.stamps.name}</p>
                             </Row>

diff --git a/src/page/classroom/oneMember/service/types.tsx b/src/page/classroom/oneMember/service/types.tsx
@@ -39,6 +39,8 @@ export interface Stamps {
   id: number
   name: string
   img_url: string
+  description: string
+  type: string
   createdAt: string
   updatedAt: string
 }

diff --git a/src/page/profile/page.tsx b/src/page/profile/page.tsx
@@ -115,7 +115,7 @@ const ProfilePage = () => {
                                     return (
 
                                         <Column>
-                                            <Stamp url={item?.stamps.img_url} />
+                                            <Stamp url={item?.stamps?.img_url} description={item?.stamps?.description} type={item.stamps.type} />
                                             <Row id="center">
                                                 <p style={{ color: color.colorPrimary }}>{item.stamps.name}</p>
                                             </Row>

diff --git a/src/page/profile/service/types.tsx b/src/page/profile/service/types.tsx
@@ -41,6 +41,8 @@ export interface Stamps {
   id: number
   name: string
   img_url: string
+  description: string
+  type: string
   createdAt: string
   updatedAt: string
 }

diff --git a/src/page/stramps/components/inputs/index.tsx b/src/page/stramps/components/inputs/index.tsx
@@ -3,14 +3,15 @@ import { useContext } from "react"
 import TextInput from "../../../../Components/TextInput"
 import { Padding } from "../../../../Styles/styles"
 import { StampsContext } from "../../createStramps/context/context"
+import DropdownComponent from "../../../../Components/Dropdown"
+import { type_stamp } from "../../../../Controller/controllerGlobal"
 
 const Inputs = ({ errors, handleChange, touched, values, isCreated }: { errors: any, values: any, touched: any, handleChange: any, isCreated?: boolean }) => {
 
     const propsStamps = useContext(StampsContext)
 
     return (
-        <div className="grid">
-
+        <div>
             <div className="col-12 md:col-6">
                 <label>Nome *</label>
                 <Padding />
@@ -28,12 +29,34 @@ const Inputs = ({ errors, handleChange, touched, values, isCreated }: { errors:
                     </div>
                 ) : null}
             </div>
-           {isCreated &&  <div className="col-12 md:col-6">
+            <div className="col-12 md:col-6">
+                <label>Tipo de selo *</label>
+                <Padding />
+                <DropdownComponent
+                    name="type"
+                    placerholder="Escolha o tipo de selo "
+                    optionsLabel="name"
+                    optionsValue="id"
+                    value={values.type}
+                    onChange={handleChange}
+                    options={
+                        type_stamp
+                    }
+                />
+                <Padding />
+                {errors.type && touched.type ? (
+                    <div style={{ color: "red" }}>
+                        {errors.type}
+                        <Padding />
+                    </div>
+                ) : null}
+            </div>
+            {isCreated && <div className="col-12 md:col-6">
                 <label>Imagem selo </label>
                 <Padding />
                 <TextInput
                     // value={props.file}
-
+                    accept="image/*"
                     type="file"
                     placeholder="Imagem selo"
                     onChange={(e: any) => propsStamps?.setFile(e.target.files)}

diff --git a/src/page/stramps/createStramps copy/page.tsx b/src/page/stramps/createStramps copy/page.tsx
@@ -6,6 +6,7 @@ import { Padding, Row } from "../../../Styles/styles"
 import Inputs from "../components/inputs"
 import StampsProvider, { StampsContext } from "./context/context"
 import { ProgressSpinner } from "primereact/progressspinner"
+import { type_stamp } from "../../../Controller/controllerGlobal"
 
 const StampsUpdate = () => {
     return (
@@ -23,7 +24,7 @@ const StampsUpdatePage = () => {
 
     return (
         <ContentPage title="Editar Selo" description="Edite selos para distribuir aos alunos.">
-            {propsStamps?.StampsOne && <Formik initialValues={{ name: propsStamps?.StampsOne?.name ??  "", description: propsStamps?.StampsOne?.description ?? "",}} onSubmit={(values) => {
+            {propsStamps?.StampsOne && <Formik initialValues={{ name: propsStamps?.StampsOne?.name ??  "", description: propsStamps?.StampsOne?.description ?? "", type: type_stamp.find(item => item.id === propsStamps?.StampsOne?.type) ?? "", }} onSubmit={(values) => {
                 propsStamps?.UpdateStamps(values)
             }}>
                 {({ values, errors, handleChange, touched }) => {

diff --git a/src/page/stramps/createStramps copy/service/controller.tsx b/src/page/stramps/createStramps copy/service/controller.tsx
@@ -20,6 +20,11 @@ export const UpdateStampsController = () => {
       },
       onSuccess: (data) => {
         queryClient.refetchQueries("useRequestsFindStamps")
+        Swal.fire({
+          icon: 'success',
+          title: "Turma alterada com sucesso!",
+          confirmButtonColor: styles.colors.colorPrimary,
+      })
       },
 
     }

diff --git a/src/page/stramps/createStramps copy/service/request.tsx b/src/page/stramps/createStramps copy/service/request.tsx
@@ -3,7 +3,7 @@ import { logout } from "../../../../service/localstorage";
 
 
 export const UpdateStampsRequest = async (body: any, id: number) => {
-    return await http.put("/stamps/"+ id, body)
+    return await http.put("/stamps/"+ id, {...body, type: body?.type?.id})
 }
 
 export const FindOneStampsRequest = async (id: string) => {

diff --git a/src/page/stramps/createStramps/context/state.tsx b/src/page/stramps/createStramps/context/state.tsx
@@ -11,13 +11,19 @@ export const CreateStampsState = () => {
 
         const formData = new FormData()
         formData.append("name", body.name)
+        formData.append("description", body.description)
+        formData.append("type", body.type.id)
 
-        if(file){
+
+        if (file) {
             formData.append("file", file[0])
         }
+
+        console.log(formData)
+
         CreateStampsRequestMutation.mutate(formData)
     }
 
-   
+
     return { CreateStamps, file, setFile }
 }