timestrap-django

 1<template>
 2<card-modal
 3  :data="$data"
 4  :edit="editClient"
 5  :create="createClient"
 6  @close="$emit('close')">
 7  <template slot="modal-body">
 8    <div class="form-group row">
 9      <div class="col">
10        <input
11          id="client-name"
12          name="client-name"
13          ref="client-name"
14          v-model="name"
15          class="form-control-plaintext form-control-title"
16          placeholder="Unnamed"
17          required>
18      </div>
19    </div>
20    <div class="row">
21      <div class="col-sm-4 text-muted">
22        Archive
23      </div>
24      <div class="col-sm-8">
25        <div class="custom-control custom-switch">
26          <input
27            type="checkbox"
28            class="custom-control-input"
29            id="client-archive"
30            name="client-archive"
31            v-model="archive">
32          <label class="custom-control-label text-muted" for="client-archive"/>
33        </div>
34      </div>
35    </div>
36  </template>
37</card-modal>
38</template>
39
40
41<script>
42import {mapActions} from 'vuex';
43
44import CardModal from '../cards/card-modal.vue';
45
46
47export default {
48  components: {
49    CardModal,
50  },
51  props: {
52    client: {
53      type: Object,
54    },
55  },
56  data() {
57    return {
58      id: this.client ? this.client.id : null,
59      url: this.client ? this.client.url : null,
60      name: this.client ? this.client.name : null,
61      archive: this.client ? this.client.archive : false,
62    }
63  },
64  methods: {
65    ...mapActions({
66      editClient: 'clients/editClient',
67      createClient: 'clients/createClient',
68    }),
69  },
70  mounted() {
71    this.$refs['client-name'].focus();
72  },
73};
74</script>