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. 34
      src/components/header/Header.js
  4. 29
      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;
} }

34
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,7 +24,7 @@ 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 (
<> <>
@ -32,13 +34,13 @@ const Header = ({
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>
@ -54,24 +56,25 @@ const Header = ({
<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> </div>
<Link to='/'> <img src={logoIcon} className="h-10"/> </Link> <Link to='/'> <img src={logoIcon} className="h-10" /> </Link>
<Link to='/shoppingCart'> <Link to='/shoppingCart'>
<div> <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"> <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="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="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="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"/> <path d="M8.49451 12H8.50349" stroke="#df1452" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg> </svg>
</div> </div>
</Link> </Link>
</div> : </div> :
<> <>
{window.location.pathname.includes('adminpanel') ? <div></div> : {location.pathname.includes('adminpanel') ? <div></div> :
<> <>
<div className="header-profile h-full flex items-center"> <div className="header-profile h-full flex items-center">
<img src={arrowIcon} className=" ml-4 w-6" onClick={() => setSubMenu(!subMenu)}/> <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"> <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' /> <img src={avatar1} alt="avatar1" className='w-full' />
</div> </div>
@ -143,7 +146,7 @@ const Header = ({
onClick={() => setMenuPopup(false)} onClick={() => setMenuPopup(false)}
> >
<img src={exitIcon} className="w-full"/> <img src={exitIcon} className="w-full" />
</button> </button>
</div> </div>
@ -155,6 +158,7 @@ const Header = ({
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile, isMobile: state.publicApi.isMobile,
cart: state.userProduct.list
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
}; };

29
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'}}>
<div className=" rtl px-2 text-white bg-red52">
{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> <span onClick={() => { dispatch({ type: 'REMOVE_EXAM_COURSE', payload: item }); setSelectedCourse(null); setFakeState(fakeState + 24) }}> x </span>
</p> </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