From a5786f91d15a1458c4af2bd0867e31a54e63988a Mon Sep 17 00:00:00 2001
From: sajjad_talkhabi <talkhabisajad10@gmail.com>
Date: Tue, 24 Oct 2023 21:53:40 +0330
Subject: [PATCH] fix duplicate by enter

---
 src/views/Package/AddEdit.vue | 379 ++++++++++++++++++++--------------
 1 file changed, 222 insertions(+), 157 deletions(-)

diff --git a/src/views/Package/AddEdit.vue b/src/views/Package/AddEdit.vue
index 14ee2f5..d3c0ba5 100644
--- a/src/views/Package/AddEdit.vue
+++ b/src/views/Package/AddEdit.vue
@@ -1,14 +1,20 @@
 <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-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"
@@ -19,70 +25,128 @@
 								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" :filter="customFilter">
-								<template v-slot:selection="{ item }">
-									{{ item.name }} - {{ item.udi }}
-								</template>
+          <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
+                @keydown.enter.native.prevent="duplicateForm(key)"
+                :ref="`selectItem-${key}`"
+                class="py-3 pr-3"
+                :items="items"
+                item-text="name"
+                v-model="item.id"
+                item-value="id"
+                label="Select Items For Package"
+                color="black"
+                :filter="customFilter"
+              >
+                <template v-slot:selection="{ item }">
+                  {{ item.name }} - {{ item.udi }}
+                </template>
 
-								<template v-slot:item="{ item }">
-									{{ item.name }} - {{ item.udi }}
-								</template>
-							</v-autocomplete>
+                <template v-slot:item="{ item }">
+                  {{ item.name }} - {{ item.udi }}
+                </template>
+              </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-flex xs3 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"></v-text-field>
-					</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>
+              <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-flex xs3 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"
+            ></v-text-field>
+          </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>
@@ -90,99 +154,100 @@ 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: {
-		customFilter(item, queryText) {
-			const name = item.name.toLowerCase();
-			const udi = item.udi ? item.udi.toLowerCase() : null;
-			const searchText = queryText.toLowerCase();
-			if (udi) {
-				return name.indexOf(searchText) > -1 ||
-					udi.indexOf(searchText) > -1
-			}
-			return name.indexOf(searchText) > -1
-		},
-		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
-				);
-			}
+  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: {
+    customFilter(item, queryText) {
+      const name = item.name.toLowerCase();
+      const udi = item.udi ? item.udi.toLowerCase() : null;
+      const searchText = queryText.toLowerCase();
+      if (udi) {
+        return name.indexOf(searchText) > -1 || udi.indexOf(searchText) > -1;
+      }
+      return name.indexOf(searchText) > -1;
+    },
+    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;
+      }
+    //   this.items = [
+    //     { name: "test", udi: "23" },
+    //     { name: "saj", udi: "43" },
+    //   ];
+    },
+    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" });
-			}
-		},
+      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);
-		},
-	}
+    duplicateForm(infoIndex) {
+      this.formData.items.push({
+        name: "",
+      });
+      console.log(this.$refs[`selectItem-1`], infoIndex);
+      this.$refs[`selectItem-${infoIndex}`][0].focus();
+    },
+    removeForm(infoIndex) {
+      this.formData.items.splice(infoIndex, 1);
+    },
+  },
 };
 </script>
 <style media="screen">
 .WM-DuplicateInput {
-	margin: 15px 0;
+  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);
+  padding: 15px 20px !important;
+  margin: 0 10px 0 0;
+  width: 100%;
+  border: 1px solid rgba(0, 0, 0, 0.2);
 }
 </style>