@7365admin1/layer-common 3.1.2-staging.34 → 3.1.2-staging.36

package/components/VisitorForm.vue

@@ -36,10 +36,17 @@
                   </template>
 
                   <v-list v-if="nricSearchResults.length" class="pa-1 phone-search-results">
-                    <v-list-item v-for="(item, index) in nricSearchResults" :key="item._id || index"
-                      @click="selectNricSearchResult(item)" class="cursor-pointer nric-search-item">
-                      <VisitorSearchResultSummary :item="item" />
-                    </v-list-item>
+                    <div class="search-results-scroll">
+                      <v-list-item v-for="(item, index) in nricSearchResults" :key="item._id || index"
+                        @click="selectNricSearchResult(item)" class="cursor-pointer nric-search-item">
+                        <VisitorSearchResultSummary :item="item" />
+                      </v-list-item>
+                    </div>
+                    <div class="search-results-close pa-1">
+                      <v-btn block variant="flat" color="red" @click.stop="closeAutofillSearchResults('nric')">
+                        Close
+                      </v-btn>
+                    </div>
                   </v-list>
                 </v-menu>
               </v-col>
@@ -58,10 +65,17 @@
                   </template>
 
                   <v-list v-if="phoneSearchResults.length" class="pa-1 phone-search-results">
-                    <v-list-item v-for="(item, index) in phoneSearchResults" :key="item._id || index"
-                      @click="selectPhoneNumberSearchResult(item)" class="cursor-pointer nric-search-item">
-                      <VisitorSearchResultSummary :item="item" />
-                    </v-list-item>
+                    <div class="search-results-scroll">
+                      <v-list-item v-for="(item, index) in phoneSearchResults" :key="item._id || index"
+                        @click="selectPhoneNumberSearchResult(item)" class="cursor-pointer nric-search-item">
+                        <VisitorSearchResultSummary :item="item" />
+                      </v-list-item>
+                    </div>
+                    <div class="search-results-close pa-1">
+                      <v-btn block variant="flat" color="red" @click.stop="closeAutofillSearchResults('contact')">
+                        Close
+                      </v-btn>
+                    </div>
                   </v-list>
                 </v-menu>
               </v-col>
@@ -77,15 +91,23 @@
                 <v-menu v-model="vehicleSearchMenu" location="bottom" offset-y :close-on-content-click="false">
                   <template #activator="{ props }">
                     <InputVehicleNumber v-bind="props" v-model="visitor.plateNumber" density="comfortable"
-                      @update:model-value="handleUpdateVehicleNumber" @focus="isPlateNumberFieldFocused = true"
+                      @update:model-value="handleUpdateVehicleNumber" @focus="handleFocusPlateNumber"
                       @blur="isPlateNumberFieldFocused = false" />
                   </template>
 
                   <v-list v-if="vehicleSearchResults.length" class="pa-1 phone-search-results">
-                    <v-list-item v-for="(item, index) in vehicleSearchResults" :key="item._id || index"
-                      @click="selectPlateNumberSearchResult(item)" class="cursor-pointer nric-search-item">
-                      <VisitorSearchResultSummary :item="item" />
-                    </v-list-item>
+                    <div class="search-results-scroll">
+                      <v-list-item v-for="(item, index) in vehicleSearchResults" :key="item._id || index"
+                        @click="selectPlateNumberSearchResult(item)" class="cursor-pointer nric-search-item">
+                        <VisitorSearchResultSummary :item="item" />
+                      </v-list-item>
+                    </div>
+                    <div class="search-results-close pa-1">
+                      <v-btn block variant="flat" color="red"
+                        @click.stop="closeAutofillSearchResults('vehicleNumber')">
+                        Close
+                      </v-btn>
+                    </div>
                   </v-list>
                 </v-menu>
               </v-col>
@@ -1066,6 +1088,23 @@ function selectAutofillSearchResult(item: Partial<TPeople>, source: Exclude<Auto
   });
 }
 
+function closeAutofillSearchResults(source: Exclude<AutofillSource, null>) {
+  if (source === "nric") {
+    nricSearchMenu.value = false;
+    nricSearchResults.value = [];
+  }
+
+  if (source === "contact") {
+    phoneSearchMenu.value = false;
+    phoneSearchResults.value = [];
+  }
+
+  if (source === "vehicleNumber") {
+    vehicleSearchMenu.value = false;
+    vehicleSearchResults.value = [];
+  }
+}
+
 function closeNricAutofillOptions() {
   dialog.nricAutofillOptions = false;
   selectedNricSearchResult.value = null;
@@ -1503,6 +1542,15 @@ function handleUpdateVehicleNumber() {
   debounceFetchPlateNumber();
 }
 
+const handleFocusPlateNumber = () => {
+  isPlateNumberFieldFocused.value = true;
+  if (prop.mode === 'register') {
+
+    handleUpdateVehicleNumber();
+  }
+};
+
+
 function backToSelection() {
   emit("back");
   message.value = "";
@@ -2108,10 +2156,22 @@ onMounted(() => {
 }
 
 .phone-search-results {
+  display: flex;
+  flex-direction: column;
   max-height: 400px;
+  overflow: hidden;
+}
+
+.search-results-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
   overflow-y: auto;
 }
 
+.search-results-close {
+  flex: 0 0 auto;
+}
+
 .nric-options-card {
   border-radius: 16px !important;
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.1.2-staging.34",
+  "version": "3.1.2-staging.36",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {