Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/backoffice-send-code-to-register #97

Merged
merged 8 commits into from
Oct 23, 2023
Merged

Feature/backoffice-send-code-to-register #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
cb7b03d
Styling /backoffice + users on navbar implemented + BackOfficeUserSen…
AlbertLnz Oct 19, 2023
699780b
Styling BackOfficeUserSendCode component
AlbertLnz Oct 19, 2023
27cc39a
Logic & visual of send-code-by-email implemented
AlbertLnz Oct 21, 2023
06939c1
fix background & adminButtons of /backoffice pages
AlbertLnz Oct 21, 2023
4778f8d
Delete alerts & fix ts errors
AlbertLnz Oct 23, 2023
9546a70
localhost to production uri
AlbertLnz Oct 23, 2023
6c6fa6b
fix some code smells
AlbertLnz Oct 23, 2023
9ce892b
fix routes to correct production uri
AlbertLnz Oct 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/assets/img/confirmationIcon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions src/assets/img/error.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/assets/img/reset.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
216 changes: 100 additions & 116 deletions src/components/BackOfficeComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,141 +5,125 @@ import FAQs from "./faqs/FAQsComponent";
import ProjectsComponent from "./apps/ProjectsComponent";
import menu from "../assets/img/menu.png";
import { AdminButtons } from "./faqs/faqsAdminView/AdminButtons";
import BackOfficeUserSendCode from "./BackOfficeUserSendCode";

