Browse Source

Remove jQuery AJAX from the repo tag edit form (#29526)

- Removed all jQuery AJAX calls and replaced with our fetch wrapper
- Tested the repo tag edit form functionality and it works as before

# Demo using `fetch` instead of jQuery AJAX

![action](https://github.com/go-gitea/gitea/assets/20454870/11126bc4-1666-44ae-8644-a6351da43514)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
tags/v1.22.0-rc0
Yarden Shoham 3 months ago
parent
commit
2089b974c8
No account linked to committer's email address
1 changed files with 30 additions and 29 deletions
  1. 30
    29
      web_src/js/features/repo-home.js

+ 30
- 29
web_src/js/features/repo-home.js View File

@@ -1,8 +1,9 @@
import $ from 'jquery';
import {stripTags} from '../utils.js';
import {hideElem, showElem} from '../utils/dom.js';
import {POST} from '../modules/fetch.js';

const {appSubUrl, csrfToken} = window.config;
const {appSubUrl} = window.config;

export function initRepoTopicBar() {
const mgrBtn = $('#manage_topic');
@@ -30,50 +31,50 @@ export function initRepoTopicBar() {
mgrBtn.focus();
});

saveBtn.on('click', () => {
saveBtn.on('click', async () => {
const topics = $('input[name=topics]').val();

$.post(saveBtn.attr('data-link'), {
_csrf: csrfToken,
topics
}, (_data, _textStatus, xhr) => {
if (xhr.responseJSON.status === 'ok') {
const data = new FormData();
data.append('topics', topics);

const response = await POST(saveBtn.attr('data-link'), {data});

if (response.ok) {
const responseData = await response.json();
if (responseData.status === 'ok') {
viewDiv.children('.topic').remove();
if (topics.length) {
const topicArray = topics.split(',');
topicArray.sort();
for (let i = 0; i < topicArray.length; i++) {
for (const topic of topicArray) {
const link = $('<a class="ui repo-topic large label topic gt-m-0"></a>');
link.attr('href', `${appSubUrl}/explore/repos?q=${encodeURIComponent(topicArray[i])}&topic=1`);
link.text(topicArray[i]);
link.attr('href', `${appSubUrl}/explore/repos?q=${encodeURIComponent(topic)}&topic=1`);
link.text(topic);
link.insertBefore(mgrBtn); // insert all new topics before manage button
}
}
hideElem(editDiv);
showElem(viewDiv);
}
}).fail((xhr) => {
if (xhr.status === 422) {
if (xhr.responseJSON.invalidTopics.length > 0) {
topicPrompts.formatPrompt = xhr.responseJSON.message;

const {invalidTopics} = xhr.responseJSON;
const topicLabels = topicDropdown.children('a.ui.label');

for (const [index, value] of topics.split(',').entries()) {
for (let i = 0; i < invalidTopics.length; i++) {
if (invalidTopics[i] === value) {
topicLabels.eq(index).removeClass('green').addClass('red');
}
}
} else if (response.status === 422) {
const responseData = await response.json();
if (responseData.invalidTopics.length > 0) {
topicPrompts.formatPrompt = responseData.message;

const {invalidTopics} = responseData;
const topicLabels = topicDropdown.children('a.ui.label');
for (const [index, value] of topics.split(',').entries()) {
if (invalidTopics.includes(value)) {
topicLabels.eq(index).removeClass('green').addClass('red');
}
} else {
topicPrompts.countPrompt = xhr.responseJSON.message;
}
} else {
topicPrompts.countPrompt = responseData.message;
}
}).always(() => {
topicForm.form('validate form');
});
}

// Always validate the form
topicForm.form('validate form');
});

topicDropdown.dropdown({

Loading…
Cancel
Save