160 lines
6.7 KiB
TypeScript
160 lines
6.7 KiB
TypeScript
import React from 'react';
|
|
import CardBox from '../CardBox';
|
|
import ImageField from '../ImageField';
|
|
import dataFormatter from '../../helpers/dataFormatter';
|
|
import {saveFile} from "../../helpers/fileSaver";
|
|
import ListActionsPopover from "../ListActionsPopover";
|
|
import {useAppSelector} from "../../stores/hooks";
|
|
import {Pagination} from "../Pagination";
|
|
import LoadingSpinner from "../LoadingSpinner";
|
|
import Link from 'next/link';
|
|
|
|
import {hasPermission} from "../../helpers/userPermissions";
|
|
|
|
|
|
type Props = {
|
|
mining_accounts: any[];
|
|
loading: boolean;
|
|
onDelete: (id: string) => void;
|
|
currentPage: number;
|
|
numPages: number;
|
|
onPageChange: (page: number) => void;
|
|
};
|
|
|
|
const ListMining_accounts = ({ mining_accounts, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
|
|
|
|
const currentUser = useAppSelector((state) => state.auth.currentUser);
|
|
const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_MINING_ACCOUNTS')
|
|
|
|
const corners = useAppSelector((state) => state.style.corners);
|
|
const bgColor = useAppSelector((state) => state.style.cardsColor);
|
|
|
|
|
|
return (
|
|
<>
|
|
<div className='relative overflow-x-auto p-4 space-y-4'>
|
|
{loading && <LoadingSpinner />}
|
|
{!loading && mining_accounts.map((item) => (
|
|
<div key={item.id}>
|
|
<CardBox hasTable isList className={'rounded shadow-none'}>
|
|
<div className={`flex ${bgColor} ${corners !== 'rounded-full' ? corners : 'rounded-3xl'} dark:bg-dark-900 border border-gray-600 items-center overflow-hidden`}>
|
|
|
|
<Link
|
|
href={`/mining_accounts/mining_accounts-view/?id=${item.id}`}
|
|
className={
|
|
'flex-1 px-4 py-6 h-24 flex divide-x-2 divide-gray-600 items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
|
|
}
|
|
>
|
|
|
|
|
|
<div className={'flex-1 px-3'}>
|
|
<p className={'text-xs text-gray-500 '}>User</p>
|
|
<p className={'line-clamp-2'}>{ dataFormatter.usersOneListFormatter(item.user) }</p>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={'flex-1 px-3'}>
|
|
<p className={'text-xs text-gray-500 '}>Label</p>
|
|
<p className={'line-clamp-2'}>{ item.label }</p>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={'flex-1 px-3'}>
|
|
<p className={'text-xs text-gray-500 '}>ProviderType</p>
|
|
<p className={'line-clamp-2'}>{ item.provider_type }</p>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={'flex-1 px-3'}>
|
|
<p className={'text-xs text-gray-500 '}>ProviderName</p>
|
|
<p className={'line-clamp-2'}>{ item.provider_name }</p>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={'flex-1 px-3'}>
|
|
<p className={'text-xs text-gray-500 '}>APIBaseURL</p>
|
|
<p className={'line-clamp-2'}>{ item.api_base_url }</p>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={'flex-1 px-3'}>
|
|
<p className={'text-xs text-gray-500 '}>APIKey</p>
|
|
<p className={'line-clamp-2'}>{ item.api_key }</p>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={'flex-1 px-3'}>
|
|
<p className={'text-xs text-gray-500 '}>APISecret</p>
|
|
<p className={'line-clamp-2'}>{ item.api_secret }</p>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={'flex-1 px-3'}>
|
|
<p className={'text-xs text-gray-500 '}>IsDefault</p>
|
|
<p className={'line-clamp-2'}>{ dataFormatter.booleanFormatter(item.is_default) }</p>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={'flex-1 px-3'}>
|
|
<p className={'text-xs text-gray-500 '}>Status</p>
|
|
<p className={'line-clamp-2'}>{ item.status }</p>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={'flex-1 px-3'}>
|
|
<p className={'text-xs text-gray-500 '}>LastSyncAt</p>
|
|
<p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.last_sync_at) }</p>
|
|
</div>
|
|
|
|
|
|
|
|
</Link>
|
|
<ListActionsPopover
|
|
onDelete={onDelete}
|
|
itemId={item.id}
|
|
pathEdit={`/mining_accounts/mining_accounts-edit/?id=${item.id}`}
|
|
pathView={`/mining_accounts/mining_accounts-view/?id=${item.id}`}
|
|
|
|
hasUpdatePermission={hasUpdatePermission}
|
|
|
|
/>
|
|
</div>
|
|
</CardBox>
|
|
</div>
|
|
))}
|
|
{!loading && mining_accounts.length === 0 && (
|
|
<div className='col-span-full flex items-center justify-center h-40'>
|
|
<p className=''>No data to display</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className={'flex items-center justify-center my-6'}>
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
numPages={numPages}
|
|
setCurrentPage={onPageChange}
|
|
/>
|
|
</div>
|
|
</>
|
|
)
|
|
};
|
|
|
|
export default ListMining_accounts |