Add searching by multiple tags

core/views.py

@@ -31,6 +31,10 @@ class PinViewSet(viewsets.ModelViewSet):
     def get_queryset(self):
         query = Pin.objects.all()
         request = self.request
+        tags = self.request.query_params.getlist('tags', None)
+        if tags is not None:
+            for tag in tags:
+                query = query.filter(tags__name=tag)
         return filter_private_pin(request, query)
 
 

pinry-spa/package.json

@@ -11,6 +11,7 @@
     "axios": "^0.21.2",
     "buefy": "^0.8.20",
     "core-js": "^3.3.2",
+    "qs": "^6.7.0",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",
     "vue-masonry": "^0.11.8",

pinry-spa/src/components/api.js

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import qs from 'qs';
 import storage from './utils/storage';
 
 const API_PREFIX = '/api/v2/';
@@ -119,11 +120,14 @@ function fetchPins(offset, tagFilter, userFilter) {
     limit: 30,
     offset,
   };
-  if (tagFilter) queryArgs.tags__name = tagFilter;
+  if (tagFilter) queryArgs.tags = tagFilter;
   if (userFilter) queryArgs.submitter__username = userFilter;
   return axios.get(
     url,
-    { params: queryArgs },
+    {
+      params: queryArgs,
+      paramsSerializer: params => qs.stringify(params, { arrayFormat: 'repeat' }),
+    },
   );
 }
 

pinry-spa/src/components/search/SearchPanel.vue

@@ -7,18 +7,18 @@
             <option>Tag</option>
             <option>Board</option>
           </b-select>
-          <b-autocomplete
+          <b-taginput
             v-show="filterType === 'Tag'"
-            class="search-input"
             v-model="name"
-            :data="filteredDataArray"
-            :keep-first="true"
+            :data="filteredTags"
+            autocomplete
             :open-on-focus="true"
-            placeholder="select a filter then type to filter"
             icon="magnify"
-            @select="option => selected = option">
+            placeholder="select a filter then type to filter"
+            @input="option => selected = option"
+            @typing="filterTags">
             <template slot="empty">No results found</template>
-          </b-autocomplete>
+            </b-taginput>
           <template v-if="filterType === 'Board'">
             <b-input
               class="search-input"
@@ -46,21 +46,21 @@ export default {
   data() {
     return {
       filterType: null,
-      selectedOption: [],
+      filteredTags: [],
       options: {
         Tag: [],
       },
-      name: '',
+      name: [],
       boardText: '',
       selected: null,
     };
   },
   methods: {
     selectOption(filterName) {
-      this.name = '';
+      this.name = [];
       this.boardText = '';
       if (filterName === 'Tag') {
-        this.selectedOption = this.options.Tag;
+        this.filteredTags = this.options.Tag;
       }
     },
     searchBoard() {
@@ -72,6 +72,9 @@ export default {
         { filterType: this.filterType, selected: this.boardText },
       );
     },
+    filterTags(text) {
+      this.filteredTags = this.options.Tag.filter(tag => tag.toLowerCase().includes(text.toLowerCase()));
+    },
   },
   watch: {
     filterType(newVal) {
@@ -84,19 +87,6 @@ export default {
       );
     },
   },
-  computed: {
-    filteredDataArray() {
-      return this.selectedOption.filter(
-        (option) => {
-          const ret = option
-            .toString()
-            .toLowerCase()
-            .indexOf(this.name.toLowerCase()) >= 0;
-          return ret;
-        },
-      );
-    },
-  },
   created() {
     api.Tag.fetchList().then(
       (resp) => {