feat(tags): detailed view name editor

unigraph-dev · Apr 6, 2022 · f26a140 · f26a140
1 parent 10884b4
commit f26a140
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 10 deletions.
diff --git a/packages/unigraph-dev-explorer/src/examples/semantic/Tag.tsx b/packages/unigraph-dev-explorer/src/examples/semantic/Tag.tsx
@@ -1,18 +1,19 @@
-import { Chip } from '@mui/material';
+import { Chip, TextField, Button } from '@mui/material';
 import { LocalOffer } from '@mui/icons-material';
 import { unpad } from 'unigraph-dev-common/lib/utils/entityUtils';
 import Icon from '@mdi/react';
 import { mdiTagOutline } from '@mdi/js';
+import React from 'react';
 import { getContrast, NavigationContext } from '../../utils';
 import { DynamicViewRenderer } from '../../global.d';
 import { registerDynamicViews } from '../../unigraph-react';
 import { AutoDynamicView } from '../../components/ObjectView/AutoDynamicView';
+import { BacklinkView } from '../../components/ObjectView/BacklinkView';
 
+const getBgColor = (tag: any) => (tag?.color?.startsWith && tag.color.startsWith('#') ? tag.color : 'unset');
 export const Tag: DynamicViewRenderer = ({ data, callbacks }) => {
-    let tag = data;
-    const { uid } = data;
-    if (data._value) tag = unpad(data);
-    const bgc = tag?.color?.startsWith && tag.color.startsWith('#') ? tag.color : 'unset';
+    const [tag, setTag] = React.useState(() => (data._value ? unpad(data) : data));
+
     return (
         <Chip
             size="small"
@@ -21,24 +22,54 @@ export const Tag: DynamicViewRenderer = ({ data, callbacks }) => {
                     path={mdiTagOutline}
                     size={0.75}
                     style={{
-                        filter: bgc === 'unset' || getContrast(bgc) === 'black' ? 'unset' : 'invert(1)',
+                        filter:
+                            getBgColor(tag) === 'unset' || getContrast(getBgColor(tag)) === 'black'
+                                ? 'unset'
+                                : 'invert(1)',
                     }}
                 />
             }
             style={{
-                backgroundColor: bgc,
-                color: bgc.startsWith('#') ? getContrast(bgc) : 'unset',
+                backgroundColor: getBgColor(tag),
+                color: getBgColor(tag).startsWith('#') ? getContrast(getBgColor(tag)) : 'unset',
             }}
             variant="outlined"
             label={tag.name}
             onClick={() => {
                 console.log(data);
-                window.wsnavigator(`/library/backlink?uid=${uid}`);
+                window.wsnavigator(`/library/backlink?uid=${data.uid}`);
             }}
         />
     );
 };
 
+export const TagDetailed: DynamicViewRenderer = ({ data, callbacks }) => {
+    const [name, setName] = React.useState('');
+
+    React.useEffect(() => {
+        const tag = data._value ? unpad(data) : data;
+        setName(tag.name);
+    }, [data]);
+
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '8px', alignItems: 'left' }}>
+            <div style={{ display: 'flex', marginBottom: '8px', alignItems: 'left' }}>
+                <TextField value={name} onChange={(e) => setName(e.target.value)} placeholder="Tag Name">
+                    Tag Name
+                </TextField>
+                <Button
+                    onClick={async () => {
+                        window.unigraph.runExecutable('$/executable/rename-entity', { uid: data.uid, newName: name });
+                    }}
+                >
+                    Rename Tag
+                </Button>
+            </div>
+            <BacklinkView data={data} titleBar=" backlinks" />;
+        </div>
+    );
+};
+
 export const SemanticProperties = ({ data }: any) =>
     data?._value?.children?.['_value[']
         ? data?._value?.children?.['_value['].map((el: any) => <AutoDynamicView object={unpad(el._value)} />)

diff --git a/packages/unigraph-dev-explorer/src/examples/semantic/init.tsx b/packages/unigraph-dev-explorer/src/examples/semantic/init.tsx
@@ -4,14 +4,18 @@ import { BacklinkView } from '../../components/ObjectView/BacklinkView';
 import { Html } from './Html';
 import { InterfaceSemantic } from './InterfaceSemantic';
 import { Markdown } from './Markdown';
-import { Tag } from './Tag';
+import { Tag, TagDetailed } from './Tag';
 
 export const init = () => {
     registerDetailedDynamicViews({ '$/schema/html': { view: Html } });
     registerDynamicViews({ '$/schema/markdown': Markdown });
     registerDynamicViews({ '$/schema/tag': { view: Tag } });
     registerDynamicViews({ '$/schema/interface/semantic': InterfaceSemantic });
 
+    registerDetailedDynamicViews({
+        '$/schema/tag': TagDetailed,
+    });
+
     registerQuickAdder({
         tag: {
             adder: async (inputStr: string, preview = true) => {