saving

src/App.js

@@ -109,8 +109,16 @@ const VirtualScroll = ({options, gridHeight, count, rowHeight, components:Compon
 
     const [edit, setEdit] = useState({field: null, record: null})
 
+    useEffect(() => setEdit({field: null, record: null}), [records])
+
     const timeout = useRef(0)
 
+    const fields = records && records[0] && records[0].constructor.fields
+
+    const onlyInputs = records && records[0] && records[0].constructor.inputs.filter(input => !fields.find(field => field.name === input.name))
+
+
+
     return (
     <div className='GridViewport' 
          onScroll={e => {
@@ -129,14 +137,28 @@ const VirtualScroll = ({options, gridHeight, count, rowHeight, components:Compon
              style={{height: count*rowHeight, minHeight: count*rowHeight, maxHeight: count*rowHeight}} >
         { /*      <div style={{height: skip*rowHeight}} /> */ }
             {records && records.map((record,i) =><React.Fragment key={i}> 
-                                            <Row options={options} selected={edit.record === record}>
-                                                {record.constructor.fields.map(field => 
-                                                    <Cell record={record} key={field.name} field={field} options={options} onClick={() => setEdit({record, field})}
-                                                            selected={edit.record === record} >
-                                                        {record[field.name]}
+                                            <Row options={options} selected={edit.record && edit.record._id === record._id}>
+                                                {fields.map(field => 
+                                                    <Cell onChange={({target: {value}}) => (setEdit({field, record: {...edit.record, [field.name]: value}}))} record={record} key={field.name} field={field} options={options} 
+                                                                onClick={() => setEdit({record: {...record}, field})}
+                                                            selected={edit.record && edit.record._id === record._id} >
+                                                        {(edit.record && edit.record._id === record._id ? edit.record: record)[field.name]}
                                                     </Cell>)}
                                             </Row>
-                {edit.record === record && <Row selected>additional inputs and save/cancel</Row>}
+                {edit.record && edit.record._id === record._id && 
+                    <Row selected>
+                        {onlyInputs.map(input => 
+                            <Cell record={record} key={input.name} field={input} options={options} 
+                                selected>
+                                {undefined}
+                            </Cell>
+                        )}
+                        <button style={{width:"100%"}} onClick={() => {
+                            const {_id, ...copy} = edit.record
+                            Object.assign(record,copy)
+                            record.save()
+                        }}>Save</button>
+                    </Row>}
                 </React.Fragment>
             )}
         {/*            <div style={{height: (count - skip - records.length)*rowHeight}} /> */ }
@@ -217,14 +239,14 @@ const ModelView = ({model, options, components:Components={Search, Count, GridHe
 
 const ObjectShortView = ({children}) => {
     const [record, setRecord] = useState(children)
-    if ('then' in children){
+    if (children && typeof children === 'object' && 'then' in children){
         console.log('load')
         children.then(child => setRecord({...child}))
     }
     if (children._id){
         return (
         <div className="ObjectShortView">
-            {record.name || record.key || record._id}
+            {record.name || record.key || record.login || record.originalFileName || record._id}
         </div>
         )
     }
@@ -259,7 +281,7 @@ const defaultAdminOptions =
         edit: {
             formatters:{
                 ID: ({children}) => <b>{children && children.slice(-6).toUpperCase()}</b>,
-                String: ({children, ...props}) => <textarea value={children} {...props}/>,
+                String: ({children, field, ...props}) => <textarea placeholder={field.name} value={children} {...props}/>,
                 Int: ({children, ...props}) => <input type='number' value={children} {...props}/>,
                 Float: ({children, ...props}) => <input type='number' value={children} {...props}/>,
                 Object: ObjectShortView,