timestrap-django

 1<template>
 2<cards
 3  :number-of-elements="projects(search).length"
 4  :view_perm="$perms.view_project"
 5  @search="search = $event">
 6  <template slot="cards-title">
 7    <icon :icon="['fas', 'briefcase']" class="fa-sm mr-2"/>
 8    Projects
 9  </template>
10
11  <template slot="cards-list">
12    <project
13      v-for="(project, index) in projects(search)"
14      :key="project.id"
15      :project="project"
16      :index="index"
17      @modal="modalToggle(project)"/>
18  </template>
19
20  <template slot="cards-new">
21    <project @modal="modalToggle()"/>
22  </template>
23
24  <project-modal
25    slot="cards-modal"
26    v-if="modalShow"
27    :project="modalProject"
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 Project from './project.vue';
38import ProjectModal from './project-modal.vue';
39
40
41export default {
42  components: {
43    Cards,
44    Project,
45    ProjectModal,
46  },
47  data() {
48    return {
49      search: '',
50      modalProject: null,
51      modalShow: false,
52    };
53  },
54  computed: {
55    ...mapGetters({
56      projects: 'projects/getSearchProjects',
57    }),
58  },
59  methods: {
60    modalToggle: function(project) {
61      if (typeof(project) !== 'undefined') this.modalProject = project;
62      else this.modalProject = null;
63      this.modalShow = !this.modalShow;
64    },
65  }
66};
67</script>