feat(contacts): improve list an detailed view

unigraph-dev · Mar 12, 2022 · 17752fb · 17752fb
1 parent 4cdc63d
commit 17752fb
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/packages/default-packages/unigraph.contacts/executables/contactsListView.jsx b/packages/default-packages/unigraph.contacts/executables/contactsListView.jsx
@@ -23,19 +23,28 @@ return (
         <Typography variant="h5" sx={{ margin: '8px' }}>
             Contacts
         </Typography>
-        <div>
-            <TextField value={newName} onChange={(e) => setNewName(e.target.value)} placeholder="Name">
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+            <TextField
+                style={{ marginRight: '1rem' }}
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                placeholder="Name"
+            >
                 Name
             </TextField>
-            <TextField value={newEmail} onChange={(e) => setNewEmail(e.target.value)} placeholder="Email">
+            <TextField
+                style={{ marginRight: '1rem' }}
+                value={newEmail}
+                onChange={(e) => setNewEmail(e.target.value)}
+                placeholder="Email"
+            >
                 Email
             </TextField>
             <Button onClick={() => unigraph.addObject({ emails: [newEmail], name: newName }, '$/schema/contact')}>
                 Add Contact
             </Button>
-            {contacts.map((el) => (
-                <AutoDynamicView object={new UnigraphObject(el)} />
-            ))}
         </div>
+
+        <DynamicObjectListView items={contacts.map((el) => new UnigraphObject(el))} context={null} compact />
     </>
 );
diff --git a/packages/default-packages/unigraph.contacts/package.json b/packages/default-packages/unigraph.contacts/package.json
@@ -84,6 +84,12 @@
                         "package": "@mui/material",
                         "import": "Button",
                         "as": "Button"
+                    },
+                    {
+                        "env": "npm",
+                        "package": "@mui/material",
+                        "import": "Typography",
+                        "as": "Typography"
                     }
                 ]
             },
@@ -135,6 +141,12 @@
                         "package": "@mui/material",
                         "import": "Grid",
                         "as": "Grid"
+                    },
+                    {
+                        "env": "npm",
+                        "package": "@mui/material",
+                        "import": "Avatar",
+                        "as": "Avatar"
                     }
                 ]
             }