Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 7d2b1fe3 by jaymehta
Options

live

1 parent 2bda2289
Inline Side-by-side
Showing 2 changed files with 170 additions and 9 deletions
components/vendor/ActivityDetails.js
import Image from "next/image";
import { ErrorMessage, FieldArray, Formik } from "formik";
import { Fragment, useEffect, useRef, useState } from "react";
import { Button, Form } from "react-bootstrap";
import { Button, Form, Modal } from "react-bootstrap";
import * as Yup from "yup";
import { FaTimes } from "react-icons/fa";
import { useDispatch, useSelector } from "react-redux";
......@@ -10,7 +10,8 @@ import { getLoggedInVendor, pincodeSearchByFilter } from "../../redux/actions/ve
import { AsyncTypeahead } from "react-bootstrap-typeahead";
import Select from "react-select";
import makeAnimated from "react-select/animated";
import { Select as AntSelect, Switch } from "antd";
import { Select as AntSelect, Switch, Upload, Image as AntImage, message } from "antd";
// import { Image as AntSelect, Switch, Upload } from "antd";
// import { getMasterDays } from "../../redux/actions/activityAction";
import axios from "axios";
import { sanitizeTimeFormat, sanitizeTimeRange } from "../../services/imageHandling";
......@@ -20,12 +21,21 @@ import { DatePicker, Space } from "antd";
import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
import LazyLoad from "react-lazyload";
import { ArrowLeftOutlined, CheckCircleTwoTone } from "@ant-design/icons";
import { ArrowLeftOutlined, CheckCircleTwoTone, PlusOutlined } from "@ant-design/icons";
import { useRouter } from "next/router";
import ImageUploadPopUp from "./ImageUploadPopUp";
import { loadUser } from "../../redux/actions/userActions";
dayjs.extend(customParseFormat);
const { RangePicker } = DatePicker;
const dateFormat = "YYYY/MM/DD";
const getBase64 = file =>
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
const format = "HH:mm";
let timeArray = [];
......@@ -124,10 +134,56 @@ const monthsArray = [
// import { colourOptions } from '../data';
const animatedComponents = makeAnimated();
const ActivityDetails = ({ isUpdate }) => {
// const [fileList, setFileList] = useState([]);
// const [uploading, setUploading] = useState(false);
const [showImageUploadModal, setshowImageUploadModal] = useState(false);
useEffect(() => {
// dispatch(loadUser());
// setFileList([
// // {
// // uid: "-1",
// // name: "image.png",
// // status: "done",
// // url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
// // },
// // {
// // uid: "-2",
// // name: "image.png",
// // status: "done",
// // url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
// // },
// // {
// // uid: "-3",
// // name: "image.png",
// // status: "done",
// // url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
// // },
// // {
// // uid: "-4",
// // name: "image.png",
// // status: "done",
// // url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
// // },
// // {
// // uid: "-xxx",
// // percent: 50,
// // name: "image.png",
// // status: "uploading",
// // url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
// // },
// // {
// // uid: "-5",
// // name: "image.png",
// // status: "error"
// // }
// ]);
}, []);
const ActivityApprovalStatus = ({ status }) => {
if (status) {
switch (status) {
case true:
case "approved":
return (
<>
<div className=" ">
......@@ -145,7 +201,7 @@ const ActivityDetails = ({ isUpdate }) => {
</>
);
case false:
case "rejected":
return (
<>
<div className="col-12 offset-lg-2 col-lg-8 ">
......@@ -159,8 +215,19 @@ const ActivityDetails = ({ isUpdate }) => {
</>
);
case "none":
return <></>;
case "pending":
return (
<>
<div className="col-12 offset-lg-2 col-lg-8 ">
<div className="alert alert-warning alert-dismissible fade show text-center" role="alert">
<div className="text-center">
<p className="p1 text-center">Your profile has been sent for approval!</p>
<p className="p2 text-center"> Please wait till the vendor takes action!</p>
</div>
</div>
</div>
</>
);
default:
break;
......@@ -274,7 +341,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="col-12 col-lg-8">
<div className="content-div business-details">
{isUpdate ? <h2>{activityById?.data.attributes.name}</h2> : <div>Add Details</div>}
{isUpdate && <ActivityApprovalStatus status={true} />}
{isUpdate && <ActivityApprovalStatus status={activityById?.data.attributes.approved} />}
<div className="form-container">
<Formik
enableReinitialize
......@@ -456,7 +523,6 @@ const ActivityDetails = ({ isUpdate }) => {
</span>
)}
</div>
{console.log("errors", errors)}
</div>
</div>
<div className="row">
......@@ -1035,6 +1101,21 @@ const ActivityDetails = ({ isUpdate }) => {
</div>
</div>
</div>
{/* <>
<button
onClick={e => {
e.preventDefault();
setshowImageUploadModal(true);
}}
>
Open{" "}
</button>
<br />
<br />
<br />
</> */}
{/* {console.log("previewImage", previewImage)} */}
<div className="row">
<div className="col-6 col-lg-5">
<div className="input-group">
......@@ -1063,6 +1144,12 @@ const ActivityDetails = ({ isUpdate }) => {
</div>
</div>
</div>
<Modal show={showImageUploadModal} centered onHide={() => setshowImageUploadModal()}>
<Modal.Header closeButton>Add Images</Modal.Header>
<Modal.Body>
<ImageUploadPopUp />
</Modal.Body>
</Modal>
<div className="col-12 col-lg-4">
<div className="content-div help-center">
<h2>Help Center</h2>
......
components/vendor/ImageUploadPopUp.js 0 → 100644
import { PlusOutlined } from "@ant-design/icons";
import { Upload, message } from "antd";
import axios from "axios";
import { getSession } from "next-auth/react";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
const ImageUploadPopUp = () => {
// const { loadedUser } = useSelector(state => state.loadedUser);
const [session, setSession] = useState();
useEffect(() => {
const fetchSession = async () => {
setSession(await getSession());
};
fetchSession();
// dispatch(getLoggedInVendor());
}, []);
const [fileList, setFileList] = useState([]);
const [uploading, setUploading] = useState(false);
// console.log("session", session);
const handleUpload = async () => {
const formData = new FormData();
fileList.forEach(file => {
console.log("file", file);
formData.append("files", file);
});
console.log("fileList", fileList);
console.log("formData", formData);
setUploading(true);
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}`
}
});
console.log("response image", response);
// eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MywiaWF0IjoxNzE2MzY5MzQyLCJleHAiOjE3MTg5NjEzNDJ9.dHTpIvuUi4r4Eh7n-74WKDXUlSaqvhjppGJ-1G4GvHk
// if (response.status === 200) {
// message.success("upload successfully.");
// console.log("Uploaded file URL:", response.data[0].url); // The URL of the uploaded file
// } else {
// message.error("upload failed.");
// }
} catch (error) {
message.error("upload failed.");
} finally {
setUploading(false);
}
};
const handleImageChange = info => {
setFileList(info.fileList);
};
return (
<div>
<Upload listType="picture-card" fileList={fileList} beforeUpload={() => false} onChange={handleImageChange}>
{fileList.length >= 8 ? null : (
<div>
<PlusOutlined />
<div style={{ marginTop: 8 }}>Upload</div>
</div>
)}
</Upload>
<button type="button" onClick={handleUpload} disabled={fileList.length === 0} loading={uploading} style={{ marginTop: 16 }}>
{uploading ? "Uploading" : "Start Upload"}
</button>
</div>
);
};
export default ImageUploadPopUp;
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!