[READY_TO_REVIEW]feature/#415 Accessibility displaying collection relations

src/main.tsx

@@ -5,7 +5,6 @@ import { ThemeProvider } from './core/providers/theme-provider/theme-provider.ts
 import './App.css';
 import { DeviceProvider } from './core/providers/index.ts';
 
-
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <ThemeProvider>

src/pods/canvas/components/canvas-accessible/canvas-accessible.component.tsx

@@ -12,7 +12,7 @@ export const CanvasAccessibleComponent: React.FC<Props> = props => {
   return (
     <>
       <h1 id="canvas-title">Canvas</h1>
-      <CollectionListAccessible collectionList={canvasSchema.tables} />
+      <CollectionListAccessible canvasSchema={canvasSchema} />
       <RelationListAccessible canvasSchema={canvasSchema} />
     </>
   );

src/pods/canvas/components/canvas-accessible/components/collection-accessible.component.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
-import { TableVm } from '@/core/providers';
 import { FieldList } from './field-list-accessible.component';
+import { TableVm, DatabaseSchemaVm } from '@/core/providers';
+import { TableRelationsAccessible } from './table-relations-accessible.component';
 
 interface Props {
   table: TableVm;
+  canvasSchema: DatabaseSchemaVm;
 }
 
 export const CollectionAccessible: React.FC<Props> = props => {
-  const { table } = props;
+  const { table, canvasSchema } = props;
 
   return (
     <>
@@ -20,14 +22,7 @@ export const CollectionAccessible: React.FC<Props> = props => {
       <ul>
         <FieldList fieldList={table.fields} listName={table.tableName} />
       </ul>
-      <h4>Relations for {table.tableName} collection:</h4>
-      <ul>
-        <li>
-          The "_id" field has a "1:M" relation with the "_id" field nested in
-          the author field of the book collection
-          <a href="#books">Go to books collection</a>
-        </li>
-      </ul>
+      <TableRelationsAccessible table={table} canvasSchema={canvasSchema} />
     </>
   );
 };

src/pods/canvas/components/canvas-accessible/components/collection-list-accessible.component.tsx

@@ -1,152 +1,25 @@
 import React from 'react';
 import { CollectionAccessible } from './collection-accessible.component';
-import { TableVm } from '@/core/providers';
+import { DatabaseSchemaVm } from '@/core/providers';
 
 interface Props {
-  collectionList: TableVm[];
+  canvasSchema: DatabaseSchemaVm;
 }
 
 export const CollectionListAccessible: React.FC<Props> = props => {
-  const { collectionList } = props;
+  const { canvasSchema } = props;
 
   return (
     <>
       <h2>Collections</h2>
 
-      {collectionList.map(table => (
-        <CollectionAccessible table={table} key={table.id} />
+      {canvasSchema.tables.map(table => (
+        <CollectionAccessible
+          table={table}
+          canvasSchema={canvasSchema}
+          key={table.id}
+        />
       ))}
-
-      {/* Code bellow only is just an example. We need do it mapping the real data
-      and with TableAccessible component. IMPORTANT: we don't need divs!*/}
-      <h3>
-        Reviews Collection
-        <button type="button">Edit reviews collection</button>
-        <button type="button">Delete reviews collection</button>
-      </h3>
-      <h4>Fields for Reviews Table</h4>
-      <ul>
-        <li aria-label="structure for fields">
-          <span>Name</span>
-          <span>Type</span>
-          <span>NN</span>
-        </li>
-
-        <li aria-label="review field">
-          <span>_id</span>
-          <span>objectID</span>
-          <span>NN</span>
-        </li>
-
-        <li aria-label="review field">
-          <span>rating</span>
-          <span>int</span>
-          <span></span>
-        </li>
-
-        <li aria-label="review field">
-          <span>comment</span>
-          <span>string</span>
-          <span></span>
-        </li>
-
-        <li aria-label="review field">
-          <span>book</span>
-          <span>objectId</span>
-          <span></span>
-        </li>
-      </ul>
-      <h4>Relations for reviews collection:</h4>
-      <ul>
-        <li>
-          Field "book" has a relation type "M:1" with field _id in Books
-          collection <a href="#books">Go to books collection</a>
-        </li>
-      </ul>
-      <h3>Books Collection</h3>
-      <button type="button">Edit books collection</button>
-      <button type="button">Delete books collection</button>
-      <h4>Fields for Books Collection</h4>
-      <ul>
-        <li aria-label="structure for fields">
-          <span>Name</span>
-          <span>Type</span>
-          <span>NN</span>
-        </li>
-
-        <li aria-label="books field">
-          <span>_id</span>
-          <span>objectID</span>
-          <span>NN</span>
-        </li>
-
-        <li aria-label="books field">
-          <span>ISBDN</span>
-          <span>string</span>
-        </li>
-
-        <li aria-label="books field">
-          <span>title</span>
-          <span>string</span>
-        </li>
-
-        <li aria-label="books field">
-          <span>publishDate</span>
-          <span>date</span>
-        </li>
-
-        <li aria-label="books field">
-          <span>authors</span>
-          <span>object array</span>
-
-          <ul>
-            <li aria-label="author nested field">
-              <span>_id</span>
-              <span>objectId</span>
-            </li>
-
-            <li aria-label="author nested field">
-              <span>name</span>
-              <span>string</span>
-            </li>
-          </ul>
-        </li>
-
-        <li aria-label="books field">
-          <span>topReviews</span>
-          <span>object array</span>
-
-          <ul>
-            <li aria-label="topReviews nested field">
-              <span>_id</span>
-              <span>objectId</span>
-            </li>
-
-            <li aria-label="topReviews nested field">
-              <span>rating</span>
-              <span>int</span>
-            </li>
-          </ul>
-        </li>
-
-        <li aria-label="books field">
-          <span>averageRating</span>
-          <span>date</span>
-        </li>
-      </ul>
-      <h4>Relations for books collection:</h4>
-      <ul>
-        <li>
-          Field "_id" has a relation type "1:M" with field book in Reviews
-          collection <a href="#reviews">Go to reviews collection</a>
-        </li>
-
-        <li>
-          id nested field of the author field has a relation type "M:1" with
-          field _id in Authors collection
-          <a href="#authors">Go to Authors collection</a>
-        </li>
-      </ul>
     </>
   );
 };

src/pods/canvas/components/canvas-accessible/components/table-relations-accessible-element-destination.component.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+  TableVm,
+  RelationVm,
+  DatabaseSchemaVm,
+  RelationType,
+} from '@/core/providers';
+import { findFieldNameAndParent } from './table-relations-accessible.business';
+
+interface Props {
+  relation: RelationVm;
+  destinationTable: TableVm;
+  canvasSchema: DatabaseSchemaVm;
+}
+
+export const TableRelationElementDestination: React.FC<Props> = props => {
+  const { relation, destinationTable, canvasSchema } = props;
+
+  const originTable = canvasSchema.tables.find(
+    table => table.id === relation.fromTableId
+  );
+  // Defensive Programming
+  if (!originTable) return <></>;
+
+  const originField = findFieldNameAndParent(
+    originTable.fields,
+    relation.fromFieldId
+  );
+
+  const destinationField = findFieldNameAndParent(
+    destinationTable.fields,
+    relation.toFieldId
+  );
+
+  const getRelationTypeDirecction = (type: RelationType) => {
+    switch (type) {
+      case '1:M':
+        return 'M:1';
+      case 'M:1':
+        return '1:M';
+      default:
+        return type;
+    }
+  };
+
+  return originField && destinationField ? (
+    <li>
+      {destinationField.parentName
+        ? `${destinationField.fieldName} nested field of the ${destinationField.parentName} has a relation type ${getRelationTypeDirecction(relation.type)} with the field ${originField.fieldName} in the ${originTable.tableName} collection`
+        : `${destinationField.fieldName} field has a relation type ${getRelationTypeDirecction(relation.type)} with the field ${originField.fieldName} in the ${originTable.tableName} collection`}
+    </li>
+  ) : null;
+};

src/pods/canvas/components/canvas-accessible/components/table-relations-accessible-element-origin.component.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { TableVm, RelationVm, DatabaseSchemaVm } from '@/core/providers';
+import { findFieldNameAndParent } from './table-relations-accessible.business';
+
+interface Props {
+  relation: RelationVm;
+  originTable: TableVm;
+  canvasSchema: DatabaseSchemaVm;
+}
+
+export const TableRelationElementOrigin: React.FC<Props> = props => {
+  const { relation, originTable, canvasSchema } = props;
+
+  const destinationTable = canvasSchema.tables.find(
+    table => table.id === relation.toTableId
+  );
+  // Defensive Programming
+  if (!destinationTable) return <></>;
+
+  const originField = findFieldNameAndParent(
+    originTable.fields,
+    relation.fromFieldId
+  );
+
+  const destinationField = findFieldNameAndParent(
+    destinationTable.fields,
+    relation.toFieldId
+  );
+
+  return originField && destinationField ? (
+    <li>
+      {destinationField.parentName
+        ? `${destinationField.fieldName} nested field of the ${destinationField.parentName} has a relation type ${relation.type} with the field ${originField.fieldName} in the ${originTable.tableName} collection`
+        : `${destinationField.fieldName} field has a relation type ${relation.type} with the field ${originField.fieldName} in the ${originTable.tableName} collection`}
+    </li>
+  ) : null;
+};