Merge pull request #419 from Lemoncode/feature/#389-Canvas_Accessible…

…-iterate_over_fields

Create field-accessible and field-list-accessible component in Canvas…

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

@@ -1,12 +1,13 @@
 import React from 'react';
 import { TableVm } from '@/core/providers';
+import { FieldList } from './field-list-accessible.component';
 
 interface Props {
   table: TableVm;
 }
+
 export const CollectionAccessible: React.FC<Props> = props => {
   const { table } = props;
-  //Todo: #389 Canvas Accessible-iterate over fields(https://github.com/Lemoncode/mongo-modeler/issues/389)
 
   return (
     <>
@@ -17,27 +18,7 @@ export const CollectionAccessible: React.FC<Props> = props => {
       </h3>
       <h4>Fields for {table.tableName} collection</h4>
       <ul>
-        <li aria-label="structure for fields">
-          <span>Name</span>
-          <span>Type</span>
-          <span>NN</span>
-        </li>
-
-        <li aria-label="authors field">
-          <span>_id</span>
-          <span>ObjectID</span>
-          <span>NN</span>
-        </li>
-
-        <li aria-label="authors field">
-          <span>name</span>
-          <span>String</span>
-        </li>
-
-        <li aria-label="authors field">
-          <span>bio</span>
-          <span>String</span>
-        </li>
+        <FieldList fieldList={table.fields} listName={table.tableName} />
       </ul>
       <h4>Relations for {table.tableName} collection:</h4>
       <ul>

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

@@ -14,7 +14,7 @@ export const CollectionListAccessible: React.FC<Props> = props => {
       <h2>Collections</h2>
 
       {collectionList.map(table => (
-        <CollectionAccessible table={table} />
+        <CollectionAccessible table={table} key={table.id} />
       ))}
 
       {/* Code bellow only is just an example. We need do it mapping the real data

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { FieldVm } from '@/core/providers';
+import { FieldList } from './field-list-accessible.component';
+
+interface Props {
+  field: FieldVm;
+  listName: string;
+}
+
+export const Field: React.FC<Props> = props => {
+  const { field, listName } = props;
+
+  const renderNNElement = (NN?: boolean) => {
+    if (NN) return <span>NN</span>;
+  };
+
+  const renderChildrenElement = (name: string, children?: FieldVm[]) => {
+    if (children)
+      return <FieldList fieldList={children} listName={`${name} nested`} />;
+  };
+
+  return (
+    <li aria-label={`${listName} field`}>
+      <span>{field.name}</span>
+      <span>{field.type}</span>
+      {renderNNElement(field.isNN)}
+      {renderChildrenElement(field.name, field.children)}
+    </li>
+  );
+};

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { FieldVm } from '@/core/providers';
+import { Field } from './field-accessible.component';
+
+interface Props {
+  fieldList: FieldVm[];
+  listName: string;
+}
+
+export const FieldList: React.FC<Props> = props => {
+  const { fieldList, listName } = props;
+
+  return (
+    <ul>
+      {fieldList.map(field => (
+        <Field field={field} listName={listName} key={field.id} />
+      ))}
+    </ul>
+  );
+};