Kanban board (#8346)

Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: jaqra <48099350+jaqra@users.noreply.github.com>
Co-authored-by: Kerry <flatline-studios@users.noreply.github.com>
Co-authored-by: Jaqra <jaqra@hotmail.com>
Co-authored-by: Kyle Evans <kevans91@users.noreply.github.com>
Co-authored-by: Tsakiridis Ilias <TsakiDev@users.noreply.github.com>
Co-authored-by: Ilias Tsakiridis <ilias.tsakiridis@outlook.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

4 files changed, 201 insertions, 1 deletions

diff --git a/web_src/js/features/projects.js b/web_src/js/features/projects.js
new file mode 100644
index 0000000000..13318c9f89
--- /dev/null
+++ b/web_src/js/features/projects.js
@@ -0,0 +1,99 @@
+const {csrf} = window.config;
+
+export default async function initProject() {
+  if (!window.config || !window.config.PageIsProjects) {
+    return;
+  }
+
+  const {Sortable} = await import(/* webpackChunkName: "sortable" */'sortablejs');
+  const boardColumns = document.getElementsByClassName('board-column');
+
+  for (const column of boardColumns) {
+    new Sortable(
+      column.getElementsByClassName('board')[0],
+      {
+        group: 'shared',
+        animation: 150,
+        onAdd: (e) => {
+          $.ajax(`${e.to.dataset.url}/${e.item.dataset.issue}`, {
+            headers: {
+              'X-Csrf-Token': csrf,
+              'X-Remote': true,
+            },
+            contentType: 'application/json',
+            type: 'POST',
+            error: () => {
+              e.from.insertBefore(e.item, e.from.children[e.oldIndex]);
+            },
+          });
+        },
+      }
+    );
+  }
+
+  $('.edit-project-board').each(function () {
+    const projectTitleLabel = $(this).closest('.board-column-header').find('.board-label');
+    const projectTitleInput = $(this).find(
+      '.content > .form > .field > .project-board-title'
+    );
+
+    $(this)
+      .find('.content > .form > .actions > .red')
+      .on('click', function (e) {
+        e.preventDefault();
+
+        $.ajax({
+          url: $(this).data('url'),
+          data: JSON.stringify({title: projectTitleInput.val()}),
+          headers: {
+            'X-Csrf-Token': csrf,
+            'X-Remote': true,
+          },
+          contentType: 'application/json',
+          method: 'PUT',
+        }).done(() => {
+          projectTitleLabel.text(projectTitleInput.val());
+          projectTitleInput.closest('form').removeClass('dirty');
+          $('.ui.modal').modal('hide');
+        });
+      });
+  });
+
+  $('.delete-project-board').each(function () {
+    $(this).click(function (e) {
+      e.preventDefault();
+
+      $.ajax({
+        url: $(this).data('url'),
+        headers: {
+          'X-Csrf-Token': csrf,
+          'X-Remote': true,
+        },
+        contentType: 'application/json',
+        method: 'DELETE',
+      }).done(() => {
+        setTimeout(window.location.reload(true), 2000);
+      });
+    });
+  });
+
+  $('#new_board_submit').click(function (e) {
+    e.preventDefault();
+
+    const boardTitle = $('#new_board');
+
+    $.ajax({
+      url: $(this).data('url'),
+      data: JSON.stringify({title: boardTitle.val()}),
+      headers: {
+        'X-Csrf-Token': csrf,
+        'X-Remote': true,
+      },
+      contentType: 'application/json',
+      method: 'POST',
+    }).done(() => {
+      boardTitle.closest('form').removeClass('dirty');
+      setTimeout(window.location.reload(true), 2000);
+    });
+  });
+}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 32fb340dcb..a1b5035764 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -12,6 +12,7 @@ import initContextPopups from './features/contextpopup.js';
 import initGitGraph from './features/gitgraph.js';
 import initClipboard from './features/clipboard.js';
 import initUserHeatmap from './features/userheatmap.js';
+import initProject from './features/projects.js';
 import initServiceWorker from './features/serviceworker.js';
 import initMarkdownAnchors from './markdown/anchors.js';
 import renderMarkdownContent from './markdown/content.js';
@@ -527,6 +528,10 @@ function initCommentForm() {
           $list.find('.selected').html(`<a class="item" href=${$(this).data('href')}>${
             htmlEscape($(this).text())}</a>`);
           break;
+        case '#project_id':
+          $list.find('.selected').html(`<a class="item" href=${$(this).data('href')}>${
+            htmlEscape($(this).text())}</a>`);
+          break;
         case '#assignee_id':
           $list.find('.selected').html(`<a class="item" href=${$(this).data('href')}>` +
                         `<img class="ui avatar image" src=${$(this).data('avatar')}>${
@@ -556,7 +561,8 @@ function initCommentForm() {
     });
   }
 
-  // Milestone and assignee
+  // Milestone, Assignee, Project
+  selectItem('.select-project', '#project_id');
   selectItem('.select-milestone', '#milestone_id');
   selectItem('.select-assignee', '#assignee_id');
 }
@@ -2485,6 +2491,7 @@ $(document).ready(async () => {
     initGitGraph(),
     initClipboard(),
     initUserHeatmap(),
+    initProject(),
     initServiceWorker(),
     initNotificationCount(),
     renderMarkdownContent(),
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 4c3861c5c3..aaf729a8e1 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -3019,6 +3019,86 @@ tbody.commit-list {
     vertical-align: middle;
 }
 
+.board {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    margin: 0 .5em;
+}
+
+.board-column {
+    background-color: rgba(0, 0, 0, .05) !important;
+    border: 1px solid rgba(34, 36, 38, .15) !important;
+    margin: 0 .5rem !important;
+    padding: .5rem !important;
+    width: 320px;
+    height: 60vh;
+    overflow-y: scroll;
+    flex: 0 0 auto;
+    overflow: visible;
+    display: flex;
+    flex-direction: column;
+}
+
+.board-column-header {
+    display: flex;
+    justify-content: space-between;
+}
+
+.board-label {
+    background: none !important;
+    line-height: 1.25 !important;
+}
+
+.board-column > .cards {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    margin: 0 !important;
+    padding: 0 !important;
+
+    .card .meta > a.milestone {
+        color: #999999;
+    }
+}
+
+.board-column > .divider {
+    margin: 5px 0;
+}
+
+.board-column:first-child {
+    margin-left: auto !important;
+}
+
+.board-column:last-child {
+    margin-right: auto !important;
+}
+
+.board-card {
+    margin: 3px !important;
+    width: auto !important;
+    background-color: #fff;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.board-card .header {
+    font-size: 1.1em !important;
+}
+
+.board-card .content {
+    padding: 5px 8px !important;
+}
+
+.board-card .extra.content {
+    padding: 5px 8px !important;
+}
+
+td.blob-excerpt {
+    background-color: #fafafa;
+}
+
 .issue-keyword {
     border-bottom: 1px dotted #959da5;
     display: inline-block;
@@ -3082,3 +3162,13 @@ tbody.commit-list {
         }
     }
 }
+
+.select-project .item {
+    color: inherit;
+    display: inline-flex;
+    align-items: center;
+}
+
+.select-project .item .svg {
+    margin-right: .5rem;
+}
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 1e8c118675..f9b643e969 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -1910,6 +1910,10 @@ footer .container .links > * {
     border-bottom-color: #404552;
 }
 
+.board-column {
+    background-color: rgba(0, 0, 0, .2) !important;
+}
+
 .tribute-container {
     box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .6);
 }