175 lines
7.4 KiB
TypeScript
175 lines
7.4 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 = {
|
||
materials: any[];
|
||
loading: boolean;
|
||
onDelete: (id: string) => void;
|
||
currentPage: number;
|
||
numPages: number;
|
||
onPageChange: (page: number) => void;
|
||
};
|
||
|
||
const ListMaterials = ({ materials, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
|
||
|
||
const currentUser = useAppSelector((state) => state.auth.currentUser);
|
||
const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_MATERIALS')
|
||
|
||
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 && materials.map((item) => (
|
||
<div key={item.id}>
|
||
<CardBox hasTable isList className={'rounded shadow-none'}>
|
||
<div className={`flex rounded dark:bg-dark-900 border border-stone-300 items-center overflow-hidden`}>
|
||
|
||
<Link
|
||
href={`/materials/materials-view/?id=${item.id}`}
|
||
className={
|
||
'flex-1 px-4 py-6 h-24 flex divide-x-2 divide-stone-300 items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
|
||
}
|
||
>
|
||
|
||
|
||
<div className={'flex-1 px-3'}>
|
||
<p className={'text-xs text-gray-500 '}>Stok Kodu</p>
|
||
<p className={'line-clamp-2'}>{ item.sku }</p>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div className={'flex-1 px-3'}>
|
||
<p className={'text-xs text-gray-500 '}>Malzeme Adı</p>
|
||
<p className={'line-clamp-2'}>{ item.name }</p>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div className={'flex-1 px-3'}>
|
||
<p className={'text-xs text-gray-500 '}>Malzeme Türü</p>
|
||
<p className={'line-clamp-2'}>{ item.material_type }</p>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div className={'flex-1 px-3'}>
|
||
<p className={'text-xs text-gray-500 '}>Ölçü Birimi</p>
|
||
<p className={'line-clamp-2'}>{ item.unit_of_measure }</p>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div className={'flex-1 px-3'}>
|
||
<p className={'text-xs text-gray-500 '}>Standart Maliyet</p>
|
||
<p className={'line-clamp-2'}>{ item.standard_cost }</p>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div className={'flex-1 px-3'}>
|
||
<p className={'text-xs text-gray-500 '}>Yeniden Sipariş Noktası</p>
|
||
<p className={'line-clamp-2'}>{ item.reorder_point }</p>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div className={'flex-1 px-3'}>
|
||
<p className={'text-xs text-gray-500 '}>Yeniden Sipariş Miktarı</p>
|
||
<p className={'line-clamp-2'}>{ item.reorder_quantity }</p>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div className={'flex-1 px-3'}>
|
||
<p className={'text-xs text-gray-500 '}>Durum</p>
|
||
<p className={'line-clamp-2'}>{ item.status }</p>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div className={'flex-1 px-3'}>
|
||
<p className={'text-xs text-gray-500 '}>Tercih Edilen Tedarikçi</p>
|
||
<p className={'line-clamp-2'}>{ dataFormatter.vendorsOneListFormatter(item.preferred_vendor) }</p>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div className={'flex-1 px-3'}>
|
||
<p className={'text-xs text-gray-500 '}>Teknik Özellik</p>
|
||
<p className={'line-clamp-2'}>{ item.specification }</p>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div className={'flex-1 px-3'}>
|
||
<p className={'text-xs text-gray-500 '}>Teknik Dosyalar</p>
|
||
{dataFormatter.filesFormatter(item.spec_files).map(link => (
|
||
<button
|
||
key={link.publicUrl}
|
||
onClick={(e) => saveFile(e, link.publicUrl, link.name)}
|
||
>
|
||
{link.name}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
|
||
|
||
</Link>
|
||
<ListActionsPopover
|
||
onDelete={onDelete}
|
||
itemId={item.id}
|
||
pathEdit={`/materials/materials-edit/?id=${item.id}`}
|
||
pathView={`/materials/materials-view/?id=${item.id}`}
|
||
|
||
hasUpdatePermission={hasUpdatePermission}
|
||
|
||
/>
|
||
</div>
|
||
</CardBox>
|
||
</div>
|
||
))}
|
||
{!loading && materials.length === 0 && (
|
||
<div className='col-span-full flex items-center justify-center h-40'>
|
||
<p className=''>Gösterilecek veri yok</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className={'flex items-center justify-center my-6'}>
|
||
<Pagination
|
||
currentPage={currentPage}
|
||
numPages={numPages}
|
||
setCurrentPage={onPageChange}
|
||
/>
|
||
</div>
|
||
</>
|
||
)
|
||
};
|
||
|
||
export default ListMaterials |