feat: add exit button model and delete button

src/components/dashboard/dashboard.functions.ts

@@ -1,9 +1,21 @@
-export const toHTML = () => /* html */ `
+import localStorageFn from '@src/helpers/localStorage';
+import { IRootState } from '@src/store/store.types';
+
+export const toHTML = (key: string) => {
+  const model = localStorageFn<IRootState>(key);
+  const id = key.split(':')[1];
+
+  if (!model) {
+    return '';
+  }
+
+  return /* html */ `
   <li class="dashboard__record">
-      <a href="#" class="dashboard__link"> Таблица №1 </a>
+      <a href="#excel/${id}" class="dashboard__link"> ${model.title} </a>
       <strong class="dashboard__create-date">12.06.2023</strong>
   </li>
   `;
+};
 
 export const getAllKeys = () => {
   const keys = [];

src/components/header/Header.ts

@@ -1,10 +1,11 @@
 import { DEFAULT_TITLE } from '@src/consts/consts';
 import $, { Dom } from '@src/core/dom/dom';
 import ExcelComponent from '@src/core/excelComponent/ExcelComponent';
+import ActiveRoute from '@src/core/routes/ActiveRoute';
 import debounce from '@src/helpers/debounce';
 import { changeTitle } from '@src/store/actions';
 import { IComponentOptions } from '@src/types/components';
-import { IInputEvent } from '@src/types/general';
+import { IButtonEvent, IInputEvent } from '@src/types/general';
 
 interface IHeader {}
 
@@ -14,7 +15,7 @@ class Header extends ExcelComponent implements IHeader {
   constructor($root: Dom, options: IComponentOptions) {
     super($root, {
       name: 'Header',
-      listeners: ['input'],
+      listeners: ['input', 'click'],
       ...options,
     });
   }
@@ -30,11 +31,11 @@ class Header extends ExcelComponent implements IHeader {
       <input type="text" class="header__input" value="${title}" spellcheck/>
 
       <div>
-        <button class="header__button">
-          <span class="material-icons"> delete </span>
+        <button class="header__button" data-button="remove" >
+          <span class="material-icons" data-button="remove"> delete </span>
         </button>
-        <button class="header__button">
-          <span class="material-icons"> logout </span>
+        <button class="header__button" data-button="exit">
+          <span class="material-icons" data-button="exit"> logout </span>
         </button>
       </div>
     </header>
@@ -45,6 +46,24 @@ class Header extends ExcelComponent implements IHeader {
     const $target = $(event.target);
     this.$dispatch(changeTitle($target.text()));
   }
+
+  onClick(event: IButtonEvent) {
+    const $target = $(event.target);
+
+    if ($target.data?.button === 'remove') {
+      // eslint-disable-next-line
+      const decision = confirm('Вы действительно хотите удалить таблицу?');
+
+      if (decision) {
+        localStorage.removeItem(`excel:${ActiveRoute.param}`);
+        ActiveRoute.navigate('');
+      }
+    }
+
+    if ($target.data?.button === 'exit') {
+      ActiveRoute.navigate('');
+    }
+  }
 }
 
 export default Header;

src/core/routes/ActiveRoute.ts

@@ -20,6 +20,10 @@ class ActiveRoute {
   static get param() {
     return ActiveRoute.path.split('/')[1];
   }
+
+  static navigate(path: string) {
+    window.location.hash = path;
+  }
 }
 
 export default ActiveRoute;

src/types/general.ts

@@ -4,6 +4,10 @@ export interface IDivClickEvent extends MouseEvent {
   target: HTMLDivElement;
 }
 
-export interface IInputEvent extends InputEvent {
+export interface IInputEvent extends MouseEvent {
   target: HTMLInputElement;
 }
+
+export interface IButtonEvent extends MouseEvent {
+  target: HTMLButtonElement;
+}