timestrap-django

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