Fix various problems around projects board view (#30696)

# The problem
The previous implementation will start multiple POST requests from the
frontend when moving a column and another bug is moving the default
column will never be remembered in fact.

# What's changed

- [x] This PR will allow the default column to move to a non-first
position
- [x] And it also uses one request instead of multiple requests when
moving the columns
- [x] Use a star instead of a pin as the icon for setting the default
column action
- [x] Inserted new column will be append to the end
- [x] Fix #30701 the newly added issue will be append to the end of the
default column
- [x] Fix when deleting a column, all issues in it will be displayed
from UI but database records exist.
- [x] Add a limitation for columns in a project to 20. So the sorting
will not be overflow because it's int8.

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

1 files changed, 14 insertions, 12 deletions

diff --git a/web_src/js/features/repo-projects.js b/web_src/js/features/repo-projects.js
index a869c24c82..a1cc4b346b 100644
--- a/web_src/js/features/repo-projects.js
+++ b/web_src/js/features/repo-projects.js
@@ -2,7 +2,6 @@ import $ from 'jquery';
 import {contrastColor} from '../utils/color.js';
 import {createSortable} from '../modules/sortable.js';
 import {POST, DELETE, PUT} from '../modules/fetch.js';
-import tinycolor from 'tinycolor2';
 
 function updateIssueCount(cards) {
   const parent = cards.parentElement;
@@ -63,17 +62,20 @@ async function initRepoProjectSortable() {
     delay: 500,
     onSort: async () => {
       boardColumns = mainBoard.getElementsByClassName('project-column');
-      for (let i = 0; i < boardColumns.length; i++) {
-        const column = boardColumns[i];
-        if (parseInt(column.getAttribute('data-sorting')) !== i) {
-          try {
-            const bgColor = column.style.backgroundColor; // will be rgb() string
-            const color = bgColor ? tinycolor(bgColor).toHexString() : '';
-            await PUT(column.getAttribute('data-url'), {data: {sorting: i, color}});
-          } catch (error) {
-            console.error(error);
-          }
-        }
+
+      const columnSorting = {
+        columns: Array.from(boardColumns, (column, i) => ({
+          columnID: parseInt(column.getAttribute('data-id')),
+          sorting: i,
+        })),
+      };
+
+      try {
+        await POST(mainBoard.getAttribute('data-url'), {
+          data: columnSorting,
+        });
+      } catch (error) {
+        console.error(error);
       }
     },
   });