mirror of
https://github.com/go-gitea/gitea.git
synced 2024-09-06 23:44:20 -04:00
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>
This commit is contained in:
parent
c00633971a
commit
3979970938
@ -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);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user