Updated search bar

src/static/app/src/components/configurationComponents/peerList.vue

@@ -36,9 +36,11 @@ import {defineAsyncComponent, ref} from "vue";
 import LocaleText from "@/components/text/localeText.vue";
 import PeerRow from "@/components/configurationComponents/peerRow.vue";
 import {GetLocale} from "@/utilities/locale.js";
+import PeerSearchBar from "@/components/configurationComponents/peerSearchBar.vue";
 export default {
 	name: "peerList",
 	components: {
+		PeerSearchBar,
 		PeerRow,
 		DeleteConfiguration:
 			defineAsyncComponent(() => import("@/components/configurationComponents/deleteConfiguration.vue")),
@@ -150,6 +152,7 @@ export default {
 			deleteConfiguration: {
 				modalOpen: false
 			},
+			peerSearchBarShow: false,
 			searchStringTimeout: undefined,
 			searchString: "",
 		}
@@ -197,18 +200,6 @@ export default {
 				this.configurationToggling = false;
 			})
 		},
-		debounce(){
-			if (!this.searchStringTimeout){
-				this.searchStringTimeout = setTimeout(() => {
-					this.wireguardConfigurationStore.searchString = this.searchString;
-				}, 300)
-			}else{
-				clearTimeout(this.searchStringTimeout)
-				this.searchStringTimeout = setTimeout(() => {
-					this.wireguardConfigurationStore.searchString = this.searchString;
-				}, 300)
-			}
-		},
 		getPeers(id = this.$route.params.id){
 			fetchGet("/api/getWireguardConfigurationInfo",
 				{
@@ -387,9 +378,7 @@ export default {
 				}
 			}
 		},
-		searchBarPlaceholder(){
+		
-			return GetLocale("Search Peers...")
-		},
 		searchPeers(){
 			const fuse = new Fuse(this.configurationPeers, {
 				keys: ["name", "id", "allowed_ip"]
@@ -621,6 +610,7 @@ export default {
 		<hr>
 		<div style="margin-bottom: 80px">
 			<PeerSearch
+				@search="this.peerSearchBarShow = true"
 				@jobsAll="this.peerScheduleJobsAll.modalOpen = true"
 				@jobLogs="this.peerScheduleJobsLogs.modalOpen = true"
 				@editConfiguration="this.editConfiguration.modalOpen = true"
@@ -643,29 +633,11 @@ export default {
 				</div>
 			</TransitionGroup>
 		</div>
-		<div class="fixed-bottom w-100 bottom-0 z-2 animate__animated animate__slideInUp" style="z-index: 1; animation-delay: 0.5s">
+		<Transition name="slideUp">
-			<div class="container-fluid">
+			<PeerSearchBar 
-				<div class="row g-0">
+				@close="peerSearchBarShow = false"
-					<div class="col-md-3 col-lg-2"></div>
+				v-if="this.peerSearchBarShow"></PeerSearchBar>
-					<div class="col-md-9 col-lg-10 d-flex justify-content-center py-2">
+		</Transition>
-						<div class="rounded-3 p-2 border shadow searchPeersContainer">
-							<div class="d-flex gap-3 align-items-center ps-2">
-								<h6 class="mb-0 ms-auto">
-									<label for="searchPeers">
-										<i class="bi bi-search"></i>
-									</label>
-								</h6>
-								<input class="form-control rounded-3 bg-secondary-subtle border-1 border-secondary-subtle "
-								       :placeholder="searchBarPlaceholder"
-								       id="searchPeers"
-								       @keyup="this.debounce()"
-								       v-model="this.searchString">
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
 		
 		<Transition name="zoom">
 			<PeerSettings v-if="this.peerSetting.modalOpen"
@@ -770,14 +742,17 @@ th, td{
 	}
 }
 
-.searchPeersContainer{
+.slideUp-enter-active,
-	width: 100%;
+.slideUp-leave-active{
-	backdrop-filter: blur(10px);
+	transition: all 0.5s cubic-bezier(0.82, 0.58, 0.17, 1);
 }
 
-@media screen and (min-width: 768px){
+.slideUp-enter-from,
-	.searchPeersContainer{
+.slideUp-leave-to {
-		width: 400px;
+	transform: translateY(100%);
-	}
+	filter: blur(3px);
 }
+
+
+
 </style>

src/static/app/src/components/configurationComponents/peerSearch.vue

@@ -149,7 +149,12 @@ export default {
 
 				</ul>
 			</div>
-			<button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle  ms-lg-auto"
+			<button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle ms-lg-auto"
+			        @click="this.$emit('search')">
+				<i class="bi bi-search me-2"></i>
+				<LocaleText t="Search"></LocaleText>
+			</button>
+			<button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle"
 			        @click="this.downloadAllPeer()">
 				<i class="bi bi-download me-2"></i>
 				<LocaleText t="Download All"></LocaleText>

src/static/app/src/components/configurationComponents/peerSearchBar.vue

@@ -0,0 +1,76 @@
+<script setup>
+import {GetLocale} from "@/utilities/locale.js";
+import {computed, onMounted, ref, useTemplateRef} from "vue";
+import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
+import LocaleText from "@/components/text/localeText.vue";
+
+const searchBarPlaceholder = computed(() => {
+	return GetLocale("Search Peers...")
+})
+let searchStringTimeout = undefined
+const searchString = ref("")
+const wireguardConfigurationStore = WireguardConfigurationsStore()
+
+const debounce = () => {
+	if (!searchStringTimeout){
+		searchStringTimeout = setTimeout(() => {
+			wireguardConfigurationStore.searchString = searchString.value;
+		}, 300)
+	}else{
+		clearTimeout(searchStringTimeout)
+		searchStringTimeout = setTimeout(() => {
+			wireguardConfigurationStore.searchString = searchString.value;
+		}, 300)
+	}
+}
+
+const emits = defineEmits(['close'])
+const input = useTemplateRef('searchBar')
+
+onMounted(() => {
+	input.value.focus();
+})
+
+</script>
+
+<template>
+	<div class="fixed-bottom w-100 bottom-0 z-2" style="z-index: 1;">
+		<div class="container-fluid">
+			<div class="row g-0">
+				<div class="col-md-3 col-lg-2"></div>
+				<div class="col-md-9 col-lg-10 d-flex justify-content-center py-2">
+					<div class="rounded-3 p-2 border shadow searchPeersContainer bg-body-tertiary">
+						<div class="d-flex gap-1 align-items-center px-2">
+							<h6 class="mb-0 me-2">
+								<label for="searchPeers">
+									<i class="bi bi-search"></i>
+								</label>
+							</h6>
+							<input 
+								ref="searchBar"
+								class="form-control rounded-3 bg-secondary-subtle border-1 border-secondary-subtle "
+							       :placeholder="searchBarPlaceholder"
+							       id="searchPeers"
+							       @keyup="debounce()"
+							       v-model="searchString">
+							<button 
+								@click="emits('close')"
+								class="btn btn-secondary rounded-3 d-flex align-items-center">
+								<i class="bi bi-x-circle-fill me-2"></i><LocaleText t="Hide"></LocaleText>
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.searchPeersContainer{
+	width: 100%;
+}
+
+
+
+</style>