Integrated sortable.js

ccm-cms/package-lock.json

@@ -3234,6 +3234,12 @@
             "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==",
             "dev": true
         },
+        "@types/sortablejs": {
+            "version": "1.10.7",
+            "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.10.7.tgz",
+            "integrity": "sha512-lGCwwgpj8zW/ZmaueoPVSP7nnc9t8VqVWXS+ASX3eoUUENmiazv0rlXyTRludXzuX9ALjPsMqBu85TgJNWbTOg==",
+            "dev": true
+        },
         "abab": {
             "version": "2.0.5",
             "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
@@ -9378,6 +9384,11 @@
                 }
             }
         },
+        "sortablejs": {
+            "version": "1.14.0",
+            "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+            "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+        },
         "source-map": {
             "version": "0.6.1",
             "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",

ccm-cms/package.json

@@ -13,6 +13,7 @@
     "license": "LGPL-3.0-or-later",
     "devDependencies": {
         "@parcel/transformer-typescript-tsc": "^2.0.0-beta.1",
+        "@types/sortablejs": "^1.10.7",
         "npm-run-all": "^4.1.5",
         "parcel": "^2.0.0-beta.2",
         "sass": "^1.32.12",
@@ -24,7 +25,8 @@
         "bootstrap": "^4.6.0",
         "bootstrap-icons": "^1.4.1",
         "jquery": "^3.6.0",
-        "popper.js": "^1.16.1"
+        "popper.js": "^1.16.1",
+        "sortablejs": "^1.14.0"
     },
     "targets": {
         "main": false

ccm-cms/src/main/java/org/librecms/ui/contentsections/documents/RelatedInfoStep.java

@@ -290,7 +290,7 @@ public class RelatedInfoStep extends AbstractMvcAuthoringStep {
         if (permissionChecker.isPermitted(
             ItemPrivileges.EDIT, getDocument()
         )) {
-            return "org/librecms/ui/documents/relatedinfo.xhtml";
+            return "org/librecms/ui/contentsection/documents/relatedinfo.xhtml";
         } else {
             return documentUi.showAccessDenied(
                 getContentSection(),
@@ -727,7 +727,7 @@ public class RelatedInfoStep extends AbstractMvcAuthoringStep {
 
             listDetailsModel.setAttachmentList(listResult.get());
 
-            return "org/librecms/ui/documents/relatedinfo-attachmentlist-details.xhtml";
+            return "org/librecms/ui/contentsection/documents/relatedinfo-attachmentlist-details.xhtml";
         } else {
             return documentUi.showAccessDenied(
                 getContentSection(),
@@ -1256,7 +1256,7 @@ public class RelatedInfoStep extends AbstractMvcAuthoringStep {
                 models
                     .put("section", getContentSection().getLabel());
                 models.put("assetUuid", assetUuid);
-                return "org/librecms/ui/documents/asset-not-found.xhtml";
+                return "org/librecms/ui/contentsection/documents/asset-not-found.xhtml";
             }
 
             final Asset asset = assetResult.get();
@@ -1315,7 +1315,7 @@ public class RelatedInfoStep extends AbstractMvcAuthoringStep {
             final AttachmentList list = listResult.get();
             models.put("attachmentList", list.getName());
 
-            return "org/librecms/ui/documents/relatedinfo-create-internallink.xhtml";
+            return "org/librecms/ui/contentsection/documents/relatedinfo-create-internallink.xhtml";
         } else {
             return documentUi.showAccessDenied(
                 getContentSection(),
@@ -1380,7 +1380,7 @@ public class RelatedInfoStep extends AbstractMvcAuthoringStep {
             );
             if (!itemResult.isPresent()) {
                 models.put("targetItemUuid", targetItemUuid);
-                return "org/librecms/ui/documents/target-item-not-found.xhtml";
+                return "org/librecms/ui/contentsection/documents/target-item-not-found.xhtml";
             }
 
             final RelatedLink relatedLink = new RelatedLink();
@@ -1461,14 +1461,14 @@ public class RelatedInfoStep extends AbstractMvcAuthoringStep {
                 models.put("contentItem", getDocumentPath());
                 models.put("listIdentifier", listIdentifierParam);
                 models.put("internalLinkUuid", internalLinkUuid);
-                return "org/librecms/ui/documents/internal-link-asset-not-found.xhtml";
+                return "org/librecms/ui/contentsection/documents/internal-link-asset-not-found.xhtml";
             }
 
             final RelatedLink link = linkResult.get();
             internalLinkDetailsModel.setListIdentifier(list.getName());
             internalLinkDetailsModel.setInternalLink(link);
 
-            return "org/librecms/ui/documents/relatedinfo-internallink-details.xhtml";
+            return "org/librecms/ui/contentsection/documents/relatedinfo-internallink-details.xhtml";
         } else {
             return documentUi.showAccessDenied(
                 getContentSection(),
@@ -1531,7 +1531,7 @@ public class RelatedInfoStep extends AbstractMvcAuthoringStep {
             );
             if (!itemResult.isPresent()) {
                 models.put("targetItemUuid", targetItemUuid);
-                return "org/librecms/ui/documents/target-item-not-found.xhtml";
+                return "org/librecms/ui/contentsection/documents/target-item-not-found.xhtml";
             }
 
             final Optional<RelatedLink> linkResult = list
@@ -1547,7 +1547,7 @@ public class RelatedInfoStep extends AbstractMvcAuthoringStep {
                 models.put("contentItem", getDocumentPath());
                 models.put("listIdentifier", listIdentifierParam);
                 models.put("internalLinkUuid", internalLinkUuid);
-                return "org/librecms/ui/documents/internal-link-asset-not-found.xhtml";
+                return "org/librecms/ui/contentsection/documents/internal-link-asset-not-found.xhtml";
             }
 
             final RelatedLink link = linkResult.get();
@@ -1629,7 +1629,7 @@ public class RelatedInfoStep extends AbstractMvcAuthoringStep {
                 models.put("contentItem", getDocumentPath());
                 models.put("listIdentifierParam", listIdentifierParam);
                 models.put("internalLinkUuid", internalLinkUuid);
-                return "org/librecms/ui/documents/internal-link-asset-not-found.xhtml";
+                return "org/librecms/ui/contentsection/documents/internal-link-asset-not-found.xhtml";
             }
 
             final RelatedLink link = linkResult.get();
@@ -1712,7 +1712,7 @@ public class RelatedInfoStep extends AbstractMvcAuthoringStep {
                 models.put("contentItem", getDocumentPath());
                 models.put("listIdentifierParam", listIdentifierParam);
                 models.put("internalLinkUuid", internalLinkUuid);
-                return "org/librecms/ui/documents/internal-link-asset-not-found.xhtml";
+                return "org/librecms/ui/contentsection/documents/internal-link-asset-not-found.xhtml";
             }
 
             final RelatedLink link = linkResult.get();
@@ -1793,7 +1793,7 @@ public class RelatedInfoStep extends AbstractMvcAuthoringStep {
                 models.put("contentItem", getDocumentPath());
                 models.put("listIdentifierParam", listIdentifierParam);
                 models.put("internalLinkUuid", internalLinkUuid);
-                return "org/librecms/ui/documents/internal-link-asset-not-found.xhtml";
+                return "org/librecms/ui/contentsection/documents/internal-link-asset-not-found.xhtml";
             }
 
             final RelatedLink link = linkResult.get();
@@ -2185,7 +2185,7 @@ public class RelatedInfoStep extends AbstractMvcAuthoringStep {
     private String showAttachmentListNotFound(final String listIdentifier) {
         models.put("contentItem", getDocumentPath());
         models.put("listIdentifier", listIdentifier);
-        return "org/librecms/ui/documents/attachmentlist-not-found.xhtml";
+        return "org/librecms/ui/contentsection/documents/attachmentlist-not-found.xhtml";
     }
 
     private AttachmentListDto buildAttachmentListDto(

ccm-cms/src/main/resources/WEB-INF/views/org/librecms/ui/contentsection/documents/relatedinfo.xhtml

@@ -4,32 +4,30 @@
       xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
       xmlns:libreccm="http://xmlns.jcp.org/jsf/composite/components/libreccm"
       xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
-    <ui:composition template="/WEB-INF/views/org/librecms/ui/contentsection/documents/document.xhtml">
+    <ui:composition template="/WEB-INF/views/org/librecms/ui/contentsection/documents/authoringstep.xhtml">
-
-        <ui:param name="activePage" value="document" />
-        <ui:param name="title" value="#{CmsDefaultStepsMessageBundle['contentsection.document.relatedinfo.title']}" />
-
-        <ui:define name="breadcrumb">
-            <ui:include src="document-breadcrumbs.xhtml" />
-            <li aria-current="page" class="breadcrumb-item">
-                #{CmsDefaultStepsMessageBundle['contentsection.document.relatedinfo.title']}
-            </li>
-        </ui:define>
 
         <ui:define name="authoringStep">
             <div class="text-right">
                 <button class="btn btn-primary"
                         data-toggle="modal"
-                        data-target="#add-attachment.ist-dialog"
+                        data-target="#add-attachment-list-dialog"
                         type="button">
                     <bootstrap:svgIcon icon="plus-circle" />
                     <span>#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.add.button.label']}</span>
                 </button>
+                <button class="btn btn-secondary"
+                        data-toggle="modal"
+                        data-target="#order-attachment-lists-dialog"
+                        type="button"
+                        >
+                    <bootstrap:svgIcon icon="arrows-move" />
+                    <span>#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.sort.button.label']}</span>
+                </button>
             </div>
             <div aria-hidden="true" 
-                 aria-labelledby="add-attachment.ist-dialog-title"
+                 aria-labelledby="add-attachment-list-dialog-title"
                  class="modal fade"
-                 id="add-attachmentlist-dialog"
+                 id="add-attachment-list-dialog"
                  tabindex="-1">
                 <div class="modal-dialog">
                     <form action="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@authoringSteps/relatedinfo/attachmentlists/@add"
@@ -83,6 +81,249 @@
                 </div>
             </div>
 
+            <ul class="cms-attachment-lists">
+                <li class="cms-attachment-list mb-3">
+                    <div class="d-flex justify-content-between">
+                        <div class="cms-attachment-list-name">List 1</div>
+                        <div class="cms-attachmentlist-buttons">
+                            <button class="btn btn-secondary cms-sort-handle"
+                                    type="button">
+                                <bootstrap:svgIcon icon="arrows-move" />
+                                <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.move.button']}"</span>
+                            </button>
+                            <button class="btn btn-secondary"
+                                    type="button">
+                                <bootstrap:svgIcon icon="info-circle" />
+                                <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.info.button']}"</span>
+                            </button>
+                            <button class="btn btn-secondary"
+                                    type="button">
+                                <bootstrap:svgIcon icon="pen" />
+                                <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.edit.button']}"</span>
+                            </button>
+                            <button class="btn btn-danger"
+                                    type="button">
+                                <bootstrap:svgIcon icon="pen" />
+                                <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.delete.button']}"</span>
+                            </button>
+                        </div>
+                    </div>
+                    <ul class="cms-attachments mt-3">
+                        <li class="cms-attachment mb-3 d-flex justify-content-between">
+                            <div class="cms-attachment-label">Attachment 1a</div>
+                            <div class="cms-attachment-buttons">
+                                <button class="btn btn-secondary cms-sort-handle"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="arrows-move" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.move.button']}"</span>
+                                </button>
+                                <button class="btn btn-secondary"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="info-circle" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.info.button']}"</span>
+                                </button>
+                                <button class="btn btn-secondary"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="pen" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.edit.button']}"</span>
+                                </button>
+                                <button class="btn btn-danger"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="pen" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.delete.button']}"</span>
+                                </button>
+                            </div>
+                        </li>
+                        <li class="cms-attachment mb-3 d-flex justify-content-between">
+                            <div class="cms-attachment-label">Attachment 1b</div>
+                            <div class="cms-attachment-buttons">
+                                <button class="btn btn-secondary cms-sort-handle"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="arrows-move" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.move.button']}"</span>
+                                </button>
+                                <button class="btn btn-secondary"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="info-circle" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.info.button']}"</span>
+                                </button>
+                                <button class="btn btn-secondary"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="pen" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.edit.button']}"</span>
+                                </button>
+                                <button class="btn btn-danger"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="pen" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.delete.button']}"</span>
+                                </button>
+                            </div>
+                        </li>
+                        <li class="cms-attachment mb-3 d-flex justify-content-between">
+                            <div class="cms-attachment-label">Attachment 1c</div>
+                            <div class="cms-attachment-buttons">
+                                <button class="btn btn-secondary cms-sort-handle"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="arrows-move" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.move.button']}"</span>
+                                </button>
+                                <button class="btn btn-secondary"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="info-circle" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.info.button']}"</span>
+                                </button>
+                                <button class="btn btn-secondary"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="pen" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.edit.button']}"</span>
+                                </button>
+                                <button class="btn btn-danger"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="pen" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.delete.button']}"</span>
+                                </button>
+                            </div>
+                        </li>
+                    </ul>
+                </li>
+                <li class="cms-attachment-list mb-3">
+                    <div class="d-flex justify-content-between">
+                        <div class="cms-attachment-list-name">List 2</div>
+                        <div class="cms-attachmentlist-buttons">
+                            <button class="btn btn-secondary cms-sort-handle"
+                                    type="button">
+                                <bootstrap:svgIcon icon="arrows-move" />
+                                <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.move.button']}"</span>
+                            </button>
+                            <button class="btn btn-secondary"
+                                    type="button">
+                                <bootstrap:svgIcon icon="info-circle" />
+                                <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.info.button']}"</span>
+                            </button>
+                            <button class="btn btn-secondary"
+                                    type="button">
+                                <bootstrap:svgIcon icon="pen" />
+                                <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.edit.button']}"</span>
+                            </button>
+                            <button class="btn btn-danger"
+                                    type="button">
+                                <bootstrap:svgIcon icon="pen" />
+                                <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.delete.button']}"</span>
+                            </button>
+                        </div>
+                    </div>
+                    <ul class="cms-attachments mt-3">
+                        <li class="cms-attachment mb-3 d-flex justify-content-between">
+                            <div class="cms-attachment-label">Attachment 2a</div>
+                            <div class="cms-attachment-buttons">
+                                <button class="btn btn-secondary cms-sort-handle"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="arrows-move" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.move.button']}"</span>
+                                </button>
+                                <button class="btn btn-secondary"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="info-circle" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.info.button']}"</span>
+                                </button>
+                                <button class="btn btn-secondary"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="pen" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.edit.button']}"</span>
+                                </button>
+                                <button class="btn btn-danger"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="pen" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.delete.button']}"</span>
+                                </button>
+                            </div>
+                        </li>
+                        <li class="cms-attachment mb-3 d-flex justify-content-between">
+                            <div class="cms-attachment-label">Attachment 2b</div>
+                            <div class="cms-attachment-buttons">
+                                <button class="btn btn-secondary cms-sort-handle"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="arrows-move" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.move.button']}"</span>
+                                </button>
+                                <button class="btn btn-secondary"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="info-circle" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.info.button']}"</span>
+                                </button>
+                                <button class="btn btn-secondary"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="pen" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.edit.button']}"</span>
+                                </button>
+                                <button class="btn btn-danger"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="pen" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.delete.button']}"</span>
+                                </button>
+                            </div>
+                        </li>
+                        <li class="cms-attachment mb-3 d-flex justify-content-between">
+                            <div class="cms-attachment-label">Attachment 2c</div>
+                            <div class="cms-attachment-buttons">
+                                <button class="btn btn-secondary cms-sort-handle"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="arrows-move" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.move.button']}"</span>
+                                </button>
+                                <button class="btn btn-secondary"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="info-circle" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.info.button']}"</span>
+                                </button>
+                                <button class="btn btn-secondary"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="pen" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.edit.button']}"</span>
+                                </button>
+                                <button class="btn btn-danger"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="pen" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.delete.button']}"</span>
+                                </button>
+                            </div>
+                        </li>
+                        <li class="cms-attachment mb-3 d-flex justify-content-between">
+                            <div class="cms-attachment-label">Attachment 2d</div>
+                            <div class="cms-attachment-buttons">
+                                <button class="btn btn-secondary cms-sort-handle"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="arrows-move" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.move.button']}"</span>
+                                </button>
+                                <button class="btn btn-secondary"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="info-circle" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.info.button']}"</span>
+                                </button>
+                                <button class="btn btn-secondary"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="pen" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.edit.button']}"</span>
+                                </button>
+                                <button class="btn btn-danger"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="pen" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.delete.button']}"</span>
+                                </button>
+                            </div>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+
+
+            <ul>
+                <c:forEach items="#{CmsRelatedInfoStep.attachmentLists}"
+                           var="list">
+                    <li>
+                        <span>#{list.name}</span>
+                        <!--                        <div class="d-flex">
                                                     <div class="text-right">
                                                         <button class="btn btn-primary"
                                                                 data-target="#attachmentlist-#{list.name}-add-attachment-dialog"
@@ -121,7 +362,7 @@
                 <div class="modal-body">
                     <div class="alert alert-info" role="alert">
                         Not implemented yet
-                                <!-- Requires JavaScript to search for assets -->
+                         Requires JavaScript to search for assets 
                     </div>
                 </div>
             </div>
@@ -165,11 +406,6 @@
         </div>
     </div>
 
-            <ul>
-                <c:forEach items="#{CmsRelatedInfoStep.attachmentLists}"
-                           var="list">
-                    <li>
-                        <div class="d-flex">
     <span>#{list.name}</span>
     <button class="btn btn-info"
             data-target="#attachmentlist-#{list.name}-info"
@@ -291,10 +527,10 @@
                 dialogId="remove-attachment-#{attachment.uuid}"
                 dialogTitle="#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.attachment.remove.title']}"
                 message="#{CmsDefaultStepsMessageBundle.getMessage('relatedinfo.attachmentlists.attachment.remove.message', [attachment.title])}"
-                                        />
+                />-->
-                                </li>
+                        <!--                                </li>
                                                     </c:forEach>
-                        </ul>
+                                                </ul>-->
                     </li>
                 </c:forEach>
             </ul>

ccm-cms/src/main/resources/org/librecms/ui/DefaultAuthoringStepsBundle.properties

@@ -95,3 +95,4 @@ assetpicker.column.name=Name
 assetpicker.column.type=Typ
 assetpicker.column.action=Action
 person.createform.title=Create new Person
+relatedinfo.attachmentlists.sort.button.label=Sort attachment lists

ccm-cms/src/main/resources/org/librecms/ui/DefaultAuthoringStepsBundle_de.properties

@@ -95,3 +95,4 @@ assetpicker.column.name=Name
 assetpicker.column.type=Typ
 assetpicker.column.action=Aktion
 person.createform.title=Neue Person erstellen
+relatedinfo.attachmentlists.sort.button.label=Anhanglisten sortieren

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

@@ -1,3 +1,5 @@
 import "bootstrap";
 
 import "./cms-assetpicker";
+
+import "./cms-attachment-lists";

ccm-cms/src/main/typescript/content-sections/cms-attachment-lists.ts

@@ -0,0 +1,33 @@
+// import Sortable = require("sortablejs")
+import Sortable from "sortablejs";
+
+document.addEventListener("DOMContentLoaded", function (event) {
+    const attachmentLists = document.querySelectorAll(".cms-attachment-lists");
+
+    for (let i = 0; i < attachmentLists.length; i++) {
+        initAttachmentList(attachmentLists[i] as HTMLElement);
+    }
+
+    const attachments = document.querySelectorAll(".cms-attachments");
+
+    for (let i = 0; i < attachments.length; i++) {
+        initAttachments(attachments[i] as HTMLElement);
+    }
+});
+
+function initAttachmentList(attachmentList: HTMLElement) {
+    new Sortable(attachmentList, {
+        animation: 150,
+        group: "cms-attachment-lists",
+        handle: ".cms-sort-handle"
+    });
+}
+
+function initAttachments(attachments: HTMLElement) {
+    new Sortable(attachments,
+        {
+            animation: 150,
+            group: "cms-attachments",
+            handle: ".cms-sort-handle"
+        });
+}

ccm-cms/tsconfig.json

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
         "declaration": true,
         "lib": [
             "DOM",