Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit bbdefafc by Ravindra Kanojiya
Options

Merge branch 'master' of https://git.logicloop.io/jaymehta/zango-frontend

2 parents 62f84dae b944355e
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";
import ImageUploadPopUp from "./ImageUploadPopUp";
import { loadUser } from "../../redux/actions/userActions";
import UploadImageComponent from "./UploadImageComponent";
import UploadImageCustom from "./UploadImageCustom";
dayjs.extend(customParseFormat);
const { RangePicker } = DatePicker;
......@@ -139,6 +140,7 @@ const ActivityDetails = ({ isUpdate }) => {
// const [uploading, setUploading] = useState(false);
const [showImageUploadModal, setshowImageUploadModal] = useState(false);
const [imagesArrayComponent, setimagesArrayComponent] = useState([]);
const [displayImage, setdisplayImage] = useState();
useEffect(() => {
// dispatch(loadUser());
......@@ -319,13 +321,13 @@ const ActivityDetails = ({ isUpdate }) => {
if (isUpdate) {
ref.current.state.selected = [{ id: activityById?.data.attributes?.masterPincode.data.id, name: activityById?.data.attributes?.masterPincode.data.attributes.name }];
setDaysBoolean({
availableOnSunday: activityById?.data.attributes.availableOnSunday ? activityById?.data.attributes.availableOnSunday : "",
availableOnMonday: activityById?.data.attributes.availableOnMonday ? activityById?.data.attributes.availableOnMonday : "",
availableOnTuesday: activityById?.data.attributes.availableOnTuesday ? activityById?.data.attributes.availableOnTuesday : "",
availableOnWednesday: activityById?.data.attributes.availableOnWednesday ? activityById?.data.attributes.availableOnWednesday : "",
availableOnThursday: activityById?.data.attributes.availableOnThursday ? activityById?.data.attributes.availableOnThursday : "",
availableOnFriday: activityById?.data.attributes.availableOnFriday ? activityById?.data.attributes.availableOnFriday : "",
availableOnSaturday: activityById?.data.attributes.availableOnSaturday ? activityById?.data.attributes.availableOnSaturday : ""
availableOnSunday: activityById?.data.attributes.availableOnSunday ? activityById?.data.attributes.availableOnSunday : false,
availableOnMonday: activityById?.data.attributes.availableOnMonday ? activityById?.data.attributes.availableOnMonday : false,
availableOnTuesday: activityById?.data.attributes.availableOnTuesday ? activityById?.data.attributes.availableOnTuesday : false,
availableOnWednesday: activityById?.data.attributes.availableOnWednesday ? activityById?.data.attributes.availableOnWednesday : false,
availableOnThursday: activityById?.data.attributes.availableOnThursday ? activityById?.data.attributes.availableOnThursday : false,
availableOnFriday: activityById?.data.attributes.availableOnFriday ? activityById?.data.attributes.availableOnFriday : false,
availableOnSaturday: activityById?.data.attributes.availableOnSaturday ? activityById?.data.attributes.availableOnSaturday : false
});
setStartDate(activityById?.data.attributes.fromDate);
setEndDate(activityById?.data.attributes.toDate);
......@@ -445,6 +447,8 @@ const ActivityDetails = ({ isUpdate }) => {
contactPersonForActivity: values.contactPersonForActivity,
duration: values.durationUnit.toString(),
imagesComponent: imagesArrayComponent,
// imagesComponent: [103, 104, 105, 106,107],
approved: "pending"
};
if (!ref.current.state.selected[0]) {
......@@ -784,13 +788,13 @@ const ActivityDetails = ({ isUpdate }) => {
name="availableOnMonday"
onChange={e => {
setDaysBoolean({
availableOnMonday: e,
availableOnTuesday: e,
availableOnWednesday: e,
availableOnThursday: e,
availableOnFriday: e,
availableOnSaturday: e,
availableOnSunday: e
availableOnMonday: e === true ? true : false,
availableOnTuesday: e === true ? true : false,
availableOnWednesday: e === true ? true : false,
availableOnThursday: e === true ? true : false,
availableOnFriday: e === true ? true : false,
availableOnSaturday: e === true ? true : false,
availableOnSunday: e === true ? true : false
});
// setDaysBoolean({ ...daysBoolean, availableOnMonday: e });
// console.log("availableOnMonday", daysBoolean);
......@@ -809,7 +813,7 @@ const ActivityDetails = ({ isUpdate }) => {
id={"availableOnMonday"}
name="availableOnMonday"
onChange={e => {
setDaysBoolean({ ...daysBoolean, availableOnMonday: e });
setDaysBoolean({ ...daysBoolean, availableOnMonday: e === true ? true : false });
console.log("availableOnMonday", daysBoolean);
}}
checkedChildren="Active"
......@@ -824,7 +828,7 @@ const ActivityDetails = ({ isUpdate }) => {
className="col-md-4"
value={daysBoolean.availableOnTuesday}
onChange={e => {
setDaysBoolean({ ...daysBoolean, availableOnTuesday: e });
setDaysBoolean({ ...daysBoolean, availableOnTuesday: e === true ? true : false });
// console.log("availableOnTuesday", daysBoolean);
}}
id={"availableOnTuesday"}
......@@ -843,7 +847,7 @@ const ActivityDetails = ({ isUpdate }) => {
id={"availableOnWednesday"}
// onChange={handleChange}
onChange={e => {
setDaysBoolean({ ...daysBoolean, availableOnWednesday: e });
setDaysBoolean({ ...daysBoolean, availableOnWednesday: e === true ? true : false });
// console.log("availableOnTuesday", daysBoolean);
}}
checkedChildren="Active"
......@@ -859,7 +863,7 @@ const ActivityDetails = ({ isUpdate }) => {
value={daysBoolean.availableOnThursday}
id={"availableOnThursday"}
onChange={e => {
setDaysBoolean({ ...daysBoolean, availableOnThursday: e });
setDaysBoolean({ ...daysBoolean, availableOnThursday: e === true ? true : false });
// console.log("availableOnTuesday", daysBoolean);
}}
checkedChildren="Active"
......@@ -875,7 +879,7 @@ const ActivityDetails = ({ isUpdate }) => {
value={daysBoolean.availableOnFriday}
id={"availableOnFriday"}
onChange={e => {
setDaysBoolean({ ...daysBoolean, availableOnFriday: e });
setDaysBoolean({ ...daysBoolean, availableOnFriday: e === true ? true : false });
// console.log("availableOnTuesday", daysBoolean);
}}
checkedChildren="Active"
......@@ -891,7 +895,7 @@ const ActivityDetails = ({ isUpdate }) => {
value={daysBoolean.availableOnSaturday}
id={"availableOnSaturday"}
onChange={e => {
setDaysBoolean({ ...daysBoolean, availableOnSaturday: e });
setDaysBoolean({ ...daysBoolean, availableOnSaturday: e === true ? true : false });
// console.log("availableOnTuesday", daysBoolean);
}}
checkedChildren="Active"
......@@ -907,7 +911,7 @@ const ActivityDetails = ({ isUpdate }) => {
value={daysBoolean.availableOnSunday}
id={"availableOnSunday"}
onChange={e => {
setDaysBoolean({ ...daysBoolean, availableOnSunday: e });
setDaysBoolean({ ...daysBoolean, availableOnSunday: e === true ? true : false });
// console.log("availableOnTuesday", daysBoolean);
}}
checkedChildren="Active"
......@@ -1110,8 +1114,15 @@ const ActivityDetails = ({ isUpdate }) => {
</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 className="row d-flex ">
<p className="textH">Add other images</p>
<div className="col-2">
<ImageUploadPopUp
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 => {
const query = {
populate: ["masterMonths", "subCategory", "subCategory.category", "timeSlots", "masterPincode", "vendor", "category", "imagesComponent",
"imagesComponent.image"]
"imagesComponent.image", "image"]
};
const queryString = qs.stringify(query, {
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!