From da0d1b2a596dc25c8a9b612c6464b46829aabf3b Mon Sep 17 00:00:00 2001
From: solderq35 <solderq35@gmail.com>
Date: Wed, 13 Sep 2023 20:10:39 -0700
Subject: [PATCH] search input styling and clear input

---
 .../building_list/building_list.vue           | 19 +++++++++++++++++--
 src/components/map/map.vue                    | 16 +++++++++++++++-
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/components/building_list/building_list.vue b/src/components/building_list/building_list.vue
index 82d8f873..06bde3d4 100644
--- a/src/components/building_list/building_list.vue
+++ b/src/components/building_list/building_list.vue
@@ -7,8 +7,14 @@
     <el-col :span="24" class="top_col">
       <el-row class="search_row">
         <el-col :span="24" class="search_col">
-          <el-input v-model="search">
-            <i class="el-icon-search el-input__icon" slot="prefix"></i>
+          <el-input v-model="search" class="searchInput" placeholder="Search for buildings">
+            <i class="el-icon-search el-input__icon" slot="prefix"></i
+            ><i
+              class="el-icon-close el-input__icon"
+              slot="suffix"
+              @click="resetSearchInput()"
+              v-if="this.search != ''"
+            ></i>
           </el-input>
         </el-col>
       </el-row>
@@ -177,6 +183,9 @@ export default {
       this.$store.dispatch( 'modalController/openModal', {
         name: 'edit_view'
       } )
+    },
+    resetSearchInput () {
+      this.search = ''
     }
   }
 }
@@ -248,4 +257,10 @@ export default {
   width: 100%;
   text-align: center;
 }
+.el-icon-close {
+  cursor: pointer;
+}
+::v-deep .el-input__icon {
+  color: #d73f09;
+}
 </style>
diff --git a/src/components/map/map.vue b/src/components/map/map.vue
index 533c6716..8c7a2ac6 100644
--- a/src/components/map/map.vue
+++ b/src/components/map/map.vue
@@ -21,6 +21,12 @@
         </div>
         <el-input v-model="search" class="searchMapInput" placeholder="Search for buildings">
           <i class="el-icon-search el-input__icon" slot="prefix"></i>
+          <i
+            class="el-icon-close el-input__icon"
+            slot="suffix"
+            @click="resetSearchInput()"
+            v-if="this.search != ''"
+          ></i>
         </el-input>
         <switchButtons :titles="['Category', 'Energy Trend']" v-model="grouping" />
         <el-menu-item-group v-if="grouping === 'Category'">
@@ -301,6 +307,9 @@ export default {
         .bindTooltip( searchResult.feature.properties.name, { permanent: true, fillColor: '#000', color: '#000' } )
         .openTooltip()
     },
+    resetSearchInput () {
+      this.search = ''
+    },
     removeAllMarkers: function () {
       for ( let marker of this.compareMarkers ) {
         this.map.removeLayer( marker )
@@ -814,7 +823,9 @@ $sideMenu-width: 250px;
   opacity: 1;
   justify-content: center;
   z-index: 500;
-  cursor: pointer;
+}
+::v-deep .el-input__icon {
+  color: #d73f09;
 }
 ::v-deep .el-input__inner {
   font-size: 16px;
@@ -842,6 +853,9 @@ $sideMenu-width: 250px;
   font-size: 16px;
   margin-bottom: -15px;
 }
+.el-icon-close {
+  cursor: pointer;
+}
 .searchResultDiv {
   margin-top: 10px;
   margin-bottom: 10px;