From f06e45cf42380b31bb5d7ed37016f7a73f08ac91 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 20 May 2019 00:29:54 +0300
Subject: [PATCH] Add select input for reports filters

---
 src/api/reports.js                            |  9 +---
 src/lang/en.js                                |  6 +++
 src/store/modules/reports.js                  |  6 ++-
 .../reports/components/ReportsFilter.vue      | 48 +++++++++++++++++++
 src/views/reports/index.vue                   | 13 ++++-
 5 files changed, 73 insertions(+), 9 deletions(-)
 create mode 100644 src/views/reports/components/ReportsFilter.vue

diff --git a/src/api/reports.js b/src/api/reports.js
index e9687a01..51a8fa7a 100644
--- a/src/api/reports.js
+++ b/src/api/reports.js
@@ -11,12 +11,7 @@ export async function fetchReports(authHost, token) {
   })
 }
 
-// export function deleteNote(reportId, noteId) {
-//   const updatedNotes = reports
-//     .find(report => report.id === reportId)
-//     .notes
-//     .filter(note => note.id !== noteId)
-//   return updatedNotes
-// }
+export async function toggleReportsFilter(authHost, token, filters) {
+}
 
 const authHeaders = (token) => token ? { 'Authorization': `Bearer ${getToken()}` } : {}
diff --git a/src/lang/en.js b/src/lang/en.js
index 8e0e71b0..f3b90d6f 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -213,5 +213,11 @@ export default {
     deleteCompleted: 'Delete comleted',
     deleteCanceled: 'Delete canceled',
     noNotes: 'No notes to display'
+  },
+  reportsFilter: {
+    inputPlaceholder: 'Select filter',
+    open: 'Open',
+    closed: 'Closed',
+    resolved: 'Resolved'
   }
 }
diff --git a/src/store/modules/reports.js b/src/store/modules/reports.js
index 01d48027..08fd1055 100644
--- a/src/store/modules/reports.js
+++ b/src/store/modules/reports.js
@@ -1,4 +1,4 @@
-import { fetchReports } from '@/api/reports'
+import { fetchReports, toggleReportsFilter } from '@/api/reports'
 
 const reports = {
   state: {
@@ -29,6 +29,10 @@ const reports = {
       commit('SET_REPORTS', response.data.reports)
       commit('SET_INDEX')
       commit('SET_LOADING', false)
+    },
+    async ToggleReportsFilter({ getters }, filters) {
+      const response = await toggleReportsFilter(getters.authHost, getters.token, filters)
+      return response.data
     }
     // async AddNote({ commit, state, getters }, { reportId, note }) {
     //   const report = state.fetchedReports.find(report => report.id === reportId)
diff --git a/src/views/reports/components/ReportsFilter.vue b/src/views/reports/components/ReportsFilter.vue
new file mode 100644
index 00000000..194c8b02
--- /dev/null
+++ b/src/views/reports/components/ReportsFilter.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-select
+    v-model="value"
+    :clearable="isDesktop"
+    :placeholder="$t('reportsFilter.inputPlaceholder')"
+    multiple
+    class="select-field"
+    @change="toggleFilters">
+    <el-option value="open">{{ $t('reportsFilter.open') }}</el-option>
+    <el-option value="closed">{{ $t('reportsFilter.closed') }}</el-option>
+    <el-option value="resolved">{{ $t('reportsFilter.resolved') }}</el-option>
+  </el-select>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: []
+    }
+  },
+  computed: {
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    }
+  },
+  methods: {
+    toggleFilters() {
+      const currentFilters = this.$data.value.reduce((acc, filter) => ({ ...acc, [filter]: true }), {})
+      this.$store.dispatch('ToggleReportsFilter', currentFilters)
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss' scoped>
+.select-field {
+  width: 350px;
+}
+@media
+only screen and (max-width: 760px),
+(min-device-width: 768px) and (max-device-width: 1024px) {
+  .select-field {
+    width: 100%;
+    margin-bottom: 5px;
+  }
+}
+</style>
diff --git a/src/views/reports/index.vue b/src/views/reports/index.vue
index f02d7fc7..10dcade8 100644
--- a/src/views/reports/index.vue
+++ b/src/views/reports/index.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="reports-container">
     <h1>{{ $t('reports.reports') }}</h1>
+    <div class="filter-container">
+      <reports-filter/>
+    </div>
     <div class="block">
       <el-timeline class="timeline">
         <timeline-item v-loading="loading" v-for="report in reports" :report="report" :key="report.id"/>
@@ -11,9 +14,10 @@
 
 <script>
 import TimelineItem from './components/TimelineItem'
+import ReportsFilter from './components/ReportsFilter'
 
 export default {
-  components: { TimelineItem },
+  components: { TimelineItem, ReportsFilter },
   computed: {
     loading() {
       return this.$store.state.users.loading
@@ -42,6 +46,10 @@ export default {
 
 <style rel='stylesheet/scss' lang='scss' scoped>
 .reports-container {
+  .filter-container {
+    margin: 22px 15px 22px 15px;
+    padding-bottom: 0
+  }
   h1 {
     margin: 22px 0 0 15px;
   }
@@ -57,6 +65,9 @@ only screen and (max-width: 760px),
     h1 {
       margin: 7px 10px 7px 10px;
     }
+    .filter-container {
+      margin: 0 10px 7px 10px
+    }
   }
 }
 </style>