Remove jQuery AJAX from the comment edit box (#29812)

- Removed all jQuery AJAX calls and replaced with our fetch wrapper
- Tested the file addition and removal functionality and it works as
before

# Demo using `fetch` instead of jQuery AJAX

![demo](https://github.com/go-gitea/gitea/assets/20454870/846ed6d5-3798-43ca-920c-d619e9c3d745)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
Yarden Shoham 2024-03-15 20:02:43 +02:00 committed by GitHub
parent 6692894637
commit bfb0a5a41e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 29 additions and 19 deletions

View File

@ -24,7 +24,7 @@ import {initRepoPullRequestCommitStatus} from './repo-issue-pr-status.js';
import {hideElem, showElem} from '../utils/dom.js'; import {hideElem, showElem} from '../utils/dom.js';
import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js'; import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
import {attachRefIssueContextPopup} from './contextpopup.js'; import {attachRefIssueContextPopup} from './contextpopup.js';
import {POST} from '../modules/fetch.js'; import {POST, GET} from '../modules/fetch.js';
const {csrfToken} = window.config; const {csrfToken} = window.config;
@ -83,7 +83,7 @@ export function initRepoCommentForm() {
await POST(form.attr('action'), {data: params}); await POST(form.attr('action'), {data: params});
window.location.reload(); window.location.reload();
} catch (error) { } catch (error) {
console.error('Error:', error); console.error(error);
} }
} else if (editMode === '') { } else if (editMode === '') {
$selectBranch.find('.ui .branch-name').text(selectedValue); $selectBranch.find('.ui .branch-name').text(selectedValue);
@ -355,14 +355,15 @@ async function onEditContent(event) {
const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid); const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
$dropzone.find('.files').append(input); $dropzone.find('.files').append(input);
}); });
this.on('removedfile', (file) => { this.on('removedfile', async (file) => {
if (disableRemovedfileEvent) return; if (disableRemovedfileEvent) return;
$(`#${file.uuid}`).remove(); $(`#${file.uuid}`).remove();
if ($dropzone.attr('data-remove-url') && !fileUuidDict[file.uuid].submitted) { if ($dropzone.attr('data-remove-url') && !fileUuidDict[file.uuid].submitted) {
$.post($dropzone.attr('data-remove-url'), { try {
file: file.uuid, await POST($dropzone.attr('data-remove-url'), {data: new URLSearchParams({file: file.uuid})});
_csrf: csrfToken, } catch (error) {
}); console.error(error);
}
} }
}); });
this.on('submit', () => { this.on('submit', () => {
@ -370,8 +371,10 @@ async function onEditContent(event) {
fileUuidDict[fileUuid].submitted = true; fileUuidDict[fileUuid].submitted = true;
}); });
}); });
this.on('reload', () => { this.on('reload', async () => {
$.getJSON($editContentZone.attr('data-attachment-url'), (data) => { try {
const response = await GET($editContentZone.attr('data-attachment-url'));
const data = await response.json();
// do not trigger the "removedfile" event, otherwise the attachments would be deleted from server // do not trigger the "removedfile" event, otherwise the attachments would be deleted from server
disableRemovedfileEvent = true; disableRemovedfileEvent = true;
dz.removeAllFiles(true); dz.removeAllFiles(true);
@ -390,7 +393,9 @@ async function onEditContent(event) {
const input = $(`<input id="${attachment.uuid}" name="files" type="hidden">`).val(attachment.uuid); const input = $(`<input id="${attachment.uuid}" name="files" type="hidden">`).val(attachment.uuid);
$dropzone.find('.files').append(input); $dropzone.find('.files').append(input);
} }
}); } catch (error) {
console.error(error);
}
}); });
}, },
}); });
@ -406,22 +411,25 @@ async function onEditContent(event) {
} }
}; };
const saveAndRefresh = (dz) => { const saveAndRefresh = async (dz) => {
showElem($renderContent); showElem($renderContent);
hideElem($editContentZone); hideElem($editContentZone);
$.post($editContentZone.attr('data-update-url'), {
_csrf: csrfToken, try {
content: comboMarkdownEditor.value(), const params = new URLSearchParams({
context: $editContentZone.attr('data-context'), content: comboMarkdownEditor.value(),
files: dz.files.map((file) => file.uuid), context: $editContentZone.attr('data-context'),
}, (data) => { });
for (const file of dz.files) params.append('files[]', file.uuid);
const response = await POST($editContentZone.attr('data-update-url'), {data: params});
const data = await response.json();
if (!data.content) { if (!data.content) {
$renderContent.html($('#no-content').html()); $renderContent.html($('#no-content').html());
$rawContent.text(''); $rawContent.text('');
} else { } else {
$renderContent.html(data.content); $renderContent.html(data.content);
$rawContent.text(comboMarkdownEditor.value()); $rawContent.text(comboMarkdownEditor.value());
const refIssues = $renderContent.find('p .ref-issue'); const refIssues = $renderContent.find('p .ref-issue');
attachRefIssueContextPopup(refIssues); attachRefIssueContextPopup(refIssues);
} }
@ -442,7 +450,9 @@ async function onEditContent(event) {
} }
initMarkupContent(); initMarkupContent();
initCommentContent(); initCommentContent();
}); } catch (error) {
console.error(error);
}
}; };
if (!$editContentZone.html()) { if (!$editContentZone.html()) {