Newer
Older
import {
Text,
TableContainer,
Table,
TableCaption,
Thead,
Tr,
Th,
Tbody,
Td,
Tooltip,
HStack,
IconButton,
Icon,
import { FaEye, FaPlay, FaPlus, FaTrash } from 'react-icons/fa'
import { Implementation, Pattern } from 'src/models'
import { GetPatternQuery } from '../patterns/query-builder'
import { GetImplementationsByPatternIdQuery } from './query-builder/get-implementations-by-pattern-id-query'
import { AddImplementationButton } from './add-implementation'
const tableHeaders = [
'Nombre',
' Imagen',
'Descripcion',
'Fecha de creacion',
'',
]
export type ImplementationsProps = {
patternId: Pattern['id']
}
export const Implementations: React.FC<ImplementationsProps> = ({
patternId,
}) => {
const patternQuery = GetPatternQuery.useQuery({ id: patternId })
const implementationsQuery = GetImplementationsByPatternIdQuery.useQuery({
patternId,
})
implementationsQuery.data?.length === 0
? `No hay implementaciones disponibles de ${patternQuery.data?.name}`
: `Implementaciones disponibles de ${patternQuery.data?.name}`
<VStack spacing="2">
<TableContainer>
<Table variant="striped" size="lg" minW="80vw">
<TableCaption>{tableCaption}</TableCaption>
<Thead>
<Tr>
{tableHeaders.map((header, index) => (
<Th key={`th-${index}`}>{header}</Th>
))}
</Thead>
<Tbody>
{implementationsQuery.data?.map((implementation, index) => (
<Tr key={`implementation-${implementation.name}-${index}`}>
<Td>{implementation.name}</Td>
<Td>
<Tooltip label={implementation.description} hasArrow>
<Text isTruncated maxW="sm">
{implementation.description}
</Text>
</Tooltip>
</Td>
<Td>
{DateUtils.formatLocalDateTime(implementation.createdDate)}
</Td>
<Td>
<ActionsRow
implementation={implementation}
pattern={patternQuery.data}
/>
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
<HStack w="full" justifyContent="flex-end">
{patternQuery.data && (
<AddImplementationButton
pattern={patternQuery.data}
hasTooltip={true}
>
<Button variant="solid" colorScheme="blue">
</Button>
</AddImplementationButton>
)}
</HStack>
</VStack>
const ActionsRow: React.FC<ActionsRowProps> = ({ implementation, pattern }) => {
<Tooltip label={<Text>Ver detalles</Text>}>
<IconButton
aria-label="view implementation"
variant="unstyled"
icon={<Icon as={FaEye} />}
/>
</Tooltip>
<RunTestsButton implementation={implementation} pattern={pattern}>
<IconButton
aria-label="test implementation"
variant="unstyled"
icon={<Icon as={FaPlay} />}
/>
<Tooltip label={<Text>Eliminar implementacion</Text>}>
<IconButton
aria-label="delete implementation"
variant="unstyled"
icon={<Icon as={FaTrash} />}
/>
</Tooltip>