From b19bab9098e3eae71845faa7c8d17e9d03548d22 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Thu, 12 May 2022 13:06:49 +1000
Subject: Enable info-display for search suggestions

Add info-icon to SearchModal, sending event when clicked.
Change App to allow info-modal display on top of search-modal.

Also make info-icon-click events send a node name instead of a LayoutNode,
and make TileInfoModal and server get/send additional node info, seeing
as the client might not have info about the node's common name, tips,
etc, anymore.
---
 src/App.vue | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

(limited to 'src/App.vue')

diff --git a/src/App.vue b/src/App.vue
index 55dc271..3cabecd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -100,7 +100,7 @@ export default defineComponent({
 			layoutMap: initLayoutMap(layoutTree), // Maps names to LayoutNode objects
 			overflownRoot: false, // Set when displaying a root tile with many children, with overflow
 			// Modals and settings related
-			infoModalNode: null as LayoutNode | null, // Node to display info for, or null
+			infoModalNodeName: null as string | null, // Name of node to display info for, or null
 			helpOpen: false,
 			searchOpen: false,
 			settingsOpen: false,
@@ -323,9 +323,11 @@ export default defineComponent({
 			this.overflownRoot = false;
 		},
 		// For tile-info events
-		onInfoIconClick(node: LayoutNode){
-			this.resetMode();
-			this.infoModalNode = node;
+		onInfoIconClick(nodeName: string){
+			if (!this.searchOpen){
+				this.resetMode();
+			}
+			this.infoModalNodeName = nodeName;
 		},
 		// For help events
 		onHelpIconClick(){
@@ -574,7 +576,7 @@ export default defineComponent({
 				});
 		},
 		resetMode(){
-			this.infoModalNode = null;
+			this.infoModalNodeName = null;
 			this.searchOpen = false;
 			this.helpOpen = false;
 			this.settingsOpen = false;
@@ -634,12 +636,12 @@ export default defineComponent({
 			text-white/40 hover:text-white hover:cursor-pointer"/>
 	<!-- Modals -->
 	<transition name="fade">
-		<tile-info-modal v-if="infoModalNode != null" :node="infoModalNode" :tolMap="tolMap" :uiOpts="uiOpts"
-			@info-modal-close="infoModalNode = null"/>
+		<search-modal v-if="searchOpen" :tolMap="tolMap" :uiOpts="uiOpts" ref="searchModal"
+			@search-close="searchOpen = false" @search-node="onSearchNode" @info-icon-click="onInfoIconClick"/>
 	</transition>
 	<transition name="fade">
-		<search-modal v-if="searchOpen" :tolMap="tolMap" :uiOpts="uiOpts"
-			@search-close="searchOpen = false" @search-node="onSearchNode" ref="searchModal"/>
+		<tile-info-modal v-if="infoModalNodeName != null" :nodeName="infoModalNodeName" :tolMap="tolMap" :uiOpts="uiOpts"
+			@info-modal-close="infoModalNodeName = null"/>
 	</transition>
 	<transition name="fade">
 		<help-modal v-if="helpOpen" :uiOpts="uiOpts" @help-modal-close="helpOpen = false"/>
-- 
cgit v1.2.3