#193 - Support for list/array fields

src/dashboardWebView/components/DataView/DataForm.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Ajv from 'ajv';
 import { useEffect, useState } from 'react';
 import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';
-import { AutoFields, AutoForm, ErrorsField, SubmitField } from 'uniforms-unstyled';
+import { AutoFields, AutoForm, ErrorsField } from 'uniforms-antd';
 import { ErrorBoundary } from '@sentry/react';
 import { DataFormControls } from './DataFormControls';
 
@@ -53,7 +53,9 @@ export const DataForm: React.FunctionComponent<IDataFormProps> = ({ schema, mode
           model={model || {}}
           onSubmit={onSubmit}
           ref={form => form?.reset()}>
-          <AutoFields />
+          <div className={`fields`}>
+            <AutoFields />
+          </div>
           
           <div className={`errors`}>
             <ErrorsField />

src/dashboardWebView/components/DataView/DataFormControls.tsx

@@ -12,7 +12,7 @@ export const DataFormControls: React.FunctionComponent<IDataFormControlsProps> =
   const { formRef } = useForm();
   
   return (
-    <div className='text-right'>
+    <div className='text-right border-t border-gray-200 dark:border-vulcan-300'>
       <SubmitField value={model ? `Update` : `Add`} />
       <Button className='ml-4' secondary onClick={() => {
         if (onClear) {

src/dashboardWebView/components/DataView/DataView.tsx

@@ -16,6 +16,8 @@ import { EmptyView } from './EmptyView';
 import { Container } from './SortableContainer';
 import { SortableItem } from './SortableItem';
 import { ChevronRightIcon } from '@heroicons/react/outline';
+import { ToastContainer, toast, Slide } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 export interface IDataViewProps {}
 
@@ -54,6 +56,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (props: React.P
     });
   }, [selectedData, dataEntries]);
 
+  
   const onSubmit = useCallback((data: any) => {
     const dataClone: any[] = Object.assign([], dataEntries);
     if (selectedIndex !== null && selectedIndex !== undefined) {
@@ -70,8 +73,19 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (props: React.P
       file: selectedData.file,
       entries: dataClone
     });
+
+    // Show toast message
+    toast.success("Wow so easy!", {
+      position: "top-right",
+      autoClose: 2000,
+      hideProgressBar: true,
+      closeOnClick: true,
+      pauseOnHover: false,
+      transition: Slide
+    });
   }, [selectedData, dataEntries, selectedIndex]);
 
+
   const onSortEnd = useCallback(({ oldIndex, newIndex }: any) => {
     if (!dataEntries || dataEntries.length === 0) {
       return null;
@@ -93,6 +107,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (props: React.P
     });
   }, [selectedData, dataEntries, selectedIndex]);
 
+
   useEffect(() => {
     Messenger.listen(messageListener);
 
@@ -105,7 +120,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (props: React.P
     <div className="flex flex-col h-full overflow-auto  inset-y-0">
       <Header settings={settings} />
 
-      <div className="relative w-full flex-grow max-w-7xl mx-auto border-b border-gray-200 dark:border-vulcan-300">
+      <div className="relative w-full flex-grow mx-auto border-b border-gray-200 dark:border-vulcan-300">
 
         <div className={`flex w-64 flex-col absolute inset-y-0`}>
 
@@ -149,8 +164,8 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (props: React.P
                             {
                               (dataEntries || []).map((dataEntry, idx) => (
                                 <SortableItem 
-                                  key={dataEntry[selectedData.labelField]}
-                                  value={dataEntry[selectedData.labelField]}
+                                  key={dataEntry[selectedData.labelField] || `entry-${idx}`}
+                                  value={dataEntry[selectedData.labelField] || `Entry ${idx+1}`}
                                   index={idx}
                                   crntIndex={idx}
                                   selectedIndex={selectedIndex}
@@ -197,6 +212,8 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (props: React.P
       </div>
 
       <SponsorMsg beta={settings?.beta} version={settings?.versionInfo} />
+
+      <ToastContainer />
     </div>
   );
 };

src/dashboardWebView/styles.css

@@ -53,9 +53,29 @@
       }
     }
 
+    .ant-form-item-has-error .ant-form-item-control-input {
+      @apply relative;
+    }
+    
+    .ant-form-item-has-error input {
+      @apply border border-red-400;
+    }
+
+    .ant-form-item-has-error .ant-form-item-children-icon {
+      @apply text-red-400 absolute right-1 top-2;
+
+      svg {
+        @apply w-4 h-4;
+      }
+    }
+
     .errors {
+      > div {
+        @apply border border-red-400 !important;
+      }
+      
       ul {
-        @apply list-disc mt-4 pl-6 pr-4 py-4 border border-red-300 bg-red-50 bg-opacity-50 text-vulcan-500;
+        @apply list-disc pl-6 pr-4 py-4 bg-opacity-50 text-vulcan-500;
       }
 
       li {
@@ -79,6 +99,12 @@
       }
     }
   }
+
+  .fields {}
+
+  .ant-list.ant-list-bordered {
+    @apply border-t border-gray-300;
+  }
 }
 
 .vscode-dark .autoform {
@@ -97,4 +123,8 @@
       }
     }
   }
+
+  .ant-list.ant-list-bordered {
+    @apply border-vulcan-100;
+  }
 }