feat: search

2021-08-28 23:23:16 +05:30
parent 7da427c669
commit 16b9a2b06e
7 changed files with 358 additions and 90 deletions
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -20,13 +20,13 @@
          class="rounded"
          @click.native="showInstallPrompt()"
        />
-        <!-- <ButtonSecondary
+        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="`${$t('app.search')} <kbd>/</kbd>`"
          svg="search"
          class="rounded"
          @click.native="showSearch = true"
-        /> -->
+        />
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="`${$t('support.title')} <kbd>?</kbd>`"
@@ -83,7 +83,7 @@
    <AppAnnouncement v-if="!isOnLine" />
    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
    <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
-    <!-- <AppSearch :show="showSearch" @hide-modal="showSearch = false" /> -->
+    <AppSearch :show="showSearch" @hide-modal="showSearch = false" />
  </div>
 </template>

@@ -98,19 +98,19 @@ import { defineActionHandler } from "~/helpers/actions"
 export default defineComponent({
  setup() {
    const showSupport = ref(false)
-    // const showSearch = ref(false)
+    const showSearch = ref(false)

    defineActionHandler("modals.support.toggle", () => {
      showSupport.value = !showSupport.value
    })
-    // defineActionHandler("modals.search.toggle", () => {
-    //   showSearch.value = !showSearch.value
-    // })
+    defineActionHandler("modals.search.toggle", () => {
+      showSearch.value = !showSearch.value
+    })

    return {
      currentUser: useReadonlyStream(currentUser$, null),
      showSupport,
-      // showSearch,
+      showSearch,
    }
  },
  data() {
--- a/components/app/Lunr.vue
+++ b/components/app/Lunr.vue
@@ -0,0 +1,229 @@
+<template>
+  <div key="outputHash">
+    <div
+      v-for="(shortcut, shortcutIndex) in theOutput"
+      :key="`shortcut-${shortcutIndex}`"
+      class="
+        rounded
+        cursor-pointer
+        flex
+        py-2
+        px-4
+        transition
+        items-center
+        group
+        hover:bg-primaryLight
+      "
+      @click="$emit('action', shortcut.action)"
+    >
+      <i class="mr-4 opacity-75 material-icons group-hover:opacity-100">
+        {{ shortcut.icon }}
+      </i>
+      <span class="flex flex-1 mr-4 group-hover:text-secondaryDark">
+        {{ $t(shortcut.label) }}
+      </span>
+      <span
+        v-for="(key, keyIndex) in shortcut.keys"
+        :key="`shortcut-${shortcutIndex}-key-${keyIndex}`"
+        class="shortcut-key"
+      >
+        {{ key }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import lunr from "lunr"
+
+export default {
+  props: {
+    input: {
+      type: Array,
+      required: true,
+    },
+    search: {
+      type: String,
+      default: "",
+    },
+    limit: {
+      type: Number,
+      default: 1000,
+    },
+    stopWords: {
+      type: Boolean,
+      default: false,
+    },
+    log: {
+      type: Boolean,
+      default: false,
+    },
+    fields: {
+      type: Object,
+      default() {
+        if (typeof this.input[0] === "object") {
+          return this.input[0]
+        }
+        return {}
+      },
+    },
+    perpendKey: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      outputHash: "",
+      theOutput: [],
+      cache: {},
+    }
+  },
+  computed: {
+    hashInput() {
+      return this.hashThis(JSON.stringify(this.input))
+    },
+    idx() {
+      if (!this.input[0]) return {}
+      const loaded = this.cache[this.hashInput]
+      return loaded ? lunr.Index.load(loaded) : this.makeIndex(this.hashInput)
+    },
+  },
+  watch: {
+    search: {
+      handler(search = "") {
+        if (
+          (!search.trim() || search === "undefined") &&
+          Array.isArray(this.input)
+        ) {
+          this.$emit("results-length", this.input.length)
+          this.$emit("results", this.input.slice(0, this.limit))
+          this.theOutput = this.input.slice(0, this.limit)
+          return
+        }
+        const update = (output) => {
+          if (output.then) {
+            const that = this
+            return output.then((newOutput) => {
+              const hash = that.hashThis(JSON.stringify(newOutput))
+              if (that.outputHash === hash) return
+              that.outputHash = hash
+              that.$emit("results-length", newOutput.length)
+              that.$emit("results", newOutput.slice(0, that.limit))
+              that.theOutput = newOutput.slice(0, that.limit)
+            })
+          }
+          const hash = this.hashThis(JSON.stringify(output))
+          if (this.outputHash === hash) return
+          this.outputHash = hash
+          try {
+            this.$emit("results-length", output.length)
+            this.$emit("results", output.slice(0, this.limit))
+            this.theOutput = output.slice(0, this.limit)
+          } catch (e) {
+            console.warn(e, "???", output)
+          }
+        }
+        if (this.output.then) {
+          return this.output(search).then(async (output) => {
+            update(await output)
+          })
+        }
+        update(this.output(search))
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    async output(search) {
+      const that = this
+      if ((await this.idx) && (await this.idx.search)) {
+        return this.idx.search(`${search}*`).map(function (valu) {
+          return that.input[+valu.ref]
+        }, that)
+      }
+      if (this.idx.then)
+        return this.idx.then((index) => {
+          return index.search(`${search}*`).map(function (valu) {
+            return that.input[+valu.ref]
+          }, that)
+        })
+      // no index
+      return this.input
+    },
+    makeIndex(hashInput) {
+      const that = this
+      if (this.input[0] && this.search) {
+        const first = this.fields
+        // if (this.log) console.log("feilds from ", first)
+
+        const stopWords = this.stopWords
+        const documents = this.input.map(function (val, i) {
+          const doc = {}
+          const seen = []
+          function replacer(key, value) {
+            if (key[0] === "_") {
+              return
+            } else if (typeof value === "object" && value !== null) {
+              if (seen.includes(key)) return
+              else seen.push(key)
+            }
+            return value
+          }
+          Object.keys(val).forEach(function (key) {
+            doc[key] = JSON.stringify(val[key], replacer)
+          })
+          return { __id: i, ...val }
+        })
+        const idx = lunr(function () {
+          this.ref("__id")
+          if (!stopWords) {
+            this.pipeline.remove(lunr.stopWordFilter)
+            this.pipeline.remove(lunr.stemmer)
+          }
+          Object.keys(first).forEach(function (key) {
+            if (key[0] !== "_") {
+              this.field(key)
+            }
+          }, this)
+          documents.forEach(function (doc) {
+            this.add(doc)
+          }, this)
+          // if (that.log) console.log(this)
+        })
+        that.cache[hashInput] = idx.toJSON()
+        return idx
+      } else {
+        return {}
+      }
+    },
+    hashThis(message, n = 8) {
+      if (+n === 0) return message
+      let hash = 0
+      if (message.length === 0) return this.hashThis(this.hex32(hash), n - 1)
+      for (let i = 0; i < message.length; i++) {
+        const char = message.charCodeAt(i)
+        hash = (hash << 5) - hash + char
+        hash = hash & hash // Convert to 32bit integer
+      }
+      return this.hashThis(this.hex32(hash), n - 1)
+    },
+    hex32(val) {
+      val &= 0xffffffff
+      const hex = val.toString(16).toUpperCase()
+      return ("00000000" + hex).slice(-8)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.shortcut-key {
+  @apply bg-dividerLight;
+  @apply rounded;
+  @apply ml-2;
+  @apply py-1;
+  @apply px-2;
+  @apply inline-flex;
+}
+</style>
--- a/components/app/Search.vue
+++ b/components/app/Search.vue
@@ -18,7 +18,15 @@
          pb-6
        "
      />
+      <AppLunr
+        v-if="search"
+        log
+        :input="lunr"
+        :search="search"
+        @action="runAction"
+      />
      <div
+        v-else
        class="
          divide-y divide-dividerLight
          flex flex-col
@@ -28,10 +36,7 @@
          hide-scrollbar
        "
      >
-        <div
-          v-for="(map, mapIndex) in filteredMappings"
-          :key="`map-${mapIndex}`"
-        >
+        <div v-for="(map, mapIndex) in mappings" :key="`map-${mapIndex}`">
          <h5 class="my-2 text-secondaryLight py-2 px-4">
            {{ $t(map.section) }}
          </h5>
@@ -49,10 +54,7 @@
              group
              hover:bg-primaryLight
            "
-            @click="
-              runAction(shortcut.action)
-              hideModal()
-            "
+            @click="runAction(shortcut.action)"
          >
            <i class="mr-4 opacity-75 material-icons group-hover:opacity-100">
              {{ shortcut.icon }}
@@ -77,7 +79,7 @@
 <script>
 import { defineComponent } from "@nuxtjs/composition-api"
 import { invokeAction } from "~/helpers/actions"
-import { spotlight } from "~/helpers/shortcuts"
+import { spotlight, lunr } from "~/helpers/shortcuts"

 export default defineComponent({
  props: {
@@ -87,25 +89,17 @@ export default defineComponent({
    return {
      search: "",
      mappings: spotlight,
+      lunr,
    }
  },
-  computed: {
-    filteredMappings() {
-      return this.mappings.filter((mapping) =>
-        mapping.shortcuts.some((shortcut) =>
-          shortcut.keywords.some((keyword) =>
-            keyword.toLowerCase().includes(this.search.toLowerCase())
-          )
-        )
-      )
-    },
-  },
  methods: {
    hideModal() {
      this.$emit("hide-modal")
    },
    runAction(command) {
      invokeAction(command, "path_from_invokeAction")
+      this.search = ""
+      this.hideModal()
    },
  },
 })
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -19,7 +19,7 @@
          <ButtonSecondary svg="x" class="rounded" @click.native="close()" />
        </div>
      </div>
-      <div class="bg-primary border-b border-dividerLight">
+      <!-- <div class="bg-primary border-b border-dividerLight">
        <div class="flex flex-col my-4 mx-6">
          <input
            v-model="filterText"
@@ -37,7 +37,7 @@
            :placeholder="$t('action.search')"
          />
        </div>
-      </div>
+      </div> -->
      <div
        class="
          divide-y divide-dividerLight
@@ -86,7 +86,7 @@ export default defineComponent({
  },
  data() {
    return {
-      filterText: "",
+      // filterText: "",
      mappings: shortcuts,
    }
  },
--- a/helpers/shortcuts.js
+++ b/helpers/shortcuts.js
@@ -4,14 +4,14 @@ export default [
  {
    section: "shortcut.general.title",
    shortcuts: [
-      // {
-      //   keys: ["?"],
-      //   label: "shortcut.general.help_menu",
-      // },
-      // {
-      //   keys: ["/"],
-      //   label: "shortcut.general.command_menu",
-      // },
+      {
+        keys: ["?"],
+        label: "shortcut.general.help_menu",
+      },
+      {
+        keys: ["/"],
+        label: "shortcut.general.command_menu",
+      },
      {
        keys: [getPlatformSpecialKey(), "K"],
        label: "shortcut.general.show_all",
@@ -104,15 +104,15 @@ export default [
      },
    ],
  },
-  // {
-  //   section: "shortcut.miscellaneous.title",
-  //   shortcuts: [
-  //     {
-  //       keys: [getPlatformSpecialKey(), "M"],
-  //       label: "shortcut.miscellaneous.invite",
-  //     },
-  //   ],
-  // },
+  {
+    section: "shortcut.miscellaneous.title",
+    shortcuts: [
+      {
+        keys: [getPlatformSpecialKey(), "M"],
+        label: "shortcut.miscellaneous.invite",
+      },
+    ],
+  },
 ]

 export const spotlight = [
@@ -124,26 +124,12 @@ export const spotlight = [
        label: "shortcut.general.help_menu",
        action: "modals.support.toggle",
        icon: "support",
-        keywords: [
-          "help",
-          "support",
-          "documentation",
-          "troubleshooting",
-          "chat",
-          "community",
-          "feedback",
-          "report",
-          "bug",
-          "issue",
-          "ticket",
-        ],
      },
      {
        keys: [getPlatformSpecialKey(), "K"],
        label: "shortcut.general.show_all",
        action: "flyouts.keybinds.toggle",
        icon: "keyboard",
-        keywords: ["keyboard", "shortcuts"],
      },
    ],
  },
@@ -155,67 +141,42 @@ export const spotlight = [
        label: "shortcut.navigation.back",
        action: "navigation.jump.back",
        icon: "arrow_forward",
-        keywords: ["back", "jump", "page", "navigation", "go"],
      },
      {
        keys: [getPlatformSpecialKey(), "→"],
        label: "shortcut.navigation.forward",
        action: "navigation.jump.forward",
        icon: "arrow_forward",
-        keywords: ["forward", "jump", "page", "navigation", "go"],
      },
      {
        keys: [getPlatformAlternateKey(), "R"],
        label: "shortcut.navigation.rest",
        action: "navigation.jump.rest",
        icon: "arrow_forward",
-        keywords: ["rest", "jump", "page", "navigation", "go"],
      },
      {
        keys: [getPlatformAlternateKey(), "Q"],
        label: "shortcut.navigation.graphql",
        action: "navigation.jump.graphql",
        icon: "arrow_forward",
-        keywords: ["graphql", "jump", "page", "navigation", "go"],
      },
      {
        keys: [getPlatformAlternateKey(), "W"],
        label: "shortcut.navigation.realtime",
        action: "navigation.jump.realtime",
        icon: "arrow_forward",
-        keywords: [
-          "realtime",
-          "jump",
-          "page",
-          "navigation",
-          "websocket",
-          "socket",
-          "mqtt",
-          "sse",
-          "go",
-        ],
      },
      {
        keys: [getPlatformAlternateKey(), "D"],
        label: "shortcut.navigation.documentation",
        action: "navigation.jump.documentation",
        icon: "arrow_forward",
-        keywords: ["documentation", "jump", "page", "navigation", "go"],
      },
      {
        keys: [getPlatformAlternateKey(), "S"],
        label: "shortcut.navigation.settings",
        action: "navigation.jump.settings",
        icon: "arrow_forward",
-        keywords: [
-          "settings",
-          "jump",
-          "page",
-          "navigation",
-          "account",
-          "theme",
-          "go",
-        ],
      },
    ],
  },
@@ -227,8 +188,80 @@ export const spotlight = [
        label: "shortcut.miscellaneous.invite",
        action: "modals.share.toggle",
        icon: "person_add_alt",
-        keywords: ["invite", "share", "app", "social"],
      },
    ],
  },
 ]
+
+export const lunr = [
+  {
+    keys: ["?"],
+    label: "shortcut.general.help_menu",
+    action: "modals.support.toggle",
+    icon: "support",
+    tags: "help support documentation troubleshooting chat community feedback report bug issue ticket",
+  },
+  {
+    keys: [getPlatformSpecialKey(), "K"],
+    label: "shortcut.general.show_all",
+    action: "flyouts.keybinds.toggle",
+    icon: "keyboard",
+    tags: "keyboard shortcuts",
+  },
+  {
+    keys: [getPlatformSpecialKey(), "←"],
+    label: "shortcut.navigation.back",
+    action: "navigation.jump.back",
+    icon: "arrow_forward",
+    tags: "back jump page navigation go",
+  },
+  {
+    keys: [getPlatformSpecialKey(), "→"],
+    label: "shortcut.navigation.forward",
+    action: "navigation.jump.forward",
+    icon: "arrow_forward",
+    tags: "forward jump next forward page navigation go",
+  },
+  {
+    keys: [getPlatformAlternateKey(), "R"],
+    label: "shortcut.navigation.rest",
+    action: "navigation.jump.rest",
+    icon: "arrow_forward",
+    tags: "rest jump page navigation go",
+  },
+  {
+    keys: [getPlatformAlternateKey(), "Q"],
+    label: "shortcut.navigation.graphql",
+    action: "navigation.jump.graphql",
+    icon: "arrow_forward",
+    tags: "graphql jump page navigation go",
+  },
+  {
+    keys: [getPlatformAlternateKey(), "W"],
+    label: "shortcut.navigation.realtime",
+    action: "navigation.jump.realtime",
+    icon: "arrow_forward",
+    tags: "realtime jump page navigation websocket socket mqtt sse go",
+  },
+  {
+    keys: [getPlatformAlternateKey(), "D"],
+    label: "shortcut.navigation.documentation",
+    action: "navigation.jump.documentation",
+    icon: "arrow_forward",
+    tags: "documentation jump page navigation go",
+  },
+  {
+    keys: [getPlatformAlternateKey(), "S"],
+    label: "shortcut.navigation.settings",
+    action: "navigation.jump.settings",
+    icon: "arrow_forward",
+    tags: "settings jump page navigation account theme go",
+  },
+  {
+    keys: [getPlatformSpecialKey(), "M"],
+    label: "shortcut.miscellaneous.invite",
+    action: "modals.share.toggle",
+    icon: "person_add_alt",
+    tags: "invite share app social",
+  },
+]
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
  "name": "hoppscotch",
-  "version": "1.12.0",
+  "version": "2.0.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
-      "version": "1.12.0",
+      "version": "2.0.0",
      "dependencies": {
        "@apollo/client": "^3.4.8",
        "@nuxtjs/axios": "^5.13.6",
@@ -25,6 +25,7 @@
        "graphql-language-service-interface": "^2.8.4",
        "json-loader": "^0.5.7",
        "lodash": "^4.17.21",
+        "lunr": "^2.3.9",
        "mustache": "^4.2.0",
        "node-interval-tree": "^1.3.3",
        "nuxt": "^2.15.8",
@@ -22921,6 +22922,11 @@
        "yallist": "^3.0.2"
      }
    },
+    "node_modules/lunr": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
+      "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="
+    },
    "node_modules/magic-string": {
      "version": "0.25.7",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
@@ -52895,6 +52901,11 @@
        "yallist": "^3.0.2"
      }
    },
+    "lunr": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
+      "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="
+    },
    "magic-string": {
      "version": "0.25.7",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
    "graphql-language-service-interface": "^2.8.4",
    "json-loader": "^0.5.7",
    "lodash": "^4.17.21",
+    "lunr": "^2.3.9",
    "mustache": "^4.2.0",
    "node-interval-tree": "^1.3.3",
    "nuxt": "^2.15.8",