Redesign project list view

14 files changed, 169 insertions, 120 deletions

diff --git a/app/Controller/ProjectListController.php b/app/Controller/ProjectListController.php
index 4de73c97..95ff5d91 100644
--- a/app/Controller/ProjectListController.php
+++ b/app/Controller/ProjectListController.php
@@ -18,24 +18,21 @@ class ProjectListController extends BaseController
     public function show()
     {
         if ($this->userSession->isAdmin()) {
-            $project_ids = $this->projectModel->getAllIds();
+            $projectIds = $this->projectModel->getAllIds();
         } else {
-            $project_ids = $this->projectPermissionModel->getProjectIds($this->userSession->getId());
+            $projectIds = $this->projectPermissionModel->getProjectIds($this->userSession->getId());
         }
 
-        $nb_projects = count($project_ids);
-
         $paginator = $this->paginator
             ->setUrl('ProjectListController', 'show')
             ->setMax(20)
             ->setOrder('name')
-            ->setQuery($this->projectModel->getQueryColumnStats($project_ids))
+            ->setQuery($this->projectModel->getQueryByProjectIds($projectIds))
             ->calculate();
 
-        $this->response->html($this->helper->layout->app('project_list/show', array(
-            'paginator' => $paginator,
-            'nb_projects' => $nb_projects,
-            'title' => t('Projects').' ('.$nb_projects.')'
+        $this->response->html($this->helper->layout->app('project_list/listing', array(
+            'paginator'   => $paginator,
+            'title'       => t('Projects') . ' (' . $paginator->getTotal() . ')',
         )));
     }
 }
diff --git a/app/Model/ColorModel.php b/app/Model/ColorModel.php
index 2295bd1f..7e166124 100644
--- a/app/Model/ColorModel.php
+++ b/app/Model/ColorModel.php
@@ -223,7 +223,7 @@ class ColorModel extends Base
             $buffer .= 'border-color: '.$values['border'];
             $buffer .= '}';
             $buffer .= 'td.color-'.$color.' { background-color: '.$values['background'].'}';
-            $buffer .= '.task-list-row.color-'.$color.' {border-left: 5px solid '.$values['border'].'}';
+            $buffer .= '.table-list-row.color-'.$color.' {border-left: 5px solid '.$values['border'].'}';
         }
 
         return $buffer;
diff --git a/app/Model/ProjectModel.php b/app/Model/ProjectModel.php
index b88a8c8b..aa7c002d 100644
--- a/app/Model/ProjectModel.php
+++ b/app/Model/ProjectModel.php
@@ -318,6 +318,26 @@ class ProjectModel extends Base
     }
 
     /**
+     * Get query for list of project without column statistics
+     *
+     * @access public
+     * @param  array $projectIds
+     * @return \PicoDb\Table
+     */
+    public function getQueryByProjectIds(array $projectIds)
+    {
+        if (empty($projectIds)) {
+            return $this->db->table(ProjectModel::TABLE)->eq(ProjectModel::TABLE.'.id', 0);
+        }
+
+        return $this->db
+            ->table(ProjectModel::TABLE)
+            ->columns(self::TABLE.'.*', UserModel::TABLE.'.username AS owner_username', UserModel::TABLE.'.name AS owner_name')
+            ->join(UserModel::TABLE, 'id', 'owner_id')
+            ->in(self::TABLE.'.id', $projectIds);
+    }
+
+    /**
      * Create a project
      *
      * @access public
diff --git a/app/Template/project_list/header.php b/app/Template/project_list/header.php
new file mode 100644
index 00000000..24ac9041
--- /dev/null
+++ b/app/Template/project_list/header.php
@@ -0,0 +1,12 @@
+<div class="table-list-header">
+    <div class="table-list-header-count">
+        <?php if ($paginator->getTotal() > 1): ?>
+            <?= t('%d projects', $paginator->getTotal()) ?>
+        <?php else: ?>
+            <?= t('%d project', $paginator->getTotal()) ?>
+        <?php endif ?>
+    </div>
+    <div class="table-list-header-menu">
+        <?= $this->render('project_list/sort_menu', array('paginator' => $paginator)) ?>
+    </div>
+</div>
diff --git a/app/Template/project_list/listing.php b/app/Template/project_list/listing.php
new file mode 100644
index 00000000..9c5dfe0e
--- /dev/null
+++ b/app/Template/project_list/listing.php
@@ -0,0 +1,47 @@
+<div class="page-header">
+    <ul>
+        <?= $this->hook->render('template:project-list:menu:before') ?>
+
+        <?php if ($this->user->hasAccess('ProjectCreationController', 'create')): ?>
+            <li>
+                <?= $this->modal->medium('plus', t('New project'), 'ProjectCreationController', 'create') ?>
+            </li>
+        <?php endif ?>
+
+        <?php if ($this->app->config('disable_private_project', 0) == 0): ?>
+            <li>
+                <?= $this->modal->medium('lock', t('New private project'), 'ProjectCreationController', 'createPrivate') ?>
+            </li>
+        <?php endif ?>
+
+        <?php if ($this->user->hasAccess('ProjectUserOverviewController', 'managers')): ?>
+            <li><?= $this->url->icon('user', t('Users overview'), 'ProjectUserOverviewController', 'managers') ?></li>
+        <?php endif ?>
+
+        <?php if ($this->user->hasAccess('ProjectGanttController', 'show')): ?>
+            <li><?= $this->url->icon('sliders', t('Projects Gantt chart'), 'ProjectGanttController', 'show') ?></li>
+        <?php endif ?>
+
+        <?= $this->hook->render('template:project-list:menu:after') ?>
+    </ul>
+</div>
+<?php if ($paginator->isEmpty()): ?>
+    <p class="alert"><?= t('There is no project.') ?></p>
+<?php else: ?>
+    <div class="table-list">
+        <?= $this->render('project_list/header', array('paginator' => $paginator)) ?>
+        <?php foreach ($paginator->getCollection() as $project): ?>
+            <div class="table-list-row table-border-left">
+                <?= $this->render('project_list/project_title', array(
+                    'project' => $project,
+                )) ?>
+
+                <?= $this->render('project_list/project_details', array(
+                    'project' => $project,
+                )) ?>
+            </div>
+        <?php endforeach ?>
+    </div>
+
+    <?= $paginator ?>
+<?php endif ?>
diff --git a/app/Template/project_list/project_details.php b/app/Template/project_list/project_details.php
new file mode 100644
index 00000000..ccd7ba1b
--- /dev/null
+++ b/app/Template/project_list/project_details.php
@@ -0,0 +1,15 @@
+<div class="table-list-details">
+    <ul>
+        <?php if ($project['owner_id'] > 0): ?>
+            <li><?= $this->text->e($project['owner_name'] ?: $project['owner_username']) ?></li>
+        <?php endif ?>
+
+        <?php if ($project['start_date']): ?>
+            <li><?= t('Start Date: %s', $this->dt->date($project['start_date'])) ?></li>
+        <?php endif ?>
+
+        <?php if ($project['end_date']): ?>
+            <li><?= t('End Date: %s', $this->dt->date($project['end_date'])) ?></li>
+        <?php endif ?>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/app/Template/project_list/project_title.php b/app/Template/project_list/project_title.php
new file mode 100644
index 00000000..ddec4131
--- /dev/null
+++ b/app/Template/project_list/project_title.php
@@ -0,0 +1,33 @@
+<div>
+    <?php if ($this->user->hasProjectAccess('ProjectViewController', 'show', $project['id'])): ?>
+        <?= $this->render('project/dropdown', array('project' => $project)) ?>
+    <?php else: ?>
+        <strong><?= '#'.$project['id'] ?></strong>
+    <?php endif ?>
+
+    <span class="table-list-title <?= $project['is_active'] == 0 ? 'status-closed' : '' ?>">
+        <?= $this->url->link($this->text->e($project['name']), 'BoardViewController', 'show', array('project_id' => $project['id'])) ?>
+    </span>
+
+    <?php if ($project['is_public']): ?>
+        <i class="fa fa-share-alt fa-fw" title="<?= t('Shared project') ?>"></i>
+    <?php endif ?>
+
+    <?php if ($project['is_private']): ?>
+        <i class="fa fa-lock fa-fw" title="<?= t('Private project') ?>"></i>
+    <?php endif ?>
+
+    <?php if ($this->user->hasAccess('ProjectUserOverviewController', 'managers')): ?>
+        <span class="tooltip" title="<?= t('Members') ?>" data-href="<?= $this->url->href('ProjectUserOverviewController', 'users', array('project_id' => $project['id'])) ?>"><i class="fa fa-users"></i></span>&nbsp;
+    <?php endif ?>
+
+    <?php if (! empty($project['description'])): ?>
+        <span class="tooltip" title="<?= $this->text->markdownAttribute($project['description']) ?>">
+            <i class="fa fa-info-circle"></i>
+        </span>
+    <?php endif ?>
+
+    <?php if ($project['is_active'] == 0): ?>
+        <i class="fa fa-ban fa-fw" aria-hidden="true" title="<?= t('Closed') ?>"></i><?= t('Closed') ?>
+    <?php endif ?>
+</div>
diff --git a/app/Template/project_list/show.php b/app/Template/project_list/show.php
deleted file mode 100644
index 9a804588..00000000
--- a/app/Template/project_list/show.php
+++ /dev/null
@@ -1,101 +0,0 @@
-<section id="main">
-    <div class="page-header">
-        <ul>
-            <?= $this->hook->render('template:project-list:menu:before') ?>
-
-            <?php if ($this->user->hasAccess('ProjectCreationController', 'create')): ?>
-                <li>
-                    <?= $this->modal->medium('plus', t('New project'), 'ProjectCreationController', 'create') ?>
-                </li>
-            <?php endif ?>
-            <?php if ($this->app->config('disable_private_project', 0) == 0): ?>
-                <li>
-                    <?= $this->modal->medium('lock', t('New private project'), 'ProjectCreationController', 'createPrivate') ?>
-                </li>
-            <?php endif ?>
-
-            <?php if ($this->user->hasAccess('ProjectUserOverviewController', 'managers')): ?>
-                <li><?= $this->url->icon('user', t('Users overview'), 'ProjectUserOverviewController', 'managers') ?></li>
-            <?php endif ?>
-
-            <?php if ($this->user->hasAccess('ProjectGanttController', 'show')): ?>
-                <li><?= $this->url->icon('sliders', t('Projects Gantt chart'), 'ProjectGanttController', 'show') ?></li>
-            <?php endif ?>
-
-            <?= $this->hook->render('template:project-list:menu:after') ?>
-        </ul>
-    </div>
-    <?php if ($paginator->isEmpty()): ?>
-        <p class="alert"><?= t('No project') ?></p>
-    <?php else: ?>
-        <table class="table-striped table-scrolling">
-            <tr>
-                <th class="column-5"><?= $paginator->order(t('Id'), 'id') ?></th>
-                <th class="column-8"><?= $paginator->order(t('Status'), 'is_active') ?></th>
-                <th class="column-15"><?= $paginator->order(t('Project'), 'name') ?></th>
-                <th class="column-10"><?= $paginator->order(t('Start date'), 'start_date') ?></th>
-                <th class="column-10"><?= $paginator->order(t('End date'), 'end_date') ?></th>
-                <th class="column-15"><?= $paginator->order(t('Owner'), 'owner_id') ?></th>
-                <?php if ($this->user->hasAccess('ProjectUserOverviewController', 'managers')): ?>
-                    <th class="column-10"><?= t('Users') ?></th>
-                <?php endif ?>
-                <th><?= t('Columns') ?></th>
-            </tr>
-            <?php foreach ($paginator->getCollection() as $project): ?>
-            <tr>
-                <td>
-                    <?= $this->render('project/dropdown', array('project' => $project)) ?>
-                </td>
-                <td>
-                    <?php if ($project['is_active']): ?>
-                        <?= t('Open') ?>
-                    <?php else: ?>
-                        <?= t('Closed') ?>
-                    <?php endif ?>
-                </td>
-                <td>
-                    <?= $this->url->link($this->text->e($project['name']), 'BoardViewController', 'show', array('project_id' => $project['id'])) ?>
-
-                    <?php if ($project['is_public']): ?>
-                        <i class="fa fa-share-alt fa-fw" title="<?= t('Shared project') ?>"></i>
-                    <?php endif ?>
-                    <?php if ($project['is_private']): ?>
-                        <i class="fa fa-lock fa-fw" title="<?= t('Private project') ?>"></i>
-                    <?php endif ?>
-
-                    <?php if (! empty($project['description'])): ?>
-                        <span class="tooltip" title="<?= $this->text->markdownAttribute($project['description']) ?>">
-                            <i class="fa fa-info-circle"></i>
-                        </span>
-                    <?php endif ?>
-                </td>
-                <td>
-                    <?= $this->dt->date($project['start_date']) ?>
-                </td>
-                <td>
-                    <?= $this->dt->date($project['end_date']) ?>
-                </td>
-                <td>
-                    <?php if ($project['owner_id'] > 0): ?>
-                        <?= $this->text->e($project['owner_name'] ?: $project['owner_username']) ?>
-                    <?php endif ?>
-                </td>
-                <?php if ($this->user->hasAccess('ProjectUserOverviewController', 'managers')): ?>
-                    <td>
-                        <i class="fa fa-users fa-fw"></i>
-                        <span class="tooltip" title="<?= t('Members') ?>" data-href="<?= $this->url->href('ProjectUserOverviewController', 'users', array('project_id' => $project['id'])) ?>"><?= t('Members') ?></span>
-                    </td>
-                <?php endif ?>
-                <td class="dashboard-project-stats">
-                    <?php foreach ($project['columns'] as $column): ?>
-                        <strong title="<?= t('Task count') ?>"><?= $column['nb_open_tasks'] ?></strong>
-                        <small><?= $this->text->e($column['title']) ?></small>
-                    <?php endforeach ?>
-                </td>
-            </tr>
-            <?php endforeach ?>
-        </table>
-
-        <?= $paginator ?>
-    <?php endif ?>
-</section>
diff --git a/app/Template/project_list/sort_menu.php b/app/Template/project_list/sort_menu.php
new file mode 100644
index 00000000..4c6c6238
--- /dev/null
+++ b/app/Template/project_list/sort_menu.php
@@ -0,0 +1,26 @@
+<div class="dropdown">
+    <a href="#" class="dropdown-menu dropdown-menu-link-icon"><strong><?= t('Sort') ?> <i class="fa fa-caret-down"></i></strong></a>
+    <ul>
+        <li>
+            <?= $paginator->order(t('Project ID'), \Kanboard\Model\ProjectModel::TABLE.'.id') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Project Name'), \Kanboard\Model\ProjectModel::TABLE.'.name') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Status'), \Kanboard\Model\ProjectModel::TABLE.'.is_active') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Start Date'), \Kanboard\Model\ProjectModel::TABLE.'.start_date') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('End Date'), \Kanboard\Model\ProjectModel::TABLE.'.end_date') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Public'), \Kanboard\Model\ProjectModel::TABLE.'.is_public') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Private'), \Kanboard\Model\ProjectModel::TABLE.'.is_private') ?>
+        </li>
+    </ul>
+</div>
diff --git a/app/Template/task_list/header.php b/app/Template/task_list/header.php
index c0f9df96..fb05dbdc 100644
--- a/app/Template/task_list/header.php
+++ b/app/Template/task_list/header.php
@@ -1,12 +1,12 @@
-<div class="task-list-header">
-    <div class="task-list-header-count">
+<div class="table-list-header">
+    <div class="table-list-header-count">
         <?php if ($paginator->getTotal() > 1): ?>
             <?= t('%d tasks', $paginator->getTotal()) ?>
         <?php else: ?>
             <?= t('%d task', $paginator->getTotal()) ?>
         <?php endif ?>
     </div>
-    <div class="task-list-header-menu">
+    <div class="table-list-header-menu">
         <?= $this->render('task_list/sort_menu', array('paginator' => $paginator)) ?>
     </div>
 </div>
\ No newline at end of file
diff --git a/app/Template/task_list/listing.php b/app/Template/task_list/listing.php
index 793c13d4..171c148d 100644
--- a/app/Template/task_list/listing.php
+++ b/app/Template/task_list/listing.php
@@ -4,10 +4,10 @@
     <?php if ($paginator->isEmpty()): ?>
         <p class="alert"><?= t('No tasks found.') ?></p>
     <?php elseif (! $paginator->isEmpty()): ?>
-        <div class="task-list">
+        <div class="table-list">
             <?= $this->render('task_list/header', array('paginator' => $paginator)) ?>
             <?php foreach ($paginator->getCollection() as $task): ?>
-                <div class="task-list-row color-<?= $task['color_id'] ?>">
+                <div class="table-list-row color-<?= $task['color_id'] ?>">
                     <?= $this->render('task_list/task_title', array(
                         'task' => $task,
                     )) ?>
diff --git a/app/Template/task_list/task_avatars.php b/app/Template/task_list/task_avatars.php
index 6a43b1a6..143fd8ea 100644
--- a/app/Template/task_list/task_avatars.php
+++ b/app/Template/task_list/task_avatars.php
@@ -17,4 +17,4 @@
             ) ?><span class="task-avatar-assignee"><?= $this->text->e($task['assignee_name'] ?: $task['assignee_username']) ?></span>
         </span>
     </div>
-<?php endif ?>
\ No newline at end of file
+<?php endif ?>
diff --git a/app/Template/task_list/task_details.php b/app/Template/task_list/task_details.php
index 33ae380a..78b7ede7 100644
--- a/app/Template/task_list/task_details.php
+++ b/app/Template/task_list/task_details.php
@@ -1,4 +1,4 @@
-<div class="task-list-details">
+<div class="table-list-details">
     <?= $this->text->e($task['project_name']) ?> &gt;
     <?= $this->text->e($task['swimlane_name']) ?> &gt;
     <?= $this->text->e($task['column_name']) ?>
@@ -20,4 +20,4 @@
             <?php endif ?>
         </span>
     <?php endif ?>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/Template/task_list/task_title.php b/app/Template/task_list/task_title.php
index 5e9c7284..028e9b70 100644
--- a/app/Template/task_list/task_title.php
+++ b/app/Template/task_list/task_title.php
@@ -5,7 +5,7 @@
         <strong><?= '#'.$task['id'] ?></strong>
     <?php endif ?>
 
-    <span class="task-list-title <?= $task['is_active'] == 0 ? 'task-closed' : '' ?>">
+    <span class="table-list-title <?= $task['is_active'] == 0 ? 'status-closed' : '' ?>">
         <?= $this->url->link($this->text->e($task['title']), 'TaskViewController', 'show', array('project_id' => $task['project_id'], 'task_id' => $task['id'])) ?>
     </span>
 </div>