Implement frontend for adding mute rules

This commit is contained in:
Karina Kwiatek 2021-12-23 01:20:47 +01:00
parent 6b626765a8
commit 23a5fb55d1
4 changed files with 62 additions and 7 deletions

View File

@ -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);

View File

@ -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')
}

View File

@ -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 = ''
}
});
};
}

View File

@ -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