fix duplicate by enter

src/views/Package/AddEdit.vue

@@ -5,8 +5,14 @@
         <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"
+            <v-text-field
-							:rules="[rules.required, rules.counter]" class="py-3 pr-3"></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>
@@ -21,12 +27,29 @@
 					</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-flex
-						v-for="(item, key) in formData.items" :key="key">
+            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"
+              <v-autocomplete
-								item-value="id" label="Select Items For Package" color="black" :filter="customFilter">
+                @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>
@@ -36,28 +59,58 @@
                 </template>
               </v-autocomplete>
 
-							<v-btn absolute small right bottom color="cyan" @click="duplicateForm(key)">
+              <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-btn
-								<v-icon class="white--text mr-2 caption">fas fa-remove</v-icon>REMOVE
+                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]"
+            <v-text-field
-							class="py-3"></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">
+            <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">
+            <v-textarea
+              color="black"
+              v-model="formData.note"
+              class="pa-2"
+              name="address"
+            >
               <template v-slot:label>
                 <div>description</div>
               </template>
@@ -66,14 +119,25 @@
         </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-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">
+          <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-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>
@@ -98,20 +162,20 @@ export default {
         note: "",
         items: [
           {
-						name: ''
+            name: "",
-					}
+          },
-				]
+        ],
       },
       items: [],
       result: ["Pass", "Fail"],
       rules: {
-				required: value => !!value || "Required.",
+        required: (value) => !!value || "Required.",
-				counter: value =>
+        counter: (value) =>
           !value ||
           value.length == 0 ||
           value.length >= 5 ||
-					"Min 5 characters"
+          "Min 5 characters",
-			}
+      },
     };
   },
   created() {
@@ -126,10 +190,9 @@ export default {
       const udi = item.udi ? item.udi.toLowerCase() : null;
       const searchText = queryText.toLowerCase();
       if (udi) {
-				return name.indexOf(searchText) > -1 ||
+        return name.indexOf(searchText) > -1 || udi.indexOf(searchText) > -1;
-					udi.indexOf(searchText) > -1
       }
-			return name.indexOf(searchText) > -1
+      return name.indexOf(searchText) > -1;
     },
     async load(id) {
       const result = await ApiService.get(urls.editPackage(id));
@@ -142,6 +205,10 @@ export default {
       if (result.status == 200) {
       	this.items = result.data.data;
       }
+    //   this.items = [
+    //     { name: "test", udi: "23" },
+    //     { name: "saj", udi: "43" },
+    //   ];
     },
     async submitForm() {
       let result;
@@ -151,10 +218,7 @@ export default {
           this.formData
         );
       } else {
-				result = await ApiService.post(
+        result = await ApiService.post(urls.storePackage, this.formData);
-					urls.storePackage,
-					this.formData
-				);
       }
 
       if (result && result.status == 200) {
@@ -166,12 +230,13 @@ export default {
       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">
@@ -183,6 +248,6 @@ export default {
   padding: 15px 20px !important;
   margin: 0 10px 0 0;
   width: 100%;
-	border: 1px solid rgba(0, 0, 0, .2);
+  border: 1px solid rgba(0, 0, 0, 0.2);
 }
 </style>