feat: search by asset

packages/client/hmi-client/src/App.vue

@@ -5,11 +5,11 @@
 	<Toast position="top-right" group="info" />
 	<Toast position="top-right" group="success" />
 	<header>
-		<tera-navbar :active="displayNavBar" :show-suggestions="showSuggestions" />
+		<tera-navbar :active="displayNavBar" />
 	</header>
 	<main>
 		<router-view v-slot="{ Component }">
-			<component class="page" ref="pageRef" :is="Component" />
+			<component class="page" :is="Component" />
 		</router-view>
 	</main>
 	<footer>
@@ -19,15 +19,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, watch } from 'vue';
 import Toast from 'primevue/toast';
 
 import { ToastSummaries, ToastSeverity, useToastService } from '@/services/toast';
 import { useRoute, useRouter } from 'vue-router';
 import API from '@/api/api';
 import TeraNavbar from '@/components/navbar/tera-navbar.vue';
 import TeraFooter from '@/components/navbar/tera-footer.vue';
-import { ResourceType } from '@/types/common';
 import { useProjects } from '@/composables/project';
 import { Project } from '@/types/Types';
 import TeraCommonModalDialogs from './components/widgets/tera-common-modal-dialogs.vue';
@@ -44,16 +43,6 @@ const currentRoute = useCurrentRoute();
 
 const displayNavBar = computed(() => currentRoute.value.name !== 'unauthorized');
 
-// This pageRef is used to grab the assetType being searched for in data-explorer.vue, it is accessed using defineExpose
-const pageRef = ref();
-// For navbar.vue -> search-bar.vue
-// Later the asset type searched for in the data explorer should be in the route,
-// so we won't have to pass this from here
-const showSuggestions = computed(() => {
-	const assetType = pageRef.value?.resourceType ?? ResourceType.XDD;
-	return assetType === ResourceType.XDD;
-});
-
 /**
  * Project
  */

packages/client/hmi-client/src/components/navbar/tera-searchbar.vue

@@ -2,13 +2,13 @@
 	<section class="search-bar-container">
 		<div class="search">
 			<span class="p-input-icon-left p-input-icon-right">
-				<i class="pi pi-search" />
+				<vue-feather type="message-square" size="1.25rem" stroke="var(--text-color-subdued)" />
 				<AutoComplete
 					ref="searchBarRef"
 					:active="searchBarRef?.overlayVisible"
 					v-model="query"
 					:suggestions="autocompleteMenuItems"
-					placeholder="Search"
+					:placeholder="placeholder ?? 'Search'"
 					:autoOptionFocus="false"
 					:minLength="3"
 					scrollHeight="400px"
@@ -28,13 +28,16 @@
 					</template>
 				</AutoComplete>
 				<i class="pi pi-times clear-search" :class="{ hidden: !query }" @click="clearQuery" />
+				<!-- <Button
+					class="search-by-example-button"
+					icon="pi pi-upload"
+					text
+					rounded
+					size="small"
+					@click="searchByExampleToggle = !searchByExampleToggle"
+					:active="isSearchByExampleVisible"
+				/> -->
 			</span>
-			<Button
-				class="p-button-icon-only p-button-text p-button-rounded p-button-icon-only-small search-by-example-button"
-				icon="pi pi-upload"
-				@click="searchByExampleToggle = !searchByExampleToggle"
-				:active="isSearchByExampleVisible"
-			/>
 		</div>
 		<section v-if="isSearchByExampleVisible" class="search-by-example">
 			<header>
@@ -137,6 +140,7 @@ import { useProjects } from '@/composables/project';
 
 const props = defineProps<{
 	showSuggestions: boolean;
+	placeholder?: string;
 }>();
 
 const emit = defineEmits(['query-changed']);
@@ -263,7 +267,6 @@ watch(
 	display: flex;
 	align-items: center;
 	flex-direction: column;
-	max-width: 50%;
 	overflow: hidden;
 }
 
@@ -280,8 +283,9 @@ watch(
 }
 
 .p-autocomplete:deep(.p-inputtext) {
-	border-radius: 1.5rem;
 	width: 100%;
+	border-radius: var(--border-radius-medium);
+	background: rgba(216, 234, 227, 0.3);
 }
 
 .p-autocomplete:deep(.p-inputtext:focus) {
@@ -291,8 +295,9 @@ watch(
 .p-autocomplete:deep(.p-inputtext),
 .p-autocomplete:deep(.p-inputtext:hover),
 .p-autocomplete:deep(.p-inputtext:focus) {
-	border: 1px solid var(--surface-border);
-	padding-left: 3rem;
+	/**TODO: Make this a gradient border like the design #cae8c0*/
+	border: 4px solid var(--primary-color);
+	padding-left: 2.5rem;
 }
 
 .p-autocomplete[active='true']:deep(.p-inputtext) {
@@ -308,12 +313,12 @@ watch(
 }
 
 .p-input-icon-left {
-	margin-right: 1rem;
 	flex: 1;
 }
 
 i {
 	color: var(--text-color-subdued);
+	margin-left: 0.5rem;
 	z-index: 1;
 }
 
@@ -322,10 +327,6 @@ i {
 	width: 100%;
 }
 
-.pi-search {
-	margin-right: 1rem;
-}
-
 .pi-arrow-right {
 	margin-left: auto;
 }
@@ -437,14 +438,9 @@ i {
 	margin-bottom: 0rem;
 }
 
-.p-button.search-by-example-button {
-	right: 4rem;
-}
-
 .p-button[active='false'].search-by-example-button,
 .p-button[active='false'].search-by-example-button:focus,
 .p-button[active='false'].search-by-example-button:enabled {
-	background-color: var(--surface-section);
 	border-radius: var(--border-radius-bigger);
 	color: var(--text-color-subdued);
 }