add sort by FIO, but dont render in table

src/index.html

@@ -7,6 +7,8 @@
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
         crossorigin="anonymous">
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
+        crossorigin="anonymous">
 
     <link rel="stylesheet" href="./style/main.css">
 </head>

src/script/components/IndexPage.js

@@ -1,4 +1,6 @@
 import DB from "./../utils/DB";
+import SortArr from "./SortArr";
+let sortArr = new SortArr();
 let db = new DB();
 let placeRender = document.querySelector(".workPlace");
 
@@ -36,16 +38,20 @@ class IndexPage {
           <thead>
               <tr>
                   <th>#</th>
-                  <th>ФИО</th>
+                  <th>ФИО <i class="sortByFioDescending fa fa-caret-down" aria-hidden="true"></i>
+                  <i class="sortByFioАscending fa fa-caret-up" aria-hidden="true"></i>
+                  </th>
                   <th>Должность</th>
-                  <th>Дата Начало</th>
+                  <th>Дата Начало <i class="sortByDateFromDescending fa fa-caret-down" aria-hidden="true"></i>
+                  <i class="sortByDateFromАscending fa fa-caret-up" aria-hidden="true"></i></th>
                   <th>Дата Конца</th>
               </tr>
           </thead>
           ${tbody}
           </tbody>
           </table>
           `;
+        this.addHandlerEvent();
       });
     });
   }
@@ -54,5 +60,25 @@ class IndexPage {
     Нехватает данных! Добавьте отпуск для сотрудников (кнопочка выше)
     </div>;`;
   }
+
+  addHandlerEvent() {
+    let btnSortByFioАscending = document.querySelector(".sortByFioАscending");
+    let btnSortByFioDescending = document.querySelector(".sortByFioDescending");
+    btnSortByFioАscending.addEventListener(
+      "click",
+      eventForSort("employees", "sortByFioАscending")
+    );
+    btnSortByFioDescending.addEventListener(
+      "click",
+      eventForSort("employees", "sortByFioDescending")
+    );
+    function eventForSort(nameDB, sortBy) {
+      return () => {
+        db.fetch(nameDB).then(arr => {
+          sortArr.sort(arr, sortBy);
+        });
+      };
+    }
+  }
 }
 export default IndexPage;

src/script/components/SortArr.js

@@ -0,0 +1,42 @@
+class SortArr {
+  sort(arr, order) {
+    if (order === "sortByFioАscending") {
+      arr.sort(this.sortByFioАscending);
+    } else if (order === "sortByFioDescending") {
+      arr.sort(this.sortByFioDescending);
+    } else if (order === "sortByDateFromАscending") {
+      arr.sort(this.sortByDateFromАscending);
+    } else arr.sort(this.sortByDateFromDescending);
+    console.log(arr);
+  }
+  sortByFioАscending(personA, personB) {
+    if (personA.name > personB.name) {
+      return 1;
+    } else if (personA.name < personB.name) {
+      return -1;
+    }
+  }
+  sortByFioDescending(personA, personB) {
+    if (personA.name < personB.name) {
+      return 1;
+    } else if (personA.name > personB.name) {
+      return -1;
+    }
+  }
+  sortByDateFromАscending(personA, personB) {
+    if (personA.dateFrom > personB.dateFrom) {
+      return 1;
+    } else if (personA.dateFrom < personB.dateFrom) {
+      return -1;
+    }
+  }
+  sortByDateFromDescending(personA, personB) {
+    if (personA.dateFrom < personB.dateFrom) {
+      return 1;
+    } else if (personA.dateFrom > personB.dateFrom) {
+      return -1;
+    }
+  }
+}
+
+export default SortArr;

src/style/main.css

@@ -18,3 +18,7 @@
 .past {
   background-color: #f8d7da !important;
 }
+.fa {
+  margin-left: 5px;
+  font-size: 20px;
+}