565 lines
34 KiB
JavaScript
565 lines
34 KiB
JavaScript
import axios from "axios";
|
|
import React, { useCallback, useEffect, useState } from "react";
|
|
// import { API } from "../../data";
|
|
import { isAutheticated } from "../../auth";
|
|
import ClipLoader from "react-spinners/ClipLoader";
|
|
import { Country, State, City } from "country-state-city";
|
|
import swal from 'sweetalert';
|
|
import { Link, useParams } from "react-router-dom";
|
|
import { useHistory } from "react-router-dom";
|
|
|
|
const EditBisuness = () => {
|
|
const [categoryName, setCategoryName] = useState([]);
|
|
const [image, setImage] = useState();
|
|
const token = isAutheticated();
|
|
|
|
let history = useHistory();
|
|
const [state, setState] = useState({
|
|
name: "",
|
|
phone: "",
|
|
email: "",
|
|
Building_Name: "",
|
|
Street_Name: "",
|
|
country: "",
|
|
city: "",
|
|
loading: false,
|
|
description: "",
|
|
category: "",
|
|
status: "",
|
|
Glocation: "",
|
|
LinkedinUrl: "",
|
|
FacebookUrl: "",
|
|
InstagramUrl: ""
|
|
});
|
|
|
|
const { id } = useParams();
|
|
// console.log(id)
|
|
|
|
const { description, loading } = state;
|
|
|
|
|
|
const changeState = (newState) =>
|
|
setState((prevState) => ({ ...prevState, ...newState }));
|
|
|
|
|
|
|
|
const handleChange = (e) => {
|
|
changeState({ ...state, [e.target.name]: e.target.value })
|
|
|
|
};
|
|
|
|
|
|
//category
|
|
const fetchCategory = useCallback(async () => {
|
|
const res = await axios.get(`/api/category/getAll`, {
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
});
|
|
|
|
// console.log(res.data.category);
|
|
setCategoryName(res.data.category)
|
|
if (res.status === 200) changeState({ ...res.data });
|
|
}, [token]);
|
|
|
|
useEffect(async () => {
|
|
|
|
fetchCategory();
|
|
|
|
}, [fetchCategory]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const fetchDirectory = useCallback(async () => {
|
|
const res = await axios.get(`/api/directory/getOne/${id}`, {
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
});
|
|
|
|
|
|
setState(res.data.directory)
|
|
changeState({ loading: false });
|
|
if (res.status === 200) changeState({ ...res.data });
|
|
}, [token]);
|
|
|
|
useEffect(() => {
|
|
fetchDirectory();
|
|
}, [fetchDirectory]);
|
|
|
|
|
|
|
|
|
|
const handleSubmit = async () => {
|
|
if (!(state.name && state.phone && state.email && state.Building_Name && state.Street_Name && state.country && state.city && state.description
|
|
&& state.category && state.status && image)) {
|
|
return swal('Error!', 'All fields are required', 'error')
|
|
|
|
}
|
|
const myForm = new FormData();
|
|
myForm.set('name', state.name)
|
|
myForm.set('phone', state.phone)
|
|
myForm.set('email', state.email)
|
|
myForm.set('Building_Name', state.Building_Name)
|
|
myForm.set('Street_Name', state.Street_Name)
|
|
myForm.set('country', state.country)
|
|
myForm.set('city', state.city)
|
|
myForm.set('description', state.description)
|
|
|
|
myForm.set('category', state.category)
|
|
|
|
myForm.set('status', state.status)
|
|
|
|
myForm.set('Glocation', state.Glocation)
|
|
myForm.set('LinkedinUrl', state.Glocation)
|
|
myForm.set('FacebookUrl', state.FacebookUrl)
|
|
myForm.set('InstagramUrl', state.InstagramUrl)
|
|
myForm.set("image", image);
|
|
|
|
changeState({ loading: true });
|
|
try {
|
|
let res = await axios.put(
|
|
`/api/directory/update/${id}`,
|
|
myForm,
|
|
{
|
|
headers: {
|
|
"content-Type": 'multipart/form-data',
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
}
|
|
);
|
|
|
|
if (res.status == 200) {
|
|
changeState({ loading: false });
|
|
swal("Edit Business successfully!");
|
|
history.goBack()
|
|
}
|
|
} catch (error) {
|
|
swal('Error!', error, 'error')
|
|
|
|
changeState({ loading: false });
|
|
}
|
|
|
|
};
|
|
const onCancel = () => {
|
|
history.goBack()
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// console.log(image)
|
|
return (
|
|
<>
|
|
<div className=" main-content">
|
|
<div className="page-content">
|
|
<div className="container-fluid">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="form-group text-right">
|
|
<span className=" fs-2 text-xl-start font-weight-bold float-start">Edit Bisuness</span>
|
|
<button
|
|
onClick={handleSubmit}
|
|
type="button"
|
|
className="btn btn-success mt-1 mb-0 my-1 btn btn-success btn-login waves-effect waves-light mr-1"
|
|
>
|
|
<ClipLoader loading={loading} size={18} />
|
|
{!loading && "Save"}
|
|
</button>
|
|
<button
|
|
onClick={onCancel}
|
|
type="button"
|
|
className=" mt-1 ml-2 btn btn-warning btn-cancel waves-effect waves-light mr-3"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* <!-- Save options Ends--> */}
|
|
|
|
{/* <!-- Row 1 Begins --> */}
|
|
<div className="row">
|
|
{/* <!--Left Column Begins--> */}
|
|
<div className="col-lg-8">
|
|
<div className="card">
|
|
<div className="card-body">
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<form>
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="form-group">
|
|
<label
|
|
htmlFor=" basicpill-phoneno-input"
|
|
className=" label-100"
|
|
>
|
|
Name*
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
value={state.name}
|
|
className="mt-0 my-3 form-control input-field"
|
|
onChange={handleChange}
|
|
placeholder="Name"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="form-group">
|
|
<label
|
|
htmlFor=" basicpill-phoneno-input"
|
|
className=" label-100"
|
|
>
|
|
phone*
|
|
</label>
|
|
<input
|
|
type="number"
|
|
name="phone"
|
|
value={state.phone}
|
|
className="mt-0 my-3 form-control input-field"
|
|
onChange={handleChange}
|
|
placeholder="Phone"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="form-group">
|
|
<label
|
|
htmlFor=" basicpill-phoneno-input"
|
|
className=" label-100"
|
|
>
|
|
Email*
|
|
</label>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
value={state.email}
|
|
className="mt-0 my-3 form-control input-field"
|
|
onChange={handleChange}
|
|
placeholder="Email"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="form-group">
|
|
<label
|
|
htmlFor=" basicpill-phoneno-input"
|
|
className=" label-100"
|
|
>
|
|
Address*
|
|
</label>
|
|
<div className=" d-flex">
|
|
<div><input
|
|
type="text"
|
|
name="Building_Name"
|
|
value={state.Building_Name}
|
|
className="mt-0 my-3 w-100 form-control input-field"
|
|
onChange={handleChange}
|
|
placeholder="Building Name*"
|
|
/></div>
|
|
<div> <input
|
|
type="text"
|
|
name="Street_Name"
|
|
value={state.Street_Name}
|
|
className="mt-0 ml-4 my-3 form-control input-field"
|
|
onChange={handleChange}
|
|
placeholder="Street Name*"
|
|
/></div>
|
|
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<select
|
|
className="mt-0 my-3 form-control input-field"
|
|
required
|
|
name="country"
|
|
value={state.country}
|
|
// onChange={(e) => setCountry(e.target.value)}
|
|
onChange={handleChange}
|
|
>
|
|
<option value="">Country*</option>
|
|
{Country &&
|
|
Country.getAllCountries().map((item) => (
|
|
<option key={item.isoCode} value={item.isoCode}>
|
|
{item.name}
|
|
</option>
|
|
))}
|
|
|
|
|
|
</select>
|
|
<select
|
|
className="mt-0 my-3 form-control input-field"
|
|
requiredname='city'
|
|
name="city"
|
|
value={state.city}
|
|
// onChange={(e) => setCity(e.target.value)}
|
|
onChange={handleChange}
|
|
>
|
|
<option value="">City*</option>
|
|
{City &&
|
|
|
|
City.getCitiesOfCountry(state.country).map((item) => (
|
|
<option key={item.isoCode} value={item.isoCode}>
|
|
{item.name}
|
|
{/* {console.log(item)} */}
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="form-group mb-30 width-100 row">
|
|
<label className="my-3 col-md-4 control-label">
|
|
Description
|
|
</label>
|
|
<div className="mt-0 col-md-10">
|
|
<textarea
|
|
value={state.description}
|
|
onChange={handleChange}
|
|
name="description"
|
|
className="form-control input-field"
|
|
rows="5"
|
|
placeholder="Add description"
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* <!-- Left Column Ends --> */}
|
|
|
|
{/* <!--Right Column Begins --> */}
|
|
<div className=" col-lg-4">
|
|
<div className="card">
|
|
<div className="card-body">
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<form>
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="form-group">
|
|
<label
|
|
htmlFor="basicpill-phoneno-input"
|
|
className="label-100"
|
|
>
|
|
Bisuness Image
|
|
</label>
|
|
<input
|
|
required
|
|
type="file"
|
|
//name="image"
|
|
accept="image/*"
|
|
// value={image}
|
|
className="mt-0 my-3 form-control input-field"
|
|
// onChange={handleChange}
|
|
onChange={(e) => setImage(e.target.files[0])}
|
|
placeholder="Bisuness Image"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="form-group">
|
|
<label
|
|
htmlFor="basicpill-phoneno-input"
|
|
className="label-100"
|
|
>
|
|
Category*
|
|
</label>
|
|
<select
|
|
name="category"
|
|
value={state.category}
|
|
onChange={handleChange}
|
|
className="form-control input-field"
|
|
>
|
|
<option value="">--select--</option>
|
|
{categoryName && categoryName.map((item, index) =>
|
|
<option key={index}>{item?.name}</option>
|
|
|
|
)}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="form-group">
|
|
<label
|
|
htmlFor="basicpill-phoneno-input"
|
|
className="label-100"
|
|
>
|
|
Status*
|
|
</label>
|
|
<select
|
|
name="status"
|
|
value={state.status}
|
|
onChange={handleChange}
|
|
className="form-control input-field"
|
|
>
|
|
<option value="">--select--</option>
|
|
<option value={true}>Active</option>
|
|
<option value={false}>Inactive</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="form-group">
|
|
<label
|
|
htmlFor="basicpill-phoneno-input"
|
|
className="label-100"
|
|
>
|
|
Google Location
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="Glocation"
|
|
value={state.Glocation}
|
|
className="mt-0 my-3 form-control input-field"
|
|
onChange={handleChange}
|
|
placeholder="Google Location(Optional)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="form-group">
|
|
<label
|
|
htmlFor="basicpill-phoneno-input"
|
|
className="label-100"
|
|
>
|
|
Linkedin URL
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="LinkedinUrl"
|
|
value={state.LinkedinUrl}
|
|
className="mt-0 my-3 form-control input-field"
|
|
onChange={handleChange}
|
|
placeholder="Linkedin URL (Optional)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="form-group">
|
|
<label
|
|
htmlFor="basicpill-phoneno-input"
|
|
className="label-100"
|
|
>
|
|
Facebook URL
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="FacebookUrl"
|
|
value={state.FacebookUrl}
|
|
className="mt-0 my-3 form-control input-field"
|
|
onChange={handleChange}
|
|
placeholder="Facebook URL (Optional)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="form-group">
|
|
<label
|
|
htmlFor="basicpill-phoneno-input"
|
|
className="label-100"
|
|
>
|
|
Instagram URL
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="InstagramUrl"
|
|
value={state.InstagramUrl}
|
|
className="mt-0 my-3 form-control input-field"
|
|
onChange={handleChange}
|
|
placeholder="Instagram URL (Optional)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* <!--Right Column Ends --> */}
|
|
</div>
|
|
<div className=" mt-4 row">
|
|
{/* <!--Left Column Begins--> */}
|
|
{/* <div className="col-lg-8">
|
|
<div className="card">
|
|
<div className="card-body">
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<form className="">
|
|
<div className="row">
|
|
<div className="col-lg-4">
|
|
<div className=" form-group">
|
|
<label
|
|
htmlFor=" basicpill-phoneno-input"
|
|
className=" label-100"
|
|
>
|
|
Price*
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="price"
|
|
value={price}
|
|
onChange={handleChange}
|
|
className="form-control input-field"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> */}
|
|
{/* <!-- Left Column Ends --> */}
|
|
</div>
|
|
</div>
|
|
{/* <!-- container-fluid --> */}
|
|
</div>
|
|
{/* <!-- End Page-content --> */}
|
|
{/* <Footer /> */}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default EditBisuness |