Merge pull request #865 from LibCrowds/2020-fixes

Merges 2020 fixes from KDL into master for use by NIIT team.

components/data/SearchTags.vue

@@ -16,8 +16,8 @@
     no-result="No tags found, try changing the search query"
     @select="selectTag"
     @remove="removeTag"
-    @search-change="searchTags">
-  </multiselect>
+    @search-change="searchTags"
+  ></multiselect>
 </template>
 
 <script>
@@ -44,7 +44,8 @@ export default {
      *   The query string.
      */
     searchTags (query) {
-      return this.search(query).then(r => {
+      // return this.search(query).then(r => {
+      return this.suggestTags(query).then(r => {
         if (r.data.total > 0) {
           this.foundTags = r.data.first.items
         } else {
@@ -79,6 +80,21 @@ export default {
       return this.$explicates.search(params)
     },
 
+    /**
+     * Search for current tag Annotations.
+     * @param {String} query
+     *   The query string.
+     * @param {Boolean} strict
+     *   True to use the query as a prefix, false otherwise.
+     */
+    suggestTags (query, strict = false, contains = null) {
+      const safeQuery = query.replace(/[^\w\s&]/gi, '')
+      return this.$explicates.suggestTags({
+        collection: this.containerIri,
+        q: safeQuery
+      })
+    },
+
     /**
      * Get the label to display for a tag.
      * @param {Object} tag
@@ -103,7 +119,6 @@ export default {
         You can still continue using the result of the application as normal.`
       this.tagsLoading = false
       this.$emit('error', err)
-      console.error(err)
       this.$notifications.error({ message: errorMessage })
     },
 

components/data/SelectTags.vue

@@ -18,8 +18,8 @@
     @tag="addTag"
     @select="selectTag"
     @remove="removeTag"
-    @search-change="searchTags">
-  </multiselect>
+    @search-change="searchTags"
+  ></multiselect>
 </template>
 
 <script>
@@ -82,6 +82,8 @@ export default {
      */
     searchTags (query) {
       if (!query || !query.length) {
+        this.foundTags = []
+        this.tagsLoading = false
         return
       }
 
@@ -92,7 +94,10 @@ export default {
         return this.addTag(parts[0])
       }
 
-      return this.search(query).then(r => {
+      // return this.search(query).then(r => {
+      let ret = this.suggestTags(query)
+
+      ret.then(r => {
         if (r.data.total > 0) {
           this.foundTags = r.data.first.items
         } else {
@@ -102,6 +107,8 @@ export default {
       }).catch(err => {
         this.handleError(err)
       })
+
+      return ret
     },
 
     /**
@@ -124,6 +131,21 @@ export default {
       })
     },
 
+    /**
+     * Search for current tag Annotations.
+     * @param {String} query
+     *   The query string.
+     * @param {Boolean} strict
+     *   True to use the query as a prefix, false otherwise.
+     */
+    suggestTags (query, strict = false, contains = null) {
+      const safeQuery = query.replace(/[^\w\s&]/gi, '')
+      return this.$explicates.suggestTags({
+        collection: this.containerIri,
+        q: safeQuery
+      })
+    },
+
     /**
      * Get the label to display for a tag.
      * @param {Object} tag
@@ -192,15 +214,28 @@ export default {
      * @param {String} value
      *   The tag value.
      * @param {String} id
-     *   The multiselect item id.
-     * @param {Boolean} isNew
-     *   New if adding a new tag, false if selecting.
+     *   The multiselect item id
+     *   (the explicates annotation id if user selected existing tag one)
+     *   (if user pressed space or selected new tag => null/undefined)
      */
-    async addTag (value, id, isNew = true) {
+    async addTag (value, id) {
+      value = (value || '').trim()
+
+      if (!value) {
+        this.$notifications.info({ message: 'Tag is empty' })
+        // if (isNew) this.selectedTags.pop()
+        return
+      }
+
       const exists = await this.checkTagExists(value)
+
+      if (id) {
+        // we unselect that tag as we want to create a new one instead
+        this.selectedTags.pop()
+      }
+
       if (exists) {
         this.$notifications.info({ message: 'Tag already exists' })
-        this.selectedTags.pop()
         return
       }
 
@@ -210,9 +245,7 @@ export default {
       return this.$explicates.createAnnotation(iri, newTag).then(r => {
         this.$notifications.success({ message: 'Tag added' })
         this.tagsLoading = false
-        if (isNew) {
-          this.selectedTags.push(r.data)
-        }
+        this.selectedTags.push(r.data)
       }).catch(err => {
         this.handleError(err)
       })
@@ -223,8 +256,9 @@ export default {
      * @param {Object} tag
      *   The tag.
      */
-    selectTag (tag) {
-      this.addTag(tag.body.value, false)
+    selectTag (tag, id) {
+      // create a new tag in the DB and select it
+      this.addTag(tag.body.value, tag.id)
     },
 
     /**
@@ -259,7 +293,6 @@ export default {
         You can still continue using the result of the application as normal.`
       this.tagsLoading = false
       this.$emit('error', err)
-      console.error(err)
       this.$notifications.error({ message: errorMessage })
     }
   }

components/infiniteload/Annotations.vue

@@ -3,7 +3,8 @@
     <infinite-loading
       ref="infiniteload"
       class="infinite-loading"
-      @infinite="infiniteLoadAnnotations">
+      @infinite="infiniteLoadAnnotations"
+    >
       <span slot="no-results">
         <span v-if="noResults">{{ noResults }}</span>
       </span>
@@ -21,7 +22,8 @@ import Fuse from 'fuse.js'
 export default {
   data () {
     return {
-      items: []
+      items: [],
+      offset: 0
     }
   },
 
@@ -61,18 +63,22 @@ export default {
     async infiniteLoadAnnotations ($state) {
       let response = null
       const limit = 20
+      // const limit = 100
       try {
         response = await this.$explicates.search({
+        // response = await this.$explicates.suggestTags({
           collection: this.containerIri,
           limit: limit,
-          offset: this.items.length
+          offset: this.offset
         })
       } catch (err) {
         this.$nuxt.error(err)
       }
 
       if (response.data.hasOwnProperty('first')) {
         this.items = uniqBy(this.items.concat(response.data.first.items), 'id')
+        // this.items = this.items.concat(response.data.first.items)
+        this.offset += response.data.first.items.length
       }
 
       if (

modules/nuxt-explicates/plugin.template.js

@@ -157,6 +157,17 @@ class Explicates {
     })
   }
 
+  /**
+   * Suggests tags
+   */
+  suggestTags (params, minimal = false, iris = false) {
+    const endpoint = '/tags/'
+    return this.client.get(endpoint, {
+      params: params,
+      headers: {}
+    })
+  }
+
   /**
    * Return the Prefer header.
    * @param {Boolean} minimal
@@ -215,6 +226,10 @@ export default (ctx, inject) => {
     accept: '<%= options.accept %>'
   }
 
+  // GN: 'text/plain' to avoid unnecessary preflight request (OPTION)
+  // when doing GET.
+  options.accept = 'text/plain'
+
   // Create a new Explicates instance
   const explicates = new Explicates(options)
 

test/unit/specs/components/footers/__snapshots__/app.spec.js.snap

@@ -7,7 +7,7 @@ exports[`App footer renders correctly 1`] = `
       <a href="#/" class="router-link-exact-active router-link-active">
         Part of the My Brand crowdsourcing platform
       </a>
-      <p class="my-2">&copy; My Company, 2019</p>
+      <p class="my-2">&copy; My Company, 2020</p>
       <ul class="list-inline mt-2 mb-0">
         <li class="list-inline-item mx-1">
           <a href="https://twitter.com/mytwitterhandle" class="text-muted">

test/unit/specs/components/footers/__snapshots__/dashboard.spec.js.snap

@@ -29,7 +29,7 @@ exports[`Dashboard footer renders correctly 1`] = `
         </a>
       </li>
     </ul>
-    <p class="my-2 mx-1 float-right text-muted">&copy; My Company, 2019</p>
+    <p class="my-2 mx-1 float-right text-muted">&copy; My Company, 2020</p>
   </div>
 </footer>
 `;