paulmataruso/chartdb
1
0
Fork 0
mirror of https://github.com/chartdb/chartdb.git synced 2025-11-04 05:53:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

create another diagram

Browse Source
This commit is contained in:
Guy Ben-Aharon
2024-08-21 10:43:20 +03:00
parent d4da127de6
commit ca7facb02c
3 changed files with 66 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/context/history-context/redo-undo-stack-provider.tsx
View File

@@ -11,8 +11,6 @@ export const RedoUndoStackProvider: React.FC<React.PropsWithChildren> = ({
const [undoStack, setUndoStack] = React.useState<RedoUndoAction[]>([]);
const [redoStack, setRedoStack] = React.useState<RedoUndoAction[]>([]);
console.log({ undoStack });
const addRedoAction: RedoUndoStackContext['addRedoAction'] = useCallback(
(action) => {
setRedoStack((prev) => [...prev, action]);

60
src/dialogs/create-diagram-dialog/create-diagram-dialog.tsx
View File

@@ -25,6 +25,7 @@ import {
loadDatabaseMetadata,
} from '@/lib/data/import-metadata/metadata-types/database-metadata';
import { generateId } from '@/lib/utils';
import { useChartDB } from '@/hooks/use-chartdb';
enum CreateDiagramDialogStep {
SELECT_DATABASE = 'SELECT_DATABASE',
@@ -38,6 +39,7 @@ export interface CreateDiagramDialogProps {
export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
dialog,
}) => {
const { diagramId } = useChartDB();
const [databaseType, setDatabaseType] = React.useState<DatabaseType>(
DatabaseType.GENERIC
);
@@ -59,6 +61,8 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
fetchDiagrams();
}, [listDiagrams, setDiagramNumber]);
const hasExistingDiagram = (diagramId ?? '').trim().length !== 0;
const createNewDiagram = useCallback(async () => {
let diagram: Diagram = {
id: generateId(),
@@ -79,6 +83,7 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
await addDiagram({ diagram });
await updateConfig({ defaultDiagramId: diagram.id });
setDiagramNumber(diagramNumber + 1);
closeCreateDiagramDialog();
navigate(`/diagrams/${diagram.id}`);
}, [
@@ -196,42 +201,58 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
case CreateDiagramDialogStep.SELECT_DATABASE:
return (
<DialogFooter className="flex !justify-between gap-2">
{hasExistingDiagram ? (
<DialogClose asChild>
<Button
type="button"
variant="secondary"
// onClick={createNewDiagram}
>
Cancel
</Button>
</DialogClose>
) : (
<div></div>
)}
{/* <DialogClose asChild> */}
<div className="flex gap-2">
<Button
type="button"
variant="outline"
onClick={createNewDiagram}
>
Skip
</Button>
</DialogClose>
<DialogClose asChild>
<Button
type="button"
variant="default"
disabled={databaseType === DatabaseType.GENERIC}
onClick={() =>
setStep(
CreateDiagramDialogStep.IMPORT_DATABASE
)
}
>
Continue
</Button>
</DialogClose>
</div>
{/* </DialogClose> */}
</DialogFooter>
);
case CreateDiagramDialogStep.IMPORT_DATABASE:
return (
<DialogFooter className="flex !justify-between gap-2">
<DialogClose asChild>
{/* <DialogClose asChild> */}
<Button
type="button"
variant="secondary"
onClick={() =>
setStep(
CreateDiagramDialogStep.SELECT_DATABASE
)
setStep(CreateDiagramDialogStep.SELECT_DATABASE)
}
>
Back
</Button>
</DialogClose>
{/* </DialogClose> */}
<div className="flex gap-2">
<DialogClose asChild>
<Button
@@ -258,13 +279,30 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
default:
return null;
}
}, [step, databaseType, scriptResult, createNewDiagram]);
}, [
step,
databaseType,
scriptResult,
createNewDiagram,
hasExistingDiagram,
]);
return (
<Dialog {...dialog}>
<Dialog
{...dialog}
onOpenChange={(open) => {
if (!hasExistingDiagram) {
return;
}
if (!open) {
closeCreateDiagramDialog();
}
}}
>
<DialogContent
className="flex flex-col min-w-[500px] xl:min-w-[75vw] max-h-[80vh] overflow-y-auto"
showClose={false}
showClose={hasExistingDiagram}
>
{renderHeader()}
{renderContent()}

22
src/pages/editor-page/top-navbar/top-navbar.tsx
View File

@@ -18,11 +18,13 @@ import { Input } from '@/components/input/input';
import { useChartDB } from '@/hooks/use-chartdb';
import { useClickAway, useKeyPressEvent } from 'react-use';
import ChartDBLogo from '@/assets/logo.png';
import { useCreateDiagramDialog } from '@/hooks/use-create-diagram-dialog';
export interface TopNavbarProps {}
export const TopNavbar: React.FC<TopNavbarProps> = () => {
const { diagramName, updateDiagramName, currentDiagram } = useChartDB();
const { openCreateDiagramDialog } = useCreateDiagramDialog();
const [editMode, setEditMode] = React.useState(false);
const [editedDiagramName, setEditedDiagramName] =
React.useState(diagramName);
@@ -44,6 +46,10 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
useClickAway(inputRef, editDiagramName);
useKeyPressEvent('Enter', editDiagramName);
const createNewDiagram = () => {
openCreateDiagramDialog();
};
const enterEditMode = (
event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => {
@@ -71,17 +77,11 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>
<MenubarItem onClick={createNewDiagram}>
New
<MenubarShortcut>⌘T</MenubarShortcut>
</MenubarItem>
<MenubarItem>
New Window
<MenubarShortcut>⌘N</MenubarShortcut>
</MenubarItem>
<MenubarItem>Open</MenubarItem>
<MenubarItem>Save</MenubarItem>
<MenubarItem>Save as</MenubarItem>
<MenubarSeparator />
<MenubarItem onClick={exportSql}>
Export
@@ -95,14 +95,6 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
<MenubarItem>JPG</MenubarItem>
</MenubarSubContent>
</MenubarSub>
<MenubarSub>
<MenubarSubTrigger>Share</MenubarSubTrigger>
<MenubarSubContent>
<MenubarItem>Email link</MenubarItem>
<MenubarItem>Messages</MenubarItem>
<MenubarItem>Notes</MenubarItem>
</MenubarSubContent>
</MenubarSub>
<MenubarSeparator />
<MenubarItem>Exit</MenubarItem>
</MenubarContent>