add sorting to dashboard tables

Classes/Controller/DashboardController.php

@@ -64,12 +64,16 @@ class DashboardController extends ActionController
         $this->view->assign('terms', $terms);
     }
 
-    public function createAction(string $termList, string $categoryTitle, string $typeTitle, string $urlTitle): void {
+    public function createAction(string $termList, $categoryTitle, $typeTitle, string $urlTitle): void {
         $terms = array_map('trim', explode(';', $termList));
-        $category = $this->categoryController->createAction($categoryTitle);
-        $categoryObj = $this->categoryRepository->findByUid($category);
-        $type = $this->typeController->createAction($typeTitle);
-        $typeObj = $this->typeRepository->findByUid($type);
+        if($categoryTitle){
+            $category = $this->categoryController->createAction($categoryTitle);
+            $categoryObj = $this->categoryRepository->findByUid($category);
+        }
+        if($typeTitle){
+            $type = $this->typeController->createAction($typeTitle);
+            $typeObj = $this->typeRepository->findByUid($type);
+        }
         $url = $this->urlController->createAction($urlTitle);
         $urlObj = $this->urlRepository->findByUid($url);
         $this->termController->createAction($terms, $categoryObj, $typeObj, $urlObj);

Resources/Private/Templates/Dashboard/Index.html

@@ -6,39 +6,26 @@
 <f:section name="main">
   <h1>Dashboard</h1>
 
-  <h2>Add words (semicolon-separated) with a category</h2>
-  <f:flashMessages />
-  <f:form action="create">
-    <div class="form-group" additionalAttributes="{style: 'margin-bottom: 1rem;'}">
-      <label for="termList">Terms:</label>
-      <f:form.textfield name="termList" additionalAttributes="{style: 'width: 100%; height: 30px; display: block;'}" /><br>
-    </div>
-    <div class="form-group">
-      <label for="categoryTitle">Category:</label>
-      <f:form.textfield name="categoryTitle" additionalAttributes="{style: 'width: 150px; height: 30px; display: block;'}" /><br>
-    </div>
-    <div class="form-group">
-      <label for="typeTitle">Type:</label>
-      <f:form.textfield name="typeTitle" additionalAttributes="{style: 'width: 150px; height: 30px; display: block;'}" /><br>
-    </div>
-    <div class="form-group">
-      <label for="urlTitle">URL:</label>
-      <f:form.textfield name="urlTitle" additionalAttributes="{style: 'width: 400px; height: 30px; display: block;'}" /><br>
-    </div>
-    <f:form.submit value="Save" />
-  </f:form>
 
   <hr style="width: 100%; border: 1px solid black; margin: 20px 0;">
 
   <h2>List of terms</h2>
-  <table style="width: 100%;">
+  <style>
+    th {
+      cursor: pointer;
+    }
+    th:hover {
+      background-color: #f1f1f1;
+    }
+  </style>
+  <table id="termsTable" style="width: 100%">
     <thead>
     <tr>
-      <th additionalAttributes="{style: 'width: 10px;'}">ID</th>
-      <th additionalAttributes="{style: 'width: 200px;'}">Term</th>
-      <th additionalAttributes="{style: 'width: 200px;'}">Type</th>
-      <th additionalAttributes="{style: 'width: 200px;'}">Category</th>
-      <th additionalAttributes="{style: 'width: 400px;'}">Url</th>
+      <th onclick="sortTable('termsTable',0)" additionalAttributes="{style: 'width: 10px;'}">ID</th>
+      <th onclick="sortTable('termsTable',1)" additionalAttributes="{style: 'width: 200px;'}">Term</th>
+      <th onclick="sortTable('termsTable',2)" additionalAttributes="{style: 'width: 200px;'}">Type</th>
+      <th onclick="sortTable('termsTable',3)" additionalAttributes="{style: 'width: 200px;'}">Category</th>
+      <th onclick="sortTable('termsTable',4)" additionalAttributes="{style: 'width: 400px;'}">URL</th>
       <th additionalAttributes="{style: 'width: 100px;'}">Action</th>
     </tr>
     </thead>
@@ -58,34 +45,15 @@
     </tbody>
   </table>
 
-  <hr style="width: 100%; border: 1px solid black; margin: 20px 0;">
-
-  <h2>List of categories</h2>
-  <table  style="width: 210px;">
-    <thead>
-    <tr>
-      <th additionalAttributes="{style: 'width: 10px;'}">ID</th>
-      <th additionalAttributes="{style: 'width: 200px;'}">Title</th>
-    </tr>
-    </thead>
-    <tbody>
-    <f:for each="{categories}" as="category">
-      <tr>
-        <td>{category.uid}</td>
-        <td>{category.title}</td>
-      </tr>
-    </f:for>
-    </tbody>
-  </table>
 
   <hr style="width: 100%; border: 1px solid black; margin: 20px 0;">
 
   <h2>List of types</h2>
-  <table  style="width: 210px;">
+  <table id="typesTable" style="width: 210px;">
     <thead>
     <tr>
-      <th additionalAttributes="{style: 'width: 10px;'}">ID</th>
-      <th additionalAttributes="{style: 'width: 200px;'}">Title</th>
+      <th onclick="sortTable('typesTable',0)" additionalAttributes="{style: 'width: 10px;'}">ID</th>
+      <th onclick="sortTable('typesTable',1)" additionalAttributes="{style: 'width: 200px;'}">Title</th>
     </tr>
     </thead>
     <tbody>
@@ -99,24 +67,88 @@
   </table>
 
   <hr style="width: 100%; border: 1px solid black; margin: 20px 0;">
-
-  <h2>List of urls</h2>
-  <table style="width: 410px;">
+  <h2>List of categories</h2>
+  <table id="categoriesTable" style="width: 210px;">
     <thead>
     <tr>
-      <th additionalAttributes="{style: 'width: 10px;'}">ID</th>
-      <th additionalAttributes="{style: 'width: 400px;'}">Title</th>
+      <th onclick="sortTable('categoriesTable',0)" additionalAttributes="{style: 'width: 10px;'}">ID</th>
+      <th onclick="sortTable('categoriesTable',1)" additionalAttributes="{style: 'width: 200px;'}">Title</th>
     </tr>
     </thead>
     <tbody>
-    <f:for each="{urls}" as="url">
+    <f:for each="{categories}" as="category">
       <tr>
-        <td>{url.uid}</td>
-        <td>{url.title}</td>
+        <td>{category.uid}</td>
+        <td>{category.title}</td>
       </tr>
     </f:for>
     </tbody>
   </table>
-</f:section>
 
+  <hr style="width: 100%; border: 1px solid black; margin: 20px 0;">
+  <h2>Add words (semicolon-separated) with a type</h2>
+  <f:flashMessages />
+  <f:form action="create">
+    <div class="form-group" additionalAttributes="{style: 'margin-bottom: 1rem;'}">
+      <label for="termList">Terms:</label>
+      <f:form.textfield name="termList" additionalAttributes="{style: 'width: 100%; height: 30px; display: block;'}" /><br>
+    </div>
+    <div class="form-group">
+      <label for="typeTitle">Type:</label>
+      <f:form.textfield name="typeTitle" additionalAttributes="{style: 'width: 150px; height: 30px; display: block;'}" /><br>
+    </div>
+    <div class="form-group">
+      <label for="categoryTitle">Category:</label>
+      <f:form.textfield name="categoryTitle" additionalAttributes="{style: 'width: 150px; height: 30px; display: block;'}" /><br>
+    </div>
+    <div class="form-group">
+      <label for="urlTitle">URL:</label>
+      <f:form.textfield name="urlTitle" additionalAttributes="{style: 'width: 400px; height: 30px; display: block;'}" /><br>
+    </div>
+    <f:form.submit value="Save" />
+  </f:form>
+
+  <script>
+    function sortTable(tableId, columnIndex) {
+      var table, rows, switching, i, x, y, shouldSwitch, direction, switchCount = 0;
+      table = document.getElementById(tableId);
+      switching = true;
+      direction = "asc";
+
+      while (switching) {
+        switching = false;
+        rows = table.rows;
+
+        for (i = 1; i < (rows.length - 1); i++) {
+          shouldSwitch = false;
+          x = rows[i].getElementsByTagName("TD")[columnIndex];
+          y = rows[i + 1].getElementsByTagName("TD")[columnIndex];
+
+          if (direction == "asc") {
+            if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
+              shouldSwitch = true;
+              break;
+            }
+          } else if (direction == "desc") {
+            if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
+              shouldSwitch = true;
+              break;
+            }
+          }
+        }
+
+        if (shouldSwitch) {
+          rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
+          switching = true;
+          switchCount++;
+        } else {
+          if (switchCount == 0 && direction == "asc") {
+            direction = "desc";
+            switching = true;
+          }
+        }
+      }
+    }
+  </script>
+</f:section>
 </html>