Namespace switch

Author: nikitaeverywhere

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cache-visual-editor",
   "printableName": "Cache Visual Editor",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "Visual class editor for InterSystems Caché",
   "main": "index.js",
   "keywords": [
@@ -27,5 +27,8 @@
     "rimraf": "^2.5.2",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0"
+  },
+  "scripts": {
+    "gulp": "gulp"
   }
 }

source/cache/VisualEditor.REST.Informer.cls

@@ -10,10 +10,27 @@ XData UrlMap
 </Routes>
 }
 
+/// Returns all available namespaces for the current instance.
+ClassMethod getAllNamespacesList() As %ZEN.proxyObject
+{
+    set namespaces = ##class(%ZEN.proxyObject).%New()
+    set result = ##class(%ResultSet).%New("%SYS.Namespace:List")
+    do result.Execute()
+    while (result.Next()) {
+        set ns = ##class(%ZEN.proxyObject).%New()
+        set ns.remote = result.Get("Remote")
+        set ns.status = result.Get("Status")
+        do namespaces.%DispatchSetProperty(result.Get("Nsp"), ns)
+    }
+    return namespaces
+}
+
+///
 ClassMethod Init() As %Status
 {
     set data = ##class(%ZEN.proxyObject).%New()
     set data.namespace = $Namespace
+    set data.namespaces = ..getAllNamespacesList()
     do data.%ToJSON(, "o")
     quit $$$OK
 }
