Fix project board bug and improve documents (#17753)

* the project board was broken, this PR fixes it, and refactor the code, and we prevent the uncategorized column from being dragged.
* improve the frontend guideline (as discussed in https://github.com/go-gitea/gitea/pull/17699)

1 files changed, 12 insertions, 9 deletions

diff --git a/web_src/js/features/repo-projects.js b/web_src/js/features/repo-projects.js
index d9baa58916..5c84d6dff1 100644
--- a/web_src/js/features/repo-projects.js
+++ b/web_src/js/features/repo-projects.js
@@ -1,22 +1,24 @@
 const {csrfToken} = window.config;
 
 async function initRepoProjectSortable() {
-  const els = document.getElementsByClassName('board');
+  const els = document.querySelectorAll('#project-board > .board');
   if (!els.length) return;
 
   const {Sortable} = await import(/* webpackChunkName: "sortable" */'sortablejs');
-  const boardColumns = document.getElementsByClassName('board-column');
 
-  new Sortable(els[0], {
+  // the HTML layout is: #project-board > .board > .board-column .board.cards > .board-card.card .content
+  const mainBoard = els[0];
+  let boardColumns = mainBoard.getElementsByClassName('board-column');
+  new Sortable(mainBoard, {
     group: 'board-column',
     draggable: '.board-column',
+    filter: '[data-id="0"]',
     animation: 150,
     ghostClass: 'card-ghost',
     onSort: () => {
-      const board = document.getElementsByClassName('board')[0];
-      const boardColumns = board.getElementsByClassName('board-column');
-
-      for (const [i, column] of boardColumns.entries()) {
+      boardColumns = mainBoard.getElementsByClassName('board-column');
+      for (let i = 0; i < boardColumns.length; i++) {
+        const column = boardColumns[i];
         if (parseInt($(column).data('sorting')) !== i) {
           $.ajax({
             url: $(column).data('url'),
@@ -33,8 +35,9 @@ async function initRepoProjectSortable() {
     },
   });
 
-  for (const column of boardColumns) {
-    new Sortable(column.getElementsByClassName('board')[0], {
+  for (const boardColumn of boardColumns) {
+    const boardCardList = boardColumn.getElementsByClassName('board')[0];
+    new Sortable(boardCardList, {
       group: 'shared',
       animation: 150,
       ghostClass: 'card-ghost',