Add select input for reports filters

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()}` } : {}

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'
   }
 }

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)

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>

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>