@@ -132,6 +149,10 @@ ClassMethod GetClassData(className As %String) As %ZEN.proxyObject
 /// This method lists all the classes on the current level.
 ClassMethod List() As %Status
 {
+    set ns = %request.Get("ns")
+    if (##class(%SYS.Namespace).Exists(ns)) {
+        znspace ns
+    }
     set baseLevel = $case(%request.Get("level"), "":"", :%request.Get("level") _ ".")
     set classes = ##class(%ResultSet).%New("%Dictionary.ClassDefinition:ClassIndex")
     do classes.Execute()

source/client/index.html

@@ -18,7 +18,11 @@
             <div class="header">
                 <div class="medium menu icon"></div>
                 <div class="medium back icon" id="backButton"></div>
-                <span class="title" id="topTitle">Class Editor</span>
+                <span class="title">
+                    <select id="topNamespace">
+                        <option>Loading...</option>
+                    </select><span id="topTitle"></span>
+                </span>
             </div>
             <div class="body" id="classBuilderBody">
 

source/client/js/classEditor/card.js

@@ -1,19 +1,14 @@
 import { loadLevel } from "./index";
-
-function block (className, element = "div") {
-    let el = document.createElement(element);
-    el.className = className;
-    return el;
-}
+import { block } from "../utils";
 
 function getPropertyBlock (prop) {
-    let item = block(`item`),
-        icon = block(`icon ${ prop["Private"] ? "private" : "public" }`),
-        text = block(`label`, `span`),
-        pName = block(`name`, `span`),
+    let item = block(`div`, `item`),
+        icon = block(`div`, `icon ${ prop["Private"] ? "private" : "public" }`),
+        text = block(`span`, `label`),
+        pName = block(`span`, `name`),
         type = prop["Type"] || prop["ReturnType"] || prop["MimeType"] || "",
-        pTypeText = type ? block("", "span") : null,
-        pType = type ? block(`type`, `span`) : null;
+        pTypeText = type ? block(`span`) : null,
+        pType = type ? block(`span`, `type`) : null;
     item.appendChild(icon);
     pName.textContent = prop["Name"];
     text.appendChild(pName);
@@ -29,11 +24,11 @@ function getPropertyBlock (prop) {
 
 function getBlock (key, data) {
 
-    let section = block(`section`), body, header;
+    let section = block(`div`, `section`), body, header;
     for (let prop in data[key]) {
-        header = block(`header`);
+        header = block(`div`, `header`);
         header.textContent = key;
-        body = block(`body`);
+        body = block(`div`, `body`);
         section.appendChild(header);
         section.appendChild(body);
         break;
@@ -51,10 +46,10 @@ function getBlock (key, data) {
  * @returns {HTMLElement}
  */
 export function getCardElement (data) {
-    let card = block(`card ${ data["_type"] }`),
-        head = block(`head`),
-        headIcon = block(`cardIcon ${ data["ClassType"] || "" }`),
-        header = block(`header`);
+    let card = block(`div`, `card ${ data["_type"] }`),
+        head = block(`div`, `head`),
+        headIcon = block(`div`, `cardIcon ${ data["ClassType"] || "" }`),
+        header = block(`div`, `header`);
 
     header.textContent = data["name"];
     head.appendChild(headIcon);

source/client/js/classEditor/index.js

@@ -1,6 +1,7 @@
 import { getList } from "../server";
 import { AutoGrid } from "../autoGrid";
 import { getCardElement } from "./card";
+import { block } from "../utils";
 
 var PATH = "",
     INITIALIZED = false,
@@ -12,19 +13,33 @@ let initCallbacks = [];
  * @type {AutoGrid}
  */
 let grid = onInit(() => grid = new AutoGrid(document.querySelector("#classBuilderBody")));
+
 /**
  * @type {HTMLElement}
  */
 let backButton = onInit(() => {
-
-    backButton = document.querySelector("#backButton");
-    backButton.addEventListener("click", () => {
-        if (PATH === "") return;
-        loadLevel(PATH.replace(/\.?[^\.]+$/, ""));
+        backButton = document.querySelector("#backButton");
+        backButton.addEventListener("click", () => {
+            if (PATH === "") return;
+            loadLevel(PATH.replace(/\.?[^\.]+$/, ""));
+        });
+    }),
+    topNamespace = onInit((data) => {
+        topNamespace = document.querySelector("#topNamespace");
+        while (topNamespace.firstChild)
+            topNamespace.removeChild(topNamespace.firstChild);
+        for (let ns in data["namespaces"]) {
+            let c = block("option", "", ns);
+            c.setAttribute("value", ns);
+            if (ns === data["namespace"]) c.setAttribute("selected", "true");
+            topNamespace.appendChild(c);
+        }
+        topNamespace.addEventListener("change", (e) => {
+            NAMESPACE = (e.target || e.srcElement).value;
+            loadLevel("");
+        });
     });
 
-});
-
 function orderData (data) {
     var sortable = [],
         sorted = {};
@@ -47,16 +62,23 @@ function setTitle (text) {
     document.querySelector("#topTitle").textContent = text;
 }
 
+/**
+ * This namespace should be trusted - setting wrong namespace will result as "no data".
+ */
+function setNamespace (namespace) {
+    topNamespace.textContent = namespace;
+}
+
 export function loadLevel (level) {
 
     PATH = level;
     grid.clear();
 
     if (PATH === "")
         backButton.style.display = "none";
-    setTitle(`${ NAMESPACE }${ PATH ? "." : "" }${ PATH }`);
+    setTitle(`${ PATH ? "." : "" }${ PATH }`);
 
-    getList("SAMPLES", PATH, (data) => {
+    getList(NAMESPACE, PATH, (data) => {
         grid.clear();
         if (PATH !== "")
             backButton.style.display = "";
@@ -79,9 +101,9 @@ export function onInit (callback) {
 
 export function init (data) {
 
-    NAMESPACE = data["namespace"] || "";
     INITIALIZED = true;
-    initCallbacks.forEach(cb => cb());
+    NAMESPACE = data["namespace"];
+    initCallbacks.forEach(cb => cb(data));
     initCallbacks = [];
 
     loadLevel(PATH);

source/client/js/utils.js

@@ -0,0 +1,13 @@
+/**
+ * Creates an element.
+ * @param {string} element - Tag Name
+ * @param {string} [className] - CSS class name
+ * @param {string} [textContent] - Optional content
+ * @returns {Element}
+ */
+export function block (element = "div", className,  textContent) {
+    let el = document.createElement(element || "div");
+    if (className) el.className = className;
+    if (textContent) el.textContent = textContent;
+    return el;
+}

source/client/scss/basic.scss

@@ -1,4 +1,5 @@
 @import "const";
+@import "mixins";
 
 html, body {
     margin: 0;
@@ -39,9 +40,35 @@ html, body {
         }
 
         > .title {
+
             font-size: 24px;
             font-weight: bold;
             vertical-align: middle;
+
+            #topNamespace {
+
+                background: none;
+                border: none;
+                font: inherit;
+                outline: none;
+                -webkit-appearance: none;
+                -moz-appearance: none;
+                appearance: none;
+                text-indent: 1px;
+                text-overflow: '';
+                cursor: pointer;
+                @include transition($defaultTransition);
+
+                &::-ms-expand {
+                    display: none;
+                }
+
+                &:hover {
+                    color: $colorP2;
+                }
+
+            }
+
         }
 
     }

source/client/scss/classBuilder/card.scss

@@ -13,18 +13,25 @@ $headerIconWidth: 32px;
         background: #fff;
         cursor: pointer;
 
-        &:hover {
-            background: $colorP1;
-            left: -2px;
-            top: -2px;
-            padding: $defaultPadding + 2px;
-        }
-
         > .head {
             > .cardIcon {
                 border: 1px solid black;
                 background: $colorP1;
+                @include transition($defaultTransition);
+            }
+        }
+
+        &:hover {
+
+            background: $colorP1;
+            padding-left: $defaultPadding + $defaultTransitionPadding;
+
+            > .head {
+                > .cardIcon {
+                    background: white;
+                }
             }
+
         }
 
     }
@@ -141,7 +148,7 @@ $headerIconWidth: 32px;
 
                 &:hover {
 
-                    padding-left: 4px;
+                    padding-left: $defaultTransitionPadding;
                     background: $colorP1;
                     border-radius: 3px;
 

source/client/scss/const.scss

@@ -5,6 +5,7 @@ $huge: 64px;
 
 $defaultMargin: 5px;
 $defaultPadding: 6px;
+$defaultTransitionPadding: 4px;
 $defaultShadow: 0 1px 3px rgba(0, 0, 0, .4);
 $defaultTransition: all .3s ease;