Add drag and drop to change column positions

1 files changed, 22 insertions, 26 deletions

diff --git a/app/Template/column/index.php b/app/Template/column/index.php
index 8d95dd48..c6a6e85b 100644
--- a/app/Template/column/index.php
+++ b/app/Template/column/index.php
@@ -8,28 +8,34 @@
     </ul>
 </div>
 
-<?php if (! empty($columns)): ?>
-
-    <?php $first_position = $columns[0]['position']; ?>
-    <?php $last_position = $columns[count($columns) - 1]['position']; ?>
-
-    <h3><?= t('Change columns') ?></h3>
-    <table>
+<?php if (empty($columns)): ?>
+    <p class="alert alert-error"><?= t('Your board doesn\'t have any columns!') ?></p>
+<?php else: ?>
+    <table
+        class="columns-table table-stripped"
+        data-save-position-url="<?= $this->url->href('Column', 'move', array('project_id' => $project['id'])) ?>">
+        <thead>
         <tr>
             <th class="column-70"><?= t('Column title') ?></th>
             <th class="column-25"><?= t('Task limit') ?></th>
             <th class="column-5"><?= t('Actions') ?></th>
         </tr>
+        </thead>
+        <tbody>
         <?php foreach ($columns as $column): ?>
-        <tr>
-            <td><?= $this->e($column['title']) ?>
-             <?php if (! empty($column['description'])): ?>
-                <span class="tooltip" title='<?= $this->e($this->text->markdown($column['description'])) ?>'>
-                    <i class="fa fa-info-circle"></i>
-                </span>
-            <?php endif ?>
+        <tr data-column-id="<?= $column['id'] ?>">
+            <td>
+                <i class="fa fa-arrows-alt draggable-row-handle" title="<?= t('Move column position') ?>"></i>
+                <?= $this->e($column['title']) ?>
+                <?php if (! empty($column['description'])): ?>
+                    <span class="tooltip" title='<?= $this->e($this->text->markdown($column['description'])) ?>'>
+                        <i class="fa fa-info-circle"></i>
+                    </span>
+                <?php endif ?>
+            </td>
+            <td>
+                <?= $this->e($column['task_limit']) ?>
             </td>
-            <td><?= $this->e($column['task_limit']) ?></td>
             <td>
                 <div class="dropdown">
                 <a href="#" class="dropdown-menu dropdown-menu-link-icon"><i class="fa fa-cog fa-fw"></i><i class="fa fa-caret-down"></i></a>
@@ -37,16 +43,6 @@
                     <li>
                         <?= $this->url->link(t('Edit'), 'column', 'edit', array('project_id' => $project['id'], 'column_id' => $column['id']), false, 'popover') ?>
                     </li>
-                    <?php if ($column['position'] != $first_position): ?>
-                    <li>
-                        <?= $this->url->link(t('Move Up'), 'column', 'move', array('project_id' => $project['id'], 'column_id' => $column['id'], 'direction' => 'up'), true) ?>
-                    </li>
-                    <?php endif ?>
-                    <?php if ($column['position'] != $last_position): ?>
-                    <li>
-                        <?= $this->url->link(t('Move Down'), 'column', 'move', array('project_id' => $project['id'], 'column_id' => $column['id'], 'direction' => 'down'), true) ?>
-                    </li>
-                    <?php endif ?>
                     <li>
                         <?= $this->url->link(t('Remove'), 'column', 'confirm', array('project_id' => $project['id'], 'column_id' => $column['id']), false, 'popover') ?>
                     </li>
@@ -55,6 +51,6 @@
             </td>
         </tr>
         <?php endforeach ?>
+        </tbody>
     </table>
-
 <?php endif ?>