camera feature added for upload
This commit is contained in:
parent
6e22db34c8
commit
5cd65fa104
|
|
@ -9,6 +9,8 @@ import { FiPenTool } from 'react-icons/fi';
|
|||
import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx';
|
||||
import '../../Styles/Product/Product.scss';
|
||||
import { Messages } from '../Notifications/Messages.jsx';
|
||||
import { isMobile } from 'react-device-detect';
|
||||
import Camera from '../MobileComponent/Camera.jsx';
|
||||
const allowedTypes = [
|
||||
'image/jpeg',
|
||||
'image/png',
|
||||
|
|
@ -22,7 +24,7 @@ const CropUpload = ({
|
|||
ImageLink,
|
||||
onlineImage,
|
||||
isProductList = {},
|
||||
handleClose = () => {}
|
||||
handleClose = () => { }
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const [messageType, setMessageType] = useState(null);
|
||||
|
|
@ -405,6 +407,29 @@ const CropUpload = ({
|
|||
<Modal visible={previewVisible} onCancel={handleCancel} footer={null}>
|
||||
<img alt="Preview" style={{ width: '100%' }} src={previewImage} />
|
||||
</Modal>
|
||||
{isMobile && fileList?.length == 0 && <>
|
||||
<div style={{ textAlign: "center", margin: "6px 0", fontFamily: "Poppins", fontWeight: "500" }}>OR</div>
|
||||
<Camera
|
||||
handleCapture={async (e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
await handleUpload({
|
||||
file,
|
||||
onSuccess: () => {
|
||||
setEditImageOpen(true);
|
||||
},
|
||||
onError: () => {
|
||||
console.error("Upload failed");
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</>}
|
||||
<DefaultModal
|
||||
title="Edit Image"
|
||||
width={800}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import { useDispatch } from 'react-redux';
|
|||
import { Modal, Upload } from 'antd';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import { uploadImage } from '../../Features/upload/upload';
|
||||
import Camera from '../MobileComponent/Camera';
|
||||
import { isMobile } from 'react-device-detect';
|
||||
const allowedTypes = [
|
||||
'image/jpeg',
|
||||
'image/png',
|
||||
|
|
@ -25,6 +27,7 @@ const App = ({ singleImage, updateImageUrl, ImageLink = '', listType }) => {
|
|||
const [previewImage, setPreviewImage] = useState('');
|
||||
const [previewTitle, setPreviewTitle] = useState('');
|
||||
const [fileList, setFileList] = useState([]);
|
||||
console.log(fileList, "fileList")
|
||||
|
||||
useEffect(() => {
|
||||
// Inside Imageupload.jsx
|
||||
|
|
@ -94,6 +97,19 @@ const App = ({ singleImage, updateImageUrl, ImageLink = '', listType }) => {
|
|||
</div>
|
||||
);
|
||||
|
||||
const handleCameraCapture = async (e) => {
|
||||
const file = e.target.files[0];
|
||||
|
||||
if (!file) return;
|
||||
|
||||
let data = await dispatch(uploadImage(file)).unwrap();
|
||||
|
||||
if (data?.data?.status) {
|
||||
updateImageUrl(data?.data?.image);
|
||||
setFileList([{ url: data?.data?.image }]);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Upload
|
||||
|
|
@ -125,6 +141,20 @@ const App = ({ singleImage, updateImageUrl, ImageLink = '', listType }) => {
|
|||
src={previewImage}
|
||||
/>
|
||||
</Modal>
|
||||
{isMobile && fileList?.length == 0 && <>
|
||||
<div style={{ textAlign: "center", margin: "6px 0", fontFamily: "Poppins", fontWeight: "500" }}>OR</div>
|
||||
<Camera
|
||||
handleCapture={(e) => {
|
||||
const files = Array.from(e.target.files);
|
||||
|
||||
const formattedFileList = files.map((file) => ({
|
||||
originFileObj: file,
|
||||
}));
|
||||
|
||||
handleChange({ fileList: formattedFileList });
|
||||
}}
|
||||
/>
|
||||
</>}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
import { useRef } from 'react'
|
||||
import { TbCapture } from "react-icons/tb";
|
||||
|
||||
const Camera = ({ handleCapture = () => { } }) => {
|
||||
|
||||
const cameraRef = useRef(null);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<input
|
||||
ref={cameraRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
capture="environment"
|
||||
multiple
|
||||
hidden
|
||||
onChange={handleCapture}
|
||||
style={{ display: "none" }}
|
||||
/>
|
||||
<div style={{
|
||||
backgroundColor: "#1292ee",
|
||||
color: "#fff",
|
||||
padding: "4px 8px",
|
||||
fontSize: "12px",
|
||||
fontWeight: "500",
|
||||
fontFamily: "Poppins",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "4px",
|
||||
borderRadius: "4px",
|
||||
cursor: "pointer",
|
||||
marginTop: "5px",
|
||||
flexWrap: 'nowrap',
|
||||
whiteSpace: "nowrap"
|
||||
}} onClick={() => cameraRef.current.click()}>
|
||||
<TbCapture size={16} />
|
||||
Take Photo
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Camera
|
||||
|
|
@ -355,7 +355,7 @@ const BSBillingTable3Pay = () => {
|
|||
const OrderCardDetail = useSelector(GlobalOrderCardDetails);
|
||||
const [customerPreviesOrders, setCustomerPreviesOrders] = useState(false);
|
||||
|
||||
console.log(paybtns, 'paybtnspaybtnspaybtnspaybtns', currentOrderNetAmount, previousNetAmount);
|
||||
console.log(OrderCardDetail, 'OrderCardDetail');
|
||||
//Total calculation
|
||||
const TotalItems = OrderCardDetail?.length;
|
||||
const [formattedDate, setFormattedDate] = useState('');
|
||||
|
|
|
|||
|
|
@ -1193,6 +1193,11 @@ const FeaturesFunctionalities = (props) => {
|
|||
),
|
||||
},
|
||||
];
|
||||
|
||||
console.log(ReorderHoldDetails,
|
||||
BookingType,
|
||||
GlobalExtraCharge, "GlobalExtraCharge");
|
||||
|
||||
const defaultColumns1 = [
|
||||
{
|
||||
title: 'ExtraCharge Type',
|
||||
|
|
|
|||
|
|
@ -1292,6 +1292,7 @@ function BSReprint({ setOpenModel = () => { } }) {
|
|||
OrderQty: item?.SalesQty,
|
||||
OrderRate: item?.Rate,
|
||||
SellingPrice: item?.Rate,
|
||||
TaxPercentage: (item?.ProdTaxPercentage || 0)
|
||||
// TotalAmt: formatAmount((item.TotalAmt - item.OfferValue)),
|
||||
}));
|
||||
|
||||
|
|
@ -1855,7 +1856,7 @@ function BSReprint({ setOpenModel = () => { } }) {
|
|||
</div>
|
||||
))}
|
||||
|
||||
{ showShareModal && <ReprintPDFDataShare
|
||||
{showShareModal && <ReprintPDFDataShare
|
||||
printerTemplateStyle={printerTemplateStyle}
|
||||
printDatas={printDatas}
|
||||
SettingDataSelector={SettingDataSelector}
|
||||
|
|
|
|||
|
|
@ -756,12 +756,14 @@ const ProductForm = ({
|
|||
<div className="upload_btn">
|
||||
<p>Upload Icon</p>
|
||||
<br></br>
|
||||
<div style={{ width: 'max-content' }}>
|
||||
<Imageupload
|
||||
singleImage={true}
|
||||
updateImageUrl={updateBrandImageUrl}
|
||||
ImageLink={imageBrandUrl ? imageBrandUrl : ''}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{true && (
|
||||
|
|
|
|||
|
|
@ -1158,12 +1158,14 @@ const CommonMaster = () => {
|
|||
<div className="upload_btn">
|
||||
<p>Upload Icon</p>
|
||||
<br />
|
||||
<div style={{ width: 'max-content' }}>
|
||||
<Imageupload
|
||||
singleImage={true}
|
||||
updateImageUrl={updateImageUrl}
|
||||
ImageLink={imageUrl ? imageUrl : ''}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
{radioValue === 'multiple' && !EditState && (
|
||||
|
|
|
|||
|
|
@ -33,6 +33,8 @@ import { getCommonAppPreference } from '../../Features/BrachLogin/BranchLogin.js
|
|||
import { AiOutlineDownCircle, AiOutlineUpCircle } from 'react-icons/ai';
|
||||
// import TextArea from 'antd/es/input/TextArea.js';
|
||||
import CropUpload from '../../Components/Forms/CropUpload.jsx';
|
||||
import { isMobile } from 'react-device-detect';
|
||||
import Camera from '../../Components/MobileComponent/Camera.jsx';
|
||||
const { Panel } = Collapse;
|
||||
const { TextArea } = Input;
|
||||
const subDirectory = import.meta.env.BASE_URL;
|
||||
|
|
@ -1630,6 +1632,9 @@ const EmployeeForm = ({ formType }) => {
|
|||
length: Math.max(1, imageUrls.length),
|
||||
}).map((_, idx) => (
|
||||
<div key={idx} style={{ marginBottom: 12 }}>
|
||||
|
||||
|
||||
<div style={{ width: 'max-content' }}>
|
||||
<CropUpload
|
||||
onlineImage={''}
|
||||
ImageLink={imageUrls[idx]?.image}
|
||||
|
|
@ -1637,7 +1642,7 @@ const EmployeeForm = ({ formType }) => {
|
|||
updateImageUrls(url, idx)
|
||||
}
|
||||
/>
|
||||
|
||||
</div>
|
||||
<Input
|
||||
placeholder={`Image name (optional)`}
|
||||
value={imageUrls[idx]?.name || ''}
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ const OtherServices = ({ formType }) => {
|
|||
},
|
||||
|
||||
{
|
||||
name: 'OtherServices',
|
||||
name: 'Other Services',
|
||||
link: `${subDirectory}setting/other-services`,
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ import {
|
|||
getCommonAppPreference,
|
||||
} from '../../Features/BrachLogin/BranchLogin.js';
|
||||
import RackForm from '../Rack/RackForm.jsx';
|
||||
import { isMobile } from 'react-device-detect';
|
||||
const subDirectory = import.meta.env.ENV_BASE_URL;
|
||||
|
||||
const ProductForm = ({ formType }) => {
|
||||
|
|
@ -2594,7 +2595,7 @@ const ProductForm = ({ formType }) => {
|
|||
ImageLink={imageUrl}
|
||||
updateImageUrl={updateImageUrl}
|
||||
/>
|
||||
<div className="onlineimgplus">
|
||||
<div className="onlineimgplus" style={{ paddingBottom: "1rem" }}>
|
||||
<button
|
||||
type="button"
|
||||
className="onlinebtnProduct"
|
||||
|
|
@ -2619,8 +2620,7 @@ const ProductForm = ({ formType }) => {
|
|||
<div className="productonlineImg">
|
||||
{imagedata?.map((item, index) => (
|
||||
<div
|
||||
className={`singleimg ${
|
||||
selectedImage === item ? 'selected' : ''
|
||||
className={`singleimg ${selectedImage === item ? 'selected' : ''
|
||||
}`}
|
||||
key={index}
|
||||
onClick={() => setSelectedImage(item)}
|
||||
|
|
@ -2640,7 +2640,7 @@ const ProductForm = ({ formType }) => {
|
|||
></DefaultModal>
|
||||
</div>
|
||||
{qrAndTokenDtlsFields?.length > 0 && (
|
||||
<div className="productcollapse">
|
||||
<div className="productcollapse" style={{ marginTop: isMobile ? "2rem" : "0.5rem" }}>
|
||||
<Collapse defaultActiveKey={expandCollapseActive}>
|
||||
<Panel header="Qrcode and Token" key="1">
|
||||
<div className="Qrcodediv">
|
||||
|
|
@ -4084,6 +4084,7 @@ const ProductForm = ({ formType }) => {
|
|||
<div className="upload_btn">
|
||||
<p>Upload Icon</p>
|
||||
<br></br>
|
||||
<div style={{ width: 'max-content' }}>
|
||||
<Imageupload
|
||||
singleImage={true}
|
||||
updateImageUrl={updateCategoryImageUrl}
|
||||
|
|
@ -4092,6 +4093,7 @@ const ProductForm = ({ formType }) => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
}
|
||||
handleSubmit={submitCategory}
|
||||
|
|
@ -4253,6 +4255,7 @@ const ProductForm = ({ formType }) => {
|
|||
<div className="upload_btn">
|
||||
<p>Upload Icon</p>
|
||||
<br></br>
|
||||
<div style={{ width: 'max-content' }}>
|
||||
<Imageupload
|
||||
singleImage={true}
|
||||
updateImageUrl={updateBrandImageUrl}
|
||||
|
|
@ -4261,6 +4264,7 @@ const ProductForm = ({ formType }) => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="subColumnFlex">
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -699,6 +699,7 @@ const TicketForm = () => {
|
|||
<div className="upload_btn">
|
||||
<p>Upload Attachment</p>
|
||||
<br></br>
|
||||
<div style={{ width: 'max-content' }}>
|
||||
<Imageupload
|
||||
singleImage={true}
|
||||
updateImageUrl={updateImageUrl}
|
||||
|
|
@ -708,6 +709,7 @@ const TicketForm = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="submitButton">
|
||||
<Buttons
|
||||
|
|
|
|||
Loading…
Reference in New Issue