Publication Picker Widget

sci-publications/package-lock.json

@@ -9,9 +9,14 @@
             "version": "7.0.0",
             "license": "LGPL-3.0-or-later",
             "dependencies": {
+                "bootstrap": "^4.6.0",
+                "bootstrap-icons": "^1.5.0",
+                "jquery": "^3.6.0",
+                "popper.js": "^1.16.1",
                 "sortablejs": "^1.14.0"
             },
             "devDependencies": {
+                "@types/jquery": "^3.5.6",
                 "@types/sortablejs": "^1.10.7",
                 "npm-run-all": "^4.1.5",
                 "ts-loader": "^9.2.6",
@@ -55,6 +60,15 @@
             "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
             "dev": true
         },
+        "node_modules/@types/jquery": {
+            "version": "3.5.14",
+            "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.14.tgz",
+            "integrity": "sha512-X1gtMRMbziVQkErhTQmSe2jFwwENA/Zr+PprCkF63vFq+Yt5PZ4AlKqgmeNlwgn7dhsXEK888eIW2520EpC+xg==",
+            "dev": true,
+            "dependencies": {
+                "@types/sizzle": "*"
+            }
+        },
         "node_modules/@types/json-schema": {
             "version": "7.0.11",
             "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -67,6 +81,12 @@
             "integrity": "sha512-V3orv+ggDsWVHP99K3JlwtH20R7J4IhI1Kksgc+64q5VxgfRkQG8Ws3MFm/FZOKDYGy9feGFlZ70/HpCNe9QaA==",
             "dev": true
         },
+        "node_modules/@types/sizzle": {
+            "version": "2.3.3",
+            "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
+            "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
+            "dev": true
+        },
         "node_modules/@types/sortablejs": {
             "version": "1.13.0",
             "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.13.0.tgz",
@@ -331,6 +351,24 @@
             "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
             "dev": true
         },
+        "node_modules/bootstrap": {
+            "version": "4.6.1",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.1.tgz",
+            "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/bootstrap"
+            },
+            "peerDependencies": {
+                "jquery": "1.9.1 - 3",
+                "popper.js": "^1.16.1"
+            }
+        },
+        "node_modules/bootstrap-icons": {
+            "version": "1.9.1",
+            "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.9.1.tgz",
+            "integrity": "sha512-d4ZkO30MIkAhQ2nNRJqKXJVEQorALGbLWTuRxyCTJF96lRIV6imcgMehWGJUiJMJhglN0o2tqLIeDnMdiQEE9g=="
+        },
         "node_modules/brace-expansion": {
             "version": "1.1.11",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1283,6 +1321,11 @@
                 "url": "https://github.com/chalk/supports-color?sponsor=1"
             }
         },
+        "node_modules/jquery": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+            "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+        },
         "node_modules/json-parse-better-errors": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
@@ -1697,6 +1740,16 @@
                 "node": ">=8"
             }
         },
+        "node_modules/popper.js": {
+            "version": "1.16.1",
+            "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+            "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+            "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
         "node_modules/punycode": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -2524,6 +2577,15 @@
             "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
             "dev": true
         },
+        "@types/jquery": {
+            "version": "3.5.14",
+            "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.14.tgz",
+            "integrity": "sha512-X1gtMRMbziVQkErhTQmSe2jFwwENA/Zr+PprCkF63vFq+Yt5PZ4AlKqgmeNlwgn7dhsXEK888eIW2520EpC+xg==",
+            "dev": true,
+            "requires": {
+                "@types/sizzle": "*"
+            }
+        },
         "@types/json-schema": {
             "version": "7.0.11",
             "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -2536,6 +2598,12 @@
             "integrity": "sha512-V3orv+ggDsWVHP99K3JlwtH20R7J4IhI1Kksgc+64q5VxgfRkQG8Ws3MFm/FZOKDYGy9feGFlZ70/HpCNe9QaA==",
             "dev": true
         },
+        "@types/sizzle": {
+            "version": "2.3.3",
+            "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
+            "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
+            "dev": true
+        },
         "@types/sortablejs": {
             "version": "1.13.0",
             "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.13.0.tgz",
@@ -2770,6 +2838,17 @@
             "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
             "dev": true
         },
+        "bootstrap": {
+            "version": "4.6.1",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.1.tgz",
+            "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==",
+            "requires": {}
+        },
+        "bootstrap-icons": {
+            "version": "1.9.1",
+            "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.9.1.tgz",
+            "integrity": "sha512-d4ZkO30MIkAhQ2nNRJqKXJVEQorALGbLWTuRxyCTJF96lRIV6imcgMehWGJUiJMJhglN0o2tqLIeDnMdiQEE9g=="
+        },
         "brace-expansion": {
             "version": "1.1.11",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3453,6 +3532,11 @@
                 }
             }
         },
+        "jquery": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+            "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+        },
         "json-parse-better-errors": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
@@ -3762,6 +3846,11 @@
                 "find-up": "^4.0.0"
             }
         },
+        "popper.js": {
+            "version": "1.16.1",
+            "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+            "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+        },
         "punycode": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",

sci-publications/package.json

@@ -11,6 +11,7 @@
     "license": "LGPL-3.0-or-later",
     "devDependencies": {
         "@types/sortablejs": "^1.10.7",
+        "@types/jquery": "^3.5.6",
         "npm-run-all": "^4.1.5",
         "ts-loader": "^9.2.6",
         "typescript": "^4.4.3",
@@ -18,6 +19,10 @@
         "webpack-cli": "^4.8.0"
     },
     "dependencies": {
+        "bootstrap": "^4.6.0",
+        "bootstrap-icons": "^1.5.0",
+        "jquery": "^3.6.0",
+        "popper.js": "^1.16.1",
         "sortablejs": "^1.14.0"
     },
     "targets": {

sci-publications/src/main/java/org/scientificcms/publications/CollectedVolume.java

@@ -13,6 +13,7 @@ import java.util.List;
 
 import javax.persistence.Entity;
 import javax.persistence.OneToMany;
+import javax.persistence.OrderBy;
 import javax.persistence.Table;
 
 import static org.scientificcms.publications.SciPublicationsConstants.*;
@@ -29,6 +30,7 @@ public class CollectedVolume extends PublicationWithPublisher {
     private static final long serialVersionUID = 1L;
 
     @OneToMany(mappedBy = "collectedVolume")
+    @OrderBy("chapter")
     private List<ArticleInCollectedVolume> articles;
 
     public CollectedVolume() {

sci-publications/src/main/resources/META-INF/resources/components/scicms/publicationPicker.xhtml

@@ -0,0 +1,154 @@
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap"
+      xmlns:cc="http://xmlns.jcp.org/jsf/composite"
+      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
+      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
+
+    <cc:interface shortDescription="A component for selecting publications. Additioanl components for the form may be added as children of the tag. They are inserted before the form elements for looking up publications.">
+        <cc:attribute name="actionUrl"
+                      required="true"
+                      shortDescription="Base URL for the actions of the publication picker."
+                      type="String" />
+        <cc:attribute name="publicationType"
+                      required="false"
+                      shortDescription="Type of publications to show."
+                      type="String"
+                      default="org.scientificcms.publications.Publication" />
+        <cc:attribute name="publicationPickerId"
+                      required="true"
+                      shortDescription="ID of the publication picker"
+                      type="String" />
+        <cc:attribute name="contentSection"
+                      required="true"
+                      shortDescription="The current content section."
+                      type="String" />
+        <cc:attribute name="dialogTitle"
+                      required="false"
+                      shortDescription="Title of the publication picker dialog"
+                      default="#{SciPublicationsUiMessageBundle['publicationpicker.title']}" 
+                      type="String"
+                      />
+        <cc:attribute name="formParamName"
+                      required="true"
+                      shortDescription="The name of the form parameter that will contain the UUID of the selected publication."
+                      type="String"
+                      />
+        <cc:attribute name="headingLevel"
+                      required="false"
+                      shortDescription="The level of the heading used as title of the publication 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="scicms-publications-picker"
+             data-publicationtype="#{cc.attrs.publicationType}"
+             data-baseUrl="#{cc.attrs.baseUrl}"
+             data-contentsection="#{cc.attrs.contentSection}"
+             id="#{cc.attrs.publicationPickerId}">
+            <div aria-hidden="true"
+                 aria-labelledby="#{cc.attrs.publicationPickerId}"
+                 class="modal fade"
+                 id="#{cc.attrs.publicationPickerId}-dialog"
+                 tabindex="-1">
+                <div class="modal-dialog modal-xl">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <c:choose>
+                                <c:when test="#{cc.attrs.headingLevel == 1}">
+                                    <h1 class="modal-title"
+                                        id="#{cc.attrs.publicationPickerId}-dialog-title">#{cc.attrs.dialogTitle}</h1>
+                                </c:when>
+                                <c:when test="#{cc.attrs.headingLevel == 2}">
+                                    <h2 class="modal-title"
+                                        id="#{cc.attrs.publicationPickerId}-dialog-title">#{cc.attrs.dialogTitle}</h2>
+                                </c:when>
+                                <c:when test="#{cc.attrs.headingLevel == 3}">
+                                    <h3 class="modal-title"
+                                        id="#{cc.attrs.publicationPickerId}-dialog-title">#{cc.attrs.dialogTitle}</h3>
+                                </c:when>
+                                <c:when test="#{cc.attrs.headingLevel == 4}">
+                                    <h4 class="modal-title"
+                                        id="#{cc.attrs.publicationPickerId}-dialog-title">#{cc.attrs.dialogTitle}</h4>
+                                </c:when>
+                                <c:when test="#{cc.attrs.headingLevel == 5}">
+                                    <h5 class="modal-title"
+                                        id="#{cc.attrs.publicationPickerId}-dialog-title">#{cc.attrs.dialogTitle}</h5>
+                                </c:when>
+                                <c:when test="#{cc.attrs.headingLevel == 6}">
+                                    <h6 class="modal-title"
+                                        id="#{cc.attrs.publicationPickerId}-dialog-title">#{cc.attrs.dialogTitle}</h6>
+                                </c:when>
+                                <c:otherwise>
+                                    <div class="modal-title"
+                                         id="#{cc.attrs.publicationPickerId}-dialog-title">
+                                        <strong>#{cc.attrs.dialogTitle}</strong>
+                                    </div>
+                                </c:otherwise>
+                            </c:choose>
+                            <button 
+                                aria-label="#{SciPublicationsUiMessageBundle['publicationpicker.close']}"
+                                class="close"
+                                data-dismiss="modal"
+                                type="button">
+                                <bootstrap:svgIcon icon="x" />
+                            </button>
+                        </div>
+                        <form action="#{cc.attrs.actionUrl}"
+                              class="modal-body"
+                              method="post">
+                            
+                            <cc:insertChildren />
+                            
+                            <input class="publicationpicker-param"
+                                   id="#{cc.attrs.publicationPickerId}-param-input"
+                                   name="#{cc.attrs.formParamName}"
+                                   type="hidden" />
+                            <bootstrap:formGroupText 
+                                class="publicationpicker-filter"
+                                help="#{SciPublicationsUiMessageBundle['publicationpicker.filter.help']}"
+                                label="#{SciPublicationsUiMessageBundle['publicationpicker.filter.label']}"
+                                inputId="#{cc.attrs.publicationPickerId}-filter"
+                                name="" />
+                        </form>
+                        <template id="#{cc.attrs.publicationPickerId}-row">
+                            <tr>
+                                <td class="col-name"></td>
+                                <td class="col-type"></td>
+                                <td class="col-action">
+                                    <button class="btn btn-primary"
+                                    data-publicationuuid=""
+                                    type="button">
+                                        #{SciPublicationsUiMessageBundle['publicationpicker.select']}
+                                    </button>
+                                </td>
+                            </tr>
+                        </template>
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th>#{SciPublicationsUiMessageBundle['publicationpicker.column.name']}</th>
+                                    <th>#{SciPublicationsUiMessageBundle['publicationpicker.column.type']}</th>
+                                    <th>#{SciPublicationsUiMessageBundle['publicationpicker.column.action']}</th>
+                                </tr>
+                            </thead>
+                            <tbody></tbody>
+                        </table>
+                    </div>
+                    <div class="modal-footer">
+                            <button class="btn btn-warning"
+                                    data-dismiss="modal"
+                                    type="button">
+                                #{SciPublicationsUiMessageBundle['publicationpicker.close']}
+                            </button>
+                        </div>
+                </div>
+            </div>
+        </div>
+    </cc:implementation>
+
+</html>

sci-publications/src/main/resources/META-INF/resources/components/scicms/publicationPickerButton.xhtml

@@ -0,0 +1,34 @@
+<!DOCTYPE html [<!ENTITY times '&#215;'>]>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap"
+      xmlns:cc="http://xmlns.jcp.org/jsf/composite"
+      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
+
+    <cc:interface shortDescription="An component for selecting publications.">
+        <cc:attribute name="publicationPickerId"
+                      required="true"
+                      shortDescription="ID of the publication picker."
+                      type="String" />
+        <cc:attribute name="buttonText"
+                      required="true"
+                      shortDescription="Text of the publication picker button"
+                      type="String" />
+        <cc:attribute name="buttonIcon"
+                      default="pen"
+                      required="false"
+                      shortDescription="Icon of the publication picker button"
+                      type="String" />
+    </cc:interface>
+
+    <cc:implementation>
+        <button class="btn btn-primary"
+                data-toggle="modal"
+                data-target="##{cc.attrs.publicationPickerId}"
+                type="button">
+            <bootstrap:svgIcon icon="#{cc.attrs.buttonIcon}" />
+            <span class="sr-only">#{cc.attrs.buttonText}</span>
+        </button>
+    </cc:implementation>
+    
+</html>
+

sci-publications/src/main/resources/org/scientificcms/publications/ui/SciPublicationsBundle.properties

@@ -421,3 +421,11 @@ monograph.extendedproperties.header=Extended properties of monograph {0}
 extendedproperties.peerreviewed.yes=Yes
 extendedproperties.peerreviewed.no=No
 extendedproperties.volumeinseries.volumeinseries.label=Volume
+publicationpicker.title=Select a publication
+publicationpicker.close=Cancel
+publicationpicker.filter.help=Filter publications by their title
+publicationpicker.filter.label=Filter publications
+publicationpicker.select=Select
+publicationpicker.column.name=Name
+publicationpicker.column.type=Type
+publicationpicker.column.action=Action

sci-publications/src/main/resources/org/scientificcms/publications/ui/SciPublicationsBundle_de.properties

@@ -421,3 +421,11 @@ monograph.extendedproperties.header=Erweiterte Eigenschaften der Monographie {0}
 extendedproperties.peerreviewed.yes=Ja
 extendedproperties.peerreviewed.no=Nein
 extendedproperties.volumeinseries.volumeinseries.label=Band
+publicationpicker.title=W\u00e4hlen Sie eine Publikation
+publicationpicker.close=Abbrechen
+publicationpicker.filter.help=Publikationen anhand ihres Titels filtern
+publicationpicker.filter.label=Publikationen filtern
+publicationpicker.select=Ausw\u00e4hlen
+publicationpicker.column.name=Name
+publicationpicker.column.type=Typ
+publicationpicker.column.action=Aktion

sci-publications/src/main/typescript/publication-picker.ts

@@ -0,0 +1,87 @@
+import * as $ from "jquery";
+
+document.addEventListener("DOMContentLoaded", function(event) {
+    const publicationPickers = document.querySelectorAll(
+        ".scicms-publication-picker"
+    );
+
+    for (let i = 0; i < publicationPickers.length; i++) {
+        initPublicationPicker(publicationPickers[i]);
+    }
+});
+
+async function initPublicationPicker(publicationPickerElem: Element) {
+    const publicationPickerId = publicationPickerElem.getAttribute("id");
+    const publicationType = getPublicationType(publicationPickerElem);
+    const baseUrl = publicationPickerElem.getAttribute("data-baseUrl");
+    const contentSection = publicationPickerElem.getAttribute(
+        "data-contentsection"
+    );
+
+    const fetchUrl = `/content-sections/${contentSection}/publications?type=${publicationType}`;
+
+    try {
+        const response = await fetch(fetchUrl);
+
+        if (response.ok) {
+            const publications = (await response.json()) as [];
+
+            const rowTemplate = publicationPickerElem.querySelector(
+                `#${publicationPickerId}-row`
+            ) as HTMLTemplateElement;
+
+            const tbody = publicationPickerElem.querySelector("tbody");
+
+            for(const publication of publications) {
+                const row = rowTemplate?.content.cloneNode(true) as Element;
+                const colName = row.querySelector(".col-name");
+                const colType = row.querySelector(".col-type");
+                const selectButton = row.querySelector(".col-action button");
+
+                if (colName) {
+                    colName.textContent = publication["name"];
+                }
+                if (colType) {
+                    colType.textContent = publication["type"];
+                }
+                selectButton?.setAttribute(
+                    "data-publicationuuid", 
+                    publication["uuid"]
+                );
+
+                selectButton?.addEventListener("click", event => {
+                    selectPublication(event, publicationPickerElem)
+                });
+
+                tbody?.appendChild(row);
+            } 
+        } else {
+            console.error(
+                `Error:. Status: ${response.status}. Status Text: ${response.statusText}`
+            );
+        }
+    } catch(error) {
+        console.error(error);
+    }
+}
+
+function getPublicationType(publicationPickerElem: Element) {
+    if (publicationPickerElem.hasAttribute("data-publicationtype")) {
+        return publicationPickerElem.getAttribute("data-publicationtype");
+    } else {
+        return "org.scientificcms.publications.Publication"
+    }
+}
+
+async function selectPublication(
+    event: Event, 
+    publicationPickerElem: Element
+) {
+    const selectButton = event.currentTarget as Element;
+    const publicationUuid = selectButton.getAttribute("data-publicationuuid");
+    if (!publicationUuid) {
+        console.error("publicationUuid is null");
+        return;
+    }
+
+}

sci-publications/webpack.config.js

@@ -7,7 +7,8 @@ module.exports = {
     entry: {
         "collectedvolume-asset-authors": "./src/main/typescript/collectedvolume-asset-authors.ts",
         "proceedings-asset-authors": "./src/main/typescript/proceedings-asset-authors",
-        "publication-authors": "./src/main/typescript/publication-authors.ts"
+        "publication-authors": "./src/main/typescript/publication-authors.ts",
+        "publication-picker": "./src/main/typescript/publication-picker.ts"
     },
     output: {
         filename: "[name].js",