Fix search UI

ndsev · Sep 12, 2024 · 64dbf91 · 64dbf91
1 parent 89346d2
commit 64dbf91
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 9 deletions.
diff --git a/erdblick_app/app/parameters.service.ts b/erdblick_app/app/parameters.service.ts
@@ -460,8 +460,11 @@ export class ParametersService {
     }
 
     setSearchHistoryState(value: [number, string] | null, saveHistory: boolean = true) {
-        if (value && saveHistory) {
-            this.saveHistoryStateValue(value);
+        if (value) {
+            value[1] = value[1].trim();
+            if (saveHistory) {
+                this.saveHistoryStateValue(value);
+            }
         }
         this.p().search = value ? value : [];
         this._replaceUrl = false;
@@ -472,9 +475,10 @@ export class ParametersService {
     private saveHistoryStateValue(value: [number, string]) {
         const searchHistoryString = localStorage.getItem("searchHistory");
         if (searchHistoryString) {
-            const searchHistory = JSON.parse(searchHistoryString) as Array<[number, string]>;
+            let searchHistory = JSON.parse(searchHistoryString) as Array<[number, string]>;
+            searchHistory = searchHistory.filter((entry: [number, string]) => !(entry[0] == value[0] && entry[1] == value[1]));
             searchHistory.unshift(value);
-            let ldiff = searchHistory.length - 50;
+            let ldiff = searchHistory.length - 100;
             while (ldiff > 0) {
                 searchHistory.pop();
                 ldiff -= 1;

diff --git a/erdblick_app/app/search.panel.component.ts b/erdblick_app/app/search.panel.component.ts
@@ -51,10 +51,13 @@ interface ExtendedSearchTarget extends SearchTarget {
                                 <div class="icon-circle violet">
                                     <i class="pi pi-history"></i>
                                 </div>
-                                <div class="search-option">
-                                    <span class="search-option-name">{{ item.input }}</span>
-                                    <br>
-                                    <span [innerHTML]="item.label"></span>
+                                <div class="search-option-container">
+                                    <div class="search-option">
+                                        <span class="search-option-name">{{ item.input }}</span>
+                                        <br>
+                                        <span [innerHTML]="item.label"></span>
+                                    </div>
+                                    <p-button (click)="removeSearchHistoryEntry(i)" icon="pi pi-times" tabindex="-1"></p-button>
                                 </div>
                             </div>
                         </div>
@@ -266,6 +269,13 @@ export class SearchPanelComponent implements AfterViewInit {
         }
     }
 
+    removeSearchHistoryEntry(index: number) {
+        this.searchHistory.splice(index, 1);
+        const searchHistory: [number, string][] = this.searchHistory.map(entry => [entry.index, entry.input]);
+        localStorage.setItem("searchHistory", JSON.stringify(searchHistory));
+        this.reloadSearchHistory();
+    }
+
     parseMapgetTileId(value: string): number[] | undefined {
         if (!value) {
             this.messageService.showError("No value provided!");

diff --git a/erdblick_app/styles.scss b/erdblick_app/styles.scss
@@ -279,11 +279,11 @@ body {
         width: 100%;
         z-index: 150;
         position: relative;
+        line-height: 0;
 
         textarea {
             width: 100% !important;
             transition: all 0.3s;
-            overflow: scroll;
             resize: none;
             animation-duration: 0.1s !important;
             transition-duration: 0.1s !important;
@@ -338,6 +338,26 @@ body {
             }
         }
 
+        .search-option-container {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            width: calc(100% - 2em);
+
+            button {
+                border: none;
+                background: none;
+                color: gray;
+                width: 2em;
+                height: 2em;
+
+                &:hover {
+                    background-color: var(--red-500);
+                    color: white;
+                }
+            }
+        }
+
         .search-option {
             text-align: left;
             font-size: 0.9em;