various changes + cart Number In Mobile Version

main
Pedram Keshavarzi 3 years ago
parent eeeefa7870
commit 3490919057
  1. 6
      src/App.js
  2. 6
      src/components/Checkbox/index.css
  3. 226
      src/components/header/Header.js
  4. 33
      src/view/addExam/views/AddQuestionsFromBank.js

@ -632,19 +632,19 @@ function App() {
let loginStorage = localStorage.getItem('login') let loginStorage = localStorage.getItem('login')
const [LOGIN,setLOGIN]=useState(true); const [LOGIN,setLOGIN]=useState(true);
const activeLogin=()=>{ const activeLogin=()=>{
setLOGIN(true)
localStorage.setItem('login', true) localStorage.setItem('login', true)
} }
const logOut = () => { const logOut = () => {
setLOGIN(false)
localStorage.setItem('login', false) localStorage.setItem('login', false)
}; };
useEffect(() => { useEffect(() => {
setLOGIN(loginStorage); setLOGIN(true);
}, [loginStorage]) }, [loginStorage])
//--UserFullInfo--------------------- //--UserFullInfo---------------------

@ -77,12 +77,12 @@
} }
.checkbox:hover span:first-child { .checkbox:hover span:first-child {
border-color: #06BAC0; border-color: #df1452;
} }
.checkbox-input:checked + .checkbox span:first-child { .checkbox-input:checked + .checkbox span:first-child {
background: #06BAC0; background: #df1452;
border-color: #06BAC0; border-color: #df1452;
animation: zoom-in-out 0.3s ease; animation: zoom-in-out 0.3s ease;
} }

