Label Input Done

main
Pedram Keshavarzi 3 years ago
parent 0ede1bb75a
commit d879791dae
  1. 16
      package-lock.json
  2. 1
      package.json
  3. 4
      src/App.css
  4. 2
      src/App.js
  5. 8
      src/components/Product/index.js
  6. 2
      src/view/addProduct/Main/index.js
  7. 2
      src/view/addProduct/Sidebar/index.js
  8. 98
      src/view/addProduct/components/lable.js
  9. 5
      src/view/addProduct/components/tags.js
  10. 2
      src/view/addProduct/index.js
  11. 22
      src/view/services/index.js
  12. 9
      yarn.lock

16
package-lock.json generated

@ -19,6 +19,7 @@
"lottie-web": "^5.8.1", "lottie-web": "^5.8.1",
"mapir-react-component": "^2.0.1", "mapir-react-component": "^2.0.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-colorful": "^5.5.1",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-draft-wysiwyg": "^1.14.7", "react-draft-wysiwyg": "^1.14.7",
"react-dropzone": "^11.4.2", "react-dropzone": "^11.4.2",
@ -14146,6 +14147,15 @@
"node": ">=14" "node": ">=14"
} }
}, },
"node_modules/react-colorful": {
"version": "5.5.1",
"resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz",
"integrity": "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==",
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/react-dev-utils": { "node_modules/react-dev-utils": {
"version": "12.0.0", "version": "12.0.0",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
@ -27579,6 +27589,12 @@
"whatwg-fetch": "^3.6.2" "whatwg-fetch": "^3.6.2"
} }
}, },
"react-colorful": {
"version": "5.5.1",
"resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz",
"integrity": "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==",
"requires": {}
},
"react-dev-utils": { "react-dev-utils": {
"version": "12.0.0", "version": "12.0.0",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",

@ -14,6 +14,7 @@
"lottie-web": "^5.8.1", "lottie-web": "^5.8.1",
"mapir-react-component": "^2.0.1", "mapir-react-component": "^2.0.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-colorful": "^5.5.1",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-draft-wysiwyg": "^1.14.7", "react-draft-wysiwyg": "^1.14.7",
"react-dropzone": "^11.4.2", "react-dropzone": "^11.4.2",

@ -6,9 +6,9 @@ input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { input::-webkit-inner-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
} }
*{ /* *{
transition: all 0.3s; transition: all 0.3s;
} } */
.rtl{ .rtl{
direction: rtl; direction: rtl;
} }

@ -1,6 +1,6 @@
import logo from './logo.svg'; import logo from './logo.svg';
import './App.css'; import './App.css';
import { HashRouter as Router, Routes, Route } from "react-router-dom"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Dashboard2 from './view/dashboard2/Dashboard2'; import Dashboard2 from './view/dashboard2/Dashboard2';
import Header from './components/header/Header'; import Header from './components/header/Header';
import Nav from './components/nav/Nav'; import Nav from './components/nav/Nav';

@ -37,7 +37,8 @@ const ProductDesign = ({
teacher, teacher,
btnOnClick, btnOnClick,
catId, catId,
isMobile isMobile,
onClick
}) => { }) => {
const [isHovering, setIsHovering] = useState(false); const [isHovering, setIsHovering] = useState(false);
@ -78,7 +79,7 @@ const ProductDesign = ({
return ( return (
<div className={`flex flex-col pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP ${isMobile && 'w-11/12'}`} <div className={`flex flex-col pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP ${isMobile && 'w-11/12'}`}
style={{ width: !isMobile && '375px' , direction: 'rtl' }} style={{ width: !isMobile && '375px' , direction: 'rtl' }}
onClick={onClick}
> >
<div className="border-b border-red82OP pb-2 px-4"> <div className="border-b border-red82OP pb-2 px-4">
@ -106,7 +107,7 @@ const ProductDesign = ({
className={`bg-pinkF5 text-red26 w-32 border-2 border-red52 px-1 py-2 text-xs flex justify-center hover:bg-red52 hover:text-white className={`bg-pinkF5 text-red26 w-32 border-2 border-red52 px-1 py-2 text-xs flex justify-center hover:bg-red52 hover:text-white
`} `}
> >
<button onClick={btnOnClick}>افزودن به سبد خرید</button> <button className="z-2" onClick={btnOnClick}>افزودن به سبد خرید</button>
</div> </div>
</div> </div>
@ -279,6 +280,7 @@ const ProductDesign = ({
</div> </div>
) )
} }

@ -8,7 +8,7 @@ import './editor.css';
const MainAP = () => { const MainAP = () => {
return ( return (
<div className="w-full flex flex-col py-4 px-10 items-center rtl"> <div className="w-full flex flex-col py-4 px-6 items-center rtl">
<h1 className="text-blue3A text-lg font-bold w-full text-right px-4 mb-6 border-r-4 border-blue65"> <h1 className="text-blue3A text-lg font-bold w-full text-right px-4 mb-6 border-r-4 border-blue65">
اضافه کردن محصول جدید اضافه کردن محصول جدید
</h1> </h1>

@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import Grades from "../components/grade"; import Grades from "../components/grade";
import LableInput from "../components/lable";
import TagsInput from "../components/tags"; import TagsInput from "../components/tags";
@ -22,6 +23,7 @@ const SideAP = () => {
</div> </div>
<Grades /> <Grades />
<TagsInput /> <TagsInput />
<LableInput />
</div> </div>
) )
} }

@ -0,0 +1,98 @@
import React, { useState, useEffect } from "react";
import { HexColorPicker } from "react-colorful";
const LableInput = () => {
const [tags, setTags] = useState([]);
const [tag, setTag] = useState(null);
const [fakeState, setFakeState] = useState(5);
const initialColor = 'linear-gradient(143deg, rgba(2,0,36,1) 0%, rgba(121,9,9,1) 0%, rgba(137,71,8,1) 9%, rgba(147,143,7,1) 18%, rgba(71,159,6,1) 29%, rgba(5,178,69,1) 37%, rgba(5,178,185,1) 48%, rgba(4,56,197,1) 57%, rgba(54,3,209,1) 66%, rgba(160,3,216,1) 76%, rgba(236,1,167,1) 87%, rgba(255,0,0,1) 100%)'
const [color, setColor] = useState(initialColor);
const [colorPopUp, setColorPopUp] = useState(false);
useEffect(() => {
if (tag) {
tags.push(tag);
setFakeState(fakeState + 1)
console.log(tags)
}
}, [tag]);
return (
<div className="w-full rtl bg-white border mx-2 my-4 rounded-lg border-grayE0 flex flex-col py-6">
<h1 className="text-blue3A text-lg font-bold w-full text-right px-4 mb-2 border-r-4 border-blue65">
لیبل محصول
</h1>
<p className="text-xs font-bold text-right pr-4 text-gray-600 mb-6">توجه: امکان اضافه کردن فقط 3 لیبل بر روی تصاویر شاخص وجود دارد</p>
<div className="flex px-4 mb-2">
<input type="text" className="bg-white border border-grayE0 h-12 w-full outline-none px-2 ml-2 rounded-md" id="lableInput"
onKeyDown={(e) => {
if (e.key == 'Enter' && document.getElementById('colorInput').value) {
setTag({
title: e.target.value,
color: document.getElementById('colorInput').value
});
document.getElementById('lableInput').value = null
}
}} />
</div>
<div className="w-full px-4 flex items-center justify-between">
<div className="flex items-center">
<input type="text" className="bg-white border border-grayE0 h-14 w-2/5 text-center outline-none px-2 ml-2 rounded-lg" id="colorInput"
value={colorPopUp ? color : null}
placeholder="کد رنگ"
onChange={(e) => { if (e.target.value !== '') { setColor(e.target.value) } else { setColor(initialColor) } console.log(color, e.target.value); }} />
<div className="h-14 w-14 rounded-lg cursor-pointer"
style={{ background: color }}
onClick={() => setColorPopUp(true)}
>
</div>
</div>
<button className="bg-grayE0 w-24 h-14 mx-2 font-bold text-gray-600 rounded-lg" onClick={() => {
setTag({
title: document.getElementById('lableInput').value,
color: document.getElementById('colorInput').value
});
document.getElementById('lableInput').value = null;
document.getElementById('colorInput').value = null
setColor(initialColor)
}}>
افزودن
</button>
</div>
{colorPopUp && <div className="flex flex-col absolute left-2 p-6 py-2 pb-6 bg-gray-100 border border-gray-200 rounded-lg mr-20 ">
<div className="w-full text-left flex justify-end"><p className="cursor-pointer text-xl bg-gray-300 w-1/6 flex items-center justify-center text-gray-500 mb-2 rounded-md"
onClick={() => setColorPopUp(false)}>X</p></div>
<HexColorPicker color={color} onChange={setColor} />
</div>
}
<div className="w-full px-4 flex flex-wrap mt-2">
{
tags.map(
(item, index) => (
<div className="bg-opacity-30 py-1 flex items-center justify-center px-4 m-1 rtl rounded-md" style={{ color: item.color, background:item.color+15 }}>
<p>{item.title}</p>
<p className="mr-1 cursor-pointer" onClick={() => { tags.splice(tags.findIndex(e => e === item), 1); setFakeState(!fakeState); }}>x</p>
</div>
)
)
}
</div>
</div>
)
}
export default LableInput;

@ -13,6 +13,9 @@ const TagsInput = () => {
} }
}, [tag]); }, [tag]);
return( return(
<div className="w-full rtl bg-white border mx-2 my-4 rounded-lg border-grayE0 flex flex-col py-6"> <div className="w-full rtl bg-white border mx-2 my-4 rounded-lg border-grayE0 flex flex-col py-6">
<h1 className="text-blue3A text-lg font-bold w-full text-right px-4 mb-6 border-r-4 border-blue65"> <h1 className="text-blue3A text-lg font-bold w-full text-right px-4 mb-6 border-r-4 border-blue65">
@ -32,7 +35,7 @@ const TagsInput = () => {
<div className="bg-gray-200 py-1 flex items-center justify-center px-4 m-1 rtl rounded-md"> <div className="bg-gray-200 py-1 flex items-center justify-center px-4 m-1 rtl rounded-md">
<p>{item}</p> <p>{item}</p>
<p className="mr-1">x</p> <p className="mr-1 cursor-pointer" onClick={() => {tags.splice(tags.findIndex(e => e === item),1); setFakeState(!fakeState);}}>x</p>
</div> </div>
) )

@ -4,7 +4,7 @@ import SideAP from "./Sidebar";
const AddProduct = () => { const AddProduct = () => {
return( return(
<div className="w-11/12 h-screen bg-grayFD flex items-start mt-20 py-10 justify-center"> <div className="w-[93%] h-screen bg-grayFD flex items-start mt-20 py-10 justify-center">
<div className="w-1/4"> <div className="w-1/4">
<SideAP /> <SideAP />
</div> </div>

@ -359,9 +359,9 @@ if (!isMobile){
}, },
] ]
}); });
setPopUp(true);
console.log(gameId) console.log(gameId)
}} }}
> >
{/* {console.log(product)} */} {/* {console.log(product)} */}
<Product <Product
@ -378,12 +378,16 @@ if (!isMobile){
productHolderHoverBorder="shadow-md" productHolderHoverBorder="shadow-md"
teacher={product.vodTeacher} teacher={product.vodTeacher}
catId={gameId} catId={gameId}
btnOnClick={() => onClick={() => null}
btnOnClick={() =>{
pushToCart({ pushToCart({
productId: product?.productId, productId: product?.id,
userId: product?.userId,
count: 1, count: 1,
}) });
setPopUp(false)
console.log(product.id)
}
} }
/> />
</Link> </Link>
@ -618,7 +622,7 @@ if (!isMobile){
}, },
] ]
}); });
setPopUp(true); // setPopUp(true);
// console.log(gameId) // console.log(gameId)
}} }}
> >
@ -639,10 +643,12 @@ if (!isMobile){
catId={gameId} catId={gameId}
btnOnClick={() => btnOnClick={() =>
pushToCart({ pushToCart({
productId: product?.productId, productId: product?.id,
userId: product?.userId, // userId: product?.userId,
count: 1, count: 1,
}) })
} }
/> />
</Link> </Link>

@ -7650,6 +7650,11 @@
"regenerator-runtime" "^0.13.9" "regenerator-runtime" "^0.13.9"
"whatwg-fetch" "^3.6.2" "whatwg-fetch" "^3.6.2"
"react-colorful@^5.5.1":
"integrity" "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg=="
"resolved" "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz"
"version" "5.5.1"
"react-dev-utils@^12.0.0": "react-dev-utils@^12.0.0":
"integrity" "sha512-xBQkitdxozPxt1YZ9O1097EJiVpwHr9FoAuEVURCKV0Av8NBERovJauzP7bo1ThvuhZ4shsQ1AJiu4vQpoT1AQ==" "integrity" "sha512-xBQkitdxozPxt1YZ9O1097EJiVpwHr9FoAuEVURCKV0Av8NBERovJauzP7bo1ThvuhZ4shsQ1AJiu4vQpoT1AQ=="
"resolved" "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz" "resolved" "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz"
@ -7680,7 +7685,7 @@
"strip-ansi" "^6.0.1" "strip-ansi" "^6.0.1"
"text-table" "^0.2.0" "text-table" "^0.2.0"
"react-dom@*", "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0", "react-dom@^16.11.0", "react-dom@^17.0.2", "react-dom@>=0.14.0", "react-dom@>=16", "react-dom@>=16.8", "react-dom@0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x": "react-dom@*", "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0", "react-dom@^16.11.0", "react-dom@^17.0.2", "react-dom@>=0.14.0", "react-dom@>=16", "react-dom@>=16.8", "react-dom@>=16.8.0", "react-dom@0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x":
"integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==" "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA=="
"resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz" "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
"version" "17.0.2" "version" "17.0.2"
@ -7872,7 +7877,7 @@
dependencies: dependencies:
"clsx" "^1.1.1" "clsx" "^1.1.1"
"react@*", "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react@^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.11.0", "react@^16.8.3 || ^17", "react@^17.0.2", "react@>= 16", "react@>= 16.8", "react@>=0.14.0", "react@>=16", "react@>=16.8", "react@0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x", "react@17.0.2": "react@*", "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react@^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.11.0", "react@^16.8.3 || ^17", "react@^17.0.2", "react@>= 16", "react@>= 16.8", "react@>=0.14.0", "react@>=16", "react@>=16.8", "react@>=16.8.0", "react@0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x", "react@17.0.2":
"integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==" "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
"resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz" "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
"version" "17.0.2" "version" "17.0.2"

Loading…
Cancel
Save