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 align-center justify-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';
export default {
  data() {
    return {
      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);
    }
  },
  methods: {
    async load(id) {
      const result = await ApiService.get(urls.editItem(id));
      if (result.status == 200) {
        this.formData = result.data.data;
      }
    },
     async submitForm() {
      let result;
      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>