Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit b944355e by jaymehta
Options

boolean fix on detail page

1 parent 900b1fae
Inline Side-by-side
Showing 3 changed files with 210 additions and 22 deletions
components/vendor/ActivityDetails.js
...@@ -26,6 +26,7 @@ import { useRouter } from "next/router"; ...@@ -26,6 +26,7 @@ import { useRouter } from "next/router";
import ImageUploadPopUp from "./ImageUploadPopUp"; import ImageUploadPopUp from "./ImageUploadPopUp";
import { loadUser } from "../../redux/actions/userActions"; import { loadUser } from "../../redux/actions/userActions";
import UploadImageComponent from "./UploadImageComponent"; import UploadImageComponent from "./UploadImageComponent";
import UploadImageCustom from "./UploadImageCustom";
dayjs.extend(customParseFormat); dayjs.extend(customParseFormat);
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
...@@ -139,6 +140,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -139,6 +140,7 @@ const ActivityDetails = ({ isUpdate }) => {
// const [uploading, setUploading] = useState(false); // const [uploading, setUploading] = useState(false);
const [showImageUploadModal, setshowImageUploadModal] = useState(false); const [showImageUploadModal, setshowImageUploadModal] = useState(false);
const [imagesArrayComponent, setimagesArrayComponent] = useState([]); const [imagesArrayComponent, setimagesArrayComponent] = useState([]);
const [displayImage, setdisplayImage] = useState();
useEffect(() => { useEffect(() => {
// dispatch(loadUser()); // dispatch(loadUser());
...@@ -319,13 +321,13 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -319,13 +321,13 @@ const ActivityDetails = ({ isUpdate }) => {
if (isUpdate) { if (isUpdate) {
ref.current.state.selected = [{ id: activityById?.data.attributes?.masterPincode.data.id, name: activityById?.data.attributes?.masterPincode.data.attributes.name }]; ref.current.state.selected = [{ id: activityById?.data.attributes?.masterPincode.data.id, name: activityById?.data.attributes?.masterPincode.data.attributes.name }];
setDaysBoolean({ setDaysBoolean({
availableOnSunday: activityById?.data.attributes.availableOnSunday ? activityById?.data.attributes.availableOnSunday : "", availableOnSunday: activityById?.data.attributes.availableOnSunday ? activityById?.data.attributes.availableOnSunday : false,
availableOnMonday: activityById?.data.attributes.availableOnMonday ? activityById?.data.attributes.availableOnMonday : "", availableOnMonday: activityById?.data.attributes.availableOnMonday ? activityById?.data.attributes.availableOnMonday : false,
availableOnTuesday: activityById?.data.attributes.availableOnTuesday ? activityById?.data.attributes.availableOnTuesday : "", availableOnTuesday: activityById?.data.attributes.availableOnTuesday ? activityById?.data.attributes.availableOnTuesday : false,
availableOnWednesday: activityById?.data.attributes.availableOnWednesday ? activityById?.data.attributes.availableOnWednesday : "", availableOnWednesday: activityById?.data.attributes.availableOnWednesday ? activityById?.data.attributes.availableOnWednesday : false,
availableOnThursday: activityById?.data.attributes.availableOnThursday ? activityById?.data.attributes.availableOnThursday : "", availableOnThursday: activityById?.data.attributes.availableOnThursday ? activityById?.data.attributes.availableOnThursday : false,
availableOnFriday: activityById?.data.attributes.availableOnFriday ? activityById?.data.attributes.availableOnFriday : "", availableOnFriday: activityById?.data.attributes.availableOnFriday ? activityById?.data.attributes.availableOnFriday : false,
availableOnSaturday: activityById?.data.attributes.availableOnSaturday ? activityById?.data.attributes.availableOnSaturday : "" availableOnSaturday: activityById?.data.attributes.availableOnSaturday ? activityById?.data.attributes.availableOnSaturday : false
}); });
setStartDate(activityById?.data.attributes.fromDate); setStartDate(activityById?.data.attributes.fromDate);
setEndDate(activityById?.data.attributes.toDate); setEndDate(activityById?.data.attributes.toDate);
...@@ -445,6 +447,8 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -445,6 +447,8 @@ const ActivityDetails = ({ isUpdate }) => {
contactPersonForActivity: values.contactPersonForActivity, contactPersonForActivity: values.contactPersonForActivity,
duration: values.durationUnit.toString(), duration: values.durationUnit.toString(),
imagesComponent: imagesArrayComponent, imagesComponent: imagesArrayComponent,
// imagesComponent: [103, 104, 105, 106,107],
approved: "pending" approved: "pending"
}; };
if (!ref.current.state.selected[0]) { if (!ref.current.state.selected[0]) {
...@@ -784,13 +788,13 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -784,13 +788,13 @@ const ActivityDetails = ({ isUpdate }) => {
name="availableOnMonday" name="availableOnMonday"
onChange={e => { onChange={e => {
setDaysBoolean({ setDaysBoolean({
availableOnMonday: e, availableOnMonday: e === true ? true : false,
availableOnTuesday: e, availableOnTuesday: e === true ? true : false,
availableOnWednesday: e, availableOnWednesday: e === true ? true : false,
availableOnThursday: e, availableOnThursday: e === true ? true : false,
availableOnFriday: e, availableOnFriday: e === true ? true : false,
availableOnSaturday: e, availableOnSaturday: e === true ? true : false,
availableOnSunday: e availableOnSunday: e === true ? true : false
}); });
// setDaysBoolean({ ...daysBoolean, availableOnMonday: e }); // setDaysBoolean({ ...daysBoolean, availableOnMonday: e });
// console.log("availableOnMonday", daysBoolean); // console.log("availableOnMonday", daysBoolean);
...@@ -809,7 +813,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -809,7 +813,7 @@ const ActivityDetails = ({ isUpdate }) => {
id={"availableOnMonday"} id={"availableOnMonday"}
name="availableOnMonday" name="availableOnMonday"
onChange={e => { onChange={e => {
setDaysBoolean({ ...daysBoolean, availableOnMonday: e }); setDaysBoolean({ ...daysBoolean, availableOnMonday: e === true ? true : false });
console.log("availableOnMonday", daysBoolean); console.log("availableOnMonday", daysBoolean);
}} }}
checkedChildren="Active" checkedChildren="Active"
...@@ -824,7 +828,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -824,7 +828,7 @@ const ActivityDetails = ({ isUpdate }) => {
className="col-md-4" className="col-md-4"
value={daysBoolean.availableOnTuesday} value={daysBoolean.availableOnTuesday}
onChange={e => { onChange={e => {
setDaysBoolean({ ...daysBoolean, availableOnTuesday: e }); setDaysBoolean({ ...daysBoolean, availableOnTuesday: e === true ? true : false });
// console.log("availableOnTuesday", daysBoolean); // console.log("availableOnTuesday", daysBoolean);
}} }}
id={"availableOnTuesday"} id={"availableOnTuesday"}
...@@ -843,7 +847,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -843,7 +847,7 @@ const ActivityDetails = ({ isUpdate }) => {
id={"availableOnWednesday"} id={"availableOnWednesday"}
// onChange={handleChange} // onChange={handleChange}
onChange={e => { onChange={e => {
setDaysBoolean({ ...daysBoolean, availableOnWednesday: e }); setDaysBoolean({ ...daysBoolean, availableOnWednesday: e === true ? true : false });
// console.log("availableOnTuesday", daysBoolean); // console.log("availableOnTuesday", daysBoolean);
}} }}
checkedChildren="Active" checkedChildren="Active"
...@@ -859,7 +863,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -859,7 +863,7 @@ const ActivityDetails = ({ isUpdate }) => {
value={daysBoolean.availableOnThursday} value={daysBoolean.availableOnThursday}
id={"availableOnThursday"} id={"availableOnThursday"}
onChange={e => { onChange={e => {
setDaysBoolean({ ...daysBoolean, availableOnThursday: e }); setDaysBoolean({ ...daysBoolean, availableOnThursday: e === true ? true : false });
// console.log("availableOnTuesday", daysBoolean); // console.log("availableOnTuesday", daysBoolean);
}} }}
checkedChildren="Active" checkedChildren="Active"
...@@ -875,7 +879,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -875,7 +879,7 @@ const ActivityDetails = ({ isUpdate }) => {
value={daysBoolean.availableOnFriday} value={daysBoolean.availableOnFriday}
id={"availableOnFriday"} id={"availableOnFriday"}
onChange={e => { onChange={e => {
setDaysBoolean({ ...daysBoolean, availableOnFriday: e }); setDaysBoolean({ ...daysBoolean, availableOnFriday: e === true ? true : false });
// console.log("availableOnTuesday", daysBoolean); // console.log("availableOnTuesday", daysBoolean);
}} }}
checkedChildren="Active" checkedChildren="Active"
...@@ -891,7 +895,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -891,7 +895,7 @@ const ActivityDetails = ({ isUpdate }) => {
value={daysBoolean.availableOnSaturday} value={daysBoolean.availableOnSaturday}
id={"availableOnSaturday"} id={"availableOnSaturday"}
onChange={e => { onChange={e => {
setDaysBoolean({ ...daysBoolean, availableOnSaturday: e }); setDaysBoolean({ ...daysBoolean, availableOnSaturday: e === true ? true : false });
// console.log("availableOnTuesday", daysBoolean); // console.log("availableOnTuesday", daysBoolean);
}} }}
checkedChildren="Active" checkedChildren="Active"
...@@ -907,7 +911,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -907,7 +911,7 @@ const ActivityDetails = ({ isUpdate }) => {
value={daysBoolean.availableOnSunday} value={daysBoolean.availableOnSunday}
id={"availableOnSunday"} id={"availableOnSunday"}
onChange={e => { onChange={e => {
setDaysBoolean({ ...daysBoolean, availableOnSunday: e }); setDaysBoolean({ ...daysBoolean, availableOnSunday: e === true ? true : false });
// console.log("availableOnTuesday", daysBoolean); // console.log("availableOnTuesday", daysBoolean);
}} }}
checkedChildren="Active" checkedChildren="Active"
...@@ -1110,8 +1114,15 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -1110,8 +1114,15 @@ const ActivityDetails = ({ isUpdate }) => {
</div> </div>
</div> </div>
</div> </div>
<hr />
</div>
<div className="row d-flex mt-4">
<p className="textH">Add display image</p>
<UploadImageCustom isUpdate={isUpdate} setImage={setdisplayImage} populatedImages={displayImage} />
<hr />
</div> </div>
<div className="row d-flex "> <div className="row d-flex ">
<p className="textH">Add other images</p>
<div className="col-2"> <div className="col-2">
<ImageUploadPopUp <ImageUploadPopUp
isUpdate={isUpdate} isUpdate={isUpdate}
......
components/vendor/UploadImageCustom.js 0 → 100644
import { PlusOutlined } from "@ant-design/icons";
import { Upload } from "antd";
import axios from "axios";
import { getSession } from "next-auth/react";
import React, { useEffect, useState } from "react";
import { cleanImage } from "../../services/imageHandling";
const UploadImageCustom = ({ isUpdate, setimagesArrayComponent, populatedImages, imagesArrayComponent }) => {
// const { loadedUser } = useSelector(state => state.loadedUser);
const [session, setSession] = useState();
const [previewOpen, setPreviewOpen] = useState(false);
const [previewImage, setPreviewImage] = useState("");
const [fileList, setFileList] = useState([]);
const [uploading, setUploading] = useState(false);
console.log("populatedImages", populatedImages);
const transformImageData = images => {
return images.map((image, index) => ({
uid: index,
name: `image-${index}.jpg`, // You can adjust the name based on your requirements
status: "done",
url: image.url, // Assuming image.url is the URL of the image
id: image.id,
deleteId: image.deleteId
}));
};
useEffect(() => {
const fetchSession = async () => {
setSession(await getSession());
};
fetchSession();
// dispatch(getLoggedInVendor());
}, []);
useEffect(() => {
// console.log("populatedImages.id", populatedImages.id);
if (!populatedImages) {
return;
}
const initialImages = transformImageData([{ url: cleanImage(populatedImages.image.data?.attributes), deleteId: populatedImages.image.data?.id, id: populatedImages.id }]);
if (populatedImages) {
setFileList(initialImages);
}
}, [populatedImages]);
console.log("fileList", fileList);
// let formData = new FormData();
let finalId;
const handlePreview = async file => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
setPreviewImage(file.url || file.preview);
setPreviewOpen(true);
};
const handleImageChange = async info => {
console.log("info", info);
const newFileList = [...info.fileList];
if (info.file.status === "uploading") {
setUploading(true);
setFileList(newFileList);
return;
}
if (info.file.status === "done") {
let formData = new FormData();
formData.append("files", info.file.originFileObj);
try {
const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/upload`, formData, {
headers: {
"Content-Type": "multipart/form-data",
Authorization: `Bearer ${session.jwt}`
}
});
if (response.status === 200) {
const newFileId = response.data[0].id;
// Update the file list with the new file ID
const updatedFileList = newFileList.map(file => {
if (file.uid === info.file.uid) {
return {
...file,
id: newFileId,
url: response.data[0].url // You can add any other response data you need here
};
}
return file;
});
setFileList(updatedFileList);
setimagesArrayComponent([...imagesArrayComponent, newFileId]);
message.success(`${info.file.name} uploaded successfully.`);
}
} catch (error) {
message.error(`${info.file.name} upload failed.`);
} finally {
setUploading(false);
}
} else if (info.file.status === "removed") {
// Handle file removal if needed
const updatedFileList = newFileList.filter(file => file.uid !== info.file.uid);
setFileList(updatedFileList);
}
};
const handleCustomRequest = ({ file, onSuccess, onError }) => {
setTimeout(() => {
onSuccess({ id: finalId }, file);
}, 2000);
};
const handleRemove = async file => {
console.log("handle remove", file);
const imageId = file.deleteId;
if (!imageId) {
message.error(`Failed to remove ${file.name}. Image ID not found.`);
return;
}
setimagesArrayComponent(imagesArrayComponent.filter(item => item != imageId));
setFileList([]);
try {
await axios.delete(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/upload/files/${imageId}`, {
headers: {
"Content-Type": "multipart/form-data",
Authorization: `Bearer ${session.jwt}`
}
}); // Replace with your Strapi delete endpoint
message.success(`${file.name} file removed successfully.`);
setFileList(prevFileList => prevFileList.filter(item => item.uid !== file.uid));
} catch (error) {
message.error(`Failed to remove ${file.name}`);
}
};
return (
<div>
<Upload
// customRequest={handleCustomRequest}
// enterButton={true}
// showUploadList={{ showRemoveIcon: false }}
listType="picture-card"
fileList={fileList}
// multiple={false}
onChange={handleImageChange}
onRemove={handleRemove}
onPreview={handlePreview}
>
{fileList?.length >= 1 ? null : (
<div>
<PlusOutlined />
<div style={{ marginTop: 8 }}>Upload</div>
</div>
)}
</Upload>
{previewImage && (
<Image
wrapperStyle={{
display: "none"
// zIndex: 23
}}
preview={{
visible: previewOpen,
onVisibleChange: visible => setPreviewOpen(visible),
afterOpenChange: visible => !visible && setPreviewImage("")
}}
src={previewImage}
/>
)}
{/* <button type="button" onClick={handleUpload} disabled={fileList ? fileList.length === 0 : true} loading={uploading} style={{ marginTop: 16 }}>
{uploading ? "Uploading" : "Start Upload"}
</button> */}
</div>
);
};
export default UploadImageCustom;
redux/actions/activityAction.js
...@@ -152,7 +152,7 @@ export const getActivityById = id => async dispatch => { ...@@ -152,7 +152,7 @@ export const getActivityById = id => async dispatch => {
const query = { const query = {
populate: ["masterMonths", "subCategory", "subCategory.category", "timeSlots", "masterPincode", "vendor", "category", "imagesComponent", populate: ["masterMonths", "subCategory", "subCategory.category", "timeSlots", "masterPincode", "vendor", "category", "imagesComponent",
"imagesComponent.image"] "imagesComponent.image", "image"]
}; };
const queryString = qs.stringify(query, { const queryString = qs.stringify(query, {
encodeValuesOnly: true encodeValuesOnly: true
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!