cssd-back/resources/js/vue/views/Item/AddEdit.vue

<template>
  <v-form ref="form">
    <v-container grid-list-xs fluid>
      <material-card color="black" title="Add Instrument">
        <v-layout align-center justify-center wrap class="px-5 my-3">
          <v-flex xs12 md4 sm4 class="WM-FlexCenter">
            <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
            <v-text-field name="name" label="Name" color="black" v-model="formData.name" :rules="[rules.required]"
              class="py-3 pr-3"></v-text-field>
          </v-flex>
          <!-- <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
            <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
            <v-text-field
              name="unique_id"
              label="Item ID"
              color="black"
              v-model="formData.unique_id"
              :rules="[rules.required]"
              class="py-3 pr-3"
            ></v-text-field>
          </v-flex> -->
          <v-flex xs12 md4 sm4 class="WM-FlexCenter pl-3">
            <v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
            <v-text-field name="size" label="Size" color="black" v-model="formData.size" class="py-3 pr-3"></v-text-field>
          </v-flex>
          <v-flex xs12 md4 sm4 class="WM-FlexCenter pl-3">
            <v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
            <v-text-field name="specific" label="Specific" color="black" v-model="formData.specific"
              class="py-3 pr-3"></v-text-field>
          </v-flex>
        </v-layout>
        <v-layout class="px-5 mb-3">
          <v-flex xs12 md4 sm4 class="WM-FlexCenter">
            <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
            <v-text-field name="UDI" label="UDI" color="black" v-model="formData.udi" :rules="[rules.required]"
              class="py-3 pr-3"></v-text-field>
          </v-flex>
          <v-flex xs12 md8 sm8 class="WM-FlexCenter" v-if="galleryDataLoaded">
            <wm-Dropzone class="w-100" :Images="galleries" :BatchID="file_batch_id" :ModelID="$route.params.Item"
              ModelType="Item"></wm-Dropzone>
          </v-flex>
        </v-layout>
        <v-layout align-center wrap class="px-5 mb-3">
          <v-flex xs12 sm12 md12>
            <v-textarea color="black" v-model="formData.note" class="pa-2" name="address">
              <template v-slot:label>
                <div>description</div>
              </template>
            </v-textarea>
          </v-flex>
        </v-layout>
        <v-layout row wrap justify-center align-center>
          <v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
            <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm()">
              <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
              <span class="white--text">SAVE</span>
            </v-btn>
          </v-flex>
          <v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
            <router-link :to="{ name: 'AllItem' }">
              <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
                <v-icon class="black--text">keyboard_arrow_left</v-icon>
                <span class="black--text">Back</span>
              </v-btn>
            </router-link>
          </v-flex>
        </v-layout>
      </material-card>
    </v-container>
  </v-form>
</template>

<script>
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
import { mapMutations } from 'vuex';
import Dropzone from '@/components/core/Dropzone'

export default {
  components: {
    'wm-Dropzone': Dropzone,
  },
  data() {
    return {
      galleries: [],
      galleryDataLoaded: false,
      file_batch_id: Math.floor(Math.random() * 9000000000) + 1000000000,
      formData: {
        name: "",
        unique_id: "",
        result: "",
        note: "",
      },
      result: ["Pass", "Fail"],
      rules: {
        required: value => !!value || "Required.",
        counter: value =>
          !value || value.length == 0 || value.length >= 5 || "Min 5 characters",
      }
    };
  },
  created() {
    if (this.$route.params.Item) {
      this.load(this.$route.params.Item);
    } else {
      this.galleryDataLoaded = true;
    }
  },
  methods: {
    async load(id) {
      const result = await ApiService.get(urls.editItem(id));
      if (result.status == 200) {
        this.galleries = result.data.data.filesPath;
        this.galleryDataLoaded = true;  
        this.formData = result.data.data;
      }
    },
    async submitForm() {
      let result;
      this.formData['file_batch_id'] = this.file_batch_id;
      if (this.$route.params.Item) {
        result = await ApiService.put(urls.updateItem(this.$route.params.Item), this.formData);
      } else {
        result = await ApiService.post(urls.storeItem, this.formData);
      }

      if (result && result.status == 200) {
        this.$router.push({ name: 'AllItem' })
      }
    },
  }
};
</script>
<style>
.w-100 {
  width: 100%;
}
</style>