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 wrap class="px-5 my-3">
					<v-flex xs12 md3 sm3 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, rules.counter]"
								class="py-3 pr-3"
							></v-text-field>
					</v-flex>
					<!-- <v-flex xs12 md3 sm3 class="WM-FlexCenter">
							<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
							<v-text-field
								name="unique_id"
								label="Package ID"
								color="black"
								v-model="formData.unique_id"
								:rules="[rules.required, rules.counter]"
								class="py-3 pr-3"
							></v-text-field>
					</v-flex> -->
					<v-flex xs12 md12 sm12></v-flex>
					<!-- <v-row style="position: relative" v-for="(item, key) in formData.items" :key="key"> -->
						<v-flex xs12 md3 sm3 class="WM-FlexCenter WM-DuplicateInput" style="position: relative" v-for="(item, key) in formData.items" :key="key">
							<div class="Inner">
							<v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
							<v-autocomplete

							class="py-3 pr-3"
							:items="items"
							item-text="name"
							v-model="item.id"
							item-value="id"
							label="Select Items For Package"
							color="black"
							></v-autocomplete>

							<v-btn
							absolute
							small
							right
							bottom
							color="cyan"
							@click="duplicateForm(key)"
							>
							<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>ADD
						</v-btn>
							<v-btn v-if="key > 0"
							absolute
							small
							right
							top
							color="pink"
							@click="removeForm(key)"
							>
							<v-icon class="white--text mr-2 caption">fas fa-remove</v-icon>REMOVE
						</v-btn>
						</div>
						</v-flex>
					<!-- </v-row> -->
					<v-spacer></v-spacer>
					<v-flex xs12>
							<hr class="v-divider theme--light" style="margin-top:30px !important">
					</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: '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: "",
				note: "",
				items: [
					{
						name:''
					}
				]
			},
			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" });
			}
		},

		duplicateForm(infoIndex) {
			this.formData.items.push({
				name: "",
			});

		},
		removeForm(infoIndex) {
			this.formData.items.splice(infoIndex, 1);
		},
	}
};
</script>
<style media="screen">
.WM-DuplicateInput {
	margin: 15px 0;
}
.WM-DuplicateInput .Inner {
	padding: 15px 20px !important;
	margin: 0 10px 0 0;
	width: 100%;
	border: 1px solid rgba(0,0,0,.2);
}
</style>