timestrap-django

 1<template>
 2<card
 3  :index="index"
 4  :delete_perm="$perms.delete_client"
 5  :change_perm="$perms.change_client"
 6  :add_perm="$perms.add_client"
 7  @edit="$emit('modal')"
 8  @detail="showEntries"
 9  @delete="deleteClient(client)">
10  <template slot="card-body">
11    <div class="card-title h5 font-weight-bold mb-4">
12      {{ client.name }}
13    </div>
14    <div v-if="client.total_duration && client.total_projects" class="card-subtitle h6">
15      <icon :icon="['fas', 'briefcase']" class="mr-1 text-muted"/>
16      {{ client.total_projects }}
17      <icon :icon="['fas', 'clock']" class="ml-3 mr-1 text-muted"/>
18      {{ client.total_duration }}
19    </div>
20  </template>
21</card>
22</template>
23
24
25<script>
26import {mapActions} from 'vuex';
27
28import Card from '../cards/card.vue';
29
30
31export default {
32  components: {
33    Card,
34  },
35  props: {
36    client: {
37      type: Object,
38      default: () => {
39        return {
40          id: null,
41        }
42      },
43    },
44    index: {
45      type: Number,
46      default: null,
47    },
48  },
49  methods: {
50    ...mapActions({
51      deleteClient: 'clients/deleteClient',
52    }),
53
54    showEntries(){
55      if(!this.client.id){
56        this.$emit('modal');
57        return;
58      }
59      this.$store.commit("reports/reset");
60      this.$store.commit("reports/setClient", this.client.url);
61      this.$router.push("/reports");
62    }
63  },
64};
65</script>