Feature: Add pin display UI and board diaplay UI

pinry-spa/src/components/Boards.vue

@@ -118,9 +118,9 @@ export default {
     BoardEditorUI,
   },
   data: initialData,
-  props: ['boardUsername'],
+  props: ['filters'],
   watch: {
-    boardUsername() {
+    filters() {
       this.reset();
     },
   },
@@ -206,7 +206,18 @@ export default {
         return;
       }
       this.status.loading = true;
-      const promise = API.fetchBoardForUser(this.boardUsername, this.status.offset);
+      let promise;
+      if (this.filters.boardUsername) {
+        promise = API.fetchBoardForUser(
+          this.filters.boardUsername,
+          this.status.offset,
+        );
+      } else if (this.filters.boardNameContains) {
+        promise = API.Board.fetchListWhichContains(
+          this.filters.boardNameContains,
+          this.status.offset,
+        );
+      }
       promise.then(
         (resp) => {
           const { results, next } = resp.data;

pinry-spa/src/components/api.js

@@ -35,6 +35,11 @@ const Board = {
     const url = `${API_PREFIX}boards-auto-complete/`;
     return axios.get(url);
   },
+  fetchListWhichContains(text, offset = 0, limit = 50) {
+    const prefix = `${API_PREFIX}boards/?search=${text}`;
+    const url = `${prefix}&offset=${offset}&limit=${limit}`;
+    return axios.get(url);
+  },
   saveChanges(boardId, fieldsForm) {
     const url = `${API_PREFIX}boards/${boardId}/`;
     return axios.patch(

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

@@ -3,11 +3,12 @@
     <div class="filter-selector">
       <div class="card-content">
         <b-field>
-          <b-select placeholder="Filter Type" v-model="filterType">
+          <b-select placeholder="Choose Filter" v-model="filterType">
             <option>Tag</option>
             <option>Board</option>
           </b-select>
           <b-autocomplete
+            v-show="filterType === 'Tag'"
             class="search-input"
             v-model="name"
             :data="filteredDataArray"
@@ -18,6 +19,14 @@
             @select="option => selected = option">
             <template slot="empty">No results found</template>
           </b-autocomplete>
+          <b-input
+            v-show="filterType === 'Board'"
+            class="search-input"
+            v-model="boardText"
+            placeholder="type to search board"
+            icon="magnify"
+          >
+          </b-input>
         </b-field>
       </div>
     </div>
@@ -35,9 +44,9 @@ export default {
       selectedOption: [],
       options: {
         Tag: [],
-        Board: [],
       },
       name: '',
+      boardText: '',
       selected: null,
     };
   },
@@ -45,12 +54,19 @@ export default {
     selectOption(filterName) {
       if (filterName === 'Tag') {
         this.selectedOption = this.options.Tag;
-      } else {
-        this.selectedOption = this.options.Board;
       }
     },
   },
   watch: {
+    boardText(newVal) {
+      if (newVal === '') {
+        return;
+      }
+      this.$emit(
+        'selected',
+        { filterType: this.filterType, selected: newVal },
+      );
+    },
     filterType(newVal) {
       this.selectOption(newVal);
     },
@@ -75,17 +91,6 @@ export default {
     },
   },
   created() {
-    api.Board.fetchSiteFullList().then(
-      (resp) => {
-        const options = [];
-        resp.data.forEach(
-          (board) => {
-            options.push(board.name);
-          },
-        );
-        this.options.Board = options;
-      },
-    );
     api.Tag.fetchList().then(
       (resp) => {
         const options = [];

pinry-spa/src/views/Boards4User.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="boards-for-user">
     <PHeader></PHeader>
-    <Boards :boardUsername="username"></Boards>
+    <Boards :filters="filters"></Boards>
   </div>
 </template>
 
@@ -13,7 +13,7 @@ export default {
   name: 'Boards4User',
   data() {
     return {
-      username: '',
+      filters: { boardUsername: null },
     };
   },
   components: {
@@ -24,12 +24,12 @@ export default {
     this.initialize();
   },
   beforeRouteUpdate(to, from, next) {
-    this.username = to.params.username;
+    this.filters = { boardUsername: to.params.username };
     next();
   },
   methods: {
     initialize() {
-      this.username = this.$route.params.username;
+      this.filters = { boardUsername: this.$route.params.username };
     },
   },
 };

pinry-spa/src/views/Search.vue

@@ -2,36 +2,40 @@
   <div class="pins-for-tag">
     <PHeader></PHeader>
     <SearchPanel v-on:selected="doSearch"></SearchPanel>
-    <Pins v-if="filters" :pin-filters="filters"></Pins>
-    <Pins v-if="filters" :pin-filters="filters"></Pins>
+    <Pins v-if="pinFilters" :pin-filters="pinFilters"></Pins>
+    <Boards v-if="boardFilters" :filters="boardFilters"></Boards>
   </div>
 </template>
 
 <script>
 import PHeader from '../components/PHeader.vue';
 import Pins from '../components/Pins.vue';
+import Boards from '../components/Boards.vue';
 import SearchPanel from '../components/search/SearchPanel.vue';
 
 export default {
   name: 'Search',
   data() {
     return {
-      filters: null,
+      pinFilters: null,
+      boardFilters: null,
     };
   },
   components: {
     PHeader,
     Pins,
+    Boards,
     SearchPanel,
   },
   created() {},
   methods: {
     doSearch(args) {
-      this.filters = null;
+      this.pinFilters = null;
+      this.boardFilters = null;
       if (args.filterType === 'Tag') {
-        this.filters = { tagFilter: args.selected };
-      } else if (args.filter === 'Board') {
-        this.filters = null;
+        this.pinFilters = { tagFilter: args.selected };
+      } else if (args.filterType === 'Board') {
+        this.boardFilters = { boardNameContains: args.selected };
       }
     },
   },