magic_rb/forgejo
Template
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo synced 2024-11-22 09:54:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Remove jQuery AJAX from the project page (#29814)

Browse source 
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
1 changed files with 60 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

128
web_src/js/features/repo-projects.js
View file

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