function ViewBackOffice({
setIsLogged,
dispatch,
}: {
setIsLogged: any;
dispatch: any;
}) {
function ViewBackOffice({ setIsLogged, dispatch }: { readonly setIsLogged: any; readonly dispatch: any }) {

const [state, setState] = useState({
faqs: true,
projectsComponent: true,
faqs: false,
projectsComponent: false,
usersComponent: false,
});
useEffect(() => {
setState({ ...state, faqs: false });
}, []);

const [boldFont, setBoldFont] = useState({
boldFaqs: false,
boldProjectsComponent: false,
boldUsersComponent: false
});
useEffect(() => {
setBoldFont({ ...boldFont, boldFaqs: true });
}, []);

function useWindowSize() {
const [size, setSize] = useState([window.innerHeight, window.innerWidth]);
useEffect(() => {
const handleResize = () => {
setSize([window.innerHeight, window.innerWidth]);
};
window.addEventListener('resize', handleResize);
}, []);
return size;
}

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

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

const handleClickNav = (navOption: string) => {
if (navOption === 'faqs') {
setState({ faqs: true, projectsComponent: false, usersComponent: false })
setBoldFont({ boldFaqs: true, boldProjectsComponent: false, boldUsersComponent: false })
}
else if (navOption === 'apps') {
setState({ faqs: false, projectsComponent: true, usersComponent: false })
setBoldFont({ boldFaqs: false, boldProjectsComponent: true, boldUsersComponent: false })
} else {
setState({ faqs: false, projectsComponent: false, usersComponent: true });
setBoldFont({ boldFaqs: false, boldProjectsComponent: false, boldUsersComponent: true });
}
}

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


return (
<>
<main className="grid grid-cols-6 w-screen min-h-screen bg-backOffice-main">

<nav className="hidden lg:block">
<img src={itImage} alt="img-logo" className="mt-5 mx-auto"/>
<div className="grid grid-rows-3 my-10">
<button className={`flex justify-center items-center py-2 my-4 ml-2 ${boldFont.boldFaqs ? 'font-bold' : 'font-normal'}`} onClick={() => {
setState({ faqs: false, projectsComponent: true });
setBoldFont({boldFaqs: true, boldProjectsComponent: false});
}}>
<div className={`w-2 h-2 rounded-full mr-2 bg-[#BA007C] ${boldFont.boldFaqs ? '' : 'hidden'}`}></div>
FAQs
</button>

<button className={`flex justify-center items-center py-2 my-4 ml-2 ${boldFont.boldProjectsComponent ? 'font-bold' : 'font-normal'}`} onClick={() => {
setState({ faqs: true, projectsComponent: false });
setBoldFont({ boldFaqs: false, boldProjectsComponent: true });
}}>
<div className={`w-2 h-2 rounded-full mr-2 bg-[#BA007C] ${boldFont.boldProjectsComponent ? '' : 'hidden'}`}></div>
Apps
</button>

<div>
<button className="py-2 my-4 ml-2">Instrucciones</button>
</div>
</div>
<button onClick={()=> dispatch(setIsLogged(false)) } className="flex py-2 px-3 my-4 ml-2"> <img src={LogoOut} alt="" />
Logout
setState({ ...state, faqs: true });
setBoldFont({ ...boldFont, boldFaqs: true });
}, []);

return (
<>
<main className="grid grid-cols-6 w-screen min-h-screen lg:bg-backOffice-main h-full">

<nav className="hidden lg:block">
<img src={itImage} alt="img-logo" className="mt-5 mx-auto" />
<div className="grid grid-rows-3 my-10">
<button className={`flex justify-center items-center py-2 my-4 ml-2 ${boldFont.boldFaqs ? 'font-bold' : 'font-normal'}`} onClick={() => handleClickNav('faqs')}>
<div className={`w-2 h-2 rounded-full mr-2 bg-[#BA007C] ${boldFont.boldFaqs ? '' : 'hidden'}`}></div>
FAQs
</button>

<button className={`flex justify-center items-center py-2 my-4 ml-2 ${boldFont.boldProjectsComponent ? 'font-bold' : 'font-normal'}`} onClick={() => handleClickNav('apps')}>
<div className={`w-2 h-2 rounded-full mr-2 bg-[#BA007C] ${boldFont.boldProjectsComponent ? '' : 'hidden'}`}></div>
Apps
</button>

<button className={`flex justify-center items-center py-2 my-4 ml-2 ${boldFont.boldUsersComponent ? 'font-bold' : 'font-normal'}`} onClick={() => handleClickNav('users')}>
<div className={`w-2 h-2 rounded-full mr-2 bg-[#BA007C] ${boldFont.boldUsersComponent ? '' : 'hidden'}`}></div>
Usuari@s
</button>
</div>
<button onClick={() => dispatch(setIsLogged(false))} className="flex py-2 px-3 my-4 ml-2"> <img src={LogoOut} alt="" />
Logout
</button>
</nav>

<div className="lg:col-span-5 col-span-6 m-5">

{/* Mobile */}
<div className='lg:hidden'>
<div className="flex justify-end my-4 mr-4 cursor-pointer">
<AdminButtons />
<img src={menu} className="h-8 w-8" onClick={toggleDropdown} />
</div>
</div>
{isDropdownOpen && (
<div className='flex flex-col'>
<button className={`flex justify-center items-center py-2 my-4 ml-2 ${boldFont.boldFaqs ? 'font-bold' : 'font-normal'}`} onClick={() => handleClickNav('faqs')}>
<div className={`w-2 h-2 rounded-full mr-2 bg-[#BA007C] ${boldFont.boldFaqs ? '' : 'hidden'}`}></div>
FAQs
</button>
</nav>

<button className={`flex justify-center items-center py-2 my-4 ml-2 ${boldFont.boldProjectsComponent ? 'font-bold' : 'font-normal'}`} onClick={() => handleClickNav('apps')}>
<div className={`w-2 h-2 rounded-full mr-2 bg-[#BA007C] ${boldFont.boldProjectsComponent ? '' : 'hidden'}`}></div>
Apps
</button>

<button className={`flex justify-center items-center py-2 my-4 ml-2 ${boldFont.boldUsersComponent ? 'font-bold' : 'font-normal'}`} onClick={() => handleClickNav('users')}>
<div className={`w-2 h-2 rounded-full mr-2 bg-[#BA007C] ${boldFont.boldUsersComponent ? '' : 'hidden'}`}></div>
Usuari@s
</button>
</div>
)}
{!isDropdownOpen && (
<>
<div className={`${state.faqs ? 'component h-full' : 'component hidden'}`}>
{/* <div className="hidden lg:block">
<AdminButtons />
</div> */}
<FAQs />
</div>

<div className="lg:col-span-5 col-span-6 m-5">
<div className={`${state.projectsComponent ? 'component h-full' : 'component hidden'}`}>
{/* <div className="hidden lg:block">
<AdminButtons />
</div> */}
<ProjectsComponent />
</div>

{/* 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 className={`${state.usersComponent ? 'component h-full' : 'component hidden'}`}>
<BackOfficeUserSendCode />
</div>
{isDropdownOpen && (
<div className='flex flex-col'>
<button className={`flex justify-center items-center py-2 my-4 ml-2 ${boldFont.boldFaqs ? 'font-bold' : 'font-normal'}`} onClick={() => {
setState({ faqs: false, projectsComponent: true });
setBoldFont({boldFaqs: true, boldProjectsComponent: false});
}}>
<div className={`w-2 h-2 rounded-full mr-2 bg-[#BA007C] ${boldFont.boldFaqs ? '' : 'hidden'}`}></div>
FAQs
</button>
<button className={`flex justify-center items-center py-2 my-4 ml-2 ${boldFont.boldProjectsComponent ? 'font-bold' : 'font-normal'}`} onClick={() => {
setState({ faqs: true, projectsComponent: false });
setBoldFont({ boldFaqs: false, boldProjectsComponent: true });
}}>
<div className={`w-2 h-2 rounded-full mr-2 bg-[#BA007C] ${boldFont.boldProjectsComponent ? '' : 'hidden'}`}></div>
Apps
</button>

<div>
<button className="py-2 my-4 ml-2">Instrucciones</button>
</div>
</div>
)}
{!isDropdownOpen && (
<>
<div className={`${state.faqs ? 'component hidden' : 'component'}`}>
{!hiddenAdminButtons && <AdminButtons />}
<FAQs />
</div>

<div className={state.projectsComponent ? 'component hidden' : 'component'}>
{!hiddenAdminButtons && <AdminButtons />}
<ProjectsComponent />
</div>
</>
)}
</div>
</>
)}
</div>
</main>
</>
)
</>
)
}

export default ViewBackOffice;
Loading