mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues 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>
pull/29826/head^2
Yarden Shoham 8 months ago committed by GitHub
parent c00633971a
commit 3979970938
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 60 additions and 68 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 128
      web_src/js/features/repo-projects.js

128
web_src/js/features/repo-projects.js
Unescape 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);
});
}

Write Preview
Loading…
Cancel
Save