CHIEFSOFT\ameye
94 lines
4.5 KiB
React
94 lines
4.5 KiB
React
import React from 'react'
|
|
import { productsURL } from '../../services/services'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import queryKeys from '../../services/queryKeys'
|
|
import getImage from '../../utils/getImage'
|
|
|
|
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 === '1' ? 'badge-success-inverse' : item?.status === '6' ? 'badge-success-inverse' : item?.status == '7' ? 'badge-danger-inverse' : 'badge-info-inverse'
|
|
let statusText = item?.status === '1' ? 'Preparing' : item?.status === '6' ? 'Provisioning' : item?.status == '7' ? 'Ready' : 'Started'
|
|
let productUrl = '/product/'+ item?.product_id
|
|
let externalUrl= item?.url_protocol +"://"+ item?.internal_url;
|
|
return (
|
|
<tr key={index}>
|
|
<td>{Number(item?.id).toString().padStart(6,'0')}</td>
|
|
<td>
|
|
<a className="mr-3" href={externalUrl} target='_blank'><b>{externalUrl}</b></a> - {item?.description}
|
|
</td>
|
|
|
|
<td><span className={`badge ${statusColor}`}>{statusText}</span></td>
|
|
{/* <td><a className="mr-3" href={productUrl}><i className="fe fe-edit"></i></a></td> */}
|
|
<td>
|
|
<a className="mr-3" href={productUrl}>
|
|
<img src={getImage('arrow-next.png')} alt='next' />
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|