WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Merge branch 'add-item-btn-moved' of WrenchBoard/Users-Wrench into master

Browse Source
This commit is contained in:
Olusesan Ameye
2023-08-09 01:13:02 +00:00
committed by Gogs
parent e61b2c8f43 4b9289cb8e
commit 594c072806
3 changed files with 106 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Resources/index.jsx
+2 -2
View File
@@ -136,14 +136,14 @@ export default function Resources(props) {
<div className="tab-items">
<TabList tabCategories={tab_categories} />
</div>
<div style={{ transform: "translateY(-22px)" }}>
{/* <div style={{ transform: "translateY(-22px)" }}>
<Link
to="/my-uploads"
className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
>
Add My Item
</Link>
</div>
</div> */}
</div>
<div className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
</div>
src/components/Resources/tabs/MyUploadedFiles.jsx
+11
View File
@@ -1,6 +1,7 @@
import React, { useState } from "react";
import dataImage1 from "../../../assets/images/data-table-user-1.png";
import dataImage2 from "../../../assets/images/data-table-user-2.png";
import { Link } from "react-router-dom";
// import dataImage3 from "../../../assets/images/data-table-user-3.png";
// import dataImage4 from "../../../assets/images/data-table-user-4.png";
// import SelectBox from "../Helpers/SelectBox";
@@ -9,6 +10,15 @@ export default function MyUploadedFiles({ className }) {
const filterCategories = ["All Categories", "Explore", "Featured"];
const [selectedCategory, setCategory] = useState(filterCategories[0]);
return (
<>
<div className="mb-4 w-full flex justify-end item-center">
<Link
to="/my-uploads"
className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
>
Add My Item
</Link>
</div>
<div
className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow relative min-h-[520px] ${
className || ""
@@ -263,5 +273,6 @@ export default function MyUploadedFiles({ className }) {
</table>
</div>
</div>
</>
);
}
src/components/UploadProduct/index.jsx
+93 -8
View File
@@ -5,8 +5,11 @@ import ModalCom from "../Helpers/ModalCom";
import Layout from "../Partials/Layout";
// import DropFileWidget from "./DropFileWidget";
import ProductUploadField from "./ProductUploadField";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import usersService from "../../services/UsersService";
export default function UploadProduct() {
const apiCall = new usersService()
// preview modal
const [previewProductModal, setPreviewProductModal] = useState(false);
// cancelUploadModal
@@ -68,10 +71,14 @@ export default function UploadProduct() {
};
const fileSelect = useRef(null);
const fileRef = useRef(null);
const [selectedFile, setSelectedFile] = useState("");
const [selectedFile, setSelectedFile] = useState('');
// const [selectedFile, setSelectedFile] = useState({name: '', size: ''});
const [img, setImg] = useState(null);
const [imgDetails, setImgDetails] = useState('')
const changeFile = (e, file) => {
if (e) {
setSelectedFile(e.target.files[0].name);
setImgDetails(e?.target?.files[0])
const imgRead = new FileReader();
imgRead.onload = (event) => {
setImg(event.target.result);
@@ -81,7 +88,8 @@ export default function UploadProduct() {
}
if (file) {
if (file[0].name) {
setSelectedFile(file[0].name);
setSelectedFile(file?.[0].name);
setImgDetails(file?.[0])
const imgRead = new FileReader();
imgRead.onload = (event) => {
setImg(event.target.result);
@@ -92,6 +100,77 @@ export default function UploadProduct() {
}
};
const [requestStatus, setRequestStatus] = useState({loading: false, status: null, message: ''})
//FUNCTION TO UPLOAD ITEM
const uploadItem = () => {
let errorArr = []
let uploadInfo = { // SUBMITTED DETAILS FROM USER
img,
itemName,
description
}
//LOOPS THROUGH ITEM DETAILS FOR EMPTINESS
for(let info in uploadInfo){
if(!uploadInfo[info]){
errorArr.push(info)
}
}
// TEST TO SEE IF FIELDS ARE EMPTY
if(errorArr.length){
let message = ''
// for(let i = 0; i<errorArr.length; i++){
// if(errorArr.includes('img')){
// message+='Please select file to upload'
// }else{
// message+='Item name or decription cannot be empty'
// }
// }
if(errorArr.length == 1 && errorArr.includes('img')){
message='Please select file to upload'
}else if (errorArr.length == 1 && !errorArr.includes('img')){
message='Item name or description cannot be empty'
}else if (errorArr.length > 1 && errorArr.includes('img')){
message='Please select file to upload & Item name/description cannot be empty'
}else {
message='Item name/description cannot be empty'
}
setRequestStatus({loading: false, status: null, message})
return setTimeout(()=>{
setRequestStatus({loading: false, status: false, message: ''})
},5000)
}
if(imgDetails.size > 2097152){ // CHECKS IF IMAGE SIZE IS MORE THAN "MB"
setRequestStatus({loading: false, status: null, message: 'Image must be less than 2MB'})
return setTimeout(()=>{
setRequestStatus({loading: false, status: false, message: ''})
},5000)
}
let reqData = { // PAYLOAD FOR API CALL
file_name: selectedFile,
file_size: imgDetails.size,
file_type: imgDetails.type,
file_data: img,
item_name: itemName,
item_description: description,
msg_type: 'FILE',
// action: 'WRENCHBOARD_RESOURCE_MYFILES',
action: 11307
}
console.log('TESTING', reqData)
setRequestStatus({loading: true, status: null, message: ''})
//API CALL TO UPLOAD COMES HERE
setTimeout(()=>{
setRequestStatus({loading: false, status: true, message: 'Bad'})
},3000)
setTimeout(()=>{
setRequestStatus({loading: false, status: false, message: ''})
},7000)
}
// drop event
function handleDrop(e) {
const dt = e.dataTransfer;
@@ -167,7 +246,7 @@ export default function UploadProduct() {
{/* heading */}
<div className="mb-6">
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
Upload new item
{requestStatus.status == null ? 'Create new item' : 'Upload new item'}
</h1>
</div>
{/**
@@ -289,7 +368,8 @@ export default function UploadProduct() {
</div>
</div>
{/* bottom action */}
<div className="w-full h-[120px] bg-red border-t border-light-purple dark:border-[#5356fb29] flex justify-end items-center">
<div className="w-full h-[120px] bg-red border-t border-light-purple dark:border-[#5356fb29] flex justify-between items-center">
<p className={`px-4 text-sm sm:text-lg ${requestStatus.status ? 'text-green-500' : 'text-red-500'} tracking-wide`}>{requestStatus.message && requestStatus.message}</p>
<div className="flex sm:space-x-4 space-x-2 sm:mr-9 mr-2">
<button
type="button"
@@ -298,7 +378,7 @@ export default function UploadProduct() {
>
<span className="border-b dark:border-[#5356fb29] border-light-red">
{" "}
Return
{requestStatus.status == null ? 'Cancel' : 'Return'}
</span>
</button>
{/*<button*/}
@@ -308,12 +388,17 @@ export default function UploadProduct() {
{/*>*/}
{/* <span className="text-gradient"> Preview</span>*/}
{/*</button>*/}
<Link
to="/"
{requestStatus.loading ?
<LoadingSpinner size='8' color='sky-blue' />
:
<button
// to="/"
onClick={uploadItem}
className="sm:w-[126px] h-[46px] w-[100px] flex justify-center items-center btn-gradient sm:text-18 text-sm rounded-full text-white"
>
Upload
</Link>
</button>
}
</div>
</div>