dbm 1.2.6 → 1.2.8

package/react/admin/EditPage.js

@@ -19,8 +19,8 @@ export default class EditPage extends Dbm.react.BaseObject {
         itemEditor.addFieldEditor("content", page.content, "content");
         itemEditor.addFieldEditor("publishDate", page.publishDate, "urlRequest");
         itemEditor.addOutgoingRelationEditor("in", "group/pageCategory", page.category ? page.category.id : 0, "urlRequest");
-        itemEditor.addIncomingRelationEditor("for", "language", page.language ? page.language.id : 0, "urlRequest");
-        itemEditor.addOutgoingRelationEditor("in", "group/translationGroup", page.translations ? page.translations.id : 0, "urlRequest");
+        //itemEditor.addIncomingRelationEditor("for", "language", page.language ? page.language.id : 0, "urlRequest");
+        //itemEditor.addOutgoingRelationEditor("in", "group/translationGroup", page.translations ? page.translations.id : 0, "urlRequest");
         itemEditor.addEditor("url", page.url, Dbm.graphapi.webclient.admin.SaveFunctions.setUrl, "url");
 
         let descriptionEditor = itemEditor.addFieldEditor("meta/description", page["meta/description"], "meta/description");
@@ -50,7 +50,7 @@ export default class EditPage extends Dbm.react.BaseObject {
         let preloadImages = [];
 
         let pageEditorItem = Dbm.getInstance().repository.getItem("admin/editor/pageEditor");
-        if(pageEditorItem.generateContentPreload) {
+        if(pageEditorItem.generateContentPreload && content) {
             preloadImages = pageEditorItem.generateContentPreload(content);
         }
 
@@ -184,32 +184,36 @@ export default class EditPage extends Dbm.react.BaseObject {
             React.createElement(Dbm.react.context.AddContextVariables, {values: {"editorGroup": editorGroup, "itemEditor": itemEditor}},
                 React.createElement(Dbm.react.admin.EditObjectById, {id: page.id},
                     React.createElement("div", {"className": "dbm-admin-box dbm-admin-box-padding"},
-                        React.createElement("div", {},
-                            React.createElement("label", {className: "standard-field-label"},
-                                "Page title"
+                        React.createElement("div", {"className": "flex-row small-item-spacing"},
+                            React.createElement("div", {"className": "flex-row-item flex-resize"},
+                                React.createElement(Dbm.react.form.FormField, {"value": itemEditor.getEditor("title").item.editValue.value, className: "standard-field standard-field-padding full-width page-title-form-field", placeholder: "Title"})
                             ),
-                            React.createElement(Dbm.react.form.FormField, {"value": itemEditor.getEditor("title").item.editValue.value, className: "standard-field standard-field-padding full-width page-title-form-field", placeholder: "Title"}),
-                        ),
-                        React.createElement("div", {className: "spacing standard"}),
-                        React.createElement("div", {},
-                            React.createElement("label", {className: "standard-field-label"},
-                                "Navigation name"
+                            React.createElement("div", {"className": "flex-row-item flex-no-resize"},
+                                React.createElement(Dbm.react.form.FormField, {"value": itemEditor.getEditor("publishDate").item.editValue.value, className: "standard-field standard-field-padding full-width", placeholder: "YYYY-MM-DD", "type": "date"})
                             ),
-                            React.createElement(Dbm.react.form.FormField, {"value": itemEditor.getEditor("navigationName").item.editValue.value, className: "standard-field standard-field-padding full-width", placeholder: "Name showed in menues and breadcrumbs"}),
+                            React.createElement(Dbm.react.area.HasData, {check: Dbm.getRepositoryItem("site").properties.availableLanguages, checkType:"notEmpty"},
+                                React.createElement("div", {"className": "flex-row-item flex-no-resize"},
+                                    React.createElement(Dbm.react.admin.EditLanguage, {})
+                                )
+                            )
                         ),
-                        React.createElement("div", {className: "spacing standard"}),
-                        React.createElement("div", {},
-                            React.createElement("label", {className: "standard-field-label"},
-                                "Url"
+                        React.createElement("div", {className: "spacing small"}),
+                        React.createElement("div", {"className": "flex-row small-item-spacing vertically-center-items"},
+                            React.createElement("div", {"className": "flex-row-item flex-resize"},
+                                React.createElement(Dbm.react.form.FormField, {"value": itemEditor.getEditor("url").item.editValue.value, className: "standard-field standard-field-padding full-width", placeholder: "Url"})
                             ),
-                            React.createElement(Dbm.react.form.FormField, {"value": itemEditor.getEditor("url").item.editValue.value, className: "standard-field standard-field-padding full-width", placeholder: "Url"}),
+                            React.createElement(Dbm.react.area.HasData, {check: Dbm.getRepositoryItem("site").properties.availableLanguages, checkType:"notEmpty"},
+                                React.createElement("div", {"className": "flex-row-item flex-no-resize"},
+                                    React.createElement(Dbm.react.admin.PageTranslations, {})
+                                )
+                            )
                         ),
                         React.createElement("div", {className: "spacing standard"}),
                         React.createElement("div", {},
                             React.createElement("label", {className: "standard-field-label"},
-                                "Publish date"
+                                "Navigation name"
                             ),
-                            React.createElement(Dbm.react.form.FormField, {"value": itemEditor.getEditor("publishDate").item.editValue.value, className: "standard-field standard-field-padding full-width", placeholder: "YYYY-MM-DD", "type": "date"}),
+                            React.createElement(Dbm.react.form.FormField, {"value": itemEditor.getEditor("navigationName").item.editValue.value, className: "standard-field standard-field-padding full-width", placeholder: "Name showed in menues and breadcrumbs"}),
                         ),
                         React.createElement("div", {className: "spacing standard"}),
                         React.createElement("div", {},
@@ -217,21 +221,7 @@ export default class EditPage extends Dbm.react.BaseObject {
                                 "Category"
                             ),
                             React.createElement(Dbm.react.form.GraphApiObjectSelection, {"value": itemEditor.getEditor("relation_out_in_group/pageCategory").item.editValue.value, objectType: "group/pageCategory", className: "standard-field standard-field-padding full-width"}),
-                        ),
-                        React.createElement("div", {className: "spacing standard"}),
-                        React.createElement("div", {},
-                            React.createElement("label", {className: "standard-field-label"},
-                                "Language"
-                            ),
-                            React.createElement(Dbm.react.form.GraphApiObjectSelection, {"value": itemEditor.getEditor("relation_in_for_language").item.editValue.value, objectType: "language", className: "standard-field standard-field-padding full-width"}),
-                        ),
-                        React.createElement("div", {className: "spacing standard"}),
-                        React.createElement("div", {},
-                            React.createElement("label", {className: "standard-field-label"},
-                                "Translations"
-                            ),
-                            React.createElement(Dbm.react.form.GraphApiObjectSelection, {"value": itemEditor.getEditor("relation_out_in_group/translationGroup").item.editValue.value, objectType: "group/translationGroup", className: "standard-field standard-field-padding full-width"}),
-                        ),
+                        )
                     ),
                     React.createElement("div", {className: "spacing standard"}),
                     React.createElement("div", {"className": "dbm-admin-box dbm-admin-box-padding"},

package/react/admin/EditTranslationGroup.js

@@ -0,0 +1,174 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class EditTranslationGroup extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.item.requireProperty("translations", []);
+        this.item.requireProperty("missingLanguages", []);
+
+        let updateTranslationsCommand = Dbm.commands.callFunction(this._updateActiveTranslations.bind(this));
+
+        let itemEditor = this.context.itemEditor;
+        let language = this.context.language;
+
+        let editor = itemEditor.getAdminMultipleIncomingRelationsEditor("in", "page");
+       
+
+        Dbm.flow.addUpdateCommand(editor.valueProperty, updateTranslationsCommand);
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("availableLanguages", []), updateTranslationsCommand);
+
+        {
+            let request = Dbm.getGraphApi().requestRange([{"type": "byObjectType", "objectType": "page"}], ["urlRequest"]);
+            this.item.propertyInput("pages", request.properties.items);
+        }
+        
+        {
+            let request = Dbm.getGraphApi().requestRange([{"type": "byObjectType", "objectType": "language"}], ["type"]);
+            this.item.propertyInput("languages", request.properties.items);
+            Dbm.flow.runWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._languagesLoaded.bind(this), []));
+        }
+    }
+
+    _languagesLoaded() {
+        //console.log("_languagesLoaded");
+        //console.log(this.item.languages);
+
+        let availableLanguageCodes = Dbm.utils.ArrayFunctions.mapField(Dbm.getRepositoryItem("site").availableLanguages, "code");
+
+        let filteredLanguages = Dbm.utils.ArrayFunctions.filterByField(this.item.languages, "identifier", availableLanguageCodes, "inArray");
+        this.item.availableLanguages = filteredLanguages;
+    }
+
+    _updateActiveTranslations() {
+        console.log("_updateActiveTranslations");
+        let itemEditor = this.context.itemEditor;
+        let language = this.context.language;
+
+        let availableTranslatedLanguages = Dbm.utils.ArrayFunctions.filterByField(this.item.availableLanguages, "id", language.id, "!==");
+
+        console.log(itemEditor, itemEditor.item.editedItem.id, availableTranslatedLanguages, language);
+
+        let editor = itemEditor.getAdminMultipleIncomingRelationsEditor("in", "page");
+
+        let allTranslations = Dbm.getInstance().repository.getItems(editor.value);
+        let translations = Dbm.utils.ArrayFunctions.filterByField(allTranslations, "language", availableTranslatedLanguages, "inArray");
+
+        let missingLanguages = Dbm.utils.TranslationFunctions.getMissingTranslations(allTranslations, availableTranslatedLanguages);
+
+        this.item.translations = translations;
+        this.item.missingLanguages = missingLanguages;
+    }
+
+    _createTranslation(aLanguage) {
+        console.log("_createTranslation");
+        console.log(aLanguage);
+
+        let currentPage = this.context.page;
+        console.log(currentPage, this.item.pages);
+
+        let currentUrl = currentPage.url;
+        let newUrl = "/" + aLanguage.identifier + currentUrl;
+        if(currentUrl !== "/") {
+            let tempArray = currentUrl.split("/");
+            console.log(currentUrl, tempArray);
+            tempArray.pop(); //MENOTE: remove trailing slash
+            let currentSlug = tempArray.pop();
+            let parentUrl = tempArray.join("/") + "/";
+            console.log(parentUrl);
+            let parentPage = Dbm.utils.ArrayFunctions.getItemByIfExists(this.item.pages, "url", parentUrl);
+            let translations = Dbm.objectPath(parentPage, "translations.pages");
+            console.log(parentPage, translations);
+            if(translations) {
+                let translationInLanguage = Dbm.utils.ArrayFunctions.getItemByIfExists(translations, "language", aLanguage);
+                console.log(translationInLanguage);
+                if(translationInLanguage) {
+                    newUrl = translationInLanguage.url + currentSlug + "/";
+                }
+            }
+        }
+
+        console.log(newUrl);
+
+        let currentDate = (new Date()).toISOString().split("T")[0];
+
+        let changes = [
+            {"type": "setField", "data": {"value": currentPage.title, "field": "title"}},
+            {"type": "setField", "data": {"value": currentDate, "field": "publishDate"}},
+            {"type": "setUrl", "data": {"value": newUrl}},
+            {"type": "addIncomingRelation", "data": {"value": aLanguage.id, "type": "for"}}
+        ]
+
+        let request = Dbm.getGraphApi().createItem(["page"], "public", changes, ["urlRequest"]);
+
+        Dbm.flow.addUpdateCommand(request.properties.status, Dbm.commands.callFunction(this._addTranslation.bind(this), [Dbm.core.source.staticObject(request, "item")]));
+    }
+
+    _addTranslation(aPage) {
+        //console.log("_addTranslation");
+        //console.log(aPage);
+
+        let itemEditor = this.context.itemEditor;
+        let editor = itemEditor.getAdminMultipleIncomingRelationsEditor("in", "page");
+
+        let newValues = [].concat(editor.value);
+        newValues.push(aPage.id);
+        editor.value = newValues;
+    }
+
+    getFlagUrl(aLanguageCode) {
+
+        let countryCode = aLanguageCode;
+        if(aLanguageCode === "en") {
+            countryCode = "gb";
+        }
+
+        return "https://flagcdn.com/" + countryCode + ".svg";
+    }
+
+    _renderMainElement() {
+
+        return React.createElement("div", {},
+            React.createElement(Dbm.react.area.List, {items: this.item.properties.translations, "as": "translation"},
+                React.createElement(Dbm.react.form.Dropdown, {},
+                    React.createElement("div", {"data-slot": "button", "className": "language-circle centered-cell-holder"}, Dbm.react.text.text(Dbm.react.source.contextVariable("translation.language.identifier"))),
+                    React.createElement("div", {"className": "dropdown-menu-max-height standard-dropdown"},
+                        React.createElement(Dbm.react.text.Link, {"href": Dbm.react.source.contextVariable("translation.url"), "target": "_blank", "className": "custom-styled-link"},
+                            React.createElement("div", {className: "standard-dropdown-row standard-dropdown-row-padding hover-row cursor-pointer"}, "View")
+                        )
+                    ),
+                )
+            ),
+            React.createElement(Dbm.react.area.List, {items: this.item.properties.missingLanguages, "as": "translationLanguage"},
+                React.createElement(Dbm.react.form.Dropdown, {},
+                    React.createElement("div", {"data-slot": "button", "className": "language-circle centered-cell-holder"},
+                        Dbm.react.text.text(Dbm.react.source.contextVariable("translationLanguage.identifier")),
+                        "+"
+                    ),
+                    React.createElement("div", {"className": "dropdown-menu-max-height standard-dropdown"},
+                        React.createElement(Dbm.react.interaction.CommandButton, {"commands": [
+                            Dbm.commands.callFunction(this._createTranslation.bind(this), [Dbm.react.source.contextVariable("translationLanguage")]),
+                            Dbm.commands.setProperty(Dbm.react.source.contextVariable("open"), false)
+                        ]},
+                            React.createElement("div", {className: "standard-dropdown-row standard-dropdown-row-padding hover-row cursor-pointer"}, "Create page")
+                        ),
+
+                        React.createElement("div", {}, "Link translation"),
+                        React.createElement(Dbm.react.admin.SelectTranslation, {"commands": [
+                            Dbm.commands.callFunction(this._addTranslation.bind(this), [Dbm.core.source.event("page")]),
+                            Dbm.commands.setProperty(Dbm.react.source.contextVariable("open"), false)
+                        ]},
+                            React.createElement("div", {"className": "standard-dropdown-row standard-dropdown-row-padding hover-row cursor-pointer"},
+                                Dbm.react.text.text(Dbm.react.source.contextVariable("translatedPage.url")),
+                                " - ",
+                                Dbm.react.text.text(Dbm.react.source.contextVariable("translatedPage.title"))
+                            )
+                        )
+                    )
+                )
+            )
+        );
+    }
+}
+

package/react/admin/PageTranslations.js

@@ -0,0 +1,226 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class PageTranslations extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let updateTranslationsCommand = Dbm.commands.callFunction(this._updateTranslatedLanguages.bind(this));
+
+        let itemEditor = this.context.itemEditor;
+        let languageEditor = itemEditor.getDefaultIncomingRelationEditor("for", "language");
+        Dbm.flow.addUpdateCommand(languageEditor.valueProperty, updateTranslationsCommand);
+
+
+
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("availableLanguages", []), updateTranslationsCommand);
+        this.item.requireProperty("availableTranslations", [])
+
+        {
+            let request = Dbm.getGraphApi().requestRange([{"type": "byObjectType", "objectType": "page"}], ["urlRequest"]);
+            this.item.propertyInput("pages", request.properties.items);
+        }
+        
+        {
+            let request = Dbm.getGraphApi().requestRange([{"type": "byObjectType", "objectType": "language"}], ["type"]);
+            this.item.propertyInput("languages", request.properties.items);
+            Dbm.flow.runWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._languagesLoaded.bind(this), []));
+        }
+    }
+
+    _languagesLoaded() {
+        //console.log("_languagesLoaded");
+        //console.log(this.item.languages);
+
+        let availableLanguageCodes = Dbm.utils.ArrayFunctions.mapField(Dbm.getRepositoryItem("site").availableLanguages, "code");
+
+        let filteredLanguages = Dbm.utils.ArrayFunctions.filterByField(this.item.languages, "identifier", availableLanguageCodes, "inArray");
+        this.item.availableLanguages = filteredLanguages;
+    }
+
+    _updateTranslatedLanguages() {
+        //console.log("_updateTranslatedLanguages");
+        let itemEditor = this.context.itemEditor;
+        let languageEditor = itemEditor.getDefaultIncomingRelationEditor("for", "language");
+
+        let filteredLanguages = Dbm.utils.ArrayFunctions.filterByField(this.item.availableLanguages, "id", languageEditor.value, "!=");
+        this.item.availableTranslations = filteredLanguages;
+    }
+
+    _createTranslation(aLanguage) {
+        console.log("_createTranslation");
+        console.log(aLanguage);
+
+        let itemEditor = this.context.itemEditor;
+        let currentPage = itemEditor.item.editedItem;
+        console.log(currentPage, this.item.pages);
+
+        let currentUrl = currentPage.url;
+        let newUrl = "/" + aLanguage.identifier + currentUrl;
+        if(currentUrl !== "/") {
+            let tempArray = currentUrl.split("/");
+            console.log(currentUrl, tempArray);
+            tempArray.pop(); //MENOTE: remove trailing slash
+            let currentSlug = tempArray.pop();
+            let parentUrl = tempArray.join("/") + "/";
+            console.log(parentUrl);
+            let parentPage = Dbm.utils.ArrayFunctions.getItemByIfExists(this.item.pages, "url", parentUrl);
+            let translations = Dbm.objectPath(parentPage, "translations.pages");
+            console.log(parentPage, translations);
+            if(translations) {
+                let translationInLanguage = Dbm.utils.ArrayFunctions.getItemByIfExists(translations, "language", aLanguage);
+                console.log(translationInLanguage);
+                if(translationInLanguage) {
+                    newUrl = translationInLanguage.url + currentSlug + "/";
+                }
+            }
+        }
+
+        console.log(newUrl);
+
+        let currentDate = (new Date()).toISOString().split("T")[0];
+
+        let changes = [
+            {"type": "setField", "data": {"value": currentPage.title, "field": "title"}},
+            {"type": "setField", "data": {"value": currentDate, "field": "publishDate"}},
+            {"type": "setUrl", "data": {"value": newUrl}},
+            {"type": "addIncomingRelation", "data": {"value": aLanguage.id, "type": "for"}}
+        ]
+
+        let request = Dbm.getGraphApi().createItem(["page"], "public", changes, ["urlRequest"]);
+
+        Dbm.flow.addUpdateCommand(request.properties.status, Dbm.commands.callFunction(this._pageCreated.bind(this), [Dbm.core.source.staticObject(request, "item")]));
+    }
+
+    _pageCreated(aPage) {
+        let itemEditor = this.context.itemEditor;
+        let currentPage = itemEditor.item.editedItem;
+
+        let request = this._createTranslationGroup();
+        Dbm.flow.runWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._addPageToGroup.bind(this), [Dbm.core.source.staticObject(request, "item"), aPage]));
+        Dbm.flow.runWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._addPageToGroup.bind(this), [Dbm.core.source.staticObject(request, "item"), currentPage]));
+        Dbm.flow.runWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._groupCreated.bind(this), [Dbm.core.source.staticObject(request, "item")]));
+    }
+
+    _addToTranslation(aPage) {
+        console.log("_createTranslation");
+        console.log(aPage);
+
+        let itemEditor = this.context.itemEditor;
+        let currentPage = itemEditor.item.editedItem;
+
+        let exisitingTranslationGroup = Dbm.objectPath(aPage, "translations");
+        if(!exisitingTranslationGroup) {
+            let request = this._createTranslationGroup();
+            Dbm.flow.runWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._addPageToGroup.bind(this), [Dbm.core.source.staticObject(request, "item"), aPage]));
+            Dbm.flow.runWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._addPageToGroup.bind(this), [Dbm.core.source.staticObject(request, "item"), currentPage]));
+            Dbm.flow.runWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._groupCreated.bind(this), [Dbm.core.source.staticObject(request, "item")]));
+        }
+        else {
+            let request = this._loadTranslationGroup(exisitingTranslationGroup);
+            Dbm.flow.runWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._addPageToGroup.bind(this), [Dbm.core.source.staticObject(request, "item"), currentPage]));
+            Dbm.flow.runWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._groupCreated.bind(this), [Dbm.core.source.staticObject(request, "item")]));
+        }
+    }
+
+    _createTranslationGroup() {
+
+        let itemEditor = this.context.itemEditor;
+        let currentPage = itemEditor.item.editedItem;
+
+        let changes = [
+            {"type": "setField", "data": {"value": currentPage.title, "field": "name"}}
+        ];
+
+        let request = Dbm.getGraphApi().createItem(["group/translationGroup", "group"], "draft", changes, ["admin_fields", "admin_fieldTranslations", "relations", "visibility"]);
+
+        return request;
+    }
+
+    _addPageToGroup(aGroup, aPage) {
+        let editorGroup = this.context.editorGroup;
+
+        let itemEditor = editorGroup.getItemEditor(aGroup.id);
+
+        let editor = itemEditor.getAdminMultipleIncomingRelationsEditor("in", "page");
+
+        let newValues = [].concat(editor.value);
+        newValues.push(aPage.id);
+        editor.value = newValues;
+    }
+
+    _groupCreated(aGroup) {
+        console.log("_groupCreated");
+        console.log(aGroup);
+
+        let editorGroup = this.context.editorGroup;
+
+        let groupItemEditor = editorGroup.getItemEditor(aGroup.id);
+        groupItemEditor.getVisibilityEditor(aGroup.visibility).value = "public";
+
+        let itemEditor = this.context.itemEditor;
+        let currentPage = itemEditor.item.editedItem;
+
+        let relationEditor = itemEditor.getDefaultOutgoingRelationEditor("in", "group/translationGroup");
+        relationEditor.value = aGroup.id;
+    }
+
+    _loadTranslationGroup(aGroup) {
+        console.log("_loadTranslationGroup");
+        let request = Dbm.getGraphApi().requestItem(aGroup.id, ["admin_fields", "admin_fieldTranslations", "relations", "visibility"]);
+
+        return request;
+    }
+
+    _renderMainElement() {
+
+        let selectTranslationElement = React.createElement(Dbm.react.form.Dropdown, {},
+            React.createElement("div", {"data-slot": "button", "className": "language-circle centered-cell-holder"},
+                Dbm.react.text.text(Dbm.react.source.contextVariable("translationLanguage.identifier")),
+                "+"
+            ),
+            React.createElement("div", {"className": "dropdown-menu-max-height standard-dropdown"},
+                React.createElement(Dbm.react.interaction.CommandButton, {"commands": [
+                    Dbm.commands.callFunction(this._createTranslation.bind(this), [Dbm.react.source.contextVariable("translationLanguage")]),
+                    Dbm.commands.setProperty(Dbm.react.source.contextVariable("open"), false)
+                ]},
+                    React.createElement("div", {className: "standard-dropdown-row standard-dropdown-row-padding hover-row cursor-pointer"}, "New translated page")
+                ),
+
+                React.createElement("div", {"className": "standard-field-label"}, "Link translation"),
+                React.createElement(Dbm.react.admin.SelectTranslation, {"commands": [
+                    Dbm.commands.callFunction(this._addToTranslation.bind(this), [Dbm.core.source.event("page")]),
+                    Dbm.commands.setProperty(Dbm.react.source.contextVariable("open"), false)
+                ]},
+                    React.createElement("div", {"className": "standard-dropdown-row standard-dropdown-row-padding hover-row cursor-pointer"},
+                        Dbm.react.text.text(Dbm.react.source.contextVariable("translatedPage.url")),
+                        " - ",
+                        Dbm.react.text.text(Dbm.react.source.contextVariable("translatedPage.title"))
+                    )
+                )
+            )
+        );
+
+        return React.createElement("div", {},
+            React.createElement(Dbm.react.admin.editorsgroup.EditRelation, {direction: "in", relationType: "for", objectType: "language"},
+                React.createElement(Dbm.react.context.AddItemByIdToContext, {"id": Dbm.react.source.contextVariable("valueEditor.editValue.value"), "as": "language"},
+                    React.createElement(Dbm.react.admin.editorsgroup.EditRelation, {direction: "out", relationType: "in", objectType: "group/translationGroup"},
+                        React.createElement(Dbm.react.area.HasData, {check: Dbm.react.source.contextVariable("valueEditor.editValue.value"), checkType: ">", compareValue: 0},
+                            React.createElement(Dbm.react.admin.EditObjectById, {"id": Dbm.react.source.contextVariable("valueEditor.editValue.value")},
+                                React.createElement(Dbm.react.admin.EditTranslationGroup, {})
+                            )
+                        ),
+                        React.createElement(Dbm.react.area.HasData, {check: Dbm.react.source.contextVariable("valueEditor.editValue.value"), checkType: "invert/>", compareValue: 0},
+                            React.createElement(Dbm.react.area.HasData, {check: Dbm.react.source.contextVariable("language.id")},
+                                React.createElement(Dbm.react.area.List, {items: this.item.properties.availableTranslations, "as": "translationLanguage"},
+                                    selectTranslationElement
+                                )
+                            )
+                        )
+                    )
+                )
+            ),
+        );
+    }
+}
+

package/react/admin/SelectTranslation.js

@@ -0,0 +1,72 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class SelectTranslation extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.item.requireProperty("availablePages", []);
+
+        {
+            let request = Dbm.getGraphApi().requestRange([{"type": "byObjectType", "objectType": "page"}], ["urlRequest"]);
+            this.item.propertyInput("pages", request.properties.items);
+            Dbm.flow.runWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._pagesLoaded.bind(this), []));
+        }
+    }
+
+    _pagesLoaded() {
+        let language = this.context.language;
+        let translationLanguage = this.context.translationLanguage;
+
+        let availablePages = Dbm.utils.TranslationFunctions.getPagesForTranslation(this.item.pages, language, translationLanguage);
+
+        this.item.availablePages = availablePages;
+    }
+
+    _pageSelected(aPage) {
+        let commands = this.getPropValue("commands");
+        if(!commands) {
+            commands = this.getPropValue("command");
+        }
+        if(commands) {
+            commands = Dbm.utils.ArrayFunctions.singleOrArray(commands);
+
+            let currentArray = commands;
+            let currentArrayLength = currentArray.length;
+            for(let i = 0; i < currentArrayLength; i++) {
+                let command = currentArray[i];
+                try {
+                    command.perform(this, {"page": aPage});
+                }
+                catch(theError) {
+                    console.error("Error while running command", theError, command);
+                }
+                
+            }
+        }
+        else{
+            console.warn("SelectTranslation doesn't have any commands", this);
+        }
+    }
+
+    _renderMainElement() {
+
+        let children = this.getPropValue("children");
+        if(!children) {
+            children = React.createElement("div", {"className": "cursor-pointer"},
+                Dbm.react.text.text(Dbm.react.source.contextVariable("translatedPage.url")),
+                " - ",
+                Dbm.react.text.text(Dbm.react.source.contextVariable("translatedPage.title"))
+            )
+        }
+
+        return React.createElement(React.Fragment, {},
+            React.createElement(Dbm.react.area.List, {items: this.item.properties.availablePages, "as": "translatedPage"},
+                React.createElement(Dbm.react.interaction.CommandButton, {"command": Dbm.commands.callFunction(this._pageSelected.bind(this), [Dbm.react.source.contextVariable("translatedPage")])},
+                    children
+                )
+            )
+        );
+    }
+}
+

package/react/admin/editorsgroup/EditItem.js

@@ -22,7 +22,7 @@ export default class EditItem extends Dbm.react.BaseObject {
                     {"type": "includeDraft"},
                     {"type": "idSelection", "ids": [item.id]},
                 ],
-                ["admin_fields", "admin_fieldTranslations", "relations", "visibility"]
+                ["admin_fields", "admin_fieldTranslations", "relations", "url", "identifier", "visibility"]
             );
             allLoaded.addCheck(request.properties.status);
         }

package/react/admin/editorsgroup/EditMultipleRelations.js

@@ -0,0 +1,39 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class EditMultipleRelations extends Dbm.react.BaseObject {
+    _constructAfterProps() {
+        super._constructAfterProps();
+
+        let itemEditor = this.context.itemEditor;
+        let editor;
+
+        let direction = this.getPropValue("direction");
+        let relationType = this.getPropValue("relationType");
+        let objectType = this.getPropValue("objectType");
+
+        if(direction == "in") {
+            editor = itemEditor.getAdminMultipleIncomingRelationsEditor(relationType, objectType);
+        }
+        else if(direction == "out") {
+            editor = itemEditor.getAdminMultipleOutgoingRelationsEditor(relationType, objectType);
+        }
+        else  {
+            console.error("Unknown direction", direction, this);
+            editor = null;
+        }
+        
+        if(editor) {
+            this.item.setValue("editor", editor.item);
+        }
+    }
+
+    _renderMainElement() {
+
+        let children = this.getPropValue("children")
+
+        return React.createElement("div", {},
+            React.createElement(Dbm.react.context.AddContextVariables, {"values": {"valueEditor": this.item.editor}}, children)
+        );
+    }
+}

package/react/admin/editorsgroup/EditPartOfObject.js

@@ -0,0 +1,32 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class EditPartOfObject extends Dbm.react.BaseObject {
+    _constructAfterProps() {
+        super._constructAfterProps();
+
+        let valueProperty = this.getDynamicPropWithoutState("value", {});
+        
+        let partObject = new Dbm.flow.controllers.transform.PartOfObject();
+        this.item.setValue("partOfObject", partObject);
+        let path = this.getPropValue("path");
+
+        if(!valueProperty.value) {
+            valueProperty.getMostUpstreamProperty().value = {};
+        }
+
+        partObject.item.properties.object.connectInput(valueProperty);
+        partObject.item.path = path;
+
+        this.item.requireProperty("valuePart", null).connectInput(partObject.item.properties.value);
+    }
+
+    _renderMainElement() {
+
+        let children = this.getPropValue("children")
+
+        return React.createElement("div", {},
+            React.createElement(Dbm.react.context.AddContextVariables, {"values": {"value": this.item.properties.valuePart}}, children)
+        );
+    }
+}