Bugfixes for asset picker component.

ccm-cms/src/main/java/org/librecms/ui/contentsections/assets/AbstractContactableEntityEditStep.java

@@ -29,7 +29,6 @@ import org.librecms.assets.ContactEntryRepository;
 import org.librecms.assets.ContactableEntity;
 import org.librecms.assets.ContactableEntityManager;
 import org.librecms.assets.PostalAddress;
-import org.librecms.contentsection.Asset;
 import org.librecms.contentsection.AssetRepository;
 import org.librecms.ui.contentsections.ContentSectionNotFoundException;
 
@@ -39,11 +38,13 @@ import java.util.stream.Collectors;
 
 import javax.inject.Inject;
 import javax.mvc.Models;
+import javax.servlet.http.HttpServletRequest;
 import javax.transaction.Transactional;
 import javax.ws.rs.FormParam;
 import javax.ws.rs.POST;
 import javax.ws.rs.Path;
 import javax.ws.rs.PathParam;
+import javax.ws.rs.core.Context;
 
 /**
  *
@@ -73,6 +74,9 @@ public abstract class AbstractContactableEntityEditStep
     @Inject
     private GlobalizationHelper globalizationHelper;
 
+    @Context
+    private HttpServletRequest request;
+
     @Inject
     private IdentifierParser identifierParser;
 
@@ -110,6 +114,18 @@ public abstract class AbstractContactableEntityEditStep
             editStepModel.setPostalAddress(
                 getContactableEntity().getPostalAddress()
             );
+
+            final StringBuilder baseUrlBuilder = new StringBuilder();
+            editStepModel.setBaseUrl(
+                baseUrlBuilder
+                    .append(request.getScheme())
+                    .append("://")
+                    .append(request.getServerName())
+                    .append(addServerPortToBaseUrl())
+                    .append(addContextPathToBaseUrl())
+                .toString()
+            );
+
         } else {
             throw new AssetNotFoundException(
                 assetUi.showAssetNotFound(
@@ -303,4 +319,21 @@ public abstract class AbstractContactableEntityEditStep
         return model;
     }
 
+    private String addServerPortToBaseUrl() {
+        if (request.getServerPort() == 80 || request.getServerPort() == 443) {
+            return "";
+        } else {
+            return String.format(":%d", request.getServerPort());
+        }
+    }
+
+    private String addContextPathToBaseUrl() {
+        if (request.getServletContext().getContextPath() == null
+                || request.getServletContext().getContextPath().isEmpty()) {
+            return "/";
+        } else {
+            return request.getServletContext().getContextPath();
+        }
+    }
+
 }

ccm-cms/src/main/java/org/librecms/ui/contentsections/assets/ContactableEntityEditStepModel.java

@@ -33,6 +33,8 @@ import javax.enterprise.context.RequestScoped;
 import javax.inject.Inject;
 import javax.inject.Named;
 import javax.servlet.ServletContext;
+import javax.servlet.http.HttpServletRequest;
+import javax.ws.rs.core.Context;
 
 /**
  *
@@ -50,6 +52,8 @@ public class ContactableEntityEditStepModel {
 
     private Map<String, String> availableContactEntryKeys;
 
+    private String baseUrl;
+
     private List<ContactEntryListItemModel> contactEntries;
 
     private PostalAddress postalAddress;
@@ -58,6 +62,14 @@ public class ContactableEntityEditStepModel {
         return servletContext.getContextPath();
     }
 
+    public String getBaseUrl() {
+        return baseUrl;
+    }
+    
+    protected void setBaseUrl(final String baseUrl) {
+        this.baseUrl = baseUrl;
+    }
+
     public Map<String, String> getAvailableContactEntryKeys() {
         return Collections.unmodifiableMap(availableContactEntryKeys);
     }

ccm-cms/src/main/resources/META-INF/resources/components/librecms/assetPicker.xhtml

@@ -21,10 +21,6 @@
                       required="true"
                       shortDescription="The current content section."
                       type="String" />
-        <cc:attribute name="contextPath"
-                      required="true"
-                      shortDescription="The context path of the CCM installation. May be empty."
-                      type="String" />
         <cc:attribute name="dialogTitle"
                       required="false"
                       shortDescription="Title of the asset picker dialog"
@@ -41,12 +37,17 @@
                       shortDescription="The level of the heading used as title of the asset picker dialog."
                       default="3"
                       type="int" />
+        <cc:attribute name="baseUrl"
+                      required="true"
+                      shortDescription="Base URL for requests. Must include the scheme, the server name, the port (if no standard port is used) and the context path of the application."
+                      type="String" />
     </cc:interface>
     <cc:implementation>
         <div class="ccm-cms-asset-picker"
              data-assettype="#{cc.attrs.assetType}"
-             data-contextpath="#{cc.attrs.contextPath}"
+             data-baseUrl="#{cc.attrs.baseUrl}"
-             data-contentsection="#{cc.attrs.contentSection}">
+             data-contentsection="#{cc.attrs.contentSection}"
+             id="#{cc.attrs.assetPickerId}">
             <div aria-hidden="true"
                  aria-labelledby="#{cc.attrs.assetPickerId}-dialog-title"
                  class="modal fade"

ccm-cms/src/main/resources/WEB-INF/views/org/librecms/ui/contentsection/assets/edit-contactable.xhtml

@@ -213,9 +213,10 @@
             actionUrl="#{actionBaseUrl}/postaladdress"
             assetType="#{CmsContactableEditStepModel.postalAddressType}"
             assetPickerId="postaladdress-picker"
-            contextPath="#{CmsContactableEditStepModel.contextPath}"
+            baseUrl="#{CmsContactableEditStepModel.baseUrl}"
             contentSection="#{ContentSectionModel.sectionName}"
             formParamName="postalAddressIdentifier"
+            
             />
 
         <c:choose>

ccm-cms/src/main/typescript/content-sections/cms-assetpicker.ts

@@ -11,12 +11,12 @@ document.addEventListener("DOMContentLoaded", function (event) {
 async function initAssetPicker(assetPickerElem: Element) {
     const assetPickerId = assetPickerElem.getAttribute("id");
     const assetType = getAssetType(assetPickerElem);
-    const contextPath = assetPickerElem.getAttribute("data-contextpath");
+    const baseUrl = assetPickerElem.getAttribute("data-baseUrl");
     const contentSection = assetPickerElem.getAttribute("data-contentsection");
 
-    const fetchUrl = contextPath
+    console.log(`assetPickerId = ${assetPickerId}`);
-        ? `./${contextPath}/content-sections/${contentSection}/assets/?type=${assetType}`
+
-        : `./content-sections/${contentSection}/assets/?type=${assetType}`;
+    const fetchUrl = `${baseUrl}/content-sections/${contentSection}/assets?type=${assetType}`;
 
     try {
         const response = await fetch(fetchUrl);
@@ -27,8 +27,10 @@ async function initAssetPicker(assetPickerElem: Element) {
             const rowTemplate = assetPickerElem.querySelector(
                 `#${assetPickerId}-row`
             );
+            console.log(`rowTemplate = ${rowTemplate}`);
 
             const tbody = assetPickerElem.querySelector("tbody");
+            console.log(`tbody = ${tbody}`);
 
             for (const asset of assets) {
                 const row = rowTemplate.cloneNode(true) as Element;
@@ -36,6 +38,11 @@ async function initAssetPicker(assetPickerElem: Element) {
                 const colType = row.querySelector(".col-type");
                 const selectButton = row.querySelector(".col-action button");
 
+                console.log(`row = ${row}`);
+                console.log(`colName = ${colName}`);
+                console.log(`colType = ${colType}`);
+                console.log(`selectButton = ${selectButton}`);
+
                 colName.textContent = asset["name"];
                 colType.textContent = asset["type"];
                 selectButton.setAttribute("data-assetuuid", asset["uuid"]);
@@ -47,8 +54,13 @@ async function initAssetPicker(assetPickerElem: Element) {
                 tbody.appendChild(row);
             }
         } else {
+            console.error(
+                `Error. Status: ${response.status}. Status Text: ${response.statusText}`
+            );
+        }
+    } catch (error) {
+        console.error(error);
     }
-    } catch (error) {}
 }
 
 function getAssetType(assetPickerElem: Element) {
@@ -63,9 +75,13 @@ async function selectAsset(event: Event, assetPickerElem: Element) {
     const selectButton = event.currentTarget as Element;
     const assetUuid = selectButton.getAttribute("data-assetuuid");
 
+    console.log(`selectButton = ${selectButton}`);
+    console.log(`assetUuid = ${assetUuid}`);
+
     const assetPickerParam = assetPickerElem.querySelector(
         ".assetpicker-param"
     ) as HTMLInputElement;
+    console.log(`assetPickerParam = ${assetPickerParam}`);
     assetPickerParam.value = assetUuid;
 
     const form = assetPickerElem.querySelector("form") as HTMLFormElement;