diff --git a/app/javascript/packs/application.ts b/app/javascript/packs/application.ts index 3fa1a7a6..41a9f0fb 100644 --- a/app/javascript/packs/application.ts +++ b/app/javascript/packs/application.ts @@ -2,10 +2,12 @@ import start from 'retrospring/common'; import initAnswerbox from 'retrospring/features/answerbox/index'; 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'; start(); document.addEventListener('turbolinks:load', initAnswerbox); document.addEventListener('turbolinks:load', initInbox); document.addEventListener('DOMContentLoaded', initUser); +document.addEventListener('turbolinks:load', initSettings); document.addEventListener('DOMContentLoaded', initLists); \ No newline at end of file diff --git a/app/javascript/retrospring/features/settings/index.ts b/app/javascript/retrospring/features/settings/index.ts new file mode 100644 index 00000000..507031a0 --- /dev/null +++ b/app/javascript/retrospring/features/settings/index.ts @@ -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('.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') +} \ No newline at end of file diff --git a/app/javascript/retrospring/features/settings/mute.ts b/app/javascript/retrospring/features/settings/mute.ts new file mode 100644 index 00000000..e9ef07fb --- /dev/null +++ b/app/javascript/retrospring/features/settings/mute.ts @@ -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('input').value = textEntry.value; + newEntryFragment.querySelector('button').dataset.id = String(data.id); + + rulesList.appendChild(newEntryFragment) + + textEntry.value = '' + } + }); + }; +} \ No newline at end of file diff --git a/app/views/settings/_muted.haml b/app/views/settings/_muted.haml index 5bb51661..2d1cab73 100644 --- a/app/views/settings/_muted.haml +++ b/app/views/settings/_muted.haml @@ -3,15 +3,22 @@ %h2 Muted words %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. - - @rules.each do |rule| - .form-group - .input-group - %input.form-control#new-rule-text{disabled: true, value: rule.muted_phrase} - .input-group-append - %button.btn.btn-danger#new-rule-submit{type: 'button'} Remove + .js-rules-list + - @rules.each do |rule| + .form-group + .input-group + %input.form-control{disabled: true, value: rule.muted_phrase} + .input-group-append + %button.btn.btn-danger{type: 'button', data: {id: rule.id}} Remove .form-group %form .input-group %input.form-control#new-rule-text{placeholder: 'Add a new muted word...'} .input-group-append - %button.btn.btn-primary#new-rule-submit{type: 'submit'} Add \ No newline at end of file + %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 \ No newline at end of file