mirror/chartdb
1
0
Fork 0
mirror of https://github.com/chartdb/chartdb.git synced 2026-01-08 21:00:02 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix(side-panel): simplify how to add field and index (#573)

Browse Source 
* fix(side-panel): simplify how to add feild and index

* fix(side-panel): auto-open the index Attributes when adding index

* fix(side-pannel): add focus after adding feild/index

* add some fixes

---------

Co-authored-by: Guy Ben-Aharon <baguy3@gmail.com>
This commit is contained in:
Jonathan Fishner
2025-02-19 14:46:41 +02:00
committed by GitHub
parent ab89bad6d5
commit a1c0cf102a
1 changed files with 47 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-list-item-content.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { useCallback } from 'react';
import { Plus, FileType2, FileKey2, MessageCircleMore } from 'lucide-react';
import { Button } from '@/components/button/button';
import {
@@ -70,17 +70,29 @@ export const TableListItemContent: React.FC<TableListItemContentProps> = ({
}
};
const createIndexHandler = () => {
setSelectedItems((prev) => {
if (prev.includes('indexes')) {
return prev;
}
const createIndexHandler = useCallback(
(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.stopPropagation();
setSelectedItems((prev) => {
if (prev.includes('indexes')) {
return prev;
}
return [...prev, 'indexes'];
});
return [...prev, 'indexes'];
});
createIndex(table.id);
};
createIndex(table.id);
},
[createIndex, table.id, setSelectedItems]
);
const createFieldHandler = useCallback(
(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.stopPropagation();
createField(table.id);
},
[createField, table.id]
);
return (
<div
@@ -113,10 +125,7 @@ export const TableListItemContent: React.FC<TableListItemContentProps> = ({
<Button
variant="ghost"
className="size-4 p-0 text-xs hover:bg-primary-foreground"
onClick={(e) => {
e.stopPropagation();
createField(table.id);
}}
onClick={createFieldHandler}
>
<Plus className="size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
</Button>
@@ -153,6 +162,18 @@ export const TableListItemContent: React.FC<TableListItemContentProps> = ({
/>
))}
</SortableContext>
<div className="flex justify-start p-1">
<Button
variant="ghost"
className="flex h-7 items-center gap-1 px-2 text-xs"
onClick={createFieldHandler}
>
<Plus className="size-4 text-muted-foreground" />
{t(
'side_panel.tables_section.table.add_field'
)}
</Button>
</div>
</DndContext>
</AccordionContent>
</AccordionItem>
@@ -173,10 +194,7 @@ export const TableListItemContent: React.FC<TableListItemContentProps> = ({
<Button
variant="ghost"
className="size-4 p-0 text-xs hover:bg-primary-foreground"
onClick={(e) => {
e.stopPropagation();
createIndexHandler();
}}
onClick={createIndexHandler}
>
<Plus className="size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
</Button>
@@ -198,6 +216,16 @@ export const TableListItemContent: React.FC<TableListItemContentProps> = ({
fields={table.fields}
/>
))}
<div className="flex justify-start p-1">
<Button
variant="ghost"
className="flex h-7 items-center gap-1 px-2 text-xs"
onClick={createIndexHandler}
>
<Plus className="size-4 text-muted-foreground" />
{t('side_panel.tables_section.table.add_index')}
</Button>
</div>
</AccordionContent>
</AccordionItem>
@@ -248,7 +276,7 @@ export const TableListItemContent: React.FC<TableListItemContentProps> = ({
<Button
variant="outline"
className="h-8 p-2 text-xs"
onClick={() => createField(table.id)}
onClick={createFieldHandler}
>
<FileType2 className="h-4" />
{t('side_panel.tables_section.table.add_field')}