Added canvas accessible-table-actions-buttons

Lemoncode · Apr 17, 2024 · 0367908 · 0367908
1 parent f681d07
commit 0367908
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 12 deletions.
diff --git a/src/pods/canvas/canvas.pod.tsx b/src/pods/canvas/canvas.pod.tsx
@@ -221,7 +221,13 @@ export const CanvasPod: React.FC = () => {
           onSelectElement={onSelectElement}
           isTabletOrMobileDevice={isTabletOrMobileDevice}
         />
-        {!loadSample && <CanvasAccessible canvasSchema={canvasSchema} />}
+        {!loadSample && (
+          <CanvasAccessible
+            canvasSchema={canvasSchema}
+            handleEditTable={handleEditTable}
+            deleteSelectedItem={deleteSelectedItem}
+          />
+        )}
       </div>
     </div>
   );

diff --git a/src/pods/canvas/components/canvas-accessible/canvas-accessible.component.tsx b/src/pods/canvas/components/canvas-accessible/canvas-accessible.component.tsx
@@ -1,18 +1,24 @@
 import React from 'react';
 import { CollectionListAccessible, RelationListAccessible } from './components';
-import { DatabaseSchemaVm } from '@/core/providers';
+import { DatabaseSchemaVm, TableVm } from '@/core/providers';
 
 interface Props {
   canvasSchema: DatabaseSchemaVm;
+  handleEditTable: (table: TableVm) => void;
+  deleteSelectedItem: (tableId: string) => void;
 }
 
 export const CanvasAccessibleComponent: React.FC<Props> = props => {
-  const { canvasSchema } = props;
+  const { canvasSchema, handleEditTable, deleteSelectedItem } = props;
 
   return (
     <>
       <h1 id="canvas-title">Canvas</h1>
-      <CollectionListAccessible canvasSchema={canvasSchema} />
+      <CollectionListAccessible
+        canvasSchema={canvasSchema}
+        handleEditTable={handleEditTable}
+        deleteSelectedItem={deleteSelectedItem}
+      />
       <RelationListAccessible canvasSchema={canvasSchema} />
     </>
   );

diff --git a/src/pods/canvas/components/canvas-accessible/canvas-accessible.pod.tsx b/src/pods/canvas/components/canvas-accessible/canvas-accessible.pod.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
 import classes from './canvas-accessible.pod.module.css';
 import { CanvasAccessibleComponent } from './canvas-accessible.component';
-import { DatabaseSchemaVm } from '@/core/providers';
+import { DatabaseSchemaVm, TableVm } from '@/core/providers';
 
 interface CanvasAccessibleProps {
   canvasSchema: DatabaseSchemaVm;
+  handleEditTable: (table: TableVm) => void;
+  deleteSelectedItem: (tableId: string) => void;
 }
 export const CanvasAccessible: React.FC<CanvasAccessibleProps> = props => {
-  const { canvasSchema } = props;
+  const { canvasSchema, handleEditTable, deleteSelectedItem } = props;
 
   const canvasAccessibleRef = React.useRef<HTMLDivElement>(null);
 
@@ -27,7 +29,11 @@ export const CanvasAccessible: React.FC<CanvasAccessibleProps> = props => {
       ref={canvasAccessibleRef}
       aria-live="polite"
     >
-      <CanvasAccessibleComponent canvasSchema={canvasSchema} />
+      <CanvasAccessibleComponent
+        canvasSchema={canvasSchema}
+        handleEditTable={handleEditTable}
+        deleteSelectedItem={deleteSelectedItem}
+      />
     </section>
   );
 };
diff --git a/src/pods/canvas/components/canvas-accessible/components/collection-accessible.component.tsx b/src/pods/canvas/components/canvas-accessible/components/collection-accessible.component.tsx
@@ -6,17 +6,23 @@ import { TableRelationsAccessible } from './table-relations-accessible.component
 interface Props {
   table: TableVm;
   canvasSchema: DatabaseSchemaVm;
+  handleEditTable: (table: TableVm) => void;
+  deleteSelectedItem: (tableId: string) => void;
 }
 
 export const CollectionAccessible: React.FC<Props> = props => {
-  const { table, canvasSchema } = props;
+  const { table, canvasSchema, handleEditTable, deleteSelectedItem } = props;
 
   return (
     <>
       <h3>
         {table.tableName} collection
-        <button type="button">Edit {table.tableName} collection</button>
-        <button type="button">Delete {table.tableName} collection</button>
+        <button type="button" onClick={() => handleEditTable(table)}>
+          Edit {table.tableName} collection
+        </button>
+        <button type="button" onClick={() => deleteSelectedItem(table.id)}>
+          Delete {table.tableName} collection
+        </button>
       </h3>
       <h4>Fields for {table.tableName} collection</h4>
       <ul>

diff --git a/...s/canvas/components/canvas-accessible/components/collection-list-accessible.component.tsx b/...s/canvas/components/canvas-accessible/components/collection-list-accessible.component.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
 import { CollectionAccessible } from './collection-accessible.component';
-import { DatabaseSchemaVm } from '@/core/providers';
+import { DatabaseSchemaVm, TableVm } from '@/core/providers';
 
 interface Props {
   canvasSchema: DatabaseSchemaVm;
+  handleEditTable: (table: TableVm) => void;
+  deleteSelectedItem: (tableId: string) => void;
 }
 
 export const CollectionListAccessible: React.FC<Props> = props => {
-  const { canvasSchema } = props;
+  const { canvasSchema, handleEditTable, deleteSelectedItem } = props;
 
   return (
     <>
@@ -18,6 +20,8 @@ export const CollectionListAccessible: React.FC<Props> = props => {
           table={table}
           canvasSchema={canvasSchema}
           key={table.id}
+          handleEditTable={handleEditTable}
+          deleteSelectedItem={deleteSelectedItem}
         />
       ))}
     </>