timestrap-django

  1<template>
  2<card-modal
  3  :data="$data"
  4  :edit="editEntry"
  5  :create="createEntry"
  6  @close="$emit('close')">
  7  <template slot="modal-body">
  8    <div class="form-group row">
  9      <label for="entry-note" class="col-sm-4 col-form-label text-muted">
 10        Note
 11      </label>
 12      <div class="col-sm-8">
 13        <input
 14          class="form-control shadow-sm"
 15          id="entry-note"
 16          name="entry-note"
 17          ref="entry-note"
 18          v-model="note"
 19          placeholder="Empty"/>
 20      </div>
 21    </div>
 22    <div class="form-group row">
 23      <label for="entry-task" class="col-sm-4 col-form-label text-muted">
 24        Tasks
 25      </label>
 26      <div class="col-sm-8">
 27        <selector
 28          id="entry-task"
 29          v-model="task"
 30          :options="tasks"
 31          :selected="task"/>
 32      </div>
 33    </div>
 34    <div class="form-group row">
 35      <label for="entry-project" class="col-sm-4 col-form-label text-muted">
 36        Project
 37      </label>
 38      <div class="col-sm-8">
 39        <selector
 40          id="entry-project"
 41          v-model="project"
 42          :options="projects"
 43          :selected="project"/>
 44      </div>
 45    </div>
 46    <div class="form-group row">
 47      <label for="entry-user" class="col-sm-4 col-form-label text-muted">
 48        User
 49      </label>
 50      <div class="col-sm-8">
 51        <selector
 52          id="entry-user"
 53          v-model="user"
 54          :options="users"
 55          :selected="user"/>
 56      </div>
 57    </div>
 58    <div class="form-group row">
 59      <label for="entry-date" class="col-sm-4 col-form-label text-muted">
 60        Date
 61      </label>
 62      <div class="col-sm-8">
 63        <input
 64          class="form-control shadow-sm"
 65          id="entry-date"
 66          name="entry-date"
 67          v-model="date"
 68          placeholder="Empty"/>
 69      </div>
 70    </div>
 71    <div class="form-group row">
 72      <label for="entry-duration" class="col-sm-4 col-form-label text-muted">
 73        Duration
 74      </label>
 75      <div class="col-sm-8">
 76        <input
 77          class="form-control shadow-sm"
 78          id="entry-duration"
 79          name="entry-duration"
 80          v-model="duration"
 81          placeholder="Empty"/>
 82      </div>
 83    </div>
 84    <div class="form-group row">
 85      <label for="entry-datetime_start" class="col-sm-4 col-form-label text-muted">
 86        Start Date/Time
 87      </label>
 88      <div class="col-sm-8">
 89        <input
 90          class="form-control shadow-sm"
 91          id="entry-datetime_start"
 92          name="entry-datetime_start"
 93          v-model="datetime_start"
 94          placeholder="Empty"
 95          disabled/>
 96        <small class="form-text text-muted">
 97          Only available if started and stopped via the tracker.
 98        </small>
 99      </div>
100    </div>
101    <div class="form-group row">
102      <label for="entry-datetime_end" class="col-sm-4 col-form-label text-muted">
103        End Date/Time
104      </label>
105      <div class="col-sm-8">
106        <input
107          class="form-control shadow-sm"
108          id="entry-datetime_end"
109          name="entry-datetime_end"
110          v-model="datetime_end"
111          placeholder="Empty"
112          disabled/>
113        <small class="form-text text-muted">
114          Only available if started and stopped via the tracker.
115        </small>
116      </div>
117    </div>
118  </template>
119</card-modal>
120</template>
121
122
123<script>
124import {mapActions, mapGetters} from 'vuex';
125
126import Selector from '../selector.vue';
127import CardModal from '../cards/card-modal.vue';
128
129
130export default {
131  components: {
132    Selector,
133    CardModal,
134  },
135  props: {
136    entry: {
137      type: Object,
138    },
139  },
140  data() {
141    return {
142      id: this.entry ? this.entry.id : null,
143      url: this.entry ? this.entry.url : null,
144      task: this.entry ? this.entry.task : null,
145      project: this.entry ? this.entry.project : null,
146      user: this.entry ? this.entry.user : null,
147      date: this.entry ? this.entry.date : null,
148      duration: this.entry ? this.entry.duration : null,
149      datetime_start: this.entry ? this.entry.datetime_start : null,
150      datetime_end: this.entry ? this.entry.datetime_end : null,
151      note: this.entry ? this.entry.note : null,
152    }
153  },
154  computed: {
155    ...mapGetters({
156      projects: 'projects/getSelectProjects',
157      tasks: 'tasks/getSelectTasks',
158      users: 'users/getSelectUsers',
159    }),
160  },
161  methods: {
162    ...mapActions({
163      editEntry: 'entries/editEntry',
164      createEntry: 'entries/createEntry',
165    }),
166  },
167  mounted() {
168    this.$refs['entry-note'].focus();
169  },
170};
171</script>