feat(search-history): can delete history from search history for bigger screens

Author: 4drianMatei

frontend/src/app/shared/search/searchbar.component.html

@@ -105,8 +105,12 @@
   >
   <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onAutocompleteSelectionChanged($event)">
     <mat-option *ngFor="let search of filteredSearches | async" [value]="search.text">
-      <i class="fas fa-history mr-2 search-history-clock"></i> <span
-      class="search-history-text"> {{search.text}} </span>
+      <i class="fas fa-history mr-2 search-history-clock"></i>
+      <span class="search-history-text">
+        {{search.text}}
+        <span class="float-right rm-search-trashbin" (click)="removeSearch(search, $event)" title="Remove search from history"><i
+          class="far fa-trash-alt fa-sm"></i></span>
+    </span>
     </mat-option>
   </mat-autocomplete>
   <mat-autocomplete autoActiveFirstOption #auto2="matAutocomplete">ß

frontend/src/app/shared/search/searchbar.component.scss

@@ -16,7 +16,8 @@ $background-gray: rgb(240, 242, 245);
 }
 
 .search-component {
-  min-width: 300px;
+  margin: 0.3rem 0rem;
+  min-width: 320px;
 
   input:focus {
     box-shadow: none;
@@ -27,11 +28,16 @@ $background-gray: rgb(240, 242, 245);
   color: gainsboro;
 }
 
+.rm-search-trashbin {
+  display: none;
+}
+
 // inspired from https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
 // Large devices (desktops, 992px and up)
 @media (min-width: 992px) {
   .search-component {
-    min-width: 510px;
+    margin: inherit;
+    min-width: 550px;
 
     input:focus {
       box-shadow: none;
@@ -41,16 +47,26 @@ $background-gray: rgb(240, 242, 245);
 
 @media (min-width: 1250px) {
   .search-component {
-    min-width: 700px;
+    margin: inherit;
+    min-width: 720px;
 
     input:focus {
       box-shadow: none;
     }
   }
+
+  .rm-search-trashbin {
+    display: inherit;
+    &:hover {
+      color: red;
+      font-weight: bolder;
+    }
+  }
 }
 
 @media (min-width: 1600px) {
   .search-component {
+    margin: inherit;
     min-width: 850px;
 
     input:focus {
@@ -127,3 +143,4 @@ input {
   color: #52188c;
   font-size: 1.05rem
 }
+

frontend/src/app/shared/search/searchbar.component.ts

@@ -22,6 +22,7 @@ import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { searchDomains } from '../../core/model/search-domains-map';
 import { AddTagFilterToSearchDialogComponent } from './add-tag-filter-dialog/add-tag-filter-to-search-dialog.component';
 import { DialogMeasurementsHelper } from '../../core/helper/dialog-measurements.helper';
+import iziToast, { IziToastSettings } from 'izitoast';
 
 @Component({
   selector: 'app-searchbar',
@@ -76,8 +77,6 @@ export class SearchbarComponent implements OnInit {
               private searchNotificationService: SearchNotificationService,
               private bookmarkStore: PublicBookmarksStore,
               private publicBookmarksService: PublicBookmarksService,
-              private personalBookmarksService: PersonalBookmarksService,
-              private personalCodeletsService: PersonalSnippetsService,
               private paginationNotificationService: PaginationNotificationService,
               private keycloakService: KeycloakService,
               private keycloakServiceWrapper: KeycloakServiceWrapper,
@@ -209,9 +208,7 @@ export class SearchbarComponent implements OnInit {
           searches: [newSearch]
         }
       } else {
-        const existingSavedSearchIndex = this._userData.searches.findIndex(
-          element => element.searchDomain === this.searchDomain
-            && element.text.trim().toLowerCase() === this.searchBoxText.trim().toLowerCase());
+        const existingSavedSearchIndex = this.getIndexSavedSearch(this.searchDomain, this.searchBoxText);
         if (existingSavedSearchIndex !== -1) {
           const existingSavedSearch: Search = this._userData.searches.splice(existingSavedSearchIndex, 1)[0];
           existingSavedSearch.lastAccessedAt = now;
@@ -226,6 +223,12 @@ export class SearchbarComponent implements OnInit {
     }
   }
 
+  private getIndexSavedSearch(searchDomain: string, searchText: string) {
+    return this._userData.searches.findIndex(
+      element => element.searchDomain === searchDomain
+        && element.text.trim().toLowerCase() === searchText.trim().toLowerCase());
+  }
+
   onAutocompleteSelectionChanged(event: MatAutocompleteSelectedEvent) {
     const selectedValue = event.option.value;
     this.triggerBookmarkSearch(selectedValue);
@@ -316,4 +319,22 @@ export class SearchbarComponent implements OnInit {
     );
   }
 
+  removeSearch(search: Search, e: MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const indexSavedSearch = this.getIndexSavedSearch(search.searchDomain, search.text);
+
+    const deletedSearch = this._userData.searches.splice(indexSavedSearch, 1)[0];
+    this.userDataStore.updateUserData$(this._userData).subscribe(() => {
+      console.log('Removed search ' + search.text + ' from domain ' + search.searchDomain);
+      const iziToastSettings: IziToastSettings = {
+        title: `"${deletedSearch.text}" deleted from "${deletedSearch.searchDomain}" search history `,
+        timeout: 3000,
+        position: 'bottomRight'
+      }
+      iziToast.success(iziToastSettings);
+    });
+  }
+
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Codever",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "Codever - bookmarks and snippets manager for developers & co",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",