Added twig layout with search, order by and sorting

app/Controllers/DashboardController.php

@@ -41,7 +41,20 @@ class DashboardController extends Controller
 
 		$query = new MediaQuery($this->database, $this->session->get('admin', false));
 
-		$query->orderBy(MediaQuery::ORDER_NAME)
+		switch ($request->getParam('sort', 'time')) {
+			case 'size':
+				$order = MediaQuery::ORDER_SIZE;
+				break;
+			case 'name':
+				$order = MediaQuery::ORDER_NAME;
+				break;
+			default:
+			case 'time':
+				$order = MediaQuery::ORDER_TIME;
+				break;
+		}
+
+		$query->orderBy($order, $request->getParam('order', 'ASC'))
 			->withUserId($this->session->get('user_id'))
 			->run($page);
 

resources/lang/en.lang.php

@@ -89,4 +89,8 @@ return [
 	'switch_to' => 'Switch to',
 	'gallery' => 'Gallery',
 	'table' => 'Table',
+	'dotted_search' => 'Search...',
+	'order_by' => 'Order by...',
+	'time' => 'Time',
+	'name' => 'Name',
 ];

resources/lang/it.lang.php

@@ -89,4 +89,8 @@ return [
 	'switch_to' => 'Vedi come',
 	'gallery' => 'Galleria',
 	'table' => 'Tabella',
+	'dotted_search' => 'Cerca...',
+	'order_by' => 'Ordina per...',
+	'time' => 'Data',
+	'name' => 'Nome',
 ];

resources/templates/comp/pager.twig

@@ -1,6 +1,6 @@
 {% if previous or next %}
     <nav>
-        <ul class="pagination justify-content-center">
+        <ul class="pagination">
             {% if previous %}
                 <li class="page-item">
                     <a class="page-link" href="{{ urlFor('/' ~ path ~ '/page/' ~ (current_page-1)) }}"><i class="fas fa-angle-left fa-fw"></i> {{ lang('pager.previous') }}</a>

resources/templates/dashboard/admin.twig

@@ -9,7 +9,7 @@
         {% if medias|length > 0 %}
             <div class="card shadow-sm">
                 <div class="card-body">
-                    {% include 'comp/pager.twig' with {'path': 'home'} %}
+                    {% include 'dashboard/pager_header.twig' with {'path': 'home'} %}
                     <div class="row">
                         <div class="col-md-12">
                             <div class="table-responsive">

resources/templates/dashboard/home.twig

@@ -7,7 +7,7 @@
     <div class="container">
         {% include 'comp/alert.twig' %}
         {% if medias|length > 0 %}
-            {% include 'comp/pager.twig' with {'path': 'home'} %}
+            {% include 'dashboard/pager_header.twig' with {'path': 'home'} %}
             <div class="row">
                 {% for media in medias %}
                     <div class="col-md-4" id="media_{{ media.id }}">

resources/templates/dashboard/pager_header.twig

@@ -0,0 +1,28 @@
+<div class="row">
+    <div class="col-md-3">
+        <div class="input-group mb-3">
+            <input type="text" class="form-control" placeholder="{{ lang('dotted_search') }}" aria-label="{{ lang('dotted_search') }}" aria-describedby="button-addon2">
+            <div class="input-group-append">
+                <a href="#" class="btn btn-outline-secondary"><i class="fas fa-search"></i></a>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6 d-flex justify-content-center">
+        {% include 'comp/pager.twig' %}
+    </div>
+    <div class="col-md-3 text-right">
+        <div class="btn-group">
+            <div class="btn-group">
+                    <button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownOrder" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        {{ lang('order_by') }}
+                    </button>
+                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                        <a class="dropdown-item" href="?sort=time"><i class="fas fa-calendar-alt fa-fw"></i> {{ lang('time') }}</a>
+                        <a class="dropdown-item" href="?sort=name"><i class="fas fa-font fa-fw"></i> {{ lang('name') }}</a>
+                        <a class="dropdown-item" href="?sort=size"><i class="fas fa-weight-hanging fa-fw"></i> {{ lang('size') }}</a>
+                    </div>
+                </div>
+            <button type="button" class="btn btn-outline-info"><i class="fas fa-sort-amount-down"></i></button>
+        </div>
+    </div>
+</div>