Change: #648 センシティブワードの入力フォーム (#653)

* Change: #648 センシティブワードの入力フォーム

* Wip: 行の追加削除

* Wip: 設定の保存、マイグレーション

* 不要な処理を削除

* マイグレーションコード調整
This commit is contained in:
KMY(雪あすか) 2024-03-19 08:18:34 +09:00 committed by GitHub
parent f509bd4fc3
commit ed246f0d03
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 377 additions and 61 deletions

View file

@ -272,6 +272,68 @@ Rails.delegate(
},
);
const addTableRow = (tableId: string) => {
const templateElement = document.querySelector(`#${tableId} .template-row`)!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
const tableElement = document.querySelector(`#${tableId} tbody`)!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
if (
typeof templateElement === 'undefined' ||
typeof tableElement === 'undefined'
)
return;
let temporaryId = 0;
tableElement
.querySelectorAll<HTMLInputElement>('.temporary_id')
.forEach((input) => {
if (parseInt(input.value) + 1 > temporaryId) {
temporaryId = parseInt(input.value) + 1;
}
});
const cloned = templateElement.cloneNode(true) as HTMLTableRowElement;
cloned.className = '';
cloned.querySelector<HTMLInputElement>('.temporary_id')!.value = // eslint-disable-line @typescript-eslint/no-non-null-assertion
temporaryId.toString();
cloned
.querySelectorAll<HTMLInputElement>('input[type=checkbox]')
.forEach((input) => {
input.value = temporaryId.toString();
});
tableElement.appendChild(cloned);
};
const removeTableRow = (target: EventTarget | null, tableId: string) => {
const tableRowElement = (target as HTMLElement).closest('tr') as Node;
const tableElement = document.querySelector(`#${tableId} tbody`)!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
if (
typeof tableRowElement === 'undefined' ||
typeof tableElement === 'undefined'
)
return;
tableElement.removeChild(tableRowElement);
};
Rails.delegate(
document,
'#sensitive-words-table .add-row-button',
'click',
() => {
addTableRow('sensitive-words-table');
},
);
Rails.delegate(
document,
'#sensitive-words-table .delete-row-button',
'click',
({ target }) => {
removeTableRow(target, 'sensitive-words-table');
},
);
async function mountReactComponent(element: Element) {
const componentName = element.getAttribute('data-admin-component');
const stringProps = element.getAttribute('data-props');