timestrap-django

 1<template>
 2<cards
 3  :number-of-elements="tasks(search).length"
 4  :view_perm="$perms.view_task"
 5  @search="search = $event">
 6  <template slot="cards-title">
 7    <icon :icon="['fas', 'tasks']" class="fa-sm mr-2"/>
 8    Tasks
 9  </template>
10
11  <template slot="cards-list">
12    <task
13      v-for="(task, index) in tasks(search)"
14      :key="task.id"
15      :task="task"
16      :index="index"
17      @modal="modalToggle(task)"/>
18  </template>
19
20  <template slot="cards-new">
21    <task @modal="modalToggle()"/>
22  </template>
23
24  <task-modal
25    slot="cards-modal"
26    v-if="modalShow"
27    :task="modalTask"
28    @close="modalShow = false"/>
29</cards>
30</template>
31
32
33<script>
34import {mapGetters, mapActions} from 'vuex';
35
36import Cards from '../cards/cards.vue';
37import Task from './task.vue';
38import TaskModal from './task-modal.vue';
39
40
41export default {
42  components: {
43    Cards,
44    Task,
45    TaskModal,
46  },
47  data() {
48    return {
49      search: '',
50      modalTask: null,
51      modalShow: false,
52    };
53  },
54  computed: {
55    ...mapGetters({
56      tasks: 'tasks/getSearchTasks',
57    }),
58  },
59  methods: {
60    modalToggle: function(task) {
61      if (typeof(task) !== 'undefined') this.modalTask = task;
62      else this.modalTask = null;
63      this.modalShow = !this.modalShow;
64    },
65  },
66};
67</script>