feat: add search feature, use divaservices-utils

Author: pyphilia

package.json

@@ -21,6 +21,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.10.2",
     "ajv": "^6.10.2",
     "bootstrap": "^4.3.1",
+    "divaservices-utils": "https://github.com/pyphilia/divaservices-utils",
     "dotenv": "^8.1.0",
     "file-saver": "^2.0.2",
     "jointjs": "^3.0.4",

services.xml

@@ -63,7 +63,7 @@ <h1 class="col-3">Name</h1>
 
         <toolsbar :scale="scale"  :paper="paper" :selected-elements="selectedElements"></toolsbar>
 
-        
+        <search-elements ref="searchElements"></search-elements>
     </div>
 </div>
 </div>

src/index.html

@@ -4,15 +4,13 @@ import { mapActions, mapState } from "vuex";
 import plugins from "./plugins";
 import components from "./layout/components";
 import store from "./store/store";
+import { Constants } from "divaservices-utils";
+const { Types } = Constants;
 import { initWebservices } from "./constants/globals";
 import { initPaperEvents } from "./events/paperEvents";
 import { getElementByBoxId, getLinkBySourceTarget } from "./layout/utils";
 import { highlightSelection, unHighlight } from "./store/modules/highlight";
-import {
-  Inputs,
-  CATEGORY_SERVICE,
-  CATEGORY_DATATEST
-} from "./constants/constants";
+import { CATEGORY_SERVICE, CATEGORY_DATATEST } from "./constants/constants";
 import { addElementByName, addLinkFromLink } from "./elements/addElement";
 import { deleteElementByBoxId, deleteLink } from "./elements/deleteElement";
 import { resizeElements } from "./elements/resizeElement";
@@ -191,8 +189,8 @@ export let app;
             "defaultParams"
           );
           for (const { boxId, defaultParams } of difference) {
-            setSelectValueInElement(boxId, defaultParams[Inputs.SELECT.type]);
-            setInputValueInElement(boxId, defaultParams[Inputs.NUMBER.type]);
+            setSelectValueInElement(boxId, defaultParams[Types.SELECT.type]);
+            setInputValueInElement(boxId, defaultParams[Types.NUMBER.type]);
           }
         }
       },

src/js/app.js

@@ -1,13 +1,5 @@
 import { PORT_SELECTOR, OUT_PORT_CLASS, IN_PORT_CLASS } from "./selectors";
 
