Improve dictionary action

electrikmilk · Apr 28, 2024 · 8fbd1b7 · 8fbd1b7
1 parent 4f57bea
commit 8fbd1b7
Show file tree

Hide file tree

Showing 3 changed files with 166 additions and 46 deletions.
diff --git a/src/actions/dictionary.ts b/src/actions/dictionary.ts
@@ -1,31 +1,31 @@
-import {renderActionHeader, renderTable} from "~/render";
+import {renderActionHeader, renderDictionary} from "~/render";
 import {actions} from "~/actions";
-import {renderValue} from "~/value";
+import {renderClass} from "~/element";
 
 interface DictionaryParameters {
     WFItems: WFItems
 }
 
-interface WFItems {
+export interface WFItems {
     Value: Value
 }
 
 interface Value {
     WFDictionaryFieldValueItems: DictionaryItem[]
 }
 
-interface DictionaryItem {
-    WFKey: Object,
+export interface DictionaryItem {
+    WFKey: object,
     WFItemType: Number,
     WFValue: WFValue,
 
-    Key: Object,
-    Type: Number,
+    Key: object,
+    Type: string,
     Value: WFValue,
 }
 
 interface WFValue {
-    Value: Object,
+    Value: object,
     WFSerializationType: string
 }
 
@@ -39,39 +39,7 @@ export default {
         const header = renderActionHeader(actions['dictionary']);
         action.appendChild(header);
 
-        for (let item of params.WFItems.Value.WFDictionaryFieldValueItems) {
-            item.Key = item.WFKey
-            item.Type = item.WFItemType
-            item.Value = item.WFValue
-            // @ts-ignore
-            delete item.WFKey;
-            // @ts-ignore
-            delete item.WFItemType;
-            // @ts-ignore
-            delete item.WFValue;
-        }
-
-        action.appendChild(renderTable(params.WFItems.Value.WFDictionaryFieldValueItems, function (key: any, value: any) {
-            if (key === 'Type') {
-                switch (value) {
-                    case 0:
-                        return 'Text';
-                    case 3:
-                        return 'Number';
-                    case 2:
-                        return 'Array';
-                    case 1:
-                        return 'Dictionary';
-                    case 4:
-                        return 'Boolean';
-                }
-            }
-
-            const valueElement = renderValue(value, key);
-            valueElement.classList.add('sp-unstyled-value');
-
-            return valueElement;
-        }));
+        action.appendChild(renderClass('table-container', renderDictionary(params.WFItems.Value.WFDictionaryFieldValueItems)));
 
         const br = document.createElement('br');
         action.appendChild(br);

diff --git a/src/render.ts b/src/render.ts
@@ -9,6 +9,8 @@ import {
 } from "~/main";
 import {ActionDefinition, actions, actionText} from "~/actions";
 import {renderValue} from "~/value";
+import {DictionaryItem} from "~/actions/dictionary";
+import {renderClass, renderElement, renderText} from "~/element";
 
 interface ActionParameters {
     [key: string]: any
@@ -345,11 +347,130 @@ export function renderInputs(shortcut: ShortcutData) {
     container.appendChild(card);
 }
 
-export function renderElement(tag: string, ...elements: HTMLElement[]) {
-    const element = document.createElement(tag);
-    element.append(...elements);
+function setDictionaryTypeStrings(items: Array<DictionaryItem>) {
+    for (let item of items) {
+        switch (item.WFItemType) {
+            case 0:
+                // @ts-ignore
+                item.Type = 'Text';
+                break;
+            case 3:
+                // @ts-ignore`
+                item.Type = 'Number';
+                break;
+            case 2:
+                // @ts-ignore
+                item.Type = 'Array';
+                break;
+            case 1:
+                // @ts-ignore
+                item.Type = 'Dictionary';
+                break;
+            case 4:
+                // @ts-ignore
+                item.Type = 'Boolean';
+        }
+
+        item.Key = item.WFKey;
+        item.Value = item.WFValue;
+        // @ts-ignore
+        delete item.WFKey;
+        // @ts-ignore
+        delete item.WFItemType;
+        // @ts-ignore
+        delete item.WFValue;
+
+        // @ts-ignore
+        if (item.Value.Value["WFDictionaryFieldValueItems"]) {
+            // @ts-ignore
+            item.Value.Value["WFDictionaryFieldValueItems"] = setDictionaryTypeStrings(item.Value.Value["WFDictionaryFieldValueItems"]);
+        }
+
+        if (item.Type === 'Array') {
+            // @ts-ignore
+            item.Value.Value = setDictionaryTypeStrings(item.Value.Value);
+        }
+    }
+
+    return items;
+}
+
+export function renderDictionary(data: Array<DictionaryItem>) {
+    const table = document.createElement('table');
+    const thead = document.createElement('thead');
+    thead.innerHTML = '<tr><th>Key</th><th>Type</th><th>Value</th></tr>';
+    table.appendChild(thead);
+
+    data = setDictionaryTypeStrings(data);
 
-    return element;
+    return renderElement('div', {},
+        table,
+        renderClass('treeview', ...renderTreeItems(data))
+    )
+}
+
+export function renderTreeItems(data: Array<DictionaryItem>) {
+    let items: HTMLElement[] = [];
+    for (let item of data) {
+        let children: HTMLElement[] = [];
+
+        const key = renderValue(item.Key)
+        key.classList.add('sp-unstyled-value');
+
+        let values = renderValue(item.Value);
+        if (item.Value) {
+            if (typeof item.Value.Value !== 'object') {
+                values = renderValue(item.Value.Value);
+            }
+        }
+        values.classList.add('sp-unstyled-value');
+
+        if (item.Type === 'Dictionary' || item.Type === 'Array') {
+            let items: DictionaryItem[] = [];
+
+            if (item.Type === 'Dictionary') {
+                // @ts-ignore
+                items = item.Value.Value["Value"]["WFDictionaryFieldValueItems"];
+            }
+            if (item.Type === 'Array') {
+                // @ts-ignore
+                items = item.Value.Value;
+            }
+
+            // @ts-ignore
+            children.push(...renderTreeItems(items));
+            // @ts-ignore
+            values = renderElement('div', {className: 'fade'}, renderText(`${items.length} items`));
+        }
+
+        items.push(renderTreeItem([
+            renderElement('div', {className: 'tree-row'},
+                key,
+                // @ts-ignore
+                renderElement('div', {className: 'fade'}, renderText(item.Type)),
+                values,
+            ),
+        ], ...children));
+    }
+
+    return items;
+}
+
+export function renderTreeItem(contents: HTMLElement[], ...children: HTMLElement[]): HTMLElement {
+    const toggle = renderClass('treeview-toggle');
+    toggle.onclick = (e) => {
+        console.log(e);
+    };
+
+    return renderClass('treeview-item',
+        renderClass('treeview-item-root',
+            toggle,
+            renderClass('treeview-item-content',
+                renderClass('treeview-item-label', ...contents)
+            )
+        ),
+        renderClass('treeview-item-children', ...children)
+    );
 }
 
 export function renderTable(data: Array<Object>, callback: Function) {

diff --git a/src/style.css b/src/style.css
@@ -351,9 +351,40 @@
     border-radius: 0;
     background: none;
     color: inherit;
-    font-weight: normal;
+    font-weight: 500 !important;
     padding: 0;
+    display: block
+}
+
+.sp-container .fade {
+    opacity: .7;
+}
+
+.sp-container .treeview-item-root {
+    padding: 0 0.1rem
+}
+
+.sp-container .tree-row {
+    display: flex;
+    gap: 0 1rem;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    font-size: 0.9rem
+}
+
+.sp-container .tree-row > div {
+    text-align: left;
+    flex: 1;
+}
+
+.sp-container .treeview-item-content {
     display: block;
+    width: 100%;
+}
+
+.sp-container .treeview-item:nth-child(even) {
+    background: #f4f5f5;
 }
 
 .sp-container .toggle {