Refactor and introduce BuilderSidebarTitleSearch

writer · Aug 15, 2024 · 05cb1cf · 05cb1cf
1 parent 15306e5
commit 05cb1cf
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 48 deletions.
diff --git a/src/ui/src/builder/BuilderSidebarTitleSearch.vue b/src/ui/src/builder/BuilderSidebarTitleSearch.vue
@@ -0,0 +1,94 @@
+<template>
+	<div v-if="!isSearchActive" class="sectionTitle">
+		<i class="material-symbols-outlined">{{ icon }}</i>
+		<h3>{{ title }}</h3>
+		<i
+			title="Search"
+			class="searchIcon material-symbols-outlined"
+			tabindex="0"
+			@keydown.enter="toggleSearch"
+			@click="toggleSearch"
+		>
+			search
+		</i>
+	</div>
+	<div v-if="isSearchActive" class="sectionTitle">
+		<input
+			ref="searchInput"
+			v-model="searchQuery"
+			type="text"
+			placeholder="Search..."
+		/>
+		<slot />
+		<i
+			:class="{ disabled: disabled }"
+			class="searchIcon material-symbols-outlined"
+			title="Close"
+			tabindex="0"
+			@keydown.enter="toggleSearch"
+			@click="toggleSearch"
+		>
+			close
+		</i>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref, Ref } from "vue";
+
+defineProps({
+	icon: { type: String, required: true },
+	title: { type: String, required: true },
+	disabled: { type: Boolean, required: false },
+});
+
+const searchQuery = defineModel({ type: String, default: "" });
+
+defineEmits({});
+
+const searchInput: Ref<HTMLInputElement> = ref(null);
+const isSearchActive: Ref<boolean> = ref(false);
+
+async function toggleSearch() {
+	isSearchActive.value = !isSearchActive.value;
+	if (isSearchActive.value) {
+		await nextTick();
+		searchInput.value.focus();
+	} else {
+		searchQuery.value = "";
+	}
+}
+</script>
+
+<style scoped>
+@import "./sharedStyles.css";
+
+.sectionTitle {
+	background: var(--builderBackgroundColor);
+	padding: 16px;
+	top: 0;
+	position: sticky;
+	font-size: 1rem;
+}
+
+.sectionTitle h3 {
+	font-weight: 500;
+	font-size: 0.875rem;
+	flex-grow: 1;
+}
+
+.sectionTitle .searchIcon {
+	cursor: pointer;
+}
+
+.sectionTitle .searchIcon.disabled {
+	color: var(--builderDisabledColor);
+}
+
+.sectionTitle input {
+	outline: 0;
+	border: 0;
+	flex-grow: 1;
+	width: 50%;
+}
+</style>
diff --git a/src/ui/src/builder/BuilderSidebarToolbar.vue b/src/ui/src/builder/BuilderSidebarToolbar.vue
@@ -1,13 +1,9 @@
 <template>
 	<div class="BuilderSidebarToolbar">
-		<div class="sectionTitle">
-			<i class="material-symbols-outlined"> handyman </i>
-			<h3>Toolkit</h3>
-		</div>
-		<WdsTextInput
+		<BuilderSidebarTitleSearch
 			v-model="searchQuery"
-			placeholder="Search a component"
-			left-icon="search"
+			title="Toolkit"
+			icon="handyman"
 		/>
 		<div class="categories">
 			<template
@@ -68,7 +64,7 @@ import { Ref, computed, inject, ref } from "vue";
 import { useDragDropComponent } from "./useDragDropComponent";
 import injectionKeys from "../injectionKeys";
 import { Component, WriterComponentDefinition } from "../writerTypes";
-import WdsTextInput from "../wds/WdsTextInput.vue";
+import BuilderSidebarTitleSearch from "./BuilderSidebarTitleSearch.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);

diff --git a/src/ui/src/builder/BuilderSidebarTree.vue b/src/ui/src/builder/BuilderSidebarTree.vue
@@ -1,23 +1,10 @@
 <template>
 	<div class="BuilderSidebarTree">
-		<div v-if="!isSearchActive" class="sectionTitle">
-			<i class="material-symbols-outlined"> account_tree </i>
-			<h3>Component Tree</h3>
-			<i
-				title="Search"
-				class="searchIcon material-symbols-outlined"
-				@click="toggleSearch"
-			>
-				search
-			</i>
-		</div>
-		<div v-if="isSearchActive" class="sectionTitle">
-			<input
-				ref="searchInput"
-				v-model="searchQuery"
-				type="text"
-				placeholder="Search..."
-			/>
+		<BuilderSidebarTitleSearch
+			v-model="searchQuery"
+			title="Component Tree"
+			icon="account_tree"
+		>
 			<i
 				:class="{ disabled: !matchAvailable }"
 				class="searchIcon material-symbols-outlined"
@@ -26,6 +13,8 @@
 						? `Go to match ${previousMatchIndex + 1} of ${matchingComponents.length}`
 						: `Previous match`
 				"
+				tabindex="0"
+				@keydown.prevent="goToPreviousMatch"
 				@click="goToPreviousMatch"
 			>
 				navigate_before
@@ -38,19 +27,13 @@
 						? `Go to match ${nextMatchIndex + 1} of ${matchingComponents.length}`
 						: `Next match`
 				"
+				tabindex="0"
+				@keydown.prevent="goToNextMatch"
 				@click="goToNextMatch"
 			>
 				navigate_next
 			</i>
-			<i
-				:class="{ disabled: !matchAvailable }"
-				class="searchIcon material-symbols-outlined"
-				title="Close"
-				@click="toggleSearch"
-			>
-				close
-			</i>
-		</div>
+		</BuilderSidebarTitleSearch>
 		<div ref="componentTree" class="components">
 			<div
 				v-for="component in rootComponents"
@@ -79,31 +62,20 @@ import BuilderTreeBranch from "./BuilderTreeBranch.vue";
 import injectionKeys from "../injectionKeys";
 import { Component } from "../writerTypes";
 import { watch } from "vue";
+import BuilderSidebarTitleSearch from "./BuilderSidebarTitleSearch.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 
 const { createAndInsertComponent, goToComponentParentPage } =
 	useComponentActions(wf, ssbm);
 
-const searchInput: Ref<HTMLInputElement> = ref(null);
-const isSearchActive: Ref<boolean> = ref(false);
 const searchQuery: Ref<string> = ref(null);
 const matchIndex: Ref<number> = ref(-1);
 const rootComponents = computed(() => {
 	return wf.getComponents(null, { sortedByPosition: true });
 });
 
-async function toggleSearch() {
-	isSearchActive.value = !isSearchActive.value;
-	if (isSearchActive.value) {
-		await nextTick();
-		searchInput.value.focus();
-	} else {
-		searchQuery.value = null;
-	}
-}
-
 function determineMatch(component: Component, query: string): boolean {
 	if (component.id.toLocaleLowerCase().includes(query)) return true;
 	if (component.type.toLocaleLowerCase().includes(query)) return true;
@@ -158,7 +130,6 @@ function goToNextMatch() {
 }
 
 const matchingComponents: ComputedRef<Component[]> = computed(() => {
-	if (!isSearchActive.value) return;
 	if (!searchQuery.value) return;
 	const query = searchQuery.value.toLocaleLowerCase();
 	const components = wf.getComponents();