-export const Inputs = {
-  SELECT: { tag: "select", type: "select" },
-  NUMBER: { tag: "input", type: "number" },
-  FILE: { type: "file" },
-  FOLDER: { type: "folder" }
-};
-Object.freeze(Inputs);
-
 export const BOX_HIGHLIGHTERS = [
   {
     highlighter: {

src/js/constants/constants.js

@@ -1,6 +1,6 @@
 import xml2js from "xml2js";
 import { INPUTS_DATA_XML_FILEPATH } from "../../config";
-import webservicesDecorator from "./webservicesDecorator";
+import { Decorators } from "divaservices-utils";
 import { dataTestDecorator } from "./dataTestDecorator";
 import { getServicesAPI } from "../api/requests";
 
@@ -22,7 +22,7 @@ const createXml2jsPromise = xml => {
 const _initWebservices = async () => {
   const xml = await getServicesAPI();
   const data = await createXml2jsPromise(xml);
-  webservices = webservicesDecorator(data);
+  webservices = Decorators.webservicesDecorator(data);
 };
 
 const _initDataInputs = async () => {

src/js/constants/globals.js

@@ -7,12 +7,13 @@
 import * as joint from "jointjs";
 import { app } from "../app";
 import { getWebserviceByName } from "../constants/globals";
+import { Constants } from "divaservices-utils";
+const { Types } = Constants;
 import {
   THEME,
   BOX_TITLE_HTML_TAG,
   ICON_COL,
   TITLE_COL,
-  Inputs,
   CATEGORY_SERVICE,
   PORT_MARKUP,
   PORT_LABEL_MARKUP
@@ -116,7 +117,7 @@ export const buildDefaultParameters = params => {
   const defaultParams = { select: {}, number: {} };
   for (const p of params) {
     let { type, name, defaultValue, values } = p;
-    if (type == Inputs.SELECT.type) {
+    if (type == Types.SELECT.type) {
       defaultValue = values[defaultValue];
     }
     defaultParams[type][name] = { value: defaultValue, defaultValue, values };

src/js/constants/webservicesDecorator.js

@@ -1,7 +1,9 @@
 import * as $ from "jquery";
 import * as joint from "jointjs";
 import Vue from "vue";
-import { THEME, Inputs } from "../constants/constants";
+import { Constants } from "divaservices-utils";
+const { Types } = Constants;
+import { THEME } from "../constants/constants";
 import {
   INTERFACE_ROOT,
   PORT_SELECTOR,
@@ -185,7 +187,7 @@ export const elementOnChangePosition = (
   { multitranslate }
 ) => {
   changePosition = true;
-  const allSelect = $(`${INTERFACE_ROOT} .select ${Inputs.SELECT.tag}`);
+  const allSelect = $(`${INTERFACE_ROOT} .select ${Types.SELECT.tag}`);
   allSelect.select2("close");
   app.$removeResizer();
 

src/js/elements/addElement.js

@@ -0,0 +1,65 @@
+/**
+ * Initialize toolsbar
+ */
+import Vue from "vue";
+import { app } from "../../app";
+import { buildSearchRegex } from "../../utils/utils";
+import { centerBoxInPaperByBoxId } from "../utils";
+
+const Search = Vue.component("SearchElements", {
+  props: ["selectedElements", "paper", "scale"],
+  data() {
+    return {
+      open: false,
+      query: "",
+      candidates: [],
+      currentId: 0
+    };
+  },
+  methods: {
+    openSearch() {
+      console.log("open");
+      this.open = true;
+    },
+    searchForElements() {
+      this.query = document.getElementById("search-elements").value;
+
+      // @TODO: check on searchStr
+      const regex = buildSearchRegex(this.query);
+
+      // apply search regex
+      this.candidates = app.elements
+        .map(el => {
+          return { value: el.type.toLowerCase().search(regex), ...el };
+        })
+        // filter out non matching items, and sort results
+        .filter(({ value }) => value != -1)
+        .sort((a, b) => a.value - b.value);
+
+      this.currentId = 0;
+
+      if (this.candidates.length) {
+        centerBoxInPaperByBoxId(this.candidates[this.currentId].boxId);
+      }
+    },
+    nextCandidate() {
+      if (++this.currentId >= this.candidates.length) {
+        this.currentId = 0;
+      } else if (this.currentId < 0) {
+        this.currentId = this.candidates.length - 1;
+      }
+      centerBoxInPaperByBoxId(this.candidates[this.currentId].boxId);
+    }
+  },
+  // @TODO search done twice because of a
+  template: `
+    <div v-if="open" id="search-component">
+            <input id="search-elements" type="text" placeholder="Search for an element..." />
+            {{candidates.length ? currentId+1 : 0}} / {{candidates.length}}
+            <button type="button" @click="searchForElements()">Search</button>
+            <button type="button" @click="nextCandidate()" :disabled="!candidates.length">Next</button>
+    </div>
+  `
+});
+
+export default Search;

src/js/events/paperEvents.js

@@ -4,14 +4,16 @@ import LeftSidebar from "./LeftSidebar";
 import ContextMenus from "./ContextMenu";
 import Minimap from "./Minimap";
 import Log from "./Log";
+import Search from "./Search";
 
 const components = {
   LeftSidebar,
   Minimap,
   Toolsbar,
   FileMenu,
   ContextMenus,
-  Log
+  Log,
+  Search
 };
 
 export default components;

src/js/layout/components/Search.js

@@ -14,6 +14,7 @@ import {
 } from "../../constants/selectors";
 import { mapActions } from "vuex";
 import { toggleSplit } from "../split";
+import { buildSearchRegex } from "../../utils/utils";
 
 const alphabeticalOrder = (a, b) => {
   const x = a.name.toLowerCase();
@@ -59,24 +60,18 @@ const LeftSidebar = Vue.component("LeftSidebar", {
 
         const searchQuery = this.search.toLowerCase();
 
-        // build regex to take into account capital letters
-        let regex = "";
-        for (const letter of searchQuery) {
-          regex += `[${letter}${letter.toUpperCase()}]`;
-        }
-        const re = new RegExp(regex);
+        let regex = buildSearchRegex(searchQuery);
 
         // apply search regex
-        const searchResult = [];
-        for (const item of this.services) {
-          const value = item.name.toLowerCase().search(re);
-          searchResult.push({ value, ...item });
-        }
-
-        // filter out non matching items, and sort results
-        return searchResult
-          .filter(({ value }) => value != -1)
-          .sort((a, b) => a.value - b.value);
+        return (
+          this.services
+            .map(s => {
+              return { value: s.name.toLowerCase().search(regex), ...s };
+            })
+            // filter out non matching items, and sort results
+            .filter(({ value }) => value != -1)
+            .sort((a, b) => a.value - b.value)
+        );
       } else {
         return this.services;
       }