You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

202 lines
5.9 KiB

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);