Implement frontend for adding mute rules
This commit is contained in:
parent
6b626765a8
commit
23a5fb55d1
|
@ -2,10 +2,12 @@ import start from 'retrospring/common';
|
||||||
import initAnswerbox from 'retrospring/features/answerbox/index';
|
import initAnswerbox from 'retrospring/features/answerbox/index';
|
||||||
import initInbox from 'retrospring/features/inbox/index';
|
import initInbox from 'retrospring/features/inbox/index';
|
||||||
import initUser from 'retrospring/features/user';
|
import initUser from 'retrospring/features/user';
|
||||||
|
import initSettings from 'retrospring/features/settings/index';
|
||||||
import initLists from 'retrospring/features/lists';
|
import initLists from 'retrospring/features/lists';
|
||||||
|
|
||||||
start();
|
start();
|
||||||
document.addEventListener('turbolinks:load', initAnswerbox);
|
document.addEventListener('turbolinks:load', initAnswerbox);
|
||||||
document.addEventListener('turbolinks:load', initInbox);
|
document.addEventListener('turbolinks:load', initInbox);
|
||||||
document.addEventListener('DOMContentLoaded', initUser);
|
document.addEventListener('DOMContentLoaded', initUser);
|
||||||
|
document.addEventListener('turbolinks:load', initSettings);
|
||||||
document.addEventListener('DOMContentLoaded', initLists);
|
document.addEventListener('DOMContentLoaded', initLists);
|
|
@ -0,0 +1,14 @@
|
||||||
|
import {createSubmitEvent} from "retrospring/features/settings/mute";
|
||||||
|
|
||||||
|
export default (): void => {
|
||||||
|
const submit: HTMLButtonElement = document.getElementById('new-rule-submit') as HTMLButtonElement;
|
||||||
|
if (submit.classList.contains('js-initialized')) return;
|
||||||
|
|
||||||
|
const rulesList = document.querySelector<HTMLDivElement>('.js-rules-list');
|
||||||
|
const textEntry: HTMLButtonElement = document.getElementById('new-rule-text') as HTMLButtonElement;
|
||||||
|
const template: HTMLTemplateElement = document.getElementById('rule-template') as HTMLTemplateElement;
|
||||||
|
|
||||||
|
submit.form.onsubmit = createSubmitEvent(submit, rulesList, textEntry, template)
|
||||||
|
|
||||||
|
submit.classList.add('js-initialized')
|
||||||
|
}
|
|
@ -0,0 +1,32 @@
|
||||||
|
import Rails from '@rails/ujs';
|
||||||
|
|
||||||
|
export function createSubmitEvent(
|
||||||
|
submit: HTMLButtonElement,
|
||||||
|
rulesList: HTMLDivElement,
|
||||||
|
textEntry: HTMLButtonElement,
|
||||||
|
template: HTMLTemplateElement
|
||||||
|
): (event: Event) => void {
|
||||||
|
return (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
submit.disabled = true;
|
||||||
|
|
||||||
|
Rails.ajax({
|
||||||
|
url: '/ajax/mute',
|
||||||
|
type: 'POST',
|
||||||
|
dataType: 'json',
|
||||||
|
data: new URLSearchParams({muted_phrase: textEntry.value}).toString(),
|
||||||
|
success: (data) => {
|
||||||
|
submit.disabled = false;
|
||||||
|
if (!data.success) return;
|
||||||
|
|
||||||
|
const newEntryFragment = template.content.cloneNode(true) as Element;
|
||||||
|
newEntryFragment.querySelector<HTMLInputElement>('input').value = textEntry.value;
|
||||||
|
newEntryFragment.querySelector<HTMLButtonElement>('button').dataset.id = String(data.id);
|
||||||
|
|
||||||
|
rulesList.appendChild(newEntryFragment)
|
||||||
|
|
||||||
|
textEntry.value = ''
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
|
@ -3,15 +3,22 @@
|
||||||
%h2 Muted words
|
%h2 Muted words
|
||||||
%p Muting words (or longer phrases) will prevent questions containing those to appear in your inbox.
|
%p Muting words (or longer phrases) will prevent questions containing those to appear in your inbox.
|
||||||
%p Note: Filtered questions are discarded completely from your inbox, and won't reappear if you remove a filter later on.
|
%p Note: Filtered questions are discarded completely from your inbox, and won't reappear if you remove a filter later on.
|
||||||
- @rules.each do |rule|
|
.js-rules-list
|
||||||
.form-group
|
- @rules.each do |rule|
|
||||||
.input-group
|
.form-group
|
||||||
%input.form-control#new-rule-text{disabled: true, value: rule.muted_phrase}
|
.input-group
|
||||||
.input-group-append
|
%input.form-control{disabled: true, value: rule.muted_phrase}
|
||||||
%button.btn.btn-danger#new-rule-submit{type: 'button'} Remove
|
.input-group-append
|
||||||
|
%button.btn.btn-danger{type: 'button', data: {id: rule.id}} Remove
|
||||||
.form-group
|
.form-group
|
||||||
%form
|
%form
|
||||||
.input-group
|
.input-group
|
||||||
%input.form-control#new-rule-text{placeholder: 'Add a new muted word...'}
|
%input.form-control#new-rule-text{placeholder: 'Add a new muted word...'}
|
||||||
.input-group-append
|
.input-group-append
|
||||||
%button.btn.btn-primary#new-rule-submit{type: 'submit'} Add
|
%button.btn.btn-primary#new-rule-submit{type: 'submit'} Add
|
||||||
|
%template#rule-template
|
||||||
|
.form-group
|
||||||
|
.input-group
|
||||||
|
%input.form-control{disabled: true}
|
||||||
|
.input-group-append
|
||||||
|
%button.btn.btn-danger{type: 'button'} Remove
|
Loading…
Reference in New Issue