From 6a0509927d171b9d6cdd898c5485271f7db210d2 Mon Sep 17 00:00:00 2001
From: Sophia Xu <sophia.xu@mail.mcgill.ca>
Date: Sun, 2 Jan 2022 19:17:55 -0500
Subject: [PATCH] feat(notes): allow attaching notes everywhere

---
 .../entities/add_note_context_menu.json             |  7 +++++++
 .../unigraph.notes/executables/attachNote.js        | 10 ++++++++++
 .../default-packages/unigraph.notes/package.json    | 10 +++++++++-
 .../ObjectView/DefaultObjectContextMenu.tsx         | 13 +++++++++++--
 .../src/examples/calendar/Calendar.tsx              |  5 +++++
 5 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 packages/default-packages/unigraph.notes/entities/add_note_context_menu.json
 create mode 100644 packages/default-packages/unigraph.notes/executables/attachNote.js

diff --git a/packages/default-packages/unigraph.notes/entities/add_note_context_menu.json b/packages/default-packages/unigraph.notes/entities/add_note_context_menu.json
new file mode 100644
index 00000000..6d065fba
--- /dev/null
+++ b/packages/default-packages/unigraph.notes/entities/add_note_context_menu.json
@@ -0,0 +1,7 @@
+{
+    "type": { "unigraph.id": "$/schema/context_menu_item" },
+    "name": "Attach note to object",
+    "item_type": {"unigraph.id": "$/schema/any"},
+    "on_click": {"unigraph.id": "$/package/unigraph.notes/0.0.1/executable/attach-note"},
+    "icon": "%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M5 19V5H12V12H19V13C19.7 13 20.37 13.13 21 13.35V9L15 3H5C3.89 3 3 3.89 3 5V19C3 20.1 3.89 21 5 21H13.35C13.13 20.37 13 19.7 13 19H5M14 4.5L19.5 10H14V4.5M23 18V20H20V23H18V20H15V18H18V15H20V18H23Z' /%3E%3C/svg%3E"
+}
\ No newline at end of file
diff --git a/packages/default-packages/unigraph.notes/executables/attachNote.js b/packages/default-packages/unigraph.notes/executables/attachNote.js
new file mode 100644
index 00000000..b0a33512
--- /dev/null
+++ b/packages/default-packages/unigraph.notes/executables/attachNote.js
@@ -0,0 +1,10 @@
+const { uid } = context.params;
+
+const newNote = (await unigraph.addObject({
+    text: {
+        _value: '',
+        type: { 'unigraph.id': '$/schema/markdown' },
+    },
+}, '$/schema/note_block'))[0];
+unigraph.runExecutable('$/executable/add-item-to-list', { where: uid, item: newNote });
+window?.wsnavigator?.(`/library/object?uid=${newNote}&viewer=${'dynamic-view-detailed'}&type=$/schema/note_block`);
diff --git a/packages/default-packages/unigraph.notes/package.json b/packages/default-packages/unigraph.notes/package.json
index 2969cc56..64bdaf0c 100644
--- a/packages/default-packages/unigraph.notes/package.json
+++ b/packages/default-packages/unigraph.notes/package.json
@@ -11,7 +11,8 @@
         ],
         "package_name": "unigraph.notes",
         "entities": [
-            {"id": "section_daily_notes", "src": "entities/daily_notes.json"}
+            {"id": "section_daily_notes", "src": "entities/daily_notes.json"},
+            {"id": "add_note_context_menu", "src": "entities/add_note_context_menu.json"}
         ],
         "executables": [
             {
@@ -24,6 +25,13 @@
                     {"env": "npm", "package": "@material-ui/core", "import": "Button", "as": "Button"}
                 ],
                 "editable": true
+            },
+            {
+                "id": "attach-note",
+                "env": "client/js",
+                "src": "executables/attachNote.js",
+                "editable": true,
+                "name": "Attach note to an item"
             }
         ]
     }
diff --git a/packages/unigraph-dev-explorer/src/components/ObjectView/DefaultObjectContextMenu.tsx b/packages/unigraph-dev-explorer/src/components/ObjectView/DefaultObjectContextMenu.tsx
index 7150ff9f..fd48b1d3 100644
--- a/packages/unigraph-dev-explorer/src/components/ObjectView/DefaultObjectContextMenu.tsx
+++ b/packages/unigraph-dev-explorer/src/components/ObjectView/DefaultObjectContextMenu.tsx
@@ -219,12 +219,21 @@ export const onUnigraphContextMenu = (
                     contextUid?: string,
                 ) {
                     return (
-                        <MenuItem onClick={() => {
+                        <MenuItem
+                            style={{ paddingTop: '2px', paddingBottom: '2px' }}
+                            onClick={() => {
                             onfire();
                             onDynamicContextMenu(el, uid, object, callbacks, contextUid);
                         }}
                         >
-                            {(new UnigraphObject(el)).get('name').as('primitive') || ''}
+                            {(new UnigraphObject(el)).get('icon')?.as('primitive') ? (
+                                <ListItemIcon style={{
+                                minWidth: '19px', minHeight: '19px', marginRight: '12px', backgroundImage: `url("data:image/svg+xml,${(new UnigraphObject(el)).get('icon')?.as('primitive')}")`, opacity: 0.54,
+                            }}
+                                />
+                        )
+                            : []}
+                            <ListItemText>{(new UnigraphObject(el)).get('name').as('primitive') || ''}</ListItemText>
                         </MenuItem>
                     );
                 }),
diff --git a/packages/unigraph-dev-explorer/src/examples/calendar/Calendar.tsx b/packages/unigraph-dev-explorer/src/examples/calendar/Calendar.tsx
index 14ab0369..11d0b954 100644
--- a/packages/unigraph-dev-explorer/src/examples/calendar/Calendar.tsx
+++ b/packages/unigraph-dev-explorer/src/examples/calendar/Calendar.tsx
@@ -23,6 +23,11 @@ export function CalendarEvent({ data, callbacks }: any) {
                     <Typography variant="body2" style={{ color: 'gray' }}>{data.get('location').as('primitive')}</Typography>
                 </div>
                 <AutoDynamicView object={new UnigraphObject(data.get('time_frame')._value)} callbacks={callbacks} noDrag noDrop inline />
+                <div style={{ display: data?._value?.children?.['_value[']?.map ? '' : 'none', marginTop: '4px' }}>
+                    {data?._value?.children?.['_value[']?.map
+                    ? data._value.children['_value['].map((it: any) => <AutoDynamicView object={new UnigraphObject(it._value)} callbacks={callbacks} inline style={{ verticalAlign: 'middle' }} />)
+                    : []}
+                </div>
             </div>
         </div>
     );