Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 32afa4df by Chetan
Options

gift card

1 parent f5eb0e41
Inline Side-by-side
Showing 1 changed file with 53 additions and 70 deletions
components/admin/GiftcardListing.js
import { Fragment, useState } from "react"; import { Fragment, useEffect, useState } from "react";
import { Button, Image, Table } from "react-bootstrap"; import { Button, Image } from "react-bootstrap";
import { getGiftCard } from "../../redux/actions/giftCardAction";
import { useDispatch, useSelector } from "react-redux";
import { Empty, Table } from "antd";
import axios from "axios";
const GiftcardListing = () => { const GiftcardListing = () => {
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const [giftData, setGiftData] = useState([]);
const [showMenuIndex, setShowMenuIndex] = useState(null); useEffect(() => {
axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/gift-cards`).then((res) => {
const toggleMenu = (index) => { let giftDatas =
setShowMenuIndex(index === showMenuIndex ? null : index); res.data &&
}; res.data.data.map((data) => {
return {
key: data.id,
amount: data?.attributes?.amount,
senderEmail: data?.attributes?.senderEmail,
receiverEmail: data?.attributes?.receiverEmail,
status: data?.attributes?.status,
}
})
setGiftData(giftDatas)
}).catch((err) => {
console.log(err)
})
}, [])
const columns = [
{
title: "Sender Email Address",
dataIndex: "senderEmail",
key: "senderEmail",
render: text => <a>{text}</a>
},
{
title: "Receiver Email Address",
dataIndex: "receiverEmail",
key: "receiverEmail",
render: text => <a>{text}</a>
},
{
title: "Amount",
dataIndex: "amount",
key: "amount",
render: text => <a>{text}</a>
},
{
title: "Status",
dataIndex: "status",
key: "status",
render: text => <a>{text}</a>
},
]
return ( return (
<Fragment> <Fragment>
<div className="p-5"> <div className="p-5 h-100">
<div className="d-flex align-items-center justify-content-between px-2 mb-2"> <div className="d-flex align-items-center justify-content-between px-2 mb-2">
<div> <div>
<h2 style={{ fontSize: 28 }}>Gift Card Requests</h2> <h2 style={{ fontSize: 28 }}>Gift Card Requests</h2>
...@@ -23,66 +65,7 @@ const GiftcardListing = () => { ...@@ -23,66 +65,7 @@ const GiftcardListing = () => {
</Button> </Button>
</div> </div>
</div> </div>
<Table responsive className="listingTable"> <Table columns={columns} dataSource={giftData} />
<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>Name</th>
<th>Amount</th>
<th>Phone Number</th>
<th>Sender Email Address</th>
<th>Receiver Email Address</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>Michael Anderson</td>
<td>$ 499</td>
<td>+91 9865 43210</td>
<td>adventuretrails@example.com</td>
<td>john@example.com</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>Delete</li>
</ul>
</div>
)}
</div>
</td>
</tr>
))}
<tr>
<td colSpan={7}>Showing Results 10 of 1567</td>
</tr>
</tbody>
</Table>
</div> </div>
</Fragment> </Fragment>
); );
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!