timestrap-django

  1<template>
  2<card-modal
  3  :data="$data"
  4  :edit="editProject"
  5  :create="createProject"
  6  @close="$emit('close')">
  7  <template slot="modal-body">
  8    <div class="form-group row">
  9      <div class="col">
 10        <input
 11          id="project-name"
 12          name="project-name"
 13          ref="project-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="project-client" class="col-sm-4 col-form-label text-muted">
 22        Client
 23      </label>
 24      <div class="col-sm-8">
 25        <selector
 26          id="project-client"
 27          v-model="client"
 28          :options="clients"
 29          :selected="client"/>
 30      </div>
 31    </div>
 32    <div class="form-group row">
 33      <label for="project-estimate" class="col-sm-4 col-form-label text-muted">
 34        Estimate
 35      </label>
 36      <div class="col-sm-8">
 37        <input
 38          class="form-control shadow-sm"
 39          id="project-estimate"
 40          name="project-estimate"
 41          v-model="estimate"
 42          placeholder="Empty"/>
 43      </div>
 44    </div>
 45    <div class="row">
 46      <div class="col-sm-4 text-muted">
 47        Archive
 48      </div>
 49      <div class="col-sm-8">
 50        <div class="custom-control custom-switch">
 51          <input
 52            type="checkbox"
 53            class="custom-control-input"
 54            id="project-archive"
 55            name="project-archive"
 56            v-model="archive">
 57          <label class="custom-control-label text-muted" for="project-archive"/>
 58        </div>
 59      </div>
 60    </div>
 61  </template>
 62</card-modal>
 63</template>
 64
 65
 66<script>
 67import {mapActions, mapGetters} from 'vuex';
 68
 69import Selector from '../selector.vue';
 70import CardModal from '../cards/card-modal.vue';
 71
 72
 73export default {
 74  components: {
 75    Selector,
 76    CardModal,
 77  },
 78  props: {
 79    project: {
 80      type: Object,
 81    },
 82  },
 83  data() {
 84    return {
 85      id: this.project ? this.project.id : null,
 86      url: this.project ? this.project.url : null,
 87      name: this.project ? this.project.name : null,
 88      client: this.project ? this.project.client : null,
 89      estimate: this.project ? this.project.estimate : null,
 90      archive: this.project ? this.project.archive : false,
 91    }
 92  },
 93  computed: {
 94    ...mapGetters({
 95      clients: 'clients/getSelectClients',
 96    }),
 97  },
 98  methods: {
 99    ...mapActions({
100      editProject: 'projects/editProject',
101      createProject: 'projects/createProject',
102    }),
103  },
104  mounted() {
105    this.$refs['project-name'].focus();
106  },
107};
108</script>