검색기능추가 + 날짜 및 단어검색

pages/index.vue

@@ -27,12 +27,57 @@
           </md-button>
         </template>
 
+        <md-button @click="showSearchDialog=true" class="md-primary">
+          Search
+        </md-button>
+
         <md-button @click="showRightSidepanel = true" class="md-accent">
           Categorises
         </md-button>
       </div>
     </md-toolbar>
 
+    <!-- Search Dialog -->
+    <md-dialog :md-active.sync="showSearchDialog">
+      <md-dialog-title>Search Headlines</md-dialog-title>
+
+      <div class="md-layout" style="padding: 1em">
+        <md-field>
+          <label for="">Search Term(s)</label>
+          <md-input v-model="query" placeholder="Use quotes for exact matches, AND / OR / NOW fro multiple terms" maxlength="30" />
+        </md-field>
+        <md-datepicker v-model="fromDate">
+          <label for="">Select starting date(opt)</label>
+        </md-datepicker>
+        <md-datepicker v-model="toDate">
+          <label for="">Select ending date(opt)</label>
+        </md-datepicker>
+        <md-field>
+          <label for="">Sort search results by criteria(optional)</label>
+          <md-select id="sortBy" v-model="sortBy" name="sortBy" md-dense>
+            <md-option value="publishedAt">
+              Newest (default)
+            </md-option>
+            <md-option value="relevany">
+              Relevant
+            </md-option>
+            <md-option value="popularity">
+              Popular
+            </md-option>
+          </md-select>
+        </md-field>
+      </div>
+
+      <md-dialog-actions>
+        <md-button @click="showSearchDialog=false" class="md-accent">
+          Cancel
+        </md-button>
+        <md-button @click="searchHeadlines" class="md-primary">
+          Search
+        </md-button>
+      </md-dialog-actions>
+    </md-dialog>
+
     <md-drawer :md-active.sync="showLeftSidepanel" md-fixed>
       <md-toolbar :md-elevation="1">
         <span class="md-title">Personal Feed</span>
@@ -173,6 +218,7 @@ export default {
   data: () => ({
     showRightSidepanel: false,
     showLeftSidepanel: false,
+    showSearchDialog: false,
     newsCategories: [
       { name: 'Top Headlines', path: '', icon: 'today' },
       { name: 'Technology', path: 'technology', icon: 'keyboard' },
@@ -181,7 +227,11 @@ export default {
       { name: 'Health', path: 'health', icon: 'fastfood' },
       { name: 'Scinence', path: 'science', icon: 'fingerprint' },
       { name: 'Sports', path: 'sports', icon: 'golf_course' }
-    ]
+    ],
+    query: '',
+    fromDate: '',
+    toDate: '',
+    sortBy: ''
   }),
   computed: {
     headlines () {
@@ -243,6 +293,10 @@ export default {
         this.$router.push(`/headlines/${headline.slug}`)
       })
     },
+    async searchHeadlines () {
+      await this.$store.dispatch('loadHeadLines', `/api/top-headlines?q=${this.query}&from=${this.dateToISOString(this.fromDate)}&to=${this.dateToISOString(this.toDate)}&sortBy=${this.sortBy}`)
+      this.showSearchDialog = false
+    },
     async addHeadlineToFeed (headline) {
       if (this.user) {
         await this.$store.dispatch('addHeadlineToFeed', headline)
@@ -251,6 +305,11 @@ export default {
     isInFeed (title) {
       const inFeed = this.feed.findIndex(headline => headline.title === title) > -1
       return inFeed ? 'md-primary' : ''
+    },
+    dateToISOString (date) {
+      if (date) {
+        return new Date(date).toISOString()
+      }
     }
   }
 }