VendorListing.js
6.37 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import { Fragment, useState } from "react";
import { Button, Image, Table } from "react-bootstrap";
import VendorDetails from "./VendorDetails";
const VendorListing = () => {
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const [showMenuIndex, setShowMenuIndex] = useState(null);
const toggleMenu = (index) => {
setShowMenuIndex(index === showMenuIndex ? null : index);
};
const [vendorId, setVendorId] = useState(null);
const [showVendorDetails, setShowVendorDetails] = useState(false);
const handleShowVendorDetails = () => {
setShowVendorDetails(true)
}
const handleCloseVendorDetails = () => {
setShowVendorDetails(false)
}
return (
<Fragment>
{!showVendorDetails && (
<div className="row">
<div className="col-12 col-lg-12">
<div className="rightContent">
<div className="d-flex align-items-center justify-content-between px-2 mb-2">
<div>
<h2>Vendors</h2>
<p>View all the vendors</p>
</div>
<div>
<Button type="button" variant="" className="btnAdd m-0">
<Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2" /> Filter
</Button>
</div>
</div>
<Table responsive className="listingTable">
<thead>
<tr>
<th>
<label className="check-container mb-0 ps-2" htmlFor="checkh">
<input
type="checkbox"
id="checkh"
className="check-box"
/>
<span className="checkmark"></span>
</label>
</th>
<th>Vendor</th>
<th>Vendor Id</th>
<th>Contact Person</th>
<th>Phone Number</th>
<th>Email Address</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
{array.map((data, index) => (
<tr key={index}>
<td>
<label className="check-container mb-0 ps-2" htmlFor={`check${index}`}>
<input
type="checkbox"
id={`check${index}`}
className="check-box"
/>
<span className="checkmark"></span>
</label>
</td>
<td>
<span onClick={() => {
setVendorId(1);
handleShowVendorDetails();
}}>
M S Adventure
</span>
</td>
<td>VN_ET9797</td>
<td>Ridge Johnson</td>
<td>+91 9865 43210</td>
<td>adventuretrails@example.com</td>
<td><div className={`statusDiv ${index % 2 ? "inactive" : "active"}`}>{index % 2 ? "Inactive" : "Active"}</div></td>
<td>
<div className="actions">
<div className="ellipse" onClick={() => toggleMenu(index)}>
<Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" />
</div>
{showMenuIndex === index && (
<div className="menu">
<ul>
<li>View</li>
<li>Deactivate</li>
<li>Delete</li>
</ul>
</div>
)}
</div>
</td>
</tr>
))}
<tr>
<td colSpan={7}>Showing Results 10 of 1567</td>
</tr>
</tbody>
</Table>
</div>
</div>
</div>
)}
{vendorId && showVendorDetails && (
<VendorDetails id={vendorId} backClick={handleCloseVendorDetails} />
)}
</Fragment>
);
};
export default VendorListing;