Adds a new project (with image)

FormProject.vue

<template>
  <v-container>
    <v-layout class="xs8 offset-xs2">
      <v-card>
        <v-toolbar flat color="primary">
          <v-toolbar-title class="secondary--text"
            >{{ title }}{{ project.name }}</v-toolbar-title
          >
          <v-spacer></v-spacer>
          <v-toolbar-items>
            <v-btn icon flat @click.native="clear" dark>
              <v-icon>close</v-icon>
            </v-btn>
          </v-toolbar-items>
        </v-toolbar>
        <v-form
          class="pa-5"
          v-model="valid"
          ref="form"
          lazy-validation
          @submit.prevent="submit"
        >
          <v-text-field
            label="Name"
            v-model="project.name"
            :rules="nameRules"
            required
          ></v-text-field>

          <v-select
            v-model="project.developer"
            :items="developers"
            label="Developer"
          ></v-select>

          <v-text-field
            label="slug"
            v-model="project.fUrl"
            required
          ></v-text-field>

          <v-text-field
            label="Location"
            v-model="project.location"
            :rules="locationRules"
            required
          ></v-text-field>

          <v-textarea
            label="Description"
            v-model="project.description"
            :rules="descriptionRules"
            required
          ></v-textarea>

          <div class="my-4">
            <v-flex v-if="!project.imgUrl && !this.imgUrl"> </v-flex>
            <v-flex v-else-if="!this.imgUrl">
              <img :src="project.imgUrl" height="200" />
            </v-flex>
            <v-flex v-else> <img :src="this.imgUrl" height="200" /> </v-flex>
            <v-btn class="raised ml-0" color="secondary" @click="onPickFile"
              >Select an Image</v-btn
            >
            <input
              type="file"
              style="display: none"
              ref="fileInput"
              accept="image/*"
              @change="onFileSelected"
              :rules="imageRules"
            />
            <v-checkbox
              class="mt-3"
              color="primary"
              label="Featured project?"
              v-model="project.featured"
            ></v-checkbox>
          </div>

          <v-layout wrap>
            <v-flex xs4 subheading>Tax rate</v-flex>
            <v-flex xs8>
              <v-text-field
                v-model="project.tax.rate"
                type="number"
                min="0"
                max="1"
                step="0.01"
                class="mt-0 pt-0"
              />
            </v-flex>

            <template v-if="project.tax.rate > 0">
              <v-flex xs4 subheading>Apply to</v-flex>
              <v-flex xs8>
                <v-checkbox
                  v-model="project.tax.applies"
                  value="materials"
                  label="Materials"
                  class="mt-0"
                  multiple
                  hide-details
                />
                <v-checkbox
                  v-model="project.tax.applies"
                  value="labor"
                  label="Labor"
                  class="mt-0"
                  multiple
                  hide-details
                />
              </v-flex>
            </template>
          </v-layout>

          <v-btn class="ml-0" color="error" dark @click="clear"
            >Cancel
            <v-icon dark right>block</v-icon>
          </v-btn>

          <v-btn color="success" type="submit" :disabled="!valid"
            >Save
            <v-icon dark right>check_circle</v-icon>
          </v-btn>
        </v-form>
      </v-card>
    </v-layout>
  </v-container>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  props: {
    title: String,
    project: {
      type: Object
    }
  },

  data: () => ({
    valid: true,
    imgUrl: '',
    developer: '',
    nameRules: [v => !!v || 'You need a project name (building name, etc)'],
    imageRules: [v => !!v || 'The project needs an image'],
    descriptionRules: [v => !!v || 'Enter a short description for the project'],
    locationRules: [
      v =>
        !!v ||
        'Enter a location or address for your project (Brickell, South Beach, etc)'
    ]
  }),

  computed: {
    ...mapGetters({
      developers: 'company/developers'
    })
  },

  methods: {

    submit() {
      if (this.$refs.form.validate()) {
        this.$emit('saved', this.project)
      }
    },
    clear() {
      this.$emit('cancel')
    },
    onPickFile() {
      this.$refs.fileInput.click()
      console.log('onPickFile')
    },
    onFileSelected(event) {
      console.log('onFileSelected')
      this.project.imageChanged = true
      const files = event.target.files
      let filename = files[0].name
      if (filename.lastIndexOf('.') <= 0) {
        return this.showMessage({
          text: 'Please choose a valid image file',
          icon: 'info_outline',
          color: 'warning'
        })
      }
      const fileReader = new FileReader()
      fileReader.addEventListener('load', () => {
        this.imgUrl = fileReader.result
      })
      fileReader.readAsDataURL(files[0])
      this.project.image = files[0]
    }
  }
}
</script>