Newer
Older
import {
Text,
TableContainer,
Table,
TableCaption,
Thead,
Tr,
Th,
Tbody,
Td,
Tooltip,
HStack,
IconButton,
Icon,
} from '@chakra-ui/react'
import { FaEye, FaPlay, FaTrash } from 'react-icons/fa'
import { Implementation, Pattern } from 'src/models'
import { GetPatternQuery } from '../patterns/query-builder'
const tableHeaders = ['Nombre', 'Descripcion', 'Fecha de creacion', '']
export type ImplementationsProps = {
patternId: Pattern['id']
}
export const Implementations: React.FC<ImplementationsProps> = ({
patternId,
}) => {
const patternQuery = GetPatternQuery.useQuery({ id: patternId })
const implementations = [] // todo new endpoint
const tableCaption =
implementations.length === 0
? `No hay implementaciones disponibles de ${patternQuery.data?.title}`
: `Implementaciones disponibles de ${patternQuery.data?.title}`
<Thead>
<Tr>
{tableHeaders.map((header, index) => (
<Th key={`th-${index}`}>{header}</Th>
))}
</Tr>
</Thead>
<Tbody>
<Tr key={`implementation-${implementation.title}-${index}`}>
<Td>{implementation.title}</Td>
<Td>
<Tooltip label={implementation.description} hasArrow>
<Text isTruncated maxW="sm">
{implementation.description}
</Text>
</Tooltip>
</Td>
<Td>{new Date(implementation.creationDate).toUTCString()}</Td>
<Td>
<ActionsRow _implementation={implementation} />
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
)
}
type ActionsRowProps = {
_implementation: Implementation
}
const ActionsRow: React.FC<ActionsRowProps> = ({ _implementation }) => {
<Tooltip label={<Text>Ver detalles</Text>}>
<IconButton
aria-label="view implementation"
variant="unstyled"
icon={<Icon as={FaEye} />}
/>
</Tooltip>
<Tooltip label={<Text>Correr tests</Text>}>
<IconButton
aria-label="test implementation"
variant="unstyled"
icon={<Icon as={FaPlay} />}
/>
</Tooltip>
<Tooltip label={<Text>Eliminar implementacion</Text>}>
<IconButton
aria-label="delete implementation"
variant="unstyled"
icon={<Icon as={FaTrash} />}
/>
</Tooltip>