parent
0fe9b16efd
commit
a218d65d93
20 changed files with 1842 additions and 41 deletions
@ -0,0 +1,27 @@ |
||||
|
||||
|
||||
import proxy from "../proxy"; |
||||
const network = { |
||||
info: |
||||
(data = {}) => |
||||
async (dispatch) => |
||||
await proxy.get("network/info", data, { dispatch }), |
||||
schoolList: |
||||
(data = {}) => |
||||
async (dispatch) => |
||||
await proxy.get("network/schoolList", data, { dispatch }), |
||||
add: |
||||
(data = {}) => |
||||
async (dispatch) => |
||||
await proxy.post("network/add", data, { dispatch }), |
||||
update: |
||||
(data = {}) => |
||||
async (dispatch) => |
||||
await proxy.put("network/update", data, { dispatch }), |
||||
delete: |
||||
(data = {}) => |
||||
async (dispatch) => |
||||
await proxy.delete("network/delete", data, { dispatch }), |
||||
}; |
||||
|
||||
export default network; |
||||
@ -0,0 +1,26 @@ |
||||
|
||||
import proxy from "../proxy"; |
||||
const offCode = { |
||||
info: |
||||
(data = {}) => |
||||
async (dispatch) => |
||||
await proxy.get("offCode/info", data, { dispatch }), |
||||
schoolList: |
||||
(data = {}) => |
||||
async (dispatch) => |
||||
await proxy.get("offCode/list", data, { dispatch }), |
||||
add: |
||||
(data = {}) => |
||||
async (dispatch) => |
||||
await proxy.post("offCode/add", data, { dispatch }), |
||||
update: |
||||
(data = {}) => |
||||
async (dispatch) => |
||||
await proxy.put("offCode/update", data, { dispatch }), |
||||
delete: |
||||
(data = {}) => |
||||
async (dispatch) => |
||||
await proxy.delete("offCode/delete", data, { dispatch }), |
||||
}; |
||||
|
||||
export default offCode; |
||||
@ -0,0 +1,40 @@ |
||||
|
||||
|
||||
import { toast } from "react-toastify"; |
||||
|
||||
const initialState = { |
||||
loading: false, |
||||
error: null, |
||||
info: null, |
||||
list: null, |
||||
lastAdd: null, |
||||
schema: [], |
||||
}; |
||||
export default function network(state = initialState, action) { |
||||
let { type, data, schema } = action; |
||||
switch (type) { |
||||
case "network/info": |
||||
return { ...state, loading: false, info: data, error: null }; |
||||
case "network/add": |
||||
toast.success("درخواست با موفقیت انجام شد"); |
||||
return { ...state, loading: false, error: null, lastAdd: data.id }; |
||||
case "network/update": |
||||
toast.success("درخواست با موفقیت انجام شد"); |
||||
return { ...state, loading: false, error: null }; |
||||
case "network/schoolList": |
||||
return { |
||||
...state, |
||||
loading: false, |
||||
error: null, |
||||
list: data, |
||||
schema: schema, |
||||
}; |
||||
case "network/loading": |
||||
return { ...state, loading: true }; |
||||
case "network/error": |
||||
toast.error(data.message); |
||||
return { ...state, loading: false, error: data.message }; |
||||
default: |
||||
return state; |
||||
} |
||||
} |
||||
@ -0,0 +1,40 @@ |
||||
|
||||
|
||||
import { toast } from "react-toastify"; |
||||
|
||||
const initialState = { |
||||
loading: false, |
||||
error: null, |
||||
info: null, |
||||
list: null, |
||||
lastAdd: null, |
||||
schema: [], |
||||
}; |
||||
export default function offCode(state = initialState, action) { |
||||
let { type, data, schema } = action; |
||||
switch (type) { |
||||
case "offCode/info": |
||||
return { ...state, loading: false, info: data, error: null }; |
||||
case "offCode/add": |
||||
toast.success("درخواست با موفقیت انجام شد"); |
||||
return { ...state, loading: false, error: null, lastAdd: data.id }; |
||||
case "offCode/update": |
||||
toast.success("درخواست با موفقیت انجام شد"); |
||||
return { ...state, loading: false, error: null }; |
||||
case "offCode/list": |
||||
return { |
||||
...state, |
||||
loading: false, |
||||
error: null, |
||||
list: data, |
||||
schema: schema, |
||||
}; |
||||
case "offCode/loading": |
||||
return { ...state, loading: true }; |
||||
case "offCode/error": |
||||
toast.error(data.message); |
||||
return { ...state, loading: false, error: data.message }; |
||||
default: |
||||
return state; |
||||
} |
||||
} |
||||
@ -0,0 +1,196 @@ |
||||
import React, { useEffect } from "react"; |
||||
import { useState } from "react"; |
||||
// import { Document, Page } from "react-pdf";
|
||||
import { Viewer, Worker } from "@react-pdf-viewer/core"; |
||||
import { pageNavigationPlugin } from "@react-pdf-viewer/page-navigation"; |
||||
// Import the styles
|
||||
import "@react-pdf-viewer/core/lib/styles/index.css"; |
||||
import "@react-pdf-viewer/page-navigation/lib/styles/index.css"; |
||||
import { RenderCurrentPageInputProps } from "@react-pdf-viewer/page-navigation"; |
||||
|
||||
|
||||
|
||||
const optionNum = ["", "الف", "ب", "پ", "ت", "ث", "ج", "چ", "ح"]; |
||||
|
||||
const NoteContainer = ({ notes, questions, setAnswer, endExam, info }) => { |
||||
const [activeNote, setActiveNote] = useState(0); |
||||
const [activeFileId, setActiveFileId] = useState(null); |
||||
const changeNoteHandler = (index, fileId) => { |
||||
setActiveNote(index); |
||||
setActiveFileId(fileId); |
||||
}; |
||||
|
||||
const [answerList, setAnswerList] = useState([]); |
||||
const [fake, setFake] = useState(0); |
||||
|
||||
useEffect(() => { |
||||
setActiveFileId(notes[0].fileId); |
||||
let newlist = []; |
||||
for (let i = 0; i < questions?.length; i++) { |
||||
newlist.push(0); |
||||
} |
||||
setAnswerList(newlist); |
||||
}, [notes]); |
||||
|
||||
const chooseOption = (index, answer, id) => { |
||||
let newlist = answerList; |
||||
if (newlist[index] === answer) { |
||||
newlist[index] = 0; |
||||
setAnswer({ |
||||
userAnswerId: id, |
||||
answer: "0", |
||||
}); |
||||
} else { |
||||
newlist[index] = answer; |
||||
setAnswer({ |
||||
userAnswerId: id, |
||||
answer: String(answer), |
||||
}); |
||||
} |
||||
setAnswerList(newlist); |
||||
setFake(Math.random() * 1000); |
||||
}; |
||||
console.log(answerList); |
||||
|
||||
//================================
|
||||
const pageNavigationPluginInstance = pageNavigationPlugin(); |
||||
const { CurrentPageInput } = pageNavigationPluginInstance; |
||||
|
||||
//end exam ============================
|
||||
const endExamHandler = () => { |
||||
endExam({ |
||||
userExamId: info.id, |
||||
}); |
||||
}; |
||||
return ( |
||||
<div className="w-full mt-3 rtl" style={{ height: "calc(100vh - 90px)" }}> |
||||
<div className="w-full h-full flex items-start"> |
||||
{/* -----notes--------- */} |
||||
<div className="flex-1 h-full"> |
||||
<div className="w-full h-10 border flex items-center"> |
||||
{notes?.map((item, index) => ( |
||||
<div |
||||
key={index} |
||||
className="h-full px-3 flex items-center text-sm cursor-pointer" |
||||
style={ |
||||
activeNote === index |
||||
? { backgroundColor: "black", color: "#fff" } |
||||
: null |
||||
} |
||||
onClick={() => changeNoteHandler(index, item.fileId)} |
||||
> |
||||
{item?.name} |
||||
</div> |
||||
))} |
||||
</div> |
||||
|
||||
<div className="w-full flex justify-center mt-2"> |
||||
<div className="w-1/6"> |
||||
<CurrentPageInput /> |
||||
</div> |
||||
</div> |
||||
{activeFileId && ( |
||||
<div |
||||
className="pdf-viewer w-full mt-2" |
||||
style={{ height: "calc(100% - 88px)" }} |
||||
> |
||||
<Worker workerUrl="https://unpkg.com/pdfjs-dist@2.13.216/build/pdf.worker.min.js"> |
||||
<Viewer |
||||
fileUrl={`https://api.andishmand.ir/api/v1/file/${activeFileId}`} |
||||
plugins={[pageNavigationPluginInstance]} |
||||
/> |
||||
</Worker> |
||||
</div> |
||||
)} |
||||
</div> |
||||
{/* -----answers----------- */} |
||||
<div className="w-[300px] h-full px-3 overflow-y-auto"> |
||||
<div className="w-full h-10 text-center text-lg">پاسخنامه</div> |
||||
<div className="w-full mt-2"> |
||||
{questions?.map((item, index) => ( |
||||
<div className="w-full flex items-center h-10 mb-2"> |
||||
<div className="w-[40px] h-full bg-[#9999] flex items-center justify-center text-sm rounded-md"> |
||||
{item?.questionNumber} |
||||
</div> |
||||
<div |
||||
className="h-full flex items-center" |
||||
style={{ width: "calc(100% - 40px)" }} |
||||
> |
||||
<div className="flex-1 h-full flex items-center justify-center"> |
||||
<div |
||||
className="w-2/3 h-6 rounded-full border border-[#999] cursor-pointer" |
||||
onClick={() => chooseOption(index, 1, item.id)} |
||||
style={ |
||||
answerList[index] === 1 |
||||
? { backgroundColor: "#5ec427" } |
||||
: null |
||||
} |
||||
></div> |
||||
</div> |
||||
<div className="flex-1 h-full flex items-center justify-center"> |
||||
<div |
||||
className="w-2/3 h-6 rounded-full border border-[#999] cursor-pointer" |
||||
onClick={() => chooseOption(index, 2, item.id)} |
||||
style={ |
||||
answerList[index] === 2 |
||||
? { backgroundColor: "#5ec427" } |
||||
: null |
||||
} |
||||
></div> |
||||
</div> |
||||
{item["question.type"] > 2 && ( |
||||
<div className="flex-1 h-full flex items-center justify-center"> |
||||
<div |
||||
className="w-2/3 h-6 rounded-full border border-[#999] cursor-pointer" |
||||
onClick={() => chooseOption(index, 3, item.id)} |
||||
style={ |
||||
answerList[index] === 3 |
||||
? { backgroundColor: "#5ec427" } |
||||
: null |
||||
} |
||||
></div> |
||||
</div> |
||||
)} |
||||
{item["question.type"] > 3 && ( |
||||
<div className="flex-1 h-full flex items-center justify-center"> |
||||
<div |
||||
className="w-2/3 h-6 rounded-full border border-[#999] cursor-pointer" |
||||
onClick={() => chooseOption(index, 4, item.id)} |
||||
style={ |
||||
answerList[index] === 4 |
||||
? { backgroundColor: "#5ec427" } |
||||
: null |
||||
} |
||||
></div> |
||||
</div> |
||||
)} |
||||
{item["question.type"] > 4 && ( |
||||
<div className="flex-1 h-full flex items-center justify-center"> |
||||
<div |
||||
className="w-2/3 h-6 rounded-full border border-[#999] cursor-pointer" |
||||
onClick={() => chooseOption(index, 5, item.id)} |
||||
style={ |
||||
answerList[index] === 5 |
||||
? { backgroundColor: "#5ec427" } |
||||
: null |
||||
} |
||||
></div> |
||||
</div> |
||||
)} |
||||
</div> |
||||
</div> |
||||
))} |
||||
</div> |
||||
<div |
||||
className="w-full h-10 rounded-full flex items-center justify-center text-center text-sm text-white bg-red52 cursor-pointer mx-auto mt-8" |
||||
onClick={endExamHandler} |
||||
> |
||||
ثبت و اتمام آزمون |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default NoteContainer; |
||||
@ -0,0 +1,100 @@ |
||||
|
||||
|
||||
import React, { useMemo, useState } from "react"; |
||||
import { useEffect } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import Table from "../../components/Table"; |
||||
import * as actions from "../../redux/actions"; |
||||
import Editor from "./layouts/Editor"; |
||||
|
||||
const source = "offCode"; |
||||
const title = " مدیریت کدهای تخفیف"; |
||||
|
||||
const DisCountCodeManagements = ({ |
||||
info, |
||||
getData, |
||||
tabs, |
||||
setTabs, |
||||
add, |
||||
update, |
||||
CodeList, |
||||
schema, |
||||
}) => { |
||||
useMemo(() => { |
||||
// getData({ num: 1000 });
|
||||
// getSchoolList();
|
||||
getData({ num: 1000 }); |
||||
}, []); |
||||
// console.log(info);
|
||||
console.log("SchoolManagement render---------------------------------"); |
||||
console.log(info); |
||||
console.log(CodeList); |
||||
console.log(schema); |
||||
// console.log("==============^tabs^==============");
|
||||
// console.log(tabs);
|
||||
useEffect(() => { |
||||
setTabs([ |
||||
{ |
||||
id: 0, |
||||
name: title, |
||||
isActive: true, |
||||
element: "table", |
||||
}, |
||||
]); |
||||
}, []); |
||||
// console.log(tabs);
|
||||
// const [tabs, setTabs] = useState([
|
||||
// {
|
||||
// id: 0,
|
||||
// name: title,
|
||||
// isActive: true,
|
||||
// },
|
||||
// ]);
|
||||
const [activeOtherTab, setActiveOtherTab] = useState(false); |
||||
const [fake, setFake] = useState(0); |
||||
|
||||
return ( |
||||
<div |
||||
className="UserManagement h-screen max-h-screen bg-[#F8F8F8] overflow-y-auto rtl relative" |
||||
style={{ width: "calc(100vw - 120px)" }} |
||||
> |
||||
<div className="flex flex-1 w-full pt-12 pb-4"> |
||||
<Table |
||||
data={CodeList || []} |
||||
// data={[]}
|
||||
schema={schema || []} |
||||
Editor={Editor} |
||||
add={add} |
||||
update={update} |
||||
getData={getData} |
||||
title={title} |
||||
tabs={tabs} |
||||
setTabs={setTabs} |
||||
fake={fake} |
||||
setFake={setFake} |
||||
activeOtherTab={activeOtherTab} |
||||
setActiveOtherTab={setActiveOtherTab} |
||||
/> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
const mapStateToProps = (state) => ({ |
||||
info: state[source], |
||||
tabs: state.table.tabs, |
||||
CodeList: state.offCode.list, |
||||
schema: state.offCode.schema, |
||||
}); |
||||
|
||||
const mapDispatchToProps = { |
||||
// getData: actions[source].list,
|
||||
getData: actions[source].schoolList, |
||||
setTabs: actions.table.setTab, |
||||
update: actions[source].update, |
||||
add: actions[source].add, |
||||
}; |
||||
|
||||
export default connect( |
||||
mapStateToProps, |
||||
mapDispatchToProps |
||||
)(DisCountCodeManagements); |
||||
@ -0,0 +1,202 @@ |
||||
import React, { useEffect, useState } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { file } from "../../../redux/actions"; |
||||
import loadingGiff from "../../../assets/img/Rolling-1s-200px.gif"; |
||||
import SimpleDatePicker from "../../../components/SimpleDatePicker"; |
||||
import moment from "jalali-moment"; |
||||
const baseUrl = "https://api.andishmand.ir/api/v1"; |
||||
const components = (props) => ({ |
||||
text: ( |
||||
<input |
||||
type="text" |
||||
className="table-edit-input w-full py-3 px-2 rounded-md border border-[#D5DEEA]" |
||||
{...props} |
||||
/> |
||||
), |
||||
string: ( |
||||
<textarea |
||||
type="text" |
||||
className="table-edit-input w-full py-3 px-2 rounded-md border border-[#D5DEEA]" |
||||
{...props} |
||||
/> |
||||
), |
||||
number: ( |
||||
<input |
||||
type="number" |
||||
className="table-edit-input w-full py-3 px-2 rounded-md border border-[#D5DEEA]" |
||||
{...props} |
||||
/> |
||||
), |
||||
select: ( |
||||
<select |
||||
type="text" |
||||
className="table-edit-input w-full py-3 px-2 rounded-md border border-[#D5DEEA]" |
||||
{...props} |
||||
> |
||||
{Object.entries(props?.options || {}).map(([v, k]) => ( |
||||
<option value={v} key={v}> |
||||
{k} |
||||
</option> |
||||
))} |
||||
</select> |
||||
), |
||||
file: ( |
||||
<div className="table-edit-input w-full py-3 px-2 rounded-md border border-[#D5DEEA] flex justify-between bg-[#fff]"> |
||||
<div className="w-full flex items-center"> |
||||
<div |
||||
className="w-fit w-24 text-center py-1 rounded bg-[#111] text-white text-sm cursor-pointer" |
||||
onClick={props.chooseFile} |
||||
> |
||||
انتخاب فایل |
||||
</div> |
||||
{/* <div className="text-xs mt-2 text-right">{props.fileNmae}</div> */} |
||||
{props.fileNmae && !props.loading && ( |
||||
<div |
||||
className="w-fit w-24 py-1 rounded bg-[#65A9FF] text-white text-sm mr-2 cursor-pointer" |
||||
onClick={props.uploadHandler} |
||||
> |
||||
آپلود |
||||
</div> |
||||
)} |
||||
{props.loading && ( |
||||
<img src={loadingGiff} alt="loadingGiff" className="h-10 mr-2" /> |
||||
)} |
||||
<input |
||||
className="edit-file-input w-0 h-0 hidden" |
||||
id="edit-file-input" |
||||
type={"file"} |
||||
// onChange={(e) => {
|
||||
// props.setFileName(e.target.value);
|
||||
// }}
|
||||
onChange={(e) => props.fileInputHandler(e)} |
||||
/> |
||||
</div> |
||||
{props.defaultValue && !props?.fileNmae ? ( |
||||
<img |
||||
src={baseUrl + "/file/" + props.defaultValue} |
||||
className="edit-file-img-placeholder h-10" |
||||
/> |
||||
) : null} |
||||
{props?.fileNmae && ( |
||||
<img src={props?.fileNmae} className="edit-file-img-placeholder h-10" /> |
||||
)} |
||||
</div> |
||||
), |
||||
date: ( |
||||
<div className="w-full"> |
||||
<SimpleDatePicker returnValue={props.setDateInfo} mode={props.mode} /> |
||||
</div> |
||||
), |
||||
}); |
||||
|
||||
const Filed = (props) => { |
||||
return components(props)[props.type] || <div>{props.type}</div>; |
||||
}; |
||||
const Editor = ({ data, schema, update, add, loading,lastUpload,uploadFile }) => { |
||||
const [info, setInfo] = useState(data ? { id: data?.original?.id } : {}); |
||||
const changeInputHandler = (e, key) => { |
||||
setInfo({ ...info, [key]: e.target.value }); |
||||
}; |
||||
useEffect(() => { |
||||
if (lastUpload) { |
||||
setInfo({ ...info, fileId: String(lastUpload) }); |
||||
} |
||||
}, [lastUpload]); |
||||
|
||||
const submitHandler = () => { |
||||
if (data) update(info); |
||||
else add(info); |
||||
console.log(info); |
||||
}; |
||||
|
||||
const [fileNmae, setFileName] = useState(null); |
||||
const chooseFile = () => { |
||||
document.querySelector(".edit-file-input").click(); |
||||
}; |
||||
const fileInputHandler = (e) => { |
||||
console.log(e.target.value); |
||||
if (e.target.files && e.target.files[0]) { |
||||
var reader = new FileReader(); |
||||
|
||||
reader.onload = function (event) { |
||||
setFileName(event.target.result); |
||||
}; |
||||
|
||||
reader.readAsDataURL(e.target.files[0]); |
||||
} |
||||
}; |
||||
|
||||
const uploadHandler=()=>{ |
||||
uploadFile({ |
||||
file: document.querySelector("#edit-file-input").files[0], |
||||
}); |
||||
} |
||||
|
||||
const [dateInfo,setDateInfo]=useState(null); |
||||
const datehandler=(value,mode)=>{ |
||||
setDateInfo({ ...value,mode}); |
||||
} |
||||
useEffect(() => { |
||||
console.log("::::::::::::::::::::::::::::::::::::::::::::-") |
||||
console.log(dateInfo); |
||||
if(dateInfo?.day){ |
||||
setInfo({ |
||||
...info, |
||||
[dateInfo.mode]: moment( |
||||
`${dateInfo?.year}/${dateInfo?.month}/${dateInfo?.day}` |
||||
) |
||||
.locale("en") |
||||
.format("YYYY-MM-DD"), |
||||
}); |
||||
} |
||||
}, [dateInfo]); |
||||
return ( |
||||
<div className="w-full py-3" key={data?.id || 0}> |
||||
{console.log({ data })} |
||||
<div className="w-full flex rtl flex-wrap items-center justify-between gap-y-6"> |
||||
{schema?.map((item, index) => ( |
||||
<div key={index} className="w-1/2 shrink-0 flex items-center "> |
||||
<div className="w-1/6 text-sm ml-2">{item?.description}:</div> |
||||
<Filed |
||||
type={ |
||||
item?.options |
||||
? "select" |
||||
: item.name == "fileId" |
||||
? "file" |
||||
: item?.type |
||||
} |
||||
options={item?.options} |
||||
defaultValue={data?.original[item?.name]} |
||||
onChange={(e) => changeInputHandler(e, item?.name)} |
||||
fileNmae={fileNmae} |
||||
setFileName={setFileName} |
||||
chooseFile={chooseFile} |
||||
fileInputHandler={fileInputHandler} |
||||
uploadHandler={uploadHandler} |
||||
loading={loading} |
||||
setDateInfo={datehandler} |
||||
mode={item?.name} |
||||
/> |
||||
</div> |
||||
))} |
||||
</div> |
||||
<div |
||||
className="px-6 py-4 w-fit rounded-md bg-[#df1452] text-[#fff] text-base cursor-pointer mx-auto mt-6" |
||||
onClick={submitHandler} |
||||
> |
||||
{data ? "ثبت تغییرات" : "ثبت ردیف"} |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
loading: state.file.loading, |
||||
lastUpload: state.file.lastUpload, |
||||
}); |
||||
|
||||
const mapDispatchToProps = { |
||||
uploadFile : file.upload |
||||
}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Editor); |
||||
@ -0,0 +1,93 @@ |
||||
|
||||
|
||||
import React, { useMemo, useState } from "react"; |
||||
import { useEffect } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import Table from "../../components/Table"; |
||||
import * as actions from "../../redux/actions"; |
||||
import Editor from "./layouts/Editor"; |
||||
|
||||
const source = "book"; |
||||
const title = " مدیریت محصولات"; |
||||
|
||||
const ProductMangement = ({ |
||||
info, |
||||
getData, |
||||
tabs, |
||||
setTabs, |
||||
add, |
||||
update, |
||||
productList, |
||||
schema, |
||||
}) => { |
||||
useMemo(() => { |
||||
getData({ num: 1000 }); |
||||
}, []); |
||||
console.log("productManagement render---------------------------------"); |
||||
console.log(info); |
||||
console.log(productList); |
||||
console.log(schema); |
||||
// console.log("==============^tabs^==============");
|
||||
// console.log(tabs);
|
||||
useEffect(() => { |
||||
setTabs([ |
||||
{ |
||||
id: 0, |
||||
name: title, |
||||
isActive: true, |
||||
element: "table", |
||||
}, |
||||
]); |
||||
}, []); |
||||
// console.log(tabs);
|
||||
// const [tabs, setTabs] = useState([
|
||||
// {
|
||||
// id: 0,
|
||||
// name: title,
|
||||
// isActive: true,
|
||||
// },
|
||||
// ]);
|
||||
const [activeOtherTab, setActiveOtherTab] = useState(false); |
||||
const [fake, setFake] = useState(0); |
||||
|
||||
return ( |
||||
<div |
||||
className="UserManagement h-screen max-h-screen bg-[#F8F8F8] overflow-y-auto rtl relative" |
||||
style={{ width: "calc(100vw - 120px)" }} |
||||
> |
||||
<div className="flex flex-1 w-full pt-12 pb-4"> |
||||
<Table |
||||
data={productList || []} |
||||
schema={schema || []} |
||||
Editor={Editor} |
||||
add={add} |
||||
update={update} |
||||
getData={getData} |
||||
title={title} |
||||
tabs={tabs} |
||||
setTabs={setTabs} |
||||
fake={fake} |
||||
setFake={setFake} |
||||
activeOtherTab={activeOtherTab} |
||||
setActiveOtherTab={setActiveOtherTab} |
||||
/> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
const mapStateToProps = (state) => ({ |
||||
info: state[source], |
||||
tabs: state.table.tabs, |
||||
productList: state.book.list, |
||||
schema: state.book.schema, |
||||
}); |
||||
|
||||
const mapDispatchToProps = { |
||||
// getData: actions[source].list,
|
||||
getData: actions[source].list, |
||||
setTabs: actions.table.setTab, |
||||
update: actions[source].update, |
||||
add: actions[source].add, |
||||
}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ProductMangement); |
||||
@ -0,0 +1,202 @@ |
||||
import React, { useEffect, useState } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { file } from "../../../redux/actions"; |
||||
import loadingGiff from "../../../assets/img/Rolling-1s-200px.gif"; |
||||
import SimpleDatePicker from "../../../components/SimpleDatePicker"; |
||||
import moment from "jalali-moment"; |
||||
const baseUrl = "https://light.barnamenegar.com/api/v1"; |
||||
const components = (props) => ({ |
||||
text: ( |
||||
<input |
||||
type="text" |
||||
className="table-edit-input w-full py-3 px-2 rounded-md border border-[#D5DEEA]" |
||||
{...props} |
||||
/> |
||||
), |
||||
string: ( |
||||
<textarea |
||||
type="text" |
||||
className="table-edit-input w-full py-3 px-2 rounded-md border border-[#D5DEEA]" |
||||
{...props} |
||||
/> |
||||
), |
||||
number: ( |
||||
<input |
||||
type="number" |
||||
className="table-edit-input w-full py-3 px-2 rounded-md border border-[#D5DEEA]" |
||||
{...props} |
||||
/> |
||||
), |
||||
select: ( |
||||
<select |
||||
type="text" |
||||
className="table-edit-input w-full py-3 px-2 rounded-md border border-[#D5DEEA]" |
||||
{...props} |
||||
> |
||||
{Object.entries(props?.options || {}).map(([v, k]) => ( |
||||
<option value={v} key={v}> |
||||
{k} |
||||
</option> |
||||
))} |
||||
</select> |
||||
), |
||||
file: ( |
||||
<div className="table-edit-input w-full py-3 px-2 rounded-md border border-[#D5DEEA] flex justify-between bg-[#fff]"> |
||||
<div className="w-full flex items-center"> |
||||
<div |
||||
className="w-fit w-24 text-center py-1 rounded bg-[#111] text-white text-sm cursor-pointer" |
||||
onClick={props.chooseFile} |
||||
> |
||||
انتخاب فایل |
||||
</div> |
||||
{/* <div className="text-xs mt-2 text-right">{props.fileNmae}</div> */} |
||||
{props.fileNmae && !props.loading && ( |
||||
<div |
||||
className="w-fit w-24 py-1 rounded bg-[#65A9FF] text-white text-sm mr-2 cursor-pointer" |
||||
onClick={props.uploadHandler} |
||||
> |
||||
آپلود |
||||
</div> |
||||
)} |
||||
{props.loading && ( |
||||
<img src={loadingGiff} alt="loadingGiff" className="h-10 mr-2" /> |
||||
)} |
||||
<input |
||||
className="edit-file-input w-0 h-0 hidden" |
||||
id="edit-file-input" |
||||
type={"file"} |
||||
// onChange={(e) => {
|
||||
// props.setFileName(e.target.value);
|
||||
// }}
|
||||
onChange={(e) => props.fileInputHandler(e)} |
||||
/> |
||||
</div> |
||||
{props.defaultValue && !props?.fileNmae ? ( |
||||
<img |
||||
src={baseUrl + "/file/" + props.defaultValue} |
||||
className="edit-file-img-placeholder h-10" |
||||
/> |
||||
) : null} |
||||
{props?.fileNmae && ( |
||||
<img src={props?.fileNmae} className="edit-file-img-placeholder h-10" /> |
||||
)} |
||||
</div> |
||||
), |
||||
date: ( |
||||
<div className="w-full"> |
||||
<SimpleDatePicker returnValue={props.setDateInfo} mode={props.mode} /> |
||||
</div> |
||||
), |
||||
}); |
||||
|
||||
const Filed = (props) => { |
||||
return components(props)[props.type] || <div>{props.type}</div>; |
||||
}; |
||||
const Editor = ({ data, schema, update, add, loading,lastUpload,uploadFile }) => { |
||||
const [info, setInfo] = useState(data ? { id: data?.original?.id } : {}); |
||||
const changeInputHandler = (e, key) => { |
||||
setInfo({ ...info, [key]: e.target.value }); |
||||
}; |
||||
useEffect(() => { |
||||
if (lastUpload) { |
||||
setInfo({ ...info, fileId: String(lastUpload) }); |
||||
} |
||||
}, [lastUpload]); |
||||
|
||||
const submitHandler = () => { |
||||
if (data) update(info); |
||||
else add(info); |
||||
console.log(info); |
||||
}; |
||||
|
||||
const [fileNmae, setFileName] = useState(null); |
||||
const chooseFile = () => { |
||||
document.querySelector(".edit-file-input").click(); |
||||
}; |
||||
const fileInputHandler = (e) => { |
||||
console.log(e.target.value); |
||||
if (e.target.files && e.target.files[0]) { |
||||
var reader = new FileReader(); |
||||
|
||||
reader.onload = function (event) { |
||||
setFileName(event.target.result); |
||||
}; |
||||
|
||||
reader.readAsDataURL(e.target.files[0]); |
||||
} |
||||
}; |
||||
|
||||
const uploadHandler=()=>{ |
||||
uploadFile({ |
||||
file: document.querySelector("#edit-file-input").files[0], |
||||
}); |
||||
} |
||||
|
||||
const [dateInfo,setDateInfo]=useState(null); |
||||
const datehandler=(value,mode)=>{ |
||||
setDateInfo({ ...value,mode}); |
||||
} |
||||
useEffect(() => { |
||||
console.log("::::::::::::::::::::::::::::::::::::::::::::-") |
||||
console.log(dateInfo); |
||||
if(dateInfo?.day){ |
||||
setInfo({ |
||||
...info, |
||||
[dateInfo.mode]: moment( |
||||
`${dateInfo?.year}/${dateInfo?.month}/${dateInfo?.day}` |
||||
) |
||||
.locale("en") |
||||
.format("YYYY-MM-DD"), |
||||
}); |
||||
} |
||||
}, [dateInfo]); |
||||
return ( |
||||
<div className="w-full py-3" key={data?.id || 0}> |
||||
{console.log({ data })} |
||||
<div className="w-full flex rtl flex-wrap items-center justify-between gap-y-6"> |
||||
{schema?.map((item, index) => ( |
||||
<div key={index} className="w-1/2 shrink-0 flex items-center "> |
||||
<div className="w-1/6 text-sm ml-2">{item?.description}:</div> |
||||
<Filed |
||||
type={ |
||||
item?.options |
||||
? "select" |
||||
: item.name == "fileId" |
||||
? "file" |
||||
: item?.type |
||||
} |
||||
options={item?.options} |
||||
defaultValue={data?.original[item?.name]} |
||||
onChange={(e) => changeInputHandler(e, item?.name)} |
||||
fileNmae={fileNmae} |
||||
setFileName={setFileName} |
||||
chooseFile={chooseFile} |
||||
fileInputHandler={fileInputHandler} |
||||
uploadHandler={uploadHandler} |
||||
loading={loading} |
||||
setDateInfo={datehandler} |
||||
mode={item?.name} |
||||
/> |
||||
</div> |
||||
))} |
||||
</div> |
||||
<div |
||||
className="px-6 py-4 w-fit rounded-md bg-[#df1452] text-[#fff] text-base cursor-pointer mx-auto mt-6" |
||||
onClick={submitHandler} |
||||
> |
||||
{data ? "ثبت تغییرات" : "ثبت ردیف"} |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
loading: state.file.loading, |
||||
lastUpload: state.file.lastUpload, |
||||
}); |
||||
|
||||
const mapDispatchToProps = { |
||||
uploadFile : file.upload |
||||
}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Editor); |
||||
Loading…
Reference in new issue