From 542cdd8b9a1cd08e00cdc2abb05223f496fb85b3 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Tue, 28 Dec 2021 21:12:33 +0100 Subject: [PATCH 1/7] Setup lists feature in TypeScript --- app/javascript/packs/application.ts | 4 +++- app/javascript/retrospring/features/lists/index.ts | 11 +++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 app/javascript/retrospring/features/lists/index.ts diff --git a/app/javascript/packs/application.ts b/app/javascript/packs/application.ts index edcdba3c..3fa1a7a6 100644 --- a/app/javascript/packs/application.ts +++ b/app/javascript/packs/application.ts @@ -2,8 +2,10 @@ 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 initLists from 'retrospring/features/lists'; start(); document.addEventListener('turbolinks:load', initAnswerbox); document.addEventListener('turbolinks:load', initInbox); -document.addEventListener('DOMContentLoaded', initUser); \ No newline at end of file +document.addEventListener('DOMContentLoaded', initUser); +document.addEventListener('DOMContentLoaded', initLists); \ No newline at end of file diff --git a/app/javascript/retrospring/features/lists/index.ts b/app/javascript/retrospring/features/lists/index.ts new file mode 100644 index 00000000..4bb9d71f --- /dev/null +++ b/app/javascript/retrospring/features/lists/index.ts @@ -0,0 +1,11 @@ +import { on } from 'retrospring/utilities/on'; +import { createListHandler, createListInputHandler } from './create'; +import { destroyListHandler } from './destroy'; +import { listMembershipHandler } from './membership'; + +export default (): void => { + on('click', 'input[type=checkbox][name=gm-list-check]', listMembershipHandler); + on('click', 'button#create-list', createListHandler); + on('click', 'a#delete-list', destroyListHandler); + on('keyup', 'input#new-list-name', createListInputHandler); +} \ No newline at end of file From d3d4644776150941eea9532a25a74cf857bcad17 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Tue, 28 Dec 2021 21:13:01 +0100 Subject: [PATCH 2/7] Port list membership actions from CoffeeScript to TypeScript --- .../retrospring/features/lists/membership.ts | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 app/javascript/retrospring/features/lists/membership.ts diff --git a/app/javascript/retrospring/features/lists/membership.ts b/app/javascript/retrospring/features/lists/membership.ts new file mode 100644 index 00000000..d2d63f7e --- /dev/null +++ b/app/javascript/retrospring/features/lists/membership.ts @@ -0,0 +1,37 @@ +import Rails from '@rails/ujs'; +import I18n from '../../../legacy/i18n'; + +export function listMembershipHandler(event: Event): void { + const checkbox = event.target as HTMLInputElement; + const list = checkbox.dataset.list; + let memberCount = Number(document.querySelector(`span#${list}-members`).innerHTML); + + checkbox.setAttribute('disabled', 'disabled'); + + memberCount += checkbox.checked ? 1 : -1; + + Rails.ajax({ + url: '/ajax/list_membership', + type: 'POST', + data: new URLSearchParams({ + list: list, + user: checkbox.dataset.user, + add: String(checkbox.checked) + }).toString(), + success: (data) => { + if (data.success) { + checkbox.checked = data.checked; + document.querySelector(`span#${list}-members`).innerHTML = memberCount.toString(); + } + + window['showNotification'](data.message, data.success); + }, + error: (data, status, xhr) => { + console.log(data, status, xhr); + window['showNotification'](I18n.translate('frontend.error.message'), false); + }, + complete: () => { + checkbox.removeAttribute('disabled'); + } + }); +} \ No newline at end of file From 4a94638b5963b88beb94620b0e97c3587dc2e760 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Tue, 28 Dec 2021 21:13:30 +0100 Subject: [PATCH 3/7] Port deleting lists from CoffeeScript to TypeScript --- .../retrospring/features/lists/destroy.ts | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 app/javascript/retrospring/features/lists/destroy.ts diff --git a/app/javascript/retrospring/features/lists/destroy.ts b/app/javascript/retrospring/features/lists/destroy.ts new file mode 100644 index 00000000..88c3d8e2 --- /dev/null +++ b/app/javascript/retrospring/features/lists/destroy.ts @@ -0,0 +1,43 @@ +import Rails from '@rails/ujs'; +import swal from 'sweetalert'; +import I18n from '../../../legacy/i18n'; + +export function destroyListHandler(event: Event): void { + event.preventDefault(); + const button = event.target as HTMLButtonElement; + const list = button.dataset.list; + + swal({ + title: I18n.translate('frontend.list.title'), + text: I18n.translate('frontend.list.text'), + type: "warning", + showCancelButton: true, + confirmButtonColor: "#DD6B55", + confirmButtonText: I18n.translate('views.actions.delete'), + cancelButtonText: I18n.translate('views.actions.cancel'), + closeOnConfirm: true + }, () => { + Rails.ajax({ + url: '/ajax/destroy_list', + type: 'POST', + data: new URLSearchParams({ + list: list + }).toString(), + success: (data) => { + if (data.success) { + const element = document.querySelector(`li.list-group-item#list-${list}`); + + if (element) { + element.remove(); + } + } + + window['showNotification'](data.message, data.success); + }, + error: (data, status, xhr) => { + console.log(data, status, xhr); + window['showNotification'](I18n.translate('frontend.error.message'), false); + } + }); + }); +} \ No newline at end of file From d84891763a50f2fa08fa4267da968615c20d3c06 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Tue, 28 Dec 2021 21:13:52 +0100 Subject: [PATCH 4/7] Port creating lists from CoffeeScript to TypeScript --- .../retrospring/features/lists/create.ts | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 app/javascript/retrospring/features/lists/create.ts diff --git a/app/javascript/retrospring/features/lists/create.ts b/app/javascript/retrospring/features/lists/create.ts new file mode 100644 index 00000000..6b48ac71 --- /dev/null +++ b/app/javascript/retrospring/features/lists/create.ts @@ -0,0 +1,34 @@ +import Rails from '@rails/ujs'; +import I18n from '../../../legacy/i18n'; + +export function createListHandler(event: Event): void { + const button = event.target as HTMLButtonElement; + const input = document.querySelector('input#new-list-name'); + + Rails.ajax({ + url: '/ajax/create_list', + type: 'POST', + data: new URLSearchParams({ + name: input.value, + user: button.dataset.user + }).toString(), + success: (data) => { + if (data.success) { + document.querySelector('#lists-list ul.list-group').insertAdjacentHTML('beforeend', data.render); + } + + window['showNotification'](data.message, data.success); + }, + error: (data, status, xhr) => { + console.log(data, status, xhr); + window['showNotification'](I18n.translate('frontend.error.message'), false); + } + }); +} + +export function createListInputHandler(event: KeyboardEvent): void { + if (event.which === 13) { + event.preventDefault(); + document.querySelector('button#create-list').click(); + } +} \ No newline at end of file From 493451c77723a6540644000116cdc14002205f8f Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Tue, 28 Dec 2021 21:14:17 +0100 Subject: [PATCH 5/7] Remove legacy list CoffeeScript --- app/javascript/legacy/lists.coffee | 90 ------------------------------ app/javascript/packs/legacy.coffee | 1 - 2 files changed, 91 deletions(-) delete mode 100644 app/javascript/legacy/lists.coffee diff --git a/app/javascript/legacy/lists.coffee b/app/javascript/legacy/lists.coffee deleted file mode 100644 index 99376beb..00000000 --- a/app/javascript/legacy/lists.coffee +++ /dev/null @@ -1,90 +0,0 @@ -($ document).on "click", "input[type=checkbox][name=gm-list-check]", -> - box = $(this) - box.attr 'disabled', 'disabled' - - listName = box[0].dataset.list - - count = Number ($ "span##{listName}-members").html() - boxChecked = box[0].checked - - count += if boxChecked then 1 else -1 - - $.ajax - url: '/ajax/list_membership' - type: 'POST' - data: - user: box[0].dataset.user - list: listName - add: boxChecked - success: (data, status, jqxhr) -> - if data.success - box[0].checked = if data.checked? then data.checked else !boxChecked - ($ "span##{listName}-members").html(count) - showNotification data.message, data.success - error: (jqxhr, status, error) -> - box[0].checked = false - console.log jqxhr, status, error - showNotification translate('frontend.error.message'), false - complete: (jqxhr, status) -> - box.removeAttr "disabled" - - -$(document).on "keyup", "input#new-list-name", (evt) -> - if evt.which == 13 # return key - evt.preventDefault() - $("button#create-list").trigger 'click' - - -($ document).on "click", "button#create-list", -> - btn = $(this) - btn.button "loading" - input = ($ "input#new-list-name") - - $.ajax - url: '/ajax/create_list' - type: 'POST' - data: - name: input.val() - user: btn[0].dataset.user - dataType: 'json' - success: (data, status, jqxhr) -> - if data.success - ($ "#lists-list ul.list-group").append(data.render) - input.val '' - showNotification data.message, data.success - error: (jqxhr, status, error) -> - console.log jqxhr, status, error - showNotification translate('frontend.error.message'), false - complete: (jqxhr, status) -> - btn.button "reset" - - -($ document).on "click", "a#delete-list", (ev) -> - ev.preventDefault() - btn = $(this) - list = btn[0].dataset.list - - swal - title: translate('frontend.list.title') - text: translate('frontend.list.text') - type: "warning" - showCancelButton: true - confirmButtonColor: "#DD6B55" - confirmButtonText: translate('views.actions.delete') - cancelButtonText: translate('views.actions.cancel') - closeOnConfirm: true - , -> - $.ajax - url: '/ajax/destroy_list' - type: 'POST' - data: - list: list - dataType: 'json' - success: (data, status, jqxhr) -> - if data.success - ($ "li.list-group-item#list-#{list}").slideUp() - showNotification data.message, data.success - error: (jqxhr, status, error) -> - console.log jqxhr, status, error - showNotification translate('frontend.error.message'), false - complete: (jqxhr, status) -> diff --git a/app/javascript/packs/legacy.coffee b/app/javascript/packs/legacy.coffee index 14db464e..67db5f5e 100644 --- a/app/javascript/packs/legacy.coffee +++ b/app/javascript/packs/legacy.coffee @@ -25,7 +25,6 @@ import I18n from '../legacy/i18n' import '../legacy/answerbox' import '../legacy/questionbox' import '../legacy/inbox' -import '../legacy/lists' import '../legacy/memes' import '../legacy/notifications' import '../legacy/pagination' From 6df040eecee882b22e19673f7ab76ec8f4109a91 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Tue, 28 Dec 2021 21:29:08 +0100 Subject: [PATCH 6/7] Fix missing translation when deleting lists (this was broken in prod since this was introduced, amazing!) --- app/javascript/retrospring/features/lists/destroy.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/javascript/retrospring/features/lists/destroy.ts b/app/javascript/retrospring/features/lists/destroy.ts index 88c3d8e2..22d6c766 100644 --- a/app/javascript/retrospring/features/lists/destroy.ts +++ b/app/javascript/retrospring/features/lists/destroy.ts @@ -8,8 +8,8 @@ export function destroyListHandler(event: Event): void { const list = button.dataset.list; swal({ - title: I18n.translate('frontend.list.title'), - text: I18n.translate('frontend.list.text'), + title: I18n.translate('frontend.list.confirm.title'), + text: I18n.translate('frontend.list.confirm.text'), type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", From 06e31bb0becfc0322e21cd730a90eaae8f01fe5f Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Thu, 30 Dec 2021 12:23:35 +0100 Subject: [PATCH 7/7] Apply review suggestion from @raccube --- app/javascript/retrospring/features/lists/create.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/app/javascript/retrospring/features/lists/create.ts b/app/javascript/retrospring/features/lists/create.ts index 6b48ac71..c9907a3b 100644 --- a/app/javascript/retrospring/features/lists/create.ts +++ b/app/javascript/retrospring/features/lists/create.ts @@ -27,6 +27,7 @@ export function createListHandler(event: Event): void { } export function createListInputHandler(event: KeyboardEvent): void { + // Return key if (event.which === 13) { event.preventDefault(); document.querySelector('button#create-list').click();