@ -1,3 +1,5 @@
import React from 'react';
import { useLocation } from 'react-router-dom';
import './Header.scss'; import './Header.scss';
import searchIcon from "../../assets/img/Group 1148.svg"; import searchIcon from "../../assets/img/Group 1148.svg";
import moment from "jalali-moment"; import moment from "jalali-moment";
@ -11,7 +13,7 @@ import arrowIcon from './MobileSideMenu/arrow-down.svg'
import exitIcon from '../../assets/img/group-9.svg' import exitIcon from '../../assets/img/group-9.svg'
const Header = ({ const Header = ({
isMobile isMobile, cart
}) => { }) => {
let today = moment().locale("fa").format("YYYY/M/D"); let today = moment().locale("fa").format("YYYY/M/D");
console.log("today:"); console.log("today:");
@ -22,96 +24,97 @@ const Header = ({
console.log(weekday); console.log(weekday);
const [menuPopup, setMenuPopup] = useState(false); const [menuPopup, setMenuPopup] = useState(false);
const [subMenu, setSubMenu] = useState(false); const [subMenu, setSubMenu] = useState(false);
const location = useLocation();
return ( return (
<> <>
<div className={`header w-full h-[8.5%] z-10 bg-white fixed top-0 left-0 flex items-center ${!isMobile && 'shadow-md'}`}>
{
subMenu && <div className={`w-1/6 p-4 flex flex-col text-right bg-white shadow-xl absolute top-[108.5%] rounded-lg left-5 transition duration-700 ease-in-out ${subMenu && 'subMenu'}`}
>
<Link to='/adminpanel' className='w-full text-right border-b border-gray-200 py-2'>
ورود به پنل ادمین
</Link>
<Link to='/adminpanel/add-exam' className='w-full text-right border-b border-gray-200 py-2'>
ورود به صفحه افزودن آزمون
</Link>
<Link to='/adminpanel/add-product' className='w-full text-right border-b border-gray-200 py-2'>
ورود به صفحه افزودن محصول
</Link>
</div>
}
{
isMobile ?
<div className='flex w-full items-center justify-between rtl px-4'>
<div onClick={() => setMenuPopup(!menuPopup)}>
<svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 5H21" stroke="#df1452" strokeWidth="1.5" strokeLinecap="round" />
<path d="M3 10H21" stroke="#df1452" strokeWidth="1.5" strokeLinecap="round" />
<path d="M3 15H21" stroke="#df1452" strokeWidth="1.5" strokeLinecap="round" />
<path d="M3 20H21" stroke="#df1452" strokeWidth="1.5" strokeLinecap="round" />
</svg>
</div>
<Link to='/'> <img src={logoIcon} className="h-10"/> </Link>
<Link to='/shoppingCart'>
<div>
<svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 7.67001V6.70001C7.5 4.45001 9.31 2.24001 11.56 2.03001C14.24 1.77001 16.5 3.88001 16.5 6.51001V7.89001" stroke="#df1452" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M8.99999 22H15C19.02 22 19.74 20.39 19.95 18.43L20.7 12.43C20.97 9.99 20.27 8 16 8H7.99999C3.72999 8 3.02999 9.99 3.29999 12.43L4.04999 18.43C4.25999 20.39 4.97999 22 8.99999 22Z" stroke="#df1452" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M15.4955 12H15.5045" stroke="#df1452" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M8.49451 12H8.50349" stroke="#df1452" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<div className={`header w-full h-[8.5%] z-10 bg-white fixed top-0 left-0 flex items-center ${!isMobile && 'shadow-md'}`}>
{
subMenu && <div className={`w-1/6 p-4 flex flex-col text-right bg-white shadow-xl absolute top-[108.5%] rounded-lg left-5 transition duration-700 ease-in-out ${subMenu && 'subMenu'}`}
>
<Link to='/adminpanel' onClick={() => setSubMenu(false)} className='w-full text-right border-b border-gray-200 py-2'>
ورود به پنل ادمین
</Link>
<Link to='/adminpanel/add-exam' onClick={() => setSubMenu(false)} className='w-full text-right border-b border-gray-200 py-2'>
ورود به صفحه افزودن آزمون
</Link>
<Link to='/adminpanel/add-product' onClick={() => setSubMenu(false)} className='w-full text-right border-b border-gray-200 py-2'>
ورود به صفحه افزودن محصول
</Link>
</div>
}
{
isMobile ?
<div className='flex w-full items-center justify-between rtl px-4'>
<div onClick={() => setMenuPopup(!menuPopup)}>
<svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 5H21" stroke="#df1452" strokeWidth="1.5" strokeLinecap="round" />
<path d="M3 10H21" stroke="#df1452" strokeWidth="1.5" strokeLinecap="round" />
<path d="M3 15H21" stroke="#df1452" strokeWidth="1.5" strokeLinecap="round" />
<path d="M3 20H21" stroke="#df1452" strokeWidth="1.5" strokeLinecap="round" />
</svg>
</div> </div>
</Link> <Link to='/'> <img src={logoIcon} className="h-10" /> </Link>
</div> : <Link to='/shoppingCart'>
<> <div className='flex flex-col'>
{window.location.pathname.includes('adminpanel') ? <div></div> : <div className='absolute left-8 top-3 bg-red52 w-4 h-4 rounded-full text-xs flex items-center justify-center text-white'>{cart?.length}</div>
<> <svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<div className="header-profile h-full flex items-center"> <path d="M7.5 7.67001V6.70001C7.5 4.45001 9.31 2.24001 11.56 2.03001C14.24 1.77001 16.5 3.88001 16.5 6.51001V7.89001" stroke="#df1452" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<img src={arrowIcon} className=" ml-4 w-6" onClick={() => setSubMenu(!subMenu)}/> <path d="M8.99999 22H15C19.02 22 19.74 20.39 19.95 18.43L20.7 12.43C20.97 9.99 20.27 8 16 8H7.99999C3.72999 8 3.02999 9.99 3.29999 12.43L4.04999 18.43C4.25999 20.39 4.97999 22 8.99999 22Z" stroke="#df1452" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<div className="header-profile-img-container w-10 h-10 bg-color2 ml-2 rounded-full overflow-hidden"> <path d="M15.4955 12H15.5045" stroke="#df1452" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<img src={avatar1} alt="avatar1" className='w-full' /> <path d="M8.49451 12H8.50349" stroke="#df1452" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</div> </svg>
<div className="header-profile-text-container w-fit text-right ml-4">
<div className="header-profile-text-container-name text-sm">
کوروش زراندوز
</div>
<div className="header-profile-text-container-role text-xs">
پایه ششم
</div>
</div>
</div> </div>
</Link>
<div className="header-line w-px h-[90%] bg-color1 ml-6"></div> </div> :
<div className="header-date-and-time text-right ml-6"> <>
{location.pathname.includes('adminpanel') ? <div></div> :
<Clock /> <>
<div className="header-date-and-date text-sm"> <div className="header-profile h-full flex items-center">
<span className="header-date-and-date-text1 text-color3 ml-2"> <img src={arrowIcon} className=" ml-4 w-6" onClick={() => setSubMenu(!subMenu)} />
{weekdayList[weekday]} <div className="header-profile-img-container w-10 h-10 bg-color2 ml-2 rounded-full overflow-hidden">
</span> <img src={avatar1} alt="avatar1" className='w-full' />
<span </div>
className="header-date-and-date-text2 text-color2 ml-2" <div className="header-profile-text-container w-fit text-right ml-4">
style={{ fontFamily: "IRANSansXFaNum-Regular" }} <div className="header-profile-text-container-name text-sm">
> کوروش زراندوز
{today} </div>
</span> <div className="header-profile-text-container-role text-xs">
<span className="header-date-and-date-text3 text-color4 text-xs"> پایه ششم
روز ملی صنعت نفت </div>
</span> </div>
</div>
</div> </div>
<div className="header-line w-px h-[90%] bg-color1 ml-6"></div>
</> <div className="header-line w-px h-[90%] bg-color1 ml-6"></div>
<div className="header-date-and-time text-right ml-6">
<Clock />
<div className="header-date-and-date text-sm">
<span className="header-date-and-date-text1 text-color3 ml-2">
{weekdayList[weekday]}
</span>
<span
className="header-date-and-date-text2 text-color2 ml-2"
style={{ fontFamily: "IRANSansXFaNum-Regular" }}
>
{today}
</span>
<span className="header-date-and-date-text3 text-color4 text-xs">
روز ملی صنعت نفت
</span>
</div>
</div>
<div className="header-line w-px h-[90%] bg-color1 ml-6"></div>
</>
} }
</> </>
} }
{/* <div className="header-search w-[51.5%] h-full ml-6 flex items-center"> {/* <div className="header-search w-[51.5%] h-full ml-6 flex items-center">
<img src={searchIcon} alt="searchIcon" className="header-search-icon" /> <img src={searchIcon} alt="searchIcon" className="header-search-icon" />
<input <input
type="search" type="search"
@ -120,41 +123,42 @@ const Header = ({
className="header-search-input h-2/3 w-[94%] ml-2 text-lg" className="header-search-input h-2/3 w-[94%] ml-2 text-lg"
/> />
</div> */} </div> */}
</div>
{
isMobile && menuPopup &&
<>
<div className='h-screen top-0 w-full z-30 backdrop-blur bg-black bg-opacity-20 fixed'></div>
<div className='w-full flex'>
<MobileSideMenu profilePic={avatar1} users={[
{
name: 'کوروش زراندوز',
title: 'پایه ششم'
},
{
name: 'کوروش زراندوز',
title: 'پادشاه کوروش توپیا'
},
]}
close={() => setMenuPopup(false)}
/>
<button className='flex items-center justify-center fixed z-40 top-10 left-3 text-xl font-bold text-red52 w-12 h-12 rounded-xl '
onClick={() => setMenuPopup(false)}
>
<img src={exitIcon} className="w-full"/>
</button>
</div> </div>
</> {
} isMobile && menuPopup &&
<>
<div className='h-screen top-0 w-full z-30 backdrop-blur bg-black bg-opacity-20 fixed'></div>
<div className='w-full flex'>
<MobileSideMenu profilePic={avatar1} users={[
{
name: 'کوروش زراندوز',
title: 'پایه ششم'
},
{
name: 'کوروش زراندوز',
title: 'پادشاه کوروش توپیا'
},
]}
close={() => setMenuPopup(false)}
/>
<button className='flex items-center justify-center fixed z-40 top-10 left-3 text-xl font-bold text-red52 w-12 h-12 rounded-xl '
onClick={() => setMenuPopup(false)}
>
<img src={exitIcon} className="w-full" />
</button>
</div>
</>
}
</> </>
); );
} }
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile, isMobile: state.publicApi.isMobile,
cart: state.userProduct.list
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
}; };

@ -88,7 +88,11 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
} }
const [sortedQuestionBank, setSortedQuestionBank] = useState(addExamState.questionBank);
useEffect(() => {
setSortedQuestionBank(addExamState.questionBank)
}, [addExamState])
const [numberOfOptions, setNumberOfOptions] = useState(null); const [numberOfOptions, setNumberOfOptions] = useState(null);
const [options, setOptions] = useState([]) const [options, setOptions] = useState([])
@ -147,7 +151,7 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
addExamState.courseBank.map( addExamState.courseBank.map(
(item, index) => ( (item, index) => (
<> <>
<div className="w-full flex items-center py-2 justify-between border-b pl-8 border-gray-200"> <div className="w-full flex items-center py-2 justify-start border-b pl-8 border-gray-200">
<Checkbox name={`PICK_QUESTIONARE_${index}`} <Checkbox name={`PICK_QUESTIONARE_${index}`}
onChange={(e) => onChange={(e) =>
e.target.checked ? e.target.checked ?
@ -161,7 +165,7 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
} }
/> />
<h2 className="text-red26 font-bold">{item.title}</h2> <h2 className="text-red26 font-bold mr-4">{item.title}</h2>
{/* <h4>تعداد سوالات: {item.numberOfQuestions}</h4> {/* <h4>تعداد سوالات: {item.numberOfQuestions}</h4>
<p>تعداد دروس: {item.courses.length}</p> */} <p>تعداد دروس: {item.courses.length}</p> */}
{/* <p className="cursor-pointer" onClick={() => { {/* <p className="cursor-pointer" onClick={() => {
@ -251,16 +255,27 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
{(provided) => ( {(provided) => (
<div <div
{...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}
className={`flex flex-col ${selectedCourse.id === item.id ? 'bg-pinkF5 border border-red52 text-red52' : 'bg-white border border-gray-300 text-blue3A'} items-center justify-between pb-12 pt-2 w-36 h-32 mx-2 font-bold rounded-xl cursor-pointer`} className={`flex flex-col ${selectedCourse.id === item.id ? 'bg-pinkF5 border border-red52 text-red52' : 'bg-white border border-gray-300 text-blue3A'} items-center justify-between pt-4 w-36 h-32 mx-2 font-bold rounded-xl cursor-pointer`}
onClick={() => setSelectedCourse(item)} onClick={() => setSelectedCourse(item)}
> >
<p className="w-full text-left px-4" > <div className="w-full flex justify-between items-center " style={{direction: 'ltr'}}>
<span onClick={() => { dispatch({ type: 'REMOVE_EXAM_COURSE', payload: item }); setSelectedCourse(null); setFakeState(fakeState + 24) }}> x </span> <div className=" rtl px-2 text-white bg-red52">
</p> {item.selectedQuestions.length} سوال
</div>
{
selectedCourse.id == item.id && <p className=" text-left px-4" >
<span onClick={() => { dispatch({ type: 'REMOVE_EXAM_COURSE', payload: item }); setSelectedCourse(null); setFakeState(fakeState + 24) }}> x </span>
</p>
}
</div>
<p className="text-red52"> <p className="text-red52">
{item.title} {item.title}
</p> </p>
<div className="w-full flex justify-between px-2 pb-2">
<p className={`w-1/2 border-l text-center text-xs ${selectedCourse.id === item.id ? 'border-red52' : 'border-gray-300'} text-gray-400`}> ضریب {item.coefficient}</p>
<p className="w-1/2 text-center text-xs font-light text-gray-400">{item.numberOfOptions} گزینه</p>
</div>
</div> </div>
)} )}
@ -469,7 +484,9 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
<div className="px-2 pl-10 text-gray37 text-sm flex items-center "> <div className="px-2 pl-10 text-gray37 text-sm flex items-center ">
<input type='search' placeholder="جستجو..." onChange={(e) => console.log(e.target.value)} <input type='search' placeholder="جستجو..." onChange={(e) => {
}}
className="w-full h-10 flex px-4 items-center pt-1 outline-none rounded-md border border-gray-300 text-sm text-gray-600 mr-2" /> className="w-full h-10 flex px-4 items-center pt-1 outline-none rounded-md border border-gray-300 text-sm text-gray-600 mr-2" />
</div> </div>
@ -484,7 +501,7 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
<div className="w-11/12" {...provided.droppableProps} ref={provided.innerRef}> <div className="w-11/12" {...provided.droppableProps} ref={provided.innerRef}>
{ {
addExamState.questionBank?.filter(itm => itm.courseId == selectedCourse.id)?.map( sortedQuestionBank?.filter(itm => itm.courseId == selectedCourse.id)?.map(
(course, index) => ( (course, index) => (
<Draggable draggableId={`_${course.questionId}`} index={course.questionId} key={`CHOOSED_QUESTIONS_${course.questionId}`}> <Draggable draggableId={`_${course.questionId}`} index={course.questionId} key={`CHOOSED_QUESTIONS_${course.questionId}`}>
{(provided) => ( {(provided) => (

Loading…
Cancel
Save