feat: add parameters as navigation

Now there is automatic navigation on the inserted url and on localStorage

src/services/tab-storage.service.ts

@@ -1,5 +1,7 @@
 import {MatChipListbox} from "@angular/material/chips";
 import {Injectable} from "@angular/core";
+import {Params, Router} from "@angular/router";
+import {Location} from '@angular/common';
 
 export class TabSelect {
   public index: number;
@@ -19,8 +21,8 @@ export enum TabSelectType {
 }
 
 export interface TabSelectData {
-  selected: TabSelect[] | null;
-  type: TabSelectType;
+  selected: { [key: string]: TabSelect };
+  type: TabSelectType | null;
 }
 
 @Injectable({
@@ -29,6 +31,9 @@ export interface TabSelectData {
 export class TabStorageService {
   private static dataName = 'tabSelectedData';
 
+  constructor(private router: Router, private location: Location) {
+  }
+
   public static trySelectChip(index: number, chip: MatChipListbox, tryCount: number = 0) {
     setTimeout(() => {
       if (chip?._chips !== undefined && chip._chips.length !== 0) {
@@ -47,32 +52,54 @@ export class TabStorageService {
     }, 100);
   }
 
-  public static select(selected: TabSelect, type: TabSelectType, index: number) {
-    let selectedData = this.selected;
+  private resetIfNeed(type: TabSelectType) {
+    let selectedData = TabStorageService.selected;
 
-    if (selectedData === null)
-      selectedData = {} as TabSelectData;
+    if (selectedData === null || selectedData?.type === null)
+      return;
 
-    if (selectedData.type !== type || selectedData.selected === null || selectedData.selected.length === 0) {
-      if (index !== 0)
-        return;
-      else
-        selectedData.selected = [selected];
-    } else {
-      if (selectedData.selected.length < index)
-        return;
-
-      if (selectedData.selected.length - 1 === index)
-        selectedData.selected[index] = selected;
-      else if (selectedData.selected.length > index + 1)
-        selectedData.selected = selectedData.selected.slice(0, index + 1);
-      else
-        selectedData.selected.push(selected);
+    if (selectedData.type !== type) {
+      localStorage.removeItem(TabStorageService.dataName);
+      const currentUrl = this.router.url.split('?')[0];
+      this.location.replaceState(currentUrl);
     }
+  }
 
+  public select(selected: TabSelect, type: TabSelectType, navigateName: string) {
+    this.resetIfNeed(type);
+    let selectedData = TabStorageService.selected;
+
+    if (selectedData === null || !selectedData.selected)
+      selectedData = {selected: {}} as TabSelectData;
+
+    selectedData.selected[navigateName] = selected;
     selectedData.type = type;
 
-    localStorage.setItem(this.dataName, JSON.stringify(selectedData));
+    localStorage.setItem(TabStorageService.dataName, JSON.stringify(selectedData));
+
+    const currentUrl = this.router.url.split('?')[0];
+
+    const queryParam = new URLSearchParams();
+    for (let select in selectedData.selected)
+      queryParam.set(select, selectedData.selected[select].name);
+
+    this.location.replaceState(currentUrl, queryParam.toString());
+  }
+
+  public static selectDataFromQuery(query: Params) {
+    if (Object.keys(query).length === 0)
+      return;
+
+    let selectedData = {selected: {}} as TabSelectData;
+    selectedData.type = null;
+
+    for (let select in query) {
+      selectedData.selected[select] = {} as TabSelect;
+      selectedData.selected[select].name = query[select];
+      selectedData.selected[select].index = -1;
+    }
+
+    localStorage.setItem(TabStorageService.dataName, JSON.stringify(selectedData));
   }
 
   public static get selected(): TabSelectData | null {