feat(contacts): detailed contacts view

unigraph-dev · Dec 21, 2021 · 0ef017b · 0ef017b
1 parent c40903f
commit 0ef017b
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 3 deletions.
diff --git a/packages/default-packages/unigraph.contacts/executables/contactView.jsx b/packages/default-packages/unigraph.contacts/executables/contactView.jsx
@@ -9,6 +9,8 @@ return <div style={{display: "flex", alignItems: "center"}}>
     <ListItemText>
         <Typography>{name || data['_value']['emails']['_value['][0]['_value.%']}</Typography>
         <div style={{ display: "inline", alignItems: "center", overflowWrap: "break-word", color: "gray" }}>
+            {data?.['_value']?.['children']?.['_value[']?.map ?
+            <div style={{display: "inline", marginRight: "8px"}}>{data['_value']['children']['_value['].map((it) => <AutoDynamicView object={new UnigraphObject(it['_value'])} callbacks={callbacks} inline style={{verticalAlign: "middle"}}/>)}</div> : []}
             <p style={{ fontSize: "0.875rem", display: "contents" }}>{data.get('emails')['_value['][0]['_value.%']}</p>
         </div>
     </ListItemText>

diff --git a/packages/default-packages/unigraph.contacts/executables/contactViewDetailed.jsx b/packages/default-packages/unigraph.contacts/executables/contactViewDetailed.jsx
@@ -1 +1,23 @@
-return "WIP"
+const { data, callbacks } = params;
+
+return <div>
+    <Card variant="outlined" style={{margin: "16px", padding: "16px"}}>
+        <div style={{display: "flex", marginBottom: "8px", alignItems: "center"}}>
+            <Avatar style={{marginRight: "16px"}} alt={"profile image of " + data.get('name')?.as('primitive')} src={data.get('profile_image')?.as('primitive')}></Avatar>
+            <Typography variant="h5">{data.get('name')?.as('primitive')}</Typography>
+        </div>
+        <Typography style={{marginBottom: "8px"}}>
+            <span style={{color: "gray", marginRight: "8px"}}>Primary Email</span>
+            {data?.['_value']?.['emails']?.['_value[']?.[0]?.['_value.%'] || 'N/A'}
+        </Typography>
+        <Typography>
+            <span style={{color: "gray", marginRight: "8px"}}>Remarks</span>
+            {data?.['_value']?.['children']?.['_value[']?.map ?
+            <div style={{display: "inline", marginRight: "8px"}}>{data['_value']['children']['_value['].map((it) => <AutoDynamicView object={new UnigraphObject(it['_value'])} callbacks={callbacks} inline style={{verticalAlign: "middle"}}/>)}</div> : []}
+        </Typography>
+    </Card>
+    <div style={{margin: "16px"}}>
+        <Typography>Backlinks</Typography>
+        <BacklinkView data={data} hideHeader/>
+    </div>
+</div>
diff --git a/packages/default-packages/unigraph.contacts/package.json b/packages/default-packages/unigraph.contacts/package.json
@@ -52,7 +52,8 @@
                 {"env": "npm", "package": "@material-ui/core", "import": "TextField", "as": "TextField"},
                 {"env": "npm", "package": "@material-ui/core", "import": "Button", "as": "Button"},
                 {"env": "npm", "package": "@material-ui/core", "import": "MenuItem", "as": "MenuItem"},
-                {"env": "npm", "package": "@material-ui/icons", "import": "MoreVert", "as": "MoreVert"}
+                {"env": "npm", "package": "@material-ui/icons", "import": "MoreVert", "as": "MoreVert"},
+                {"env": "npm", "package": "@material-ui/core", "import": "Grid", "as": "Grid"}
             ]
         }],
         "entities": [{

diff --git a/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx b/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx
@@ -11,7 +11,7 @@ import { onUnigraphContextMenu } from './DefaultObjectContextMenu';
 import { StringObjectViewer } from './DefaultObjectView';
 import { getSubentities, isStub, SubentityDropAcceptor } from './utils';
 
-export const AutoDynamicView = ({ object, callbacks, component, attributes, inline, allowSubentity, allowSemantic, style, noDrag, noDrop, noContextMenu, subentityExpandByDefault }: AutoDynamicViewProps) => {
+export const AutoDynamicView = ({ object, callbacks, component, attributes, inline, allowSubentity, allowSemantic = true, style, noDrag, noDrop, noContextMenu, subentityExpandByDefault }: AutoDynamicViewProps) => {
     if (!callbacks) callbacks = {};
     allowSubentity = allowSubentity === true;
 

diff --git a/packages/unigraph-dev-explorer/src/components/ObjectView/DynamicComponentView.tsx b/packages/unigraph-dev-explorer/src/components/ObjectView/DynamicComponentView.tsx
@@ -8,6 +8,7 @@ import { AutoDynamicViewDetailed } from "./AutoDynamicViewDetailed";
 import { DynamicObjectListView } from "./DynamicObjectListView";
 import { byElementIndex } from "unigraph-dev-common/lib/utils/entityUtils";
 import { onUnigraphContextMenu } from "./DefaultObjectContextMenu";
+import { BacklinkView } from "./BacklinkView";
 
 export const globalImports = {
     "HelloWorld": () => <p>Hello world!!!</p>,
@@ -19,6 +20,7 @@ export const globalImports = {
     "getRandomInt": getRandomInt,
     "byElementIndex": byElementIndex,
     "onUnigraphContextMenu": onUnigraphContextMenu,
+    "BacklinkView": BacklinkView
 }
 
 export const DynamicComponentView: DynamicViewRenderer = ({data, callbacks}) => {