From 6b7d4e31b6b22395babd815045b77cb4598b0eae Mon Sep 17 00:00:00 2001
From: winkidney <winkidney@gmail.com>
Date: Mon, 9 Dec 2019 20:27:13 +0800
Subject: [PATCH 1/5] Feature: Add cached tag-list api for tag-auto-complete

---
 core/serializers.py |  7 +++++++
 core/views.py       | 18 ++++++++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/core/serializers.py b/core/serializers.py
index 7f2005d..f5e4c8a 100644
--- a/core/serializers.py
+++ b/core/serializers.py
@@ -226,3 +226,10 @@ class BoardSerializer(serializers.HyperlinkedModelSerializer):
             )
         validated_data['submitter'] = user
         return super(BoardSerializer, self).create(validated_data)
+
+
+class TagAutoCompleteSerializer(serializers.ModelSerializer):
+
+    class Meta:
+        model = Tag
+        fields = ('name', )
diff --git a/core/views.py b/core/views.py
index 8510626..93310af 100644
--- a/core/views.py
+++ b/core/views.py
@@ -1,7 +1,10 @@
+from django.utils.decorators import method_decorator
+from django.views.decorators.cache import cache_page
 from django_filters.rest_framework import DjangoFilterBackend
 from rest_framework import viewsets, mixins, routers
 from rest_framework.filters import SearchFilter, OrderingFilter
 from rest_framework.viewsets import GenericViewSet
+from taggit.models import Tag
 
 from core import serializers as api
 from core.models import Image, Pin, Board
@@ -49,8 +52,23 @@ class BoardAutoCompleteViewSet(
     pagination_class = None
 
 
+class TagAutoCompleteViewSet(mixins.ListModelMixin, viewsets.GenericViewSet):
+    queryset = Tag.objects.all()
+    serializer_class = api.TagAutoCompleteSerializer
+    pagination_class = None
+
+    @method_decorator(cache_page(60*5))
+    def list(self, request, *args, **kwargs):
+        return super(TagAutoCompleteViewSet, self).list(
+            request,
+            *args,
+            **kwargs
+        )
+
+
 drf_router = routers.DefaultRouter()
 drf_router.register(r'pins', PinViewSet)
 drf_router.register(r'images', ImageViewSet)
 drf_router.register(r'boards', BoardViewSet)
+drf_router.register(r'tags-auto-complete/', TagAutoCompleteViewSet)
 drf_router.register(r'boards-auto-complete', BoardAutoCompleteViewSet)

From b7f24b83be1140957ede3ff636c1a4bc212dd9d6 Mon Sep 17 00:00:00 2001
From: winkidney <winkidney@gmail.com>
Date: Mon, 9 Dec 2019 22:22:00 +0800
Subject: [PATCH 2/5] Feafactor: Move AutoComplete filter function as utils

---
 .../src/components/pin_edit/FilterSelect.vue      | 15 ++-------------
 pinry-spa/src/components/utils/AutoComplete.js    | 15 +++++++++++++++
 2 files changed, 17 insertions(+), 13 deletions(-)
 create mode 100644 pinry-spa/src/components/utils/AutoComplete.js

diff --git a/pinry-spa/src/components/pin_edit/FilterSelect.vue b/pinry-spa/src/components/pin_edit/FilterSelect.vue
index 43a510a..5f647eb 100644
--- a/pinry-spa/src/components/pin_edit/FilterSelect.vue
+++ b/pinry-spa/src/components/pin_edit/FilterSelect.vue
@@ -38,21 +38,10 @@
 <script>
 import API from '../api';
 import ModelForm from '../utils/ModelForm';
+import AutoComplete from '../utils/AutoComplete';
 
 const fields = ['name'];
 
-function getFilteredOptions(options, filterText) {
-  return options.filter(
-    (option) => {
-      const index = option.name
-        .toString()
-        .toLowerCase()
-        .indexOf(filterText.toLowerCase());
-      return index >= 0;
-    },
-  );
-}
-
 function getBoardFromResp(boardObject) {
   return { name: boardObject.name, value: boardObject.id };
 }
@@ -62,7 +51,7 @@ function getAvailableOptions(vm, filter) {
   if (filter === '' || filter === null) {
     availableOptions = vm.allOptions;
   } else {
-    availableOptions = getFilteredOptions(
+    availableOptions = AutoComplete.getFilteredOptions(
       vm.allOptions, vm.form.name.value,
     );
   }
diff --git a/pinry-spa/src/components/utils/AutoComplete.js b/pinry-spa/src/components/utils/AutoComplete.js
new file mode 100644
index 0000000..d4d7706
--- /dev/null
+++ b/pinry-spa/src/components/utils/AutoComplete.js
@@ -0,0 +1,15 @@
+function getFilteredOptions(options, filterText) {
+  return options.filter(
+    (option) => {
+      const index = option.name
+        .toString()
+        .toLowerCase()
+        .indexOf(filterText.toLowerCase());
+      return index >= 0;
+    },
+  );
+}
+
+export default {
+  getFilteredOptions,
+};

From 28f567aeac3cf34b1da9db1414ba4fc561d51dde Mon Sep 17 00:00:00 2001
From: winkidney <winkidney@gmail.com>
Date: Tue, 10 Dec 2019 20:38:01 +0800
Subject: [PATCH 3/5] Fix: Fix path error for tag-auto-complete api

---
 core/views.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/views.py b/core/views.py
index 93310af..842e1e8 100644
--- a/core/views.py
+++ b/core/views.py
@@ -70,5 +70,5 @@ drf_router = routers.DefaultRouter()
 drf_router.register(r'pins', PinViewSet)
 drf_router.register(r'images', ImageViewSet)
 drf_router.register(r'boards', BoardViewSet)
-drf_router.register(r'tags-auto-complete/', TagAutoCompleteViewSet)
+drf_router.register(r'tags-auto-complete', TagAutoCompleteViewSet)
 drf_router.register(r'boards-auto-complete', BoardAutoCompleteViewSet)

From c7d350423bf616704e1efba787c5489afcf5e6f8 Mon Sep 17 00:00:00 2001
From: winkidney <winkidney@gmail.com>
Date: Tue, 10 Dec 2019 20:45:19 +0800
Subject: [PATCH 4/5] Feature: Move tag-input top of description and add
 tag-auto-complete

---
 pinry-spa/src/components/api.js               |  8 +++
 .../components/pin_edit/PinCreateModal.vue    | 49 ++++++++++++++++---
 2 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/pinry-spa/src/components/api.js b/pinry-spa/src/components/api.js
index b926e7f..9157d17 100644
--- a/pinry-spa/src/components/api.js
+++ b/pinry-spa/src/components/api.js
@@ -258,7 +258,15 @@ const User = {
   },
 };
 
+const Tag = {
+  fetchList() {
+    const url = `${API_PREFIX}tags-auto-complete/`;
+    return axios.get(url);
+  },
+};
+
 export default {
+  Tag,
   Pin,
   Board,
   fetchPin,
diff --git a/pinry-spa/src/components/pin_edit/PinCreateModal.vue b/pinry-spa/src/components/pin_edit/PinCreateModal.vue
index 4f9b307..4b27bf7 100644
--- a/pinry-spa/src/components/pin_edit/PinCreateModal.vue
+++ b/pinry-spa/src/components/pin_edit/PinCreateModal.vue
@@ -38,6 +38,24 @@
                 >
                 </b-input>
               </b-field>
+              <b-field label="Tags">
+                <b-taginput
+                    v-model="pinModel.form.tags.value"
+                    :data="editorMeta.filteredTagOptions"
+                    autocomplete
+                    ellipsis
+                    icon="label"
+                    :allow-new="true"
+                    placeholder="Add a tag"
+                    @typing="getFilteredTags">
+                  <template slot-scope="props">
+                    <strong>{{ props.option }}</strong>
+                  </template>
+                  <template slot="empty">
+                    There are no items
+                  </template>
+                </b-taginput>
+              </b-field>
               <b-field label="Descripton"
                        :type="pinModel.form.description.type"
                        :message="pinModel.form.description.error">
@@ -49,14 +67,6 @@
                 >
                 </b-input>
               </b-field>
-              <b-field label="Tags">
-                <b-taginput
-                  v-model="pinModel.form.tags.value"
-                  ellipsis
-                  icon="label"
-                  placeholder="Add a tag">
-                </b-taginput>
-              </b-field>
             </div>
             <div class="column" v-if="!isEdit">
               <FilterSelect
@@ -91,6 +101,7 @@ import FilterSelect from './FilterSelect.vue';
 import bus from '../utils/bus';
 import ModelForm from '../utils/ModelForm';
 import Loading from '../utils/Loading';
+import AutoComplete from '../utils/AutoComplete';
 
 function isURLBlank(url) {
   return url !== null && url === '';
@@ -133,13 +144,16 @@ export default {
       },
       boardId: null,
       boardOptions: [],
+      tagOptions: [],
       editorMeta: {
         title: 'New Pin',
+        filteredTagOptions: [],
       },
     };
   },
   created() {
     this.fetchBoardList();
+    this.fetchTagList();
     if (this.isEdit) {
       this.editorMeta.title = 'Edit Pin';
       this.pinModel.form.url.value = this.existedPin.url;
@@ -154,6 +168,25 @@ export default {
     }
   },
   methods: {
+    fetchTagList() {
+      API.Tag.fetchList().then(
+        (resp) => {
+          this.tagOptions = resp.data;
+        },
+      );
+    },
+    getFilteredTags(text) {
+      const filteredTagOptions = [];
+      AutoComplete.getFilteredOptions(
+        this.tagOptions,
+        text,
+      ).forEach(
+        (option) => {
+          filteredTagOptions.push(option.name);
+        },
+      );
+      this.editorMeta.filteredTagOptions = filteredTagOptions;
+    },
     fetchBoardList() {
       API.Board.fetchFullList(this.username).then(
         (resp) => {

From c35423bdbb37c07b30248a08eee56db20fcb645a Mon Sep 17 00:00:00 2001
From: winkidney <winkidney@gmail.com>
Date: Tue, 10 Dec 2019 20:51:45 +0800
Subject: [PATCH 5/5] Fix: flake8

---
 core/views.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/views.py b/core/views.py
index 842e1e8..543486b 100644
--- a/core/views.py
+++ b/core/views.py
@@ -57,7 +57,7 @@ class TagAutoCompleteViewSet(mixins.ListModelMixin, viewsets.GenericViewSet):
     serializer_class = api.TagAutoCompleteSerializer
     pagination_class = None
 
-    @method_decorator(cache_page(60*5))
+    @method_decorator(cache_page(60 * 5))
     def list(self, request, *args, **kwargs):
         return super(TagAutoCompleteViewSet, self).list(
             request,