From 4ce0ee6d596e0bc0356511842880278cc3804fcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=90=D1=85=D0=BC=D0=B5?= =?UTF-8?q?=D1=82=D1=87=D0=B0=D0=BD=D0=BE=D0=B2?= Date: Tue, 6 Jul 2021 14:21:58 +0300 Subject: [PATCH 1/3] [#106] edit of personal WIP-limit --- src/person-limits/personLimitsModal.html | 5 +- src/person-limits/personLimitsModal.js | 106 +++++++++++++++++++---- 2 files changed, 93 insertions(+), 18 deletions(-) diff --git a/src/person-limits/personLimitsModal.html b/src/person-limits/personLimitsModal.html index 2101081..6f46ed7 100644 --- a/src/person-limits/personLimitsModal.html +++ b/src/person-limits/personLimitsModal.html @@ -22,13 +22,13 @@

Person limits

- +
- +
@@ -39,6 +39,7 @@

Person limits

+
diff --git a/src/person-limits/personLimitsModal.js b/src/person-limits/personLimitsModal.js index 9b9b18e..1186eaf 100644 --- a/src/person-limits/personLimitsModal.js +++ b/src/person-limits/personLimitsModal.js @@ -3,7 +3,7 @@ import { extensionApiService } from '../shared/ExtensionApiService'; import { getUser } from '../shared/jiraApi'; import { BOARD_PROPERTIES } from '../shared/constants'; -const renderRow = ({ id, person, limit, columns, swimlanes }, deleteLimit) => { +const renderRow = ({ id, person, limit, columns, swimlanes }, deleteLimit, onEdit) => { document.querySelector('#persons-limit-body').insertAdjacentHTML( 'beforeend', ` @@ -13,7 +13,7 @@ const renderRow = ({ id, person, limit, columns, swimlanes }, deleteLimit) => { ${limit} ${columns.map(c => c.name).join(', ')} ${swimlanes.map(s => s.name).join(', ')} - +
` ); @@ -22,6 +22,15 @@ const renderRow = ({ id, person, limit, columns, swimlanes }, deleteLimit) => { await deleteLimit(id); document.querySelector(`#row-${id}`).remove(); }); + + document.querySelector(`#edit-${id}`).addEventListener('click', async () => { + await onEdit(id); + }); +}; + +const renderAllRow = ({ modal, personLimits, deleteLimit, onEdit }) => { + modal.querySelectorAll('.person-row').forEach(row => row.remove()); + personLimits.limits.forEach(personLimit => renderRow(personLimit, deleteLimit, onEdit)); }; export const openPersonLimitsModal = async (modification, boardData, personLimits) => { @@ -30,6 +39,34 @@ export const openPersonLimitsModal = async (modification, boardData, personLimit await modification.updateBoardProperty(BOARD_PROPERTIES.PERSON_LIMITS, personLimits); }; + const onEdit = async id => { + const personalWIPLimit = personLimits.limits.find(limit => limit.id === id); + + document.querySelector('#limit').value = personalWIPLimit.limit; + document.querySelector('#person-name').value = personalWIPLimit.person.name; + + const columns = document.querySelector('#column-select'); + const selectedColumnsIds = personalWIPLimit.columns.map(c => c.id); + + columns.options.forEach(option => { + option.selected = selectedColumnsIds.indexOf(option.value) > -1; + }); + + const swimlanes = document.querySelector('#swimlanes-select'); + const selectedSwimlanesIds = personalWIPLimit.swimlanes.map(c => c.id); + + swimlanes.options.forEach(option => { + option.selected = selectedSwimlanesIds.indexOf(option.value) > -1; + }); + + const editBtn = document.querySelector('#person-limit-edit-button'); + editBtn.disabled = false; + editBtn.setAttribute('person-id', id); + document.querySelector(`#row-${id}`).style.background = '#ffd989c2'; + + await modification.updateBoardProperty(BOARD_PROPERTIES.PERSON_LIMITS, personLimits); + }; + const modal = modification.insertHTML(document.body, 'beforeend', personLimitsModal); const columnsSelect = modal.querySelector('.columns select'); @@ -50,15 +87,54 @@ export const openPersonLimitsModal = async (modification, boardData, personLimit swimlanesSelect.appendChild(option); }); - modal.querySelector('#person-limit-save-button').addEventListener('click', async e => { - e.preventDefault(); - - const person = modal.querySelector('#person-name').value; + const getDataForm = () => { + const name = modal.querySelector('#person-name').value; const limit = modal.querySelector('#limit').valueAsNumber; const columns = [...columnsSelect.selectedOptions].map(option => ({ id: option.value, name: option.text })); const swimlanes = [...swimlanesSelect.selectedOptions].map(option => ({ id: option.value, name: option.text })); - const fullPerson = await getUser(person); + return { + person: { + name, + }, + limit, + columns, + swimlanes, + }; + }; + + modal.querySelector('#person-limit-edit-button').addEventListener('click', async e => { + e.preventDefault(); + const personeId = parseInt(e.target.getAttribute('person-id'), 10); + e.target.disabled = true; + + if (!personeId) return; + + const index = personLimits.limits.findIndex(pl => pl.id === personeId); + + if (index === -1) return; + + const data = getDataForm(); + + personLimits.limits[index] = { + ...personLimits.limits[index], + ...data, + person: { + ...data.person, + ...personLimits.limits[index].person, + }, + }; + + await modification.updateBoardProperty(BOARD_PROPERTIES.PERSON_LIMITS, personLimits); + + renderAllRow({ modal, personLimits, deleteLimit, onEdit }); + }); + + modal.querySelector('#person-limit-save-button').addEventListener('click', async e => { + e.preventDefault(); + + const data = getDataForm(); + const fullPerson = await getUser(data.person.name); const personLimit = { id: Date.now(), @@ -68,16 +144,16 @@ export const openPersonLimitsModal = async (modification, boardData, personLimit self: fullPerson.self, avatar: fullPerson.avatarUrls['32x32'], }, - limit, - columns, - swimlanes, + limit: data.limit, + columns: data.columns, + swimlanes: data.swimlanes, }; personLimits.limits.push(personLimit); await modification.updateBoardProperty(BOARD_PROPERTIES.PERSON_LIMITS, personLimits); - renderRow(personLimit, deleteLimit); + renderRow(personLimit, deleteLimit, onEdit); }); modal.querySelector('#apply-columns').addEventListener('click', async e => { @@ -96,9 +172,7 @@ export const openPersonLimitsModal = async (modification, boardData, personLimit ); await modification.updateBoardProperty(BOARD_PROPERTIES.PERSON_LIMITS, personLimits); - - modal.querySelectorAll('.person-row').forEach(row => row.remove()); - personLimits.limits.forEach(personLimit => renderRow(personLimit, deleteLimit)); + renderAllRow({ modal, personLimits, deleteLimit, onEdit }); }); modal.querySelector('#apply-swimlanes').addEventListener('click', async e => { @@ -119,10 +193,10 @@ export const openPersonLimitsModal = async (modification, boardData, personLimit await modification.updateBoardProperty(BOARD_PROPERTIES.PERSON_LIMITS, personLimits); modal.querySelectorAll('.person-row').forEach(row => row.remove()); - personLimits.limits.forEach(personLimit => renderRow(personLimit, deleteLimit)); + personLimits.limits.forEach(personLimit => renderRow(personLimit, deleteLimit, onEdit)); }); - personLimits.limits.forEach(personLimit => renderRow(personLimit, deleteLimit)); + personLimits.limits.forEach(personLimit => renderRow(personLimit, deleteLimit, onEdit)); // window.AJS is not available here const script = document.createElement('script'); From dcfe94942d80436876c33f516623e42752c4d885 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=90=D1=85=D0=BC=D0=B5?= =?UTF-8?q?=D1=82=D1=87=D0=B0=D0=BD=D0=BE=D0=B2?= Date: Tue, 6 Jul 2021 14:33:44 +0300 Subject: [PATCH 2/3] [#106] fixed by review commented --- src/person-limits/personLimitsModal.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/person-limits/personLimitsModal.js b/src/person-limits/personLimitsModal.js index 1186eaf..acb2480 100644 --- a/src/person-limits/personLimitsModal.js +++ b/src/person-limits/personLimitsModal.js @@ -105,12 +105,12 @@ export const openPersonLimitsModal = async (modification, boardData, personLimit modal.querySelector('#person-limit-edit-button').addEventListener('click', async e => { e.preventDefault(); - const personeId = parseInt(e.target.getAttribute('person-id'), 10); + const personeid = parseInt(e.target.getAttribute('person-id'), 10); e.target.disabled = true; - if (!personeId) return; + if (!personeid) return; - const index = personLimits.limits.findIndex(pl => pl.id === personeId); + const index = personLimits.limits.findIndex(pl => pl.id === personeid); if (index === -1) return; From da2506fe924ce38fd739f444b715b377c1515b97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=90=D1=85=D0=BC=D0=B5?= =?UTF-8?q?=D1=82=D1=87=D0=B0=D0=BD=D0=BE=D0=B2?= Date: Tue, 6 Jul 2021 14:46:37 +0300 Subject: [PATCH 3/3] [#106] fixed personId --- src/person-limits/personLimitsModal.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/person-limits/personLimitsModal.js b/src/person-limits/personLimitsModal.js index acb2480..083cd63 100644 --- a/src/person-limits/personLimitsModal.js +++ b/src/person-limits/personLimitsModal.js @@ -105,12 +105,12 @@ export const openPersonLimitsModal = async (modification, boardData, personLimit modal.querySelector('#person-limit-edit-button').addEventListener('click', async e => { e.preventDefault(); - const personeid = parseInt(e.target.getAttribute('person-id'), 10); + const personId = parseInt(e.target.getAttribute('person-id'), 10); e.target.disabled = true; - if (!personeid) return; + if (!personId) return; - const index = personLimits.limits.findIndex(pl => pl.id === personeid); + const index = personLimits.limits.findIndex(pl => pl.id === personId); if (index === -1) return;