pedram
/
Andishmand
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

various changes + cart Number In Mobile Version

Browse Source
main
Pedram Keshavarzi 3 years ago
parent eeeefa7870
commit 3490919057
4 changed files with 146 additions and 125 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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

6
src/App.js
Unescape View File

@ -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---------------------

6
src/components/Checkbox/index.css
Unescape View File

@ -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;
} }

226
src/components/header/Header.js
Unescape View File

@ -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'}`}> <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'}`} 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 to='/adminpanel' onClick={() => setSubMenu(false)} className='w-full text-right border-b border-gray-200 py-2'>
ورود به پنل ادمین ورود به پنل ادمین
</Link> </Link>
<Link to='/adminpanel/add-exam' className='w-full text-right border-b border-gray-200 py-2'> <Link to='/adminpanel/add-exam' onClick={() => setSubMenu(false)} className='w-full text-right border-b border-gray-200 py-2'>
ورود به صفحه افزودن آزمون ورود به صفحه افزودن آزمون
</Link> </Link>
<Link to='/adminpanel/add-product' className='w-full text-right border-b border-gray-200 py-2'> <Link to='/adminpanel/add-product' onClick={() => setSubMenu(false)} className='w-full text-right border-b border-gray-200 py-2'>
ورود به صفحه افزودن محصول ورود به صفحه افزودن محصول
</Link> </Link>
</div> </div>
} }
{ {
isMobile ? isMobile ?
<div className='flex w-full items-center justify-between rtl px-4'> <div className='flex w-full items-center justify-between rtl px-4'>
<div onClick={() => setMenuPopup(!menuPopup)}> <div onClick={() => setMenuPopup(!menuPopup)}>
<svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <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 5H21" stroke="#df1452" strokeWidth="1.5" strokeLinecap="round" />
<path d="M3 10H21" 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 15H21" stroke="#df1452" strokeWidth="1.5" strokeLinecap="round" />
<path d="M3 20H21" stroke="#df1452" strokeWidth="1.5" strokeLinecap="round" /> <path d="M3 20H21" stroke="#df1452" strokeWidth="1.5" strokeLinecap="round" />
</svg> </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>
</Link>
</div> :
<>
{window.location.pathname.includes('adminpanel') ? <div></div> :
<>
<div className="header-profile h-full flex items-center">
<img src={arrowIcon} className=" ml-4 w-6" onClick={() => setSubMenu(!subMenu)}/>
<div className="header-profile-img-container w-10 h-10 bg-color2 ml-2 rounded-full overflow-hidden">
<img src={avatar1} alt="avatar1" className='w-full' />
</div>
<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>
<Link to='/'> <img src={logoIcon} className="h-10" /> </Link>
<Link to='/shoppingCart'>
<div className='flex flex-col'>
<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">
<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> </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 = {
}; };

33
src/view/addExam/views/AddQuestionsFromBank.js
Unescape View File

@ -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) => (

Write Preview
Loading…
Cancel
Save