|
5 | 5 | <div class="backlog-filters"> |
6 | 6 | <div |
7 | 7 | class="backlog-filter" |
8 | | - :class="isActive(index)" |
9 | | - v-for="(filter, index) in filters" |
10 | | - :key="index" |
11 | | - @click="featureNotReady" |
12 | | - >{{ filter }} |
| 8 | + :class="isActive(filter.type)" |
| 9 | + v-for="filter in filters" |
| 10 | + :key="filter.type" |
| 11 | + @click="updateFilter(filter.type)" |
| 12 | + >{{ filter.title }} |
13 | 13 | </div> |
14 | 14 | </div> |
15 | 15 | <div class="backlog-tableHeader"> |
|
20 | 20 | <div class="backlog-tableHeader-epicName" @click="featureNotReady">Epic name |
21 | 21 | <i class="fas fa-sort"></i> |
22 | 22 | </div> |
23 | | - <div class="backlog-tableHeader-status" @click="featureNotReady">Status |
| 23 | + <div class="backlog-tableHeader-status" @click="featureNotReady">Status |
24 | 24 | <i class="fas fa-sort"></i> |
25 | 25 | </div> |
26 | 26 | <div class="backlog-tableHeader-author" @click="featureNotReady">Author |
|
36 | 36 | <draggable group="people" @end="sortEpic"> |
37 | 37 | <EpicList |
38 | 38 | v-for="epic in epics" |
39 | | - :key="epic.id" |
| 39 | + :activeFilter="validStatuses" |
40 | 40 | :epic="epic" |
| 41 | + :key="epic.id" |
41 | 42 | :userDetails="userDetails" |
42 | 43 | ></EpicList> |
43 | 44 | </draggable> |
|
46 | 47 | </template> |
47 | 48 |
|
48 | 49 | <script> |
49 | | - import EpicList from './EpicList/EpicList.vue'; |
50 | | - import draggable from 'vuedraggable'; |
51 | 50 | import { bus } from '../../../main.js'; |
52 | 51 | import iziToast from 'izitoast'; |
| 52 | + import draggable from 'vuedraggable'; |
| 53 | + import EpicList from './EpicList/EpicList.vue'; |
53 | 54 |
|
54 | 55 | export default { |
55 | | - props: [ 'epics', 'userDetails', 'lane'], |
| 56 | + props: [ 'epics', 'userDetails', 'lanes'], |
56 | 57 | components: { EpicList, draggable }, |
| 58 | + created() { |
| 59 | + this.buildFilterList(); |
| 60 | + }, |
57 | 61 | data: () => { |
58 | 62 | return { |
59 | | - filters: ['all', 'active', 'in progress', 'soon', 'later', 'done', 'archived'], |
| 63 | + filters: [ |
| 64 | + {title:'all', type: 'all'}, |
| 65 | + {title: 'active', type: 'active'} |
| 66 | + ], |
60 | 67 | activeFilter: 'all' |
61 | 68 | } |
62 | 69 | }, |
63 | 70 | methods: { |
64 | 71 | updateFilter (newFilter) { |
65 | | - this.activeFilter = this.filters[newFilter]; |
| 72 | + this.activeFilter = newFilter; |
66 | 73 | }, |
67 | | - isActive (index) { |
68 | | - if (index === this.activeFilter) { |
| 74 | + isActive (filterType) { |
| 75 | + if (filterType === this.activeFilter) { |
69 | 76 | return 'active' |
70 | 77 | } |
71 | 78 | }, |
|
79 | 86 | position: 'topRight' |
80 | 87 | }); |
81 | 88 | }, |
| 89 | + buildFilterList() { |
| 90 | + for (let i = 0; i < this.lanes.length; i++){ |
| 91 | + this.filters.push(this.lanes[i]) |
| 92 | + } |
| 93 | +
|
| 94 | + this.filters.push({title: 'archived', type: 'archived'}); |
| 95 | + } |
| 96 | + }, |
| 97 | + computed: { |
| 98 | + validStatuses() { |
| 99 | + let laneStatuses = []; |
| 100 | +
|
| 101 | + for (let i = 0; i < this.lanes.length; i++) { |
| 102 | + laneStatuses.push(this.lanes[i].type); |
| 103 | + } |
| 104 | +
|
| 105 | + let activeStatuses = ['inProgress', 'soon', 'later']; |
| 106 | +
|
| 107 | + switch (this.activeFilter) { |
| 108 | + case 'all': |
| 109 | + return laneStatuses; |
| 110 | + case 'active': |
| 111 | + return activeStatuses; |
| 112 | + case 'inProgress': |
| 113 | + return 'inProgress'; |
| 114 | + case 'soon': |
| 115 | + return 'soon'; |
| 116 | + case 'later': |
| 117 | + return 'later'; |
| 118 | + case 'done': |
| 119 | + return 'done'; |
| 120 | + case 'archived': |
| 121 | + return 'done'; |
| 122 | + default: |
| 123 | + return laneStatuses; |
| 124 | + } |
| 125 | + } |
82 | 126 | } |
83 | 127 | } |
84 | 128 | </script> |
0 commit comments