Skip to content

Commit

Permalink
Merge pull request #80 from IT-Academy-BCN/feature/apps-faqs-fixing
Browse files Browse the repository at this point in the history 
Feature/apps faqs fixing
  • Loading branch information
@ITAcademyAdmin
ITAcademyAdmin authored Oct 4, 2023
2 parents 10ff5b3 + 377d6ec commit 00e1daa
Show file tree
Hide file tree
Showing 16 changed files with 446 additions and 377 deletions.
9 changes: 9 additions & 0 deletions src/assets/img/githubLogo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/assets/img/pencil.png
View file
Binary file not shown.
3 changes: 3 additions & 0 deletions src/assets/img/plus.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/assets/img/user.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 14 additions & 8 deletions src/components/BackOfficeComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
import FAQs from "./faqs/FAQsComponent";
import ProjectsComponent from "./apps/ProjectsComponent";
import menu from "../assets/img/menu.png";
import { AdminButtons } from "./faqs/faqsAdminView/AdminButtons";

function ViewBackOffice({
setIsLogged,
Expand Down Expand Up @@ -40,17 +41,21 @@ function ViewBackOffice({
}

const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const [windowWidth] = useWindowSize();
const size = useWindowSize();
const [hiddenAdminButtons, sethiddenAdminButtons] = useState(false);

const toggleDropdown = ():void=> {
setIsDropdownOpen(!isDropdownOpen);
};

useEffect(() => {
if(windowWidth>=1024){
if(size[1]>=1024){
setIsDropdownOpen(false)
sethiddenAdminButtons(false)
}else{
sethiddenAdminButtons(true)
}
}, [windowWidth]);
}, [size[1]]);


return (
Expand Down Expand Up @@ -87,11 +92,12 @@ return (



<div className="lg:col-span-5 col-span-6 m-5 bg-white rounded-md">
<div className="lg:col-span-5 col-span-6 m-5">

{/* Mobile */}
<div className='lg:hidden'>
<div className="flex justify-end mt-4 mr-4 cursor-pointer">
<AdminButtons />
<img src={menu} className="h-8 w-8" onClick={toggleDropdown}/>
</div>
</div>
Expand All @@ -115,17 +121,17 @@ return (
<div>
<button className="py-2 my-4 ml-2">Instrucciones</button>
</div>

{/* <div onClick={()=>{ setIsDropdownOpen(false)}} className="opacity-25 fixed inset-0 z-40 bg-black"></div> */}
</div>
)}
{!isDropdownOpen && (
<>
<div className={`mt-20 ${state.faqs ? 'component hidden' : 'component'}`}>
<FAQs />
<div className={`${state.faqs ? 'component hidden' : 'component'}`}>
{!hiddenAdminButtons && <AdminButtons />}
<FAQs />
</div>

<div className={state.projectsComponent ? 'component hidden' : 'component'}>
{!hiddenAdminButtons && <AdminButtons />}
<ProjectsComponent />
</div>
</>
Expand Down
87 changes: 87 additions & 0 deletions src/components/apps/Apps.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import { RootState } from "../../store/store";
import { createToken, ApiStateApps } from "../../interfaces/interfaces";
import { FaArrowRight } from "react-icons/fa";
import { useEffect, useState } from "react";
import { apiCallApps, apiCallAppsInfo, deleteApiApps } from "../../store/reducers/appsCall/appsCallApiFunctionality";
import { useDispatch, useSelector } from "react-redux";
import ModalApps from "./appsAdminView/modalApps";
import trashIcon from "../../assets/img/icon-delete-faq-backoffice.png"
import githubLogo from "../../assets/img/githubLogo.svg"

declare global {
interface Window {
my_modal_1: {
showModal: () => void;
}
}
}

const Apps = () => {
const { acces_token }: createToken = useSelector(
(state: RootState) => state.apiPostRegister
);

const { apps }: ApiStateApps = useSelector(
(state: RootState) => state.appsCallApiFunctionality
);

const handleSendApiInfo = (id: number) => {
apiCallAppsInfo(dispatch, id, acces_token);
};

const dispatch = useDispatch();

useEffect(() => {
apiCallApps(dispatch);
}, []);

const [newInfoApps, setNewInfoApps] = useState({
title: "",
description: "",
url: "",
state: "",
github: "",
});

return (
<>
{apps.map((app) => {
return (
<div
key={app.id}
className={`cards ${
app.state === "COMPLETED" && "bg-completed"
}
${app.state === "SOON" ? "bg-soon" : "bg-building"}
flex flex-col rounded-xl mx-5 my-3 min-h-[296px]`}
>
{window.location.pathname === "/backoffice" && (
<div className="flex place-content-end gap-2">
<button className="bg-white px-4 py-1 mt-4" onClick={() => {window.my_modal_1?.showModal(); handleSendApiInfo(app.id); }}>Editar</button>
<a className="flex mt-4 mr-4" onClick={() => deleteApiApps(app.id, acces_token, dispatch)}>
<img src={trashIcon} alt="eliminar" className="w-10" />
</a>
</div>
)}
{window.location.pathname === "/" && (
<a href={app.github} className="flex place-content-end px-4 py-1 mt-4" target="_blank">
<img src={githubLogo} alt="github_link" />
</a>
)}
<h2 className="text-start ml-6 text-xl font-bold">{app.title}</h2>
<p className="flex-grow text-left ml-4 mr-8 my-4 line-clamp-4 leading-7 text-[#7e7e7e]">{app.description}</p>
<a href={app.url} className="flex mb-4 mx-4 btn btn-outline bg-base-100 border-none normal-case" target="_blank">
Ir a app <FaArrowRight />
</a>
</div>
);
})}
<ModalApps
newInfoApps={newInfoApps}
setNewInfoApps={setNewInfoApps}
/>
</>
)
}

export default Apps
188 changes: 19 additions & 169 deletions src/components/apps/ProjectsComponent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,179 +1,29 @@
import curvedArrow from "../../assets/img/curvedArrow.svg";
import gitLogo from "../../assets/img/gitLogo.svg";
import { FaRegCircle, FaArrowRight } from "react-icons/fa";
import { IconContext } from "react-icons";
import { useEffect, useState } from "react";
import {
apiCallApps,
apiCallAppsInfo,
postApiApps,
} from "../../store/reducers/appsCall/appsCallApiFunctionality";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../store/store";
import { createToken, ApiStateApps } from "../../interfaces/interfaces";
import Pencil from "../../assets/img/vector-10.png";
import ModalApps from "./appsAdminView/modalApps";
import ModalsAddApps from "./appsAdminView/ModalsAddApps";

declare global {
interface Window {
my_modal_1: {
showModal: () => void;
};
my_modal_2: {
showModal: () => void;
};
}
}
import Apps from "./Apps";
import CreateApp from "./appsAdminView/CreateApp";
import TasksProcess from "./appsHomepageView/TasksProcess";
import TitleApps from "./appsHomepageView/TitleApps";

export const ProjectsComponent = () => {
const { acces_token }: createToken = useSelector(
(state: RootState) => state.apiPostRegister
);

const handleSendApiInfo = (id: number) => {
apiCallAppsInfo(dispatch, id, acces_token);
};

const { apps }: ApiStateApps = useSelector(
(state: RootState) => state.appsCallApiFunctionality
);

const dispatch = useDispatch();

useEffect(() => {
apiCallApps(dispatch);
}, []);

const [newInfoApps, setNewInfoApps] = useState({
title: "",
description: "",
url: "",
state: "",
});

const sendInfo = () => {
postApiApps(newInfoApps, acces_token, dispatch);
};

return (
<>
<div className=" relative container min-h-screen mx-auto mt-10 flex ">
{/*Projects section*/}
<section className="flex flex-col justify-center">
{/*Projects title area*/}
{window.location.pathname != "/backoffice" && (
<div className="grid grid-cols-4 grid-rows-1 ">
{window.location.pathname !== "/backoffice" && (
<img
className="h-[44px] mr-10 place-self-end md:p-0 pl-14"
src={curvedArrow}
></img>
)}

<h2 className="font-black text-3xl text-center col-span-6">
Directorio de aplicaciones IT Academy
</h2>
</div>
)}
{/* Projects legend*/}
{window.location.pathname !== "/backoffice" && (
<div className="flex flex-col md:flex-row lg:w-3/4 lg:justify-end justify-center mx-auto my-6 gap-4">
<div className="flex justify-center items-center gap-2">
<IconContext.Provider
value={{ color: "#bedfc8", className: "global-class-name" }}
>
<FaRegCircle />
Terminadas
</IconContext.Provider>
</div>
<div className="flex justify-center items-center gap-2">
<IconContext.Provider
value={{ color: "#f8e9b9", className: "global-class-name" }}
>
<FaRegCircle /> En construcción
</IconContext.Provider>
</div>
<div className="flex justify-center items-center gap-2">
<IconContext.Provider
value={{ color: "#f7cbc4", className: "global-class-name" }}
>
<FaRegCircle />
Próximamente
</IconContext.Provider>
</div>
</div>
)}
{/*Cards*/}

{/*Projects section*/}
<section className="flex flex-col bg-white rounded-md mx-6 px-10 pb-5">

{/* HomePage exclusive components */}
{window.location.pathname !== "/backoffice" && (<> <TitleApps /> <TasksProcess /> </>)}

{/*Cards*/}
<div className="grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 w-full">
{window.location.pathname == "/backoffice" && (
<div>
<button
onClick={() => {
window.my_modal_2?.showModal();
}}
className="btn btn-success mb-4"
>
Añadir nuevo
</button>
</div>
<>
<h2 className="md:col-span-2 lg:col-span-3 ml-10 font-black py-12 text-3xl font-poppins sm:text-center lg:text-left"> Apps </h2>
<CreateApp />
</>
)}

<div className=" flex flex-wrap gap-7 justify-center ">
{/*Card 1*/}

{apps.map((cards) => {
return (
<div
className={`cards ${
cards.state === "COMPLETED" && "bg-completed"
}
${cards.state === "SOON" ? "bg-soon" : "bg-building"}
card md:w-80 m-5 md:m-0 p-0 text-grey-it`}
>
<div className="flex justify-between mt-4 pe-4">
<h2 className="card-title mt-5 ms-5">{cards.title}</h2>{" "}
<a href="https://github.com/it-academy-BCN/ita-landing-frontend">
<img src={gitLogo} />
</a>
</div>
<div className="card-body">
{window.location.pathname == "/backoffice" && (
<div>
<img
onClick={() => {
window.my_modal_1?.showModal();
handleSendApiInfo(cards.id);
}}
className="w-4 ms-auto cursor-pointer hover:scale-110 "
src={Pencil}
alt=""
/>
</div>
)}

<p>{cards.description}</p>
<div className="card-actions justify-center">
<button className="btn btn-block btn-outline bg-base-100 border-none normal-case gap-2">
Ir a app <FaArrowRight />
</button>
</div>
</div>
</div>
);
})}
<ModalApps
newInfoApps={newInfoApps}
setNewInfoApps={setNewInfoApps}
/>
<ModalsAddApps
newInfoApps={newInfoApps}
setNewInfoApps={setNewInfoApps}
sendInfo={sendInfo}
/>
</div>
</section>
</div>
<Apps />
</div>
</section>
</>
);
};
Expand Down
Loading

0 comments on commit 00e1daa

Please sign in to comment.