timestrap-django

 1<template>
 2<card-modal
 3  :data="$data"
 4  :edit="editTask"
 5  :create="createTask"
 6  @close="$emit('close')">
 7  <template slot="modal-body">
 8    <div class="form-group row">
 9      <div class="col">
10        <input
11          id="task-name"
12          name="task-name"
13          ref="task-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="form-group row">
21      <label for="task-hourly-rate" class="col-sm-4 col-form-label text-muted">
22        Hourly Rate
23      </label>
24      <div class="col-sm-8">
25        <input
26          class="form-control shadow-sm"
27          id="task-hourly-rate"
28          name="task-hourly-rate"
29          v-model="hourly_rate"
30          placeholder="Empty">
31      </div>
32    </div>
33  </template>
34</card-modal>
35</template>
36
37
38<script>
39import {mapActions} from 'vuex';
40
41import CardModal from '../cards/card-modal.vue';
42
43
44export default {
45  components: {
46    CardModal,
47  },
48  props: {
49    task: {
50      type: Object,
51    },
52  },
53  data() {
54    return {
55      id: this.task ? this.task.id : null,
56      url: this.task ? this.task.url : null,
57      name: this.task ? this.task.name : null,
58      hourly_rate: this.task ? this.task.hourly_rate : null,
59    }
60  },
61  methods: {
62    ...mapActions({
63      editTask: 'tasks/editTask',
64      createTask: 'tasks/createTask',
65    }),
66  },
67  mounted() {
68    this.$refs['task-name'].focus();
69  },
70};
71</script>