Remove jQuery AJAX from the project page (#29814)

Removed all jQuery AJAX calls and replaced with our fetch wrapper.

Tested the following functionalities and they work as before:
- column creation
- column deletion
- issue movement between columns
- column reordering
- column edit
- default column changing

# Demo using `fetch` instead of jQuery AJAX

![demo](https://github.com/go-gitea/gitea/assets/20454870/99e6898f-baa3-462c-acec-46a910874dbe)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
(cherry picked from commit 397997093870226dafb70c4a3133f2ebe0fe3e2c)
This commit is contained in:
Yarden Shoham 2024-03-15 23:23:56 +02:00 committed by Earl Warren
parent 61e123bdc2
commit b97b1d03cf
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00

View file

@ -2,8 +2,7 @@ import $ from 'jquery';
import {useLightTextOnBackground} from '../utils/color.js'; import {useLightTextOnBackground} from '../utils/color.js';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import {createSortable} from '../modules/sortable.js'; import {createSortable} from '../modules/sortable.js';
import {POST, DELETE, PUT} from '../modules/fetch.js';
const {csrfToken} = window.config;
function updateIssueCount(cards) { function updateIssueCount(cards) {
const parent = cards.parentElement; const parent = cards.parentElement;
@ -11,22 +10,23 @@ function updateIssueCount(cards) {
parent.getElementsByClassName('project-column-issue-count')[0].textContent = cnt; parent.getElementsByClassName('project-column-issue-count')[0].textContent = cnt;
} }
function createNewColumn(url, columnTitle, projectColorInput) { async function createNewColumn(url, columnTitle, projectColorInput) {
$.ajax({ try {
url, await POST(url, {
data: JSON.stringify({title: columnTitle.val(), color: projectColorInput.val()}), data: {
headers: { title: columnTitle.val(),
'X-Csrf-Token': csrfToken, color: projectColorInput.val(),
}, },
contentType: 'application/json', });
method: 'POST', } catch (error) {
}).done(() => { console.error(error);
} finally {
columnTitle.closest('form').removeClass('dirty'); columnTitle.closest('form').removeClass('dirty');
window.location.reload(); window.location.reload();
}); }
} }
function moveIssue({item, from, to, oldIndex}) { async function moveIssue({item, from, to, oldIndex}) {
const columnCards = to.getElementsByClassName('issue-card'); const columnCards = to.getElementsByClassName('issue-card');
updateIssueCount(from); updateIssueCount(from);
updateIssueCount(to); updateIssueCount(to);
@ -38,18 +38,14 @@ function moveIssue({item, from, to, oldIndex}) {
})), })),
}; };
$.ajax({ try {
url: `${to.getAttribute('data-url')}/move`, await POST(`${to.getAttribute('data-url')}/move`, {
data: JSON.stringify(columnSorting), data: columnSorting,
headers: {
'X-Csrf-Token': csrfToken,
},
contentType: 'application/json',
type: 'POST',
error: () => {
from.insertBefore(item, from.children[oldIndex]);
},
}); });
} catch (error) {
console.error(error);
from.insertBefore(item, from.children[oldIndex]);
}
} }
async function initRepoProjectSortable() { async function initRepoProjectSortable() {
@ -67,20 +63,21 @@ async function initRepoProjectSortable() {
ghostClass: 'card-ghost', ghostClass: 'card-ghost',
delayOnTouchOnly: true, delayOnTouchOnly: true,
delay: 500, delay: 500,
onSort: () => { onSort: async () => {
boardColumns = mainBoard.getElementsByClassName('project-column'); boardColumns = mainBoard.getElementsByClassName('project-column');
for (let i = 0; i < boardColumns.length; i++) { for (let i = 0; i < boardColumns.length; i++) {
const column = boardColumns[i]; const column = boardColumns[i];
if (parseInt($(column).data('sorting')) !== i) { if (parseInt($(column).data('sorting')) !== i) {
$.ajax({ try {
url: $(column).data('url'), await PUT($(column).data('url'), {
data: JSON.stringify({sorting: i, color: rgbToHex($(column).css('backgroundColor'))}), data: {
headers: { sorting: i,
'X-Csrf-Token': csrfToken, color: rgbToHex($(column).css('backgroundColor')),
}, },
contentType: 'application/json',
method: 'PUT',
}); });
} catch (error) {
console.error(error);
}
} }
} }
}, },
@ -118,18 +115,19 @@ export function initRepoProject() {
setLabelColor(projectHeader, rgbToHex(boardColumn.css('backgroundColor'))); setLabelColor(projectHeader, rgbToHex(boardColumn.css('backgroundColor')));
} }
$(this).find('.edit-project-column-button').on('click', function (e) { $(this).find('.edit-project-column-button').on('click', async function (e) {
e.preventDefault(); e.preventDefault();
$.ajax({ try {
url: $(this).data('url'), await PUT($(this).data('url'), {
data: JSON.stringify({title: projectTitleInput.val(), color: projectColorInput.val()}), data: {
headers: { title: projectTitleInput.val(),
'X-Csrf-Token': csrfToken, color: projectColorInput.val(),
}, },
contentType: 'application/json', });
method: 'PUT', } catch (error) {
}).done(() => { console.error(error);
} finally {
projectTitleLabel.text(projectTitleInput.val()); projectTitleLabel.text(projectTitleInput.val());
projectTitleInput.closest('form').removeClass('dirty'); projectTitleInput.closest('form').removeClass('dirty');
if (projectColorInput.val()) { if (projectColorInput.val()) {
@ -137,7 +135,7 @@ export function initRepoProject() {
} }
boardColumn.attr('style', `background: ${projectColorInput.val()}!important`); boardColumn.attr('style', `background: ${projectColorInput.val()}!important`);
$('.ui.modal').modal('hide'); $('.ui.modal').modal('hide');
}); }
}); });
}); });
@ -146,19 +144,16 @@ export function initRepoProject() {
const showButton = $(boardColumn).find('.default-project-column-show'); const showButton = $(boardColumn).find('.default-project-column-show');
const commitButton = $(this).find('.actions > .ok.button'); const commitButton = $(this).find('.actions > .ok.button');
$(commitButton).on('click', (e) => { $(commitButton).on('click', async (e) => {
e.preventDefault(); e.preventDefault();
$.ajax({ try {
method: 'POST', await POST($(showButton).data('url'));
url: $(showButton).data('url'), } catch (error) {
headers: { console.error(error);
'X-Csrf-Token': csrfToken, } finally {
},
contentType: 'application/json',
}).done(() => {
window.location.reload(); window.location.reload();
}); }
}); });
}); });
@ -167,19 +162,16 @@ export function initRepoProject() {
const deleteColumnButton = deleteColumnModal.find('.actions > .ok.button'); const deleteColumnButton = deleteColumnModal.find('.actions > .ok.button');
const deleteUrl = $(this).attr('data-url'); const deleteUrl = $(this).attr('data-url');
deleteColumnButton.on('click', (e) => { deleteColumnButton.on('click', async (e) => {
e.preventDefault(); e.preventDefault();
$.ajax({ try {
url: deleteUrl, await DELETE(deleteUrl);
headers: { } catch (error) {
'X-Csrf-Token': csrfToken, console.error(error);
}, } finally {
contentType: 'application/json',
method: 'DELETE',
}).done(() => {
window.location.reload(); window.location.reload();
}); }
}); });
}); });
@ -190,7 +182,7 @@ export function initRepoProject() {
if (!columnTitle.val()) { if (!columnTitle.val()) {
return; return;
} }
const url = $(this).data('url'); const url = e.target.getAttribute('data-url');
createNewColumn(url, columnTitle, projectColorInput); createNewColumn(url, columnTitle, projectColorInput);
}); });
} }