Skip to content

Commit 7b81232

Browse files
OstafinLtomaszszopinski
OstafinL
and
tomaszszopinski
authored
IBX-10416: Wrong styling in sub-items edit translation selector (#1668)
Co-authored-by: tomaszszopinski <[email protected]>
1 parent 9234091 commit 7b81232

28 files changed

+709
-365
lines changed

‎src/bundle/Resources/public/js/scripts/admin.location.view.js‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,22 @@
88
const queryString = window.location.search;
99
const urlParams = new URLSearchParams(queryString);
1010
const publishedContentId = urlParams.get('publishedContentId');
11-
const handleEditItem = (content, location) => {
11+
const sendForm = () => {
12+
doc.querySelector('#form_subitems_content_edit_create').click();
13+
};
14+
const updateForm = (contentId, languageCode) => {
15+
doc.querySelector('#form_subitems_content_edit_content_info').value = contentId;
16+
doc.querySelector(`#form_subitems_content_edit_language_${languageCode}`).checked = true;
17+
};
18+
const handleEditItem = (content, location, isLanguageSelectorOpened) => {
1219
const contentId = content._id;
1320
const locationId = location._id;
1421
const languageCode = content.mainLanguageCode;
1522
const checkVersionDraftLink = Routing.generate('ibexa.version_draft.has_no_conflict', { contentId, languageCode, locationId });
16-
const submitVersionEditForm = () => {
17-
doc.querySelector('#form_subitems_content_edit_content_info').value = contentId;
18-
doc.querySelector(`#form_subitems_content_edit_language_${languageCode}`).checked = true;
19-
doc.querySelector('#form_subitems_content_edit_create').click();
20-
};
23+
2124
const addDraft = () => {
22-
submitVersionEditForm();
25+
updateForm(contentId, languageCode);
26+
sendForm();
2327
bootstrap.Modal.getOrCreateInstance(doc.querySelector('#version-draft-conflict-modal')).hide();
2428
};
2529
const attachModalListeners = (wrapper) => {
@@ -37,6 +41,9 @@
3741
if (conflictModal) {
3842
bootstrap.Modal.getOrCreateInstance(conflictModal).show();
3943
conflictModal.addEventListener('shown.bs.modal', () => ibexa.helpers.tooltips.parse());
44+
conflictModal.addEventListener('hide.bs.modal', () => {
45+
doc.body.dispatchEvent(new CustomEvent('ibexa:edit-content-reset-language-selector'));
46+
});
4047
}
4148
};
4249
const showModal = (modalHtml) => {
@@ -71,7 +78,11 @@
7178
if (response.status === 409) {
7279
response.text().then(showModal);
7380
} else if (response.status === 200) {
74-
submitVersionEditForm();
81+
updateForm(contentId, languageCode);
82+
83+
if (!isLanguageSelectorOpened) {
84+
sendForm();
85+
}
7586
}
7687
})
7788
.catch(ibexa.helpers.notification.showErrorNotification);
@@ -84,6 +95,7 @@
8495
modalTableTitleNode.setAttribute('title', title);
8596
modalTableTitleNode.dataset.originalTitle = title;
8697
};
98+
8799
const setModalTableBody = (failedItemsData) => {
88100
const modal = doc.querySelector(SELECTOR_MODAL_BULK_ACTION_FAIL);
89101
const table = modal.querySelector('.ibexa-bulk-action-failed-modal__table');
@@ -194,6 +206,14 @@
194206
);
195207
});
196208

209+
doc.body.addEventListener(
210+
'ibexa-sub-items:submit-version-edit-form',
211+
() => {
212+
sendForm();
213+
},
214+
false,
215+
);
216+
197217
if (publishedContentId) {
198218
emdedItemsUpdateChannel.postMessage({ contentId: publishedContentId });
199219
}

‎src/bundle/Resources/public/js/scripts/button.content.edit.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
const editVersion = (event) => {
55
const versionEditForm = doc.querySelector(FORM_EDIT);
66
const versionEditFormName = versionEditForm.name;
7-
const { contentId, versionNo, languageCode } = event.currentTarget.dataset;
7+
const { contentId, versionNo, languageCode, withConfirm } = event.currentTarget.dataset;
88
const contentInfoInput = versionEditForm.querySelector(`input[name="${versionEditFormName}[content_info]"]`);
99
const versionInfoContentInfoInput = versionEditForm.querySelector(
1010
`input[name="${versionEditFormName}[version_info][content_info]"]`,
@@ -34,6 +34,7 @@
3434

3535
wrapper.innerHTML = modalHtml;
3636

37+
const conflictModal = doc.querySelector('#version-draft-conflict-modal');
3738
const addDraftButton = wrapper.querySelector('.ibexa-btn--add-draft');
3839

3940
if (addDraftButton) {
@@ -43,7 +44,11 @@
4344
wrapper
4445
.querySelectorAll('.ibexa-btn--prevented')
4546
.forEach((btn) => btn.addEventListener('click', (wrapperBtnEvent) => wrapperBtnEvent.preventDefault(), false));
46-
bootstrap.Modal.getOrCreateInstance(doc.querySelector('#version-draft-conflict-modal')).show();
47+
48+
bootstrap.Modal.getOrCreateInstance(conflictModal).show();
49+
conflictModal.addEventListener('hide.bs.modal', () => {
50+
doc.body.dispatchEvent(new CustomEvent('ibexa:edit-content-reset-language-selector'));
51+
});
4752
};
4853
const handleCanEditCheck = (response) => {
4954
if (response.canEdit) {
@@ -60,7 +65,9 @@
6065
} else if (response.status === 403) {
6166
response.text().then(showErrorNotification);
6267
} else if (response.status === 200) {
63-
submitVersionEditForm();
68+
if (!withConfirm) {
69+
submitVersionEditForm();
70+
}
6471
}
6572
};
6673

‎src/bundle/Resources/public/js/scripts/button.translation.edit.js‎

Lines changed: 45 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,46 @@
33
constructor(config) {
44
this.container = config.container;
55
this.toggler = config.container.querySelector('.ibexa-btn--translations-list-toggler');
6-
this.translationsList = config.container.querySelector('.ibexa-translation-selector__list-wrapper');
6+
this.extraActionsContainer = config.container.querySelector('.ibexa-extra-actions');
7+
this.closeBtn = config.container.querySelector('.ibexa-extra-actions__close-btn');
8+
this.confirmBtn = config.container.querySelector('.ibexa-extra-actions__confirm-btn');
9+
this.languagesBtns = config.container.querySelectorAll('.ibexa-btn--select-language');
710
this.backdrop = config.backdrop;
811

912
this.tableNode = null;
1013

11-
this.hideTranslationsList = this.hideTranslationsList.bind(this);
12-
this.showTranslationsList = this.showTranslationsList.bind(this);
14+
this.hideExtraActionPanel = this.hideExtraActionPanel.bind(this);
15+
this.showExtraActionPanel = this.showExtraActionPanel.bind(this);
16+
this.setActiveLanguage = this.setActiveLanguage.bind(this);
17+
this.resetLanguageSelector = this.resetLanguageSelector.bind(this);
18+
1319
this.setPosition = this.setPosition.bind(this);
1420
}
1521

1622
setPosition() {
17-
const topOffset = parseInt(this.translationsList.dataset.topOffset, 10);
23+
const topOffset = parseInt(this.extraActionsContainer.dataset.topOffset, 10);
1824
const topPosition = window.scrollY > topOffset ? 0 : topOffset - window.scrollY;
1925
const height = window.scrollY > topOffset ? window.innerHeight : window.innerHeight + window.scrollY - topOffset;
2026

21-
this.translationsList.style.top = `${topPosition}px`;
22-
this.translationsList.style.height = `${height}px`;
27+
this.extraActionsContainer.style.top = `${topPosition}px`;
28+
this.extraActionsContainer.style.height = `${height}px`;
2329
}
2430

25-
hideTranslationsList(event) {
26-
const closestTranslationSelector = event.target.closest('.ibexa-translation-selector');
27-
const clickedOnTranslationsList = closestTranslationSelector && closestTranslationSelector.isSameNode(this.container);
28-
const clickedOnDraftConflictModal = event.target.closest('.ibexa-modal--version-draft-conflict');
29-
30-
if (clickedOnTranslationsList || clickedOnDraftConflictModal) {
31-
return;
32-
}
33-
31+
hideExtraActionPanel() {
3432
if (this.tableNode) {
3533
this.tableNode.classList.add('ibexa-table--last-column-sticky');
3634

3735
this.tableNode = null;
3836
}
3937

4038
this.backdrop.hide();
41-
this.translationsList.classList.add('ibexa-translation-selector__list-wrapper--hidden');
42-
doc.removeEventListener('click', this.hideTranslationsList, false);
39+
this.extraActionsContainer.classList.add('ibexa-extra-actions--hidden');
40+
41+
this.closeBtn.removeEventListener('click', this.hideExtraActionPanel, false);
4342
}
4443

45-
showTranslationsList({ currentTarget }) {
46-
this.translationsList.classList.remove('ibexa-translation-selector__list-wrapper--hidden');
44+
showExtraActionPanel({ currentTarget }) {
45+
this.extraActionsContainer.classList.remove('ibexa-extra-actions--hidden');
4746

4847
this.tableNode = currentTarget.closest('.ibexa-table--last-column-sticky');
4948

@@ -52,14 +51,38 @@
5251
}
5352

5453
this.setPosition();
55-
5654
this.backdrop.show();
57-
doc.addEventListener('click', this.hideTranslationsList, false);
55+
this.closeBtn.addEventListener('click', this.hideExtraActionPanel, false);
56+
5857
ibexa.helpers.tooltips.hideAll();
5958
}
6059

60+
setActiveLanguage(event) {
61+
const { contentId, languageCode } = event.currentTarget.dataset;
62+
63+
this.confirmBtn.dataset.contentId = contentId;
64+
this.confirmBtn.dataset.languageCode = languageCode;
65+
this.confirmBtn.disabled = false;
66+
67+
this.languagesBtns.forEach((btn) => btn.classList.remove('ibexa-btn--active'));
68+
event.currentTarget.classList.add('ibexa-btn--active');
69+
}
70+
71+
resetLanguageSelector() {
72+
this.confirmBtn.dataset.contentId = null;
73+
this.confirmBtn.dataset.languageCode = null;
74+
this.confirmBtn.disabled = true;
75+
76+
this.languagesBtns.forEach((btn) => btn.classList.remove('ibexa-btn--active'));
77+
}
78+
6179
init() {
62-
this.toggler.addEventListener('click', this.showTranslationsList, false);
80+
this.toggler.addEventListener('click', this.showExtraActionPanel, false);
81+
this.languagesBtns.forEach((btn) => {
82+
btn.addEventListener('click', this.setActiveLanguage, false);
83+
});
84+
85+
document.body.addEventListener('ibexa:edit-content-reset-language-selector', this.resetLanguageSelector, false);
6386
}
6487
}
6588

‎src/bundle/Resources/public/js/scripts/sidebar/btn/content.edit.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,13 @@
1212
'click',
1313
() => {
1414
languageRadioOption.checked = true;
15-
languageRadioOption.dispatchEvent(new CustomEvent('change'));
15+
languageRadioOption.dispatchEvent(
16+
new CustomEvent('change', {
17+
detail: {
18+
sendImmediately: true,
19+
},
20+
}),
21+
);
1622
},
1723
false,
1824
);

‎src/bundle/Resources/public/js/scripts/sidebar/btn/location.edit.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,28 +46,44 @@
4646
attachModalListeners(wrapper, form, btns);
4747
};
4848
const changeHandler = (form, btns, event) => {
49+
const sendImmediately = event?.detail?.sendImmediately ?? false;
4950
const contentIdInput = form.querySelector('.ibexa-extra-actions__form-field--content-info');
5051
const locationInput = form.querySelector('.ibexa-extra-actions__form-field--location');
5152
const contentId = contentIdInput.value;
5253
const locationId = locationInput.value;
5354
const checkedBtn = event.currentTarget;
5455
const languageCode = checkedBtn.value;
5556
const checkVersionDraftLink = Routing.generate('ibexa.version_draft.has_no_conflict', { contentId, languageCode, locationId });
57+
const activeLanguageItem = event.target.closest('.ibexa-instant-filter__group-item')?.querySelector('.ibexa-label');
58+
const allLanguageItems = form.querySelectorAll('.ibexa-instant-filter__group-item .ibexa-label');
59+
const submitBtn = form.querySelector('.ibexa-extra-actions__confirm-btn');
60+
61+
allLanguageItems.forEach((item) => {
62+
item.classList.remove('ibexa-label--active');
63+
});
5664

5765
fetch(checkVersionDraftLink, {
5866
credentials: 'same-origin',
5967
}).then((response) => {
6068
if (response.status === 409) {
6169
response.text().then(showModal.bind(null, form, btns));
70+
submitBtn.disabled = true;
71+
72+
return;
6273
} else if (response.status === 200) {
6374
if (form.querySelector('#user_edit_version_info')) {
6475
redirectToUserEdit(languageCode, contentId, form);
6576

6677
return;
6778
}
6879

69-
form.submit();
80+
if (sendImmediately) {
81+
form.submit();
82+
}
7083
}
84+
85+
submitBtn.disabled = false;
86+
activeLanguageItem?.classList.add('ibexa-label--active');
7187
});
7288
};
7389
const attachEventsToEditActionsWidget = (container) => {

‎src/bundle/Resources/public/js/scripts/sidebar/btn/user.edit.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,13 @@
1111
'click',
1212
() => {
1313
languageRadioOption.checked = true;
14-
languageRadioOption.dispatchEvent(new CustomEvent('change'));
14+
languageRadioOption.dispatchEvent(
15+
new CustomEvent('change', {
16+
detail: {
17+
sendImmediately: true,
18+
},
19+
}),
20+
);
1521
},
1622
false,
1723
);

‎src/bundle/Resources/public/js/scripts/sidebar/extra.actions.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ import { getInstance } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scri
143143
initExtraActionsWidget(dataset);
144144
});
145145
doc.body.addEventListener('ibexa-extra-actions:toggle-widget', (event) => toggleExtraActionsWidget(event.detail), false);
146+
146147
closeBtns.forEach((closeBtn) =>
147148
closeBtn.addEventListener(
148149
'click',

0 commit comments

Comments
 (0)