image preview

src/App.css

@@ -44,6 +44,7 @@
     padding: 10px;
     text-align: center;
     font-size: 1.1em;
+    /*text-transform: uppercase;*/
 }
 
 .Row {
@@ -66,9 +67,9 @@
     width: 100%;
     max-width: 100%;
     overflow: auto;
-    border: 1px solid #BBB;
+    border: 1px solid #EEE;
     padding: 10px;
-    text-align: center;
+    text-align: left;
     font-size: 0.9em;
     
 }
@@ -124,7 +125,21 @@ input.Search {
     border-radius: 5px;
     background-color: #DDD;
     font-size: 1.2em;
-    overflow: hidden
+    overflow: hidden;
+    text-align: center;
+}
+
+.ImageRelation {
+    font-size: 1.2em;
+    display: flex;
+    align-items: center;
+}
+
+
+.ImageRelation img{
+    max-height: 50px;
+    max-width: 100px;
+    padding-right: 20px;
 }
 
 tr {
@@ -151,7 +166,7 @@ td {
 }
 
 div[class$="-menu"]{
-    z-index: 1000;
+    z-index: 10000;
     position: relative;
 }
 

src/App.js

@@ -10,7 +10,14 @@ import createModels2 from './front-models'
 
 let gql = new GraphQLClient("/graphql", {headers: localStorage.authToken ? {Authorization: 'Bearer '+localStorage.authToken} : {}})
 
-const shortName = record => <>{(record && record.name) || record.key || record.login || record.originalFileName || record._id}</>
+const ShortName = ({record, options}) => { 
+    if (record && record.constructor)
+        if (options.view.relations[record.constructor.name]){
+            const Formatter = options.view.relations[record.constructor.name]
+            return <Formatter options={options}>{record}</Formatter>
+    }
+    return (<>{(record && record.name) || record.key || record.login || record.originalFileName || record._id}</>)
+}
 
 
 
@@ -268,17 +275,16 @@ const ModelView = ({model, models={}, options, components:Components={Search, Co
 }
 
 
-const ObjectShortView = ({children}) => {
+const ObjectShortView = ({children, options}) => {
     const [record, setRecord] = useState(children)
     if (!children) return <></>
     if (typeof children === 'object' && 'then' in children){
-        console.log('load')
         children.then(child => setRecord({...child}))
     }
     if (typeof children === 'object' && children._id){
         return (
         <div className="ObjectShortView">
-            {shortName(record)}
+            <ShortName record={record} options={options}/>
         </div>
         )
     }
@@ -291,16 +297,18 @@ const ObjectShortView = ({children}) => {
     }
 }
 
-const ForeignAutocomplete = ({models={}, children:value, onChange, model, exclude=[]}) => {
+const ForeignAutocomplete = ({models={}, children:value, onChange, model, options={}}) => {
     return (
          <Select cacheOptions 
                 defaultOptions 
                 placeholder={model.name}
                 loadOptions={async search => {
                     const suggesions = await model.find(searchQueryBuilder(search, model)) || []
-                    return [{_id: null, key: 'REMOVE'}, ...suggesions].map((record) => ({value: record._id, label: shortName(record), record}))
+                    return [{_id: null, key: 'REMOVE'}, ...suggesions]//.filter(record => !exclude.find(e => (e === record._id) || (e._id === record._id)))
+                        .map((record) => ({value: record._id, label: <ShortName record={record} options={options}/>, record}))
+            
                 }}
-                value={value && {value: value._id, label: shortName(value), record: value}}
+                value={value && {value: value._id, label: <ShortName record={value} options={options}/>, record: value}}
                 onChange={(obj) => {
                     onChange(obj.record._id ? obj.record : null)
                 }}
@@ -336,12 +344,15 @@ const defaultAdminOptions =
                 ID: ({children}) => <b>{children && children.slice(-6).toUpperCase()}</b>,
                 String: ({children}) => <>{children && children.length > 100 ? children.slice(0,100) + '...' : children}</>,
                 Object: ObjectShortView,
-                Array: ({children}) => <>{children.map(child => <ObjectShortView children={child} />)}</>
+                Array: ({children, ...props}) => <>{children.map(child => <ObjectShortView children={child} {...props}/>)}</>
             },
             fields:{
                 createdAt: ({children}) => <>{new Date(+children).toISOString()}</> ,
                 url: ({children}) => <a href={children}>{children}</a> 
             },
+            relations: {
+                Image: ({children}) => <span className="ImageRelation"><img  src={children.url}/>{children.originalFileName}</span>
+            },
             models: {
 
             }
@@ -354,7 +365,7 @@ const defaultAdminOptions =
                 Int: ({children, ...props}) => <input type='number' value={children} {...props}/>,
                 Float: ({children, ...props}) => <input type='number' value={children}  {...props} onChange={(e) => props.onChange(+e.target.value)}/>,
                 Object: ({children, options, model, models, ...props}) => {
-                    return model.fields[0].name === '_id' ? <ObjectShortEdit children={children}  model={model} {...props}/> : <EditForm model={model} models={models} record={children} options={options} />
+                    return model.fields[0].name === '_id' ? <ObjectShortEdit children={children} options={options} model={model} {...props}/> : <EditForm model={model} models={models} record={children} options={options} />
                 },
                 Array: ({children, onChange, model, ...props}) => {
                     const newItem = !model || (model && model.fields[0].name === '_id') ? null : new model
@@ -365,13 +376,16 @@ const defaultAdminOptions =
                                         onChange(arrayMove(children, newIndex, oldIndex))
                                 }}>{children.map((child, i) => 
                                     <SortableCell onDelete={() => onChange(children.filter((item, j) => j !== i))} 
-                                                  onAdd={() => onChange([...children.slice(0, i),newItem,...children.slice(i)])}  //TODO: fix addition of new nested form 
+                                                  onAdd={() => onChange([...children.slice(0, i),newItem,...children.slice(i)])}  
                                                 index={i} key={(child && (child._id || child.key)) || i} model={model} {...props} children={child} selected 
                                             onCh={data => {
-                                                                    const copy = [...children]
-                                                                    debugger;
-                                                                    copy[i] = (data && data.target && data.target.value) || data
-                                                                    onChange(copy)
+                                                            data = (data && data.target && data.target.value) || data
+                                                            console.log(data, children)
+                                                            if (!children.find(record => record && record._id === data._id)){
+                                                                const copy = [...children]
+                                                                copy[i] = data
+                                                                onChange(copy)
+                                                            }
                                             }}
                                         />)}
                         </SortableContainer>
@@ -382,6 +396,7 @@ const defaultAdminOptions =
                 createdAt: ({children}) => <input value={new Date(+children).toISOString()} />,
                 url: ({children}) => <a href={children}>{children}</a> 
             },
+            
             models: {
 
             }