Port questionbox user functionality to TypeScript

This commit is contained in:
Andreas Nedbal 2022-01-03 22:21:00 +01:00 committed by Andreas Nedbal
parent 41a7c89dae
commit 88d8cae815
3 changed files with 79 additions and 1 deletions

View File

@ -4,10 +4,12 @@ import initInbox from 'retrospring/features/inbox/index';
import initUser from 'retrospring/features/user';
import initSettings from 'retrospring/features/settings/index';
import initLists from 'retrospring/features/lists';
import initQuestionbox from 'retrospring/features/questionbox';
start();
document.addEventListener('turbolinks:load', initAnswerbox);
document.addEventListener('DOMContentLoaded', initInbox);
document.addEventListener('DOMContentLoaded', initUser);
document.addEventListener('turbolinks:load', initSettings);
document.addEventListener('DOMContentLoaded', initLists);
document.addEventListener('DOMContentLoaded', initLists);
document.addEventListener('DOMContentLoaded', initQuestionbox);

View File

@ -0,0 +1,17 @@
import registerEvents from 'utilities/registerEvents';
import { questionboxAllHandler, questionboxAllInputHandler } from './all';
import { questionboxDestroyHandler } from './destroy';
import { questionboxReportHandler } from './report';
import { questionboxPromoteHandler, questionboxUserHandler, questionboxUserInputHandler } from './user';
export default (): void => {
registerEvents([
{ type: 'click', target: '[data-action=ab-question-report]', handler: questionboxReportHandler, global: true },
{ type: 'click', target: '[name=qb-ask]', handler: questionboxUserHandler, global: true },
{ type: 'click', target: '#new-question', handler: questionboxPromoteHandler, global: true },
{ type: 'click', target: '[data-action=ab-question-destroy]', handler: questionboxDestroyHandler, global: true },
{ type: 'click', target: '[name=qb-all-ask]', handler: questionboxAllHandler, global: true },
{ type: 'keydown', target: '[name=qb-question]', handler: questionboxUserInputHandler, global: true },
{ type: 'keydown', target: '[name=qb-all-question]', handler: questionboxAllInputHandler, global: true }
]);
}

View File

@ -0,0 +1,59 @@
import Rails from '@rails/ujs';
import { showErrorNotification, showNotification } from 'utilities/notifications';
import I18n from '../../../legacy/i18n';
export function questionboxUserHandler(event: Event) {
const button = event.target as HTMLButtonElement;
const promote = button.dataset.promote === "true";
const anonymousQuestion = document.querySelector<HTMLInputElement>('input[name=qb-anonymous]')?.checked;
document.querySelector<HTMLInputElement>('textarea[name=qb-question]').readOnly = true;
button.disabled = true;
Rails.ajax({
url: '/ajax/ask',
type: 'POST',
data: new URLSearchParams({
rcpt: document.querySelector<HTMLInputElement>('input[name=qb-to]').value,
question: document.querySelector<HTMLInputElement>('textarea[name=qb-question]').value,
anonymousQuestion: String(anonymousQuestion)
}).toString(),
success: (data) => {
if (data.success) {
document.querySelector<HTMLInputElement>('textarea[name=qb-question]').value = '';
if (promote) {
const questionbox = document.querySelector('#question-box');
questionbox.classList.toggle('d-none');
const promote = document.querySelector('#question-box-promote');
promote.classList.toggle('d-none');
}
}
showNotification(data.message, data.success);
},
error: (data, status, xhr) => {
console.log(data, status, xhr);
showErrorNotification(I18n.translate('frontend.error.message'));
},
complete: () => {
document.querySelector<HTMLInputElement>('textarea[name=qb-question]').readOnly = false;
button.disabled = false;
}
});
}
export function questionboxPromoteHandler(event: Event) {
const questionbox = document.querySelector('#question-box');
questionbox.classList.toggle('d-none');
const promote = document.querySelector('#question-box-promote');
promote.classList.toggle('d-none');
}
export function questionboxUserInputHandler(event: KeyboardEvent) {
if (event.keyCode == 13 && (event.ctrlKey || event.metaKey)) {
document.querySelector<HTMLButtonElement>(`button[name=qb-ask]`).click();
}
}