CHIEFSOFT\ameye
98 lines
4.4 KiB
React
98 lines
4.4 KiB
React
import React from 'react'
|
|
import { productsURL } from '../../services/services'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import queryKeys from '../../services/queryKeys'
|
|
|
|
export default function ProductsURL() {
|
|
|
|
let reqData = {
|
|
token: localStorage.getItem('token'), // USER TOKEN
|
|
uid: localStorage.getItem('uid') // USER UID
|
|
}
|
|
|
|
const {data, isFetching, isError, error} = useQuery({
|
|
queryKey: queryKeys.product_url,
|
|
queryFn: () => productsURL(reqData)
|
|
})
|
|
|
|
const urlData = data?.data?.products_data
|
|
// console.log('data', urlData)
|
|
|
|
return (
|
|
<>
|
|
<div className="col-xxl-8 m-b-30">
|
|
<div className="card card-statistics h-100 mb-0">
|
|
<div className="card-header d-flex align-items-center justify-content-between">
|
|
<div className="card-heading">
|
|
<h4 className="card-title">My Product URLs</h4>
|
|
</div>
|
|
<div className="dropdown">
|
|
{/*<a className="btn btn-xs" href="#!">Export <i className="zmdi zmdi-download pl-1"></i> </a>*/}
|
|
</div>
|
|
</div>
|
|
<div className="card-body scrollbar scroll_dark pt-0" style={{maxHeight: '350px'}}>
|
|
<div className="datatable-wrapper table-responsive">
|
|
{isFetching ?
|
|
<>
|
|
<div className="col-12">
|
|
<div className="p-4">
|
|
<p className='text-mute'>Loading...</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
: isError ?
|
|
<div className="col-12">
|
|
<div className="p-4">
|
|
<p className='text-danger'>{error.message}</p>
|
|
</div>
|
|
</div>
|
|
:
|
|
<table id="datatable" className="table table-borderless table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style={{width: '30px'}}>#</th>
|
|
<th>Description</th>
|
|
|
|
<th style={{width: '100px'}}>Status</th>
|
|
<th style={{width: '40px'}}>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{urlData && urlData.map((item, index) => {
|
|
let statusColor = item?.status === 'Preparing' ? 'badge-success-inverse' : item?.status === 'Active' ? 'badge-success-inverse' : item?.status == 'Refreshing' ? 'badge-danger-inverse' : 'badge-info-inverse'
|
|
let productUrl = '/product/'+ item?.product_id
|
|
let externalUrl= 'http://'+ item?.internal_url;
|
|
return (
|
|
<tr key={index}>
|
|
<td>{Number(item?.id)}</td>
|
|
<td>
|
|
{item?.description} - <a className="mr-3" href={externalUrl} target='_blank'>{externalUrl}</a>
|
|
{/* <a href={productUrl} target='_blank'>{item?.external_url}</a> */}
|
|
</td>
|
|
|
|
<td><span className={`badge ${statusColor}`}>{item?.status}</span></td>
|
|
<td><a className="mr-3" href={productUrl}><i className="fe fe-edit"></i></a></td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Name</th>
|
|
<th>Price</th>
|
|
<th>In stock</th>
|
|
<th>Status</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|