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

<template>
    <v-form ref="form">
        <v-container grid-list-xs fluid>
            <material-card color="black" title="Add Package">
                <v-layout align-center justify-center wrap class="px-5 my-3">
                    <v-flex xs12 sm4 md4>
                        <v-text-field
                            name="name"
                            label="Name"
                            color="black"
                            v-model="formData.name"
                            :rules="[rules.required, rules.counter]"
                            class="pa-2"
                        ></v-text-field>
                    </v-flex>
                    <v-flex xs12 sm4 md4>
                        <v-select
                            :items="result"
                            label="Result"
                            name="result"
                            v-model="formData.result"
                            single-line
                            :rules="[rules.required]"
                            class="pa-2"
                            color="black"
                        ></v-select>
                    </v-flex>
                </v-layout>
                <v-layout align-center justify-center wrap class="px-5 mb-3">
                    <v-flex xs12 sm12 md12>
                        <v-autocomplete
                            multiple
                            :items="items"
                            item-text="name"
                            v-model="formData.items"
                            item-value="id"
                            label="Select Items For Package"
                        ></v-autocomplete>
                    </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: 'AllPackage'}">
                            <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: "",
                result: "",
                description: "",
                items: []
            },
            items: [],
            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.package) {
            this.load(this.$route.params.package);
        }
        this.loadItems();
    },
    methods: {
        async load(id) {
            const result = await ApiService.get(urls.editPackage(id));
            if (result.status == 200) {
                this.formData = result.data.data;
            }
        },
        async loadItems() {
            const result = await ApiService.get(urls.listAllItem());
            if (result.status == 200) {
                this.items = result.data.data;
            }
        },
        async submitForm() {
            let result;
            if (this.$route.params.package) {
                result = await ApiService.put(
                    urls.updatePackage(this.$route.params.package),
                    this.formData
                );
            } else {
                result = await ApiService.post(
                    urls.storePackage,
                    this.formData
                );
            }

            if (result && result.status == 200) {
                this.$router.push({ name: "AllPackage" });
            }
        }
    }
};
</script>