66 lines
2.5 KiB
TypeScript
66 lines
2.5 KiB
TypeScript
import {Button, Card, Container, Group, Modal, Paper, SimpleGrid, Stack} from "@mantine/core";
|
|
import React from "react";
|
|
import {useDoc, usePouch} from "use-pouchdb";
|
|
import {IconPencilBolt, IconTrash} from "@tabler/icons-react";
|
|
|
|
export default function ManageDiagramsModal({setDbName, openCreate, manageOpened, closeManage}) {
|
|
const {doc: diagram, error} = useDoc('directory', {}, {_id: 'directory', diagrams: []});
|
|
const [selected, setSelected] = React.useState(null);
|
|
const db = usePouch();
|
|
if (error) {
|
|
console.error('Error getting diagram document');
|
|
if (error.status === 404) {
|
|
console.log('Creating new diagram document');
|
|
db.put({_id: 'directory', diagrams: []});
|
|
}
|
|
return <></>;
|
|
}
|
|
const diagrams = diagram.diagrams || [];
|
|
console.log(diagrams);
|
|
const cards = diagrams.map((diagram) => {
|
|
return (
|
|
<Card key={diagram._id}>
|
|
<Card.Section>
|
|
<Container w={512} h={64}>{diagram.name}</Container>
|
|
</Card.Section>
|
|
<Card.Section>
|
|
<Container w={512} h={128}>
|
|
{diagram.description}
|
|
</Container>
|
|
</Card.Section>
|
|
<Card.Section>
|
|
<Group justify="space-evenly">
|
|
<Button
|
|
onClick={() => {
|
|
setDbName(diagram._id)
|
|
}}
|
|
leftSection={<IconPencilBolt size={16}/>} size="xs">Select</Button>
|
|
<Button bg="red" size="xs"><IconTrash size={16}/></Button>
|
|
</Group>
|
|
</Card.Section>
|
|
</Card>
|
|
)
|
|
});
|
|
|
|
const buildCreateButton = () => {
|
|
if (diagrams.length < 6) {
|
|
return <Button size="lg" onClick={openCreate} disabled={false}>Create</Button>
|
|
} else {
|
|
return (<Stack>
|
|
<Button key="create" size="lg" disabled={true}>Create</Button>
|
|
<Paper key="upgrademessage">You've reached the max number of diagrams for this Tier.</Paper>
|
|
<Button key="upgradebutton" size="xl">Upgrade To Pro</Button>
|
|
</Stack>)
|
|
}
|
|
}
|
|
return (
|
|
<Modal opened={manageOpened} size="lg" onClose={closeManage}>
|
|
<h1>Select a Diagram</h1>
|
|
<SimpleGrid cols={3}>
|
|
{cards}
|
|
</SimpleGrid>
|
|
{buildCreateButton()}
|
|
</Modal>
|
|
|
|
)
|
|
} |