Skip to content

Commit

Permalink
Edit/Preview embedded items
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucasOsti
lucasOsti committed Aug 30, 2023
1 parent 791bc12 commit 7071b11
Show file tree
Hide file tree
Showing 6 changed files with 69 additions and 65 deletions.
1 change: 0 additions & 1 deletion src/bundle/Resources/public/js/scripts/core/multilevel.popup.menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,6 @@
},
],
});
// console.log(popperInstance);
branchElement.popperInstance = popperInstance;

if (isTopBranch) {
Expand Down
1 change: 0 additions & 1 deletion src/bundle/Resources/public/js/scripts/core/split.btn.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
}

init() {
console.log('b');
const multilevelPopupMenu = new ibexa.core.MultilevelPopupMenu({
container: this.multilevelPopupMenuContainer,
triggerElement: this.toggleBtn,
Expand Down
127 changes: 65 additions & 62 deletions src/bundle/Resources/public/js/scripts/embedded.item.actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,8 +89,8 @@
groups: [
{
id: 'edit-group',
items: Object.entries(languages).map(([languageCode, languageName]) => ({
label: languageName,
items: languages.map(({ languageCode, name }) => ({
label: name,
href: Routing.generate('ibexa.content.translation.view', {
contentId,
locationId,
Expand All @@ -107,8 +107,8 @@
groups: [
{
id: 'edit-group',
items: Object.entries(languages).map(([languageCode, languageName]) => ({
label: languageName,
items: languages.map(({ languageCode, name }) => ({
label: name,
onClick: () => editContent({ contentId, locationId, languageCode }),
})),
},
Expand All @@ -120,7 +120,7 @@
],
};
};
const generateSingleLanguageMenuTreeItems = ({ contentId, locationId, languageCode }) => {
const generateSingleLanguageMenuTreeItems = ({ contentId, locationId, language }) => {
return {
groups: [
{
Expand All @@ -132,17 +132,32 @@
},
{
label: Translator.trans(/*@Desc("Edit")*/ 'embedded_items.action.edit', {}, 'content'),
onClick: () => editContent({ contentId, locationId, languageCode }),
onClick: () => editContent({ contentId, locationId, languageCode: language.languageCode }),
},
],
},
],
};
};
const getAvailableLanguges = async ({ locationId, languages }) => {
const generateMenuTreeItems = ({ contentId, locationId, languages }) => {
if (languages.length > 1) {
return generateMultiLanguagesMenuTreeItems({ contentId, locationId, languages });
}

return generateSingleLanguageMenuTreeItems({
contentId,
locationId,
language: languages[0],
});
};
const getLanguagesData = async ({ contentId, locationId, versionNo, initialFunc = () => {}, callbackFunc = () => {} }) => {
try {
const url = window.Routing.generate('ibexa.udw.location.data', {
locationId: locationId,
initialFunc();

const url = window.Routing.generate('ibexa.permission.limitation.language', {
contentId,
locationId,
versionNo,
});
const request = new Request(url, {
method: 'GET',
Expand All @@ -152,83 +167,52 @@
});
const response = await fetch(request);
const data = await ibexa.helpers.request.getJsonFromResponse(response);
const restrictedLanguageCodes = ['fre-FR'];
const filteredLanguages = {};

for (const languageCode in languages) {
if (!restrictedLanguageCodes.includes(languageCode)) {
filteredLanguages[languageCode] = languages[languageCode];
}
}
callbackFunc();

return filteredLanguages;
return data.filter((language) => language.hasAccess);
} catch (error) {
ibexa.helpers.notification.showErrorNotification(error);
}
};
const getMenuData = ({ container, event }) => {
const languages = {};
const { contentId, locationId, languageCodes } = container ? container.dataset : event.detail;
const { contentId, locationId, versionNo, languageCodes } = container ? container.dataset : event.detail;
const parsedLanguageCodes = typeof languageCodes === 'string' ? JSON.parse(languageCodes) : languageCodes;

parsedLanguageCodes.forEach((languageCode) => {
languages[languageCode] = adminUiLanguages[languageCode].name;
});
const languages = parsedLanguageCodes
? parsedLanguageCodes.map((languageCode) => ({
languageCode,
name: adminUiLanguages[languageCode].name,
}))
: [];

return {
contentId: parseInt(contentId, 10),
locationId: parseInt(locationId, 10),
versionNo: parseInt(versionNo, 10),
languages,
};
};
const createMenu = async ({ triggerElement, container, contentId, locationId, languages, preventAutoClick }) => {
const createMenu = async ({ triggerElement, container, contentId, locationId, versionNo, languages, preventAutoClick }) => {
triggerElement.dataset.isMenuAttached = 1;

let menuItems = {};
const mainContainer = container.closest('.ibexa-embedded-item-actions');
const menuLoader = mainContainer.querySelector('.ibexa-embedded-item-actions__loader');
const languageCodes = Object.keys(languages);
const isContentMultilanguage = languageCodes.length > 1;
const askForLanguagesData = Object.keys(languages).length !== 1;
const languagesData = askForLanguagesData
? await getLanguagesData({
contentId,
locationId,
versionNo,
initialFunc: showLoader.bind(null, { triggerElement, menuLoader }),
callbackFunc: hideLoader.bind(null, { menuLoader }),
})
: languages;
const menuItems = generateMenuTreeItems({ contentId, locationId, languages: languagesData });
const menuInstance = new ibexa.core.MultilevelPopupMenu({
container,
triggerElement,
});
menuInstance.init();

if (isContentMultilanguage) {
Popper.createPopper(triggerElement, menuLoader, {
placement: MENU_PROPS.placement,
modifiers: [
{
name: 'flip',
enabled: true,
options: {
fallbackPlacements: MENU_PROPS.fallbackPlacements,
},
},
],
});
menuLoader.classList.toggle('ibexa-popup-menu--hidden');

const availableContentLanguages = await getAvailableLanguges({
locationId,
languages,
});

menuItems = generateMultiLanguagesMenuTreeItems({
contentId,
locationId,
languages: availableContentLanguages,
});
menuLoader.classList.toggle('ibexa-popup-menu--hidden');
} else {
menuItems = generateSingleLanguageMenuTreeItems({
contentId,
locationId,
languageCode: languageCodes[0],
});
}

menuInstance.generateMenu({
triggerElement,
...MENU_PROPS,
Expand All @@ -239,6 +223,25 @@
triggerElement.click();
}
};
const showLoader = ({ triggerElement, menuLoader }) => {
Popper.createPopper(triggerElement, menuLoader, {
placement: MENU_PROPS.placement,
modifiers: [
{
name: 'flip',
enabled: true,
options: {
fallbackPlacements: MENU_PROPS.fallbackPlacements,
},
},
],
});

menuLoader.classList.remove('ibexa-popup-menu--hidden');
};
const hideLoader = ({ menuLoader }) => {
menuLoader.classList.add('ibexa-popup-menu--hidden');
};

actionsMenuTriggerBtns.forEach((actionsMenuTriggerBtn) => {
actionsMenuTriggerBtn.addEventListener(
Expand Down
2 changes: 2 additions & 0 deletions src/bundle/Resources/public/js/scripts/fieldType/ezobjectrelationlist.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@
const itemNode = itemNodes[itemNodes.length - 1];
const contentId = escapeHTML(item.ContentInfo.Content._id);
const locationId = item.id;
const currentVersionNo = item.ContentInfo.Content.CurrentVersion.Version.VersionInfo.versionNo;
const languageCodes = item.ContentInfo.Content.CurrentVersion.Version.VersionInfo.VersionTranslationInfo.Language.map(
(language) => language.languageCode,
);
Expand All @@ -98,6 +99,7 @@
contentId,
locationId,
languageCodes,
versionNo: currentVersionNo,
menuTriggerElement: itemActionsTriggerElement,
menuContainer: itemActionsMenuContainer,
},
Expand Down
1 change: 1 addition & 0 deletions ...ces/views/themes/admin/ui/component/embedded_item_actions/embedded_item_actions.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
attr: {
'data-content-id': content_id|default(''),
'data-location-id': location_id|default(''),
'data-version-no': versionNo|default(''),
'data-language-codes': languageCodes|default([])|json_encode,
class: attr.class|default('ibexa-embedded-item-actions__menu')
},
Expand Down
2 changes: 1 addition & 1 deletion src/bundle/Resources/views/themes/admin/ui/field_type/edit/relation_base.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@
{% include '@ibexadesign/ui/component/embedded_item_actions/embedded_item_actions.html.twig' with {
content_id: relation.contentId,
location_id: relation.contentInfo.mainLocationId,
languageCodes: relation.languages|reduce((output, language) => output|merge([ language.getLanguageCode() ]), [])
versionNo: relation.contentInfo.currentVersionNo,
} only %}
{% endset %}

Expand Down

0 comments on commit 7071b11

Please sign in to comment.