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>

1 files changed, 99 insertions, 0 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);
+    });
+  });
+}