Feature: Add search-panel for Pinry

pinry-spa/src/components/api.js

@@ -31,6 +31,10 @@ const Board = {
     const url = `${API_PREFIX}boards-auto-complete/?submitter__username=${username}`;
     return axios.get(url);
   },
+  fetchSiteFullList() {
+    const url = `${API_PREFIX}boards-auto-complete/`;
+    return axios.get(url);
+  },
   saveChanges(boardId, fieldsForm) {
     const url = `${API_PREFIX}boards/${boardId}/`;
     return axios.patch(

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

@@ -0,0 +1,117 @@
+<template>
+  <div class="search-panel">
+    <div class="filter-selector">
+      <div class="card-content">
+        <b-field>
+          <b-select placeholder="Filter Type" v-model="filterType">
+            <option>Tag</option>
+            <option>Board</option>
+          </b-select>
+          <b-autocomplete
+            class="search-input"
+            v-model="name"
+            :data="filteredDataArray"
+            :keep-first="false"
+            :open-on-focus="true"
+            placeholder="select a filter then type to filter"
+            icon="magnify"
+            @select="option => selected = option">
+            <template slot="empty">No results found</template>
+          </b-autocomplete>
+        </b-field>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from '../api';
+
+export default {
+  name: 'FilterSelector',
+  data() {
+    return {
+      filterType: null,
+      selectedOption: [],
+      options: {
+        Tag: [],
+        Board: [],
+      },
+      name: '',
+      selected: null,
+    };
+  },
+  methods: {
+    selectOption(filterName) {
+      if (filterName === 'Tag') {
+        this.selectedOption = this.options.Tag;
+      } else {
+        this.selectedOption = this.options.Board;
+      }
+    },
+  },
+  watch: {
+    filterType(newVal) {
+      this.selectOption(newVal);
+    },
+    selected(newVal) {
+      this.$emit(
+        'selected',
+        { filterType: this.filterType, selected: newVal },
+      );
+    },
+  },
+  computed: {
+    filteredDataArray() {
+      return this.selectedOption.filter(
+        (option) => {
+          const ret = option
+            .toString()
+            .toLowerCase()
+            .indexOf(this.name.toLowerCase()) >= 0;
+          return ret;
+        },
+      );
+    },
+  },
+  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 = [];
+        resp.data.forEach(
+          (tag) => {
+            options.push(tag.name);
+          },
+        );
+        this.options.Tag = options;
+      },
+    );
+  },
+};
+</script>
+
+<style scoped="scoped" lang="scss">
+  .search-panel {
+    padding-top: 3rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+  .filter-selector {
+    background-color: white;
+    border-radius: 3px;
+    .search-input {
+      width: 100%;
+    }
+  }
+</style>

pinry-spa/src/router/index.js

@@ -7,6 +7,7 @@ import Pins4Board from '../views/Pins4Board.vue';
 import Pins4Id from '../views/Pins4Id.vue';
 import Boards4User from '../views/Boards4User.vue';
 import PinCreate from '../views/PinCreate.vue';
+import Search from '../views/Search.vue';
 
 Vue.use(VueRouter);
 
@@ -46,6 +47,11 @@ const routes = [
     name: 'pin-creation-from-url',
     component: PinCreate,
   },
+  {
+    path: '/search',
+    name: 'search',
+    component: Search,
+  },
 ];
 
 const router = new VueRouter({

pinry-spa/src/views/Search.vue

@@ -0,0 +1,43 @@
+<template>
+  <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>
+  </div>
+</template>
+
+<script>
+import PHeader from '../components/PHeader.vue';
+import Pins from '../components/Pins.vue';
+import SearchPanel from '../components/search/SearchPanel.vue';
+
+export default {
+  name: 'Search',
+  data() {
+    return {
+      filters: null,
+    };
+  },
+  components: {
+    PHeader,
+    Pins,
+    SearchPanel,
+  },
+  created() {},
+  methods: {
+    doSearch(args) {
+      this.filters = null;
+      if (args.filterType === 'Tag') {
+        this.filters = { tagFilter: args.selected };
+      } else if (args.filter === 'Board') {
+        this.filters = null;
+      }
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+</style>