* RelatedInfo authoring step: Add attachment list working

* updated bootstrap-icons to 1.5.0

ccm-cms/package-lock.json

@@ -3645,9 +3645,9 @@
             "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
         },
         "bootstrap-icons": {
-            "version": "1.4.1",
+            "version": "1.5.0",
-            "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.4.1.tgz",
+            "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz",
-            "integrity": "sha512-EcATaAGsRgyy4NtnwXlNzkgWttpb6PqcXCoLtZZKdZtAYJU/WYqoQFxuGFKAppOlf7NmKpvGtSsC/921H7LIjg=="
+            "integrity": "sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA=="
         },
         "brace-expansion": {
             "version": "1.1.11",

ccm-cms/package.json

@@ -23,7 +23,7 @@
         "@tiptap/core": "^2.0.0-beta.46",
         "@tiptap/starter-kit": "^2.0.0-beta.43",
         "bootstrap": "^4.6.0",
-        "bootstrap-icons": "^1.4.1",
+        "bootstrap-icons": "^1.5.0",
         "jquery": "^3.6.0",
         "popper.js": "^1.16.1",
         "sortablejs": "^1.14.0"

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

@@ -18,6 +18,8 @@
  */
 package org.librecms.ui.contentsections.documents;
 
+import org.librecms.ui.contentsections.documents.relatedinfo.RelatedInfoStep;
+import org.librecms.ui.contentsections.documents.relatedinfo.RelatedInfoStepService;
 import org.librecms.ui.contenttypes.MvcArticlePropertiesStep;
 import org.librecms.ui.contenttypes.MvcArticleTextBodyStep;
 import org.librecms.ui.contenttypes.MvcArticleTextBodyStepResources;
@@ -51,6 +53,7 @@ public class CmsMvcAuthoringSteps implements MvcAuthoringSteps {
     public Set<Class<?>> getResourceClasses() {
         final Set<Class<?>> classes = new HashSet<>();
         classes.add(MvcArticleTextBodyStepResources.class);
+        classes.add(RelatedInfoStepService.class);
 
         return classes;
     }

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

@@ -16,7 +16,7 @@
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
  * MA 02110-1301  USA
  */
-package org.librecms.ui.contentsections.documents;
+package org.librecms.ui.contentsections.documents.relatedinfo;
 
 import org.libreccm.l10n.GlobalizationHelper;
 import org.libreccm.l10n.LocalizedString;

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

@@ -16,7 +16,7 @@
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
  * MA 02110-1301  USA
  */
-package org.librecms.ui.contentsections.documents;
+package org.librecms.ui.contentsections.documents.relatedinfo;
 
 import org.libreccm.l10n.GlobalizationHelper;
 import org.librecms.contentsection.AttachmentList;
@@ -26,6 +26,8 @@ import java.util.ArrayList;
 import java.util.Collections;
 import java.util.List;
 
+import org.librecms.ui.contentsections.documents.ItemAttachmentDto;
+
 /**
  * A data transfer object used by the template for the listing of the
  * {@link AttachmentList}s of a {@link ContentItem}.

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

@@ -16,7 +16,7 @@
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
  * MA 02110-1301  USA
  */
-package org.librecms.ui.contentsections.documents;
+package org.librecms.ui.contentsections.documents.relatedinfo;
 
 import org.libreccm.l10n.GlobalizationHelper;
 import org.libreccm.l10n.LocalizedString;

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

@@ -0,0 +1,57 @@
+/*
+ * Copyright (C) 2021 LibreCCM Foundation.
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 2.1 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this library; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
+ * MA 02110-1301  USA
+ */
+package org.librecms.ui.contentsections.documents.relatedinfo;
+
+/**
+ *
+ * @author <a href="mailto:jens.pelzetter@googlemail.com">Jens Pelzetter</a>
+ */
+public class MovedAttachment {
+
+    private String attachmentUuid;
+
+    private String fromListUuid;
+
+    private String toListUuid;
+
+    public String getAttachmentUuid() {
+        return attachmentUuid;
+    }
+
+    public void setAttachmentUuid(final String attachmentUuid) {
+        this.attachmentUuid = attachmentUuid;
+    }
+
+    public String getFromListUuid() {
+        return fromListUuid;
+    }
+
+    public void setFromListUuid(final String fromListUuid) {
+        this.fromListUuid = fromListUuid;
+    }
+
+    public String getToListUuid() {
+        return toListUuid;
+    }
+
+    public void setToListUuid(final String toListUuid) {
+        this.toListUuid = toListUuid;
+    }
+
+}

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

@@ -16,7 +16,7 @@
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
  * MA 02110-1301  USA
  */
-package org.librecms.ui.contentsections.documents;
+package org.librecms.ui.contentsections.documents.relatedinfo;
 
 import org.librecms.ui.contentsections.ContentSectionNotFoundException;
 import org.libreccm.api.Identifier;
@@ -88,6 +88,14 @@ import javax.ws.rs.Produces;
 import javax.ws.rs.QueryParam;
 import javax.ws.rs.core.MediaType;
 
+import org.librecms.ui.contentsections.documents.AbstractMvcAuthoringStep;
+import org.librecms.ui.contentsections.documents.DefaultAuthoringStepConstants;
+import org.librecms.ui.contentsections.documents.DocumentNotFoundException;
+import org.librecms.ui.contentsections.documents.DocumentUi;
+import org.librecms.ui.contentsections.documents.ItemAttachmentDto;
+import org.librecms.ui.contentsections.documents.MvcAuthoringStepDef;
+import org.librecms.ui.contentsections.documents.MvcAuthoringSteps;
+
 /**
  * Authoring step for managing the {@link AttachmentList} and
  * {@link ItemAttachment}s assigned to a {@link ContentItem}.
@@ -675,9 +683,7 @@ public class RelatedInfoStep extends AbstractMvcAuthoringStep {
                 globalizationHelper.getNegotiatedLocale(), description
             );
             listRepo.save(list);
-            return buildRedirectPathForStep(
+            return buildRedirectPathForStep();
-                String.format("/attachmentlists/%s", list.getName())
-            );
         } else {
             return documentUi.showAccessDenied(
                 getContentSection(),

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

@@ -16,7 +16,7 @@
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
  * MA 02110-1301  USA
  */
-package org.librecms.ui.contentsections.documents;
+package org.librecms.ui.contentsections.documents.relatedinfo;
 
 import java.util.ArrayList;
 import java.util.Collections;
@@ -35,6 +35,8 @@ public class RelatedInfoStepAttachmentOrder {
 
     private Map<String, List<String>> attachmentsOrder;
 
+    private List<MovedAttachment> movedAttachments;
+
     public List<String> getAttachmentListsOrder() {
         return Collections.unmodifiableList(attachmentListsOrder);
     }
@@ -61,13 +63,23 @@ public class RelatedInfoStepAttachmentOrder {
             );
     }
 
+    public List<MovedAttachment> getMovedAttachments() {
+        return Collections.unmodifiableList(movedAttachments);
+    }
+
+    public void setMovedAttachments(final List<MovedAttachment> movedAttachments) {
+        this.movedAttachments = new ArrayList<>(movedAttachments);
+    }
+
     @Override
     public String toString() {
         return String.format(
             "attachmentListsOrder = %s, "
-                + "attachmentsOrder = %s",
+                + "attachmentsOrder = %s, "
+                + "movedAttachments = %s",
             Objects.toString(attachmentListsOrder),
-            Objects.toString(attachmentsOrder)
+            Objects.toString(attachmentsOrder),
+            Objects.toString(movedAttachments)
         );
     }
 

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

@@ -16,7 +16,7 @@
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
  * MA 02110-1301  USA
  */
-package org.librecms.ui.contentsections.documents;
+package org.librecms.ui.contentsections.documents.relatedinfo;
 
 import java.util.ArrayList;
 import java.util.Collections;

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

@@ -16,7 +16,7 @@
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
  * MA 02110-1301  USA
  */
-package org.librecms.ui.contentsections.documents;
+package org.librecms.ui.contentsections.documents.relatedinfo;
 
 import org.apache.logging.log4j.LogManager;
 import org.apache.logging.log4j.Logger;
@@ -24,14 +24,16 @@ import org.librecms.contentsection.AttachmentListRepository;
 import org.librecms.contentsection.ContentItemRepository;
 import org.librecms.contentsection.ItemAttachmentManager;
 import org.librecms.ui.contentsections.ContentSectionsUi;
-import org.w3c.dom.events.Event;
+import org.librecms.ui.contentsections.documents.MvcAuthoringSteps;
-
-import java.util.Objects;
 
 import javax.enterprise.context.RequestScoped;
 import javax.inject.Inject;
+import javax.transaction.Transactional;
+import javax.ws.rs.Consumes;
+import javax.ws.rs.POST;
 import javax.ws.rs.Path;
 import javax.ws.rs.PathParam;
+import javax.ws.rs.core.MediaType;
 import javax.ws.rs.core.Response;
 
 /**
@@ -39,7 +41,7 @@ import javax.ws.rs.core.Response;
  * @author <a href="mailto:jens.pelzetter@googlemail.com">Jens Pelzetter</a>
  */
 @RequestScoped
-@Path(MvcAuthoringSteps.PATH_PREFIX + "relatedinfo")
+@Path(MvcAuthoringSteps.PATH_PREFIX + "relatedinfo-service")
 public class RelatedInfoStepService {
     
     private static final Logger LOGGER = LogManager.getLogger(
@@ -58,6 +60,10 @@ public class RelatedInfoStepService {
     @Inject
     private ContentSectionsUi sectionsUi;
 
+    @POST
+    @Path("/save-order")
+    @Consumes(MediaType.APPLICATION_JSON)
+    @Transactional(Transactional.TxType.REQUIRED)
     public Response saveOrder(
         @PathParam(MvcAuthoringSteps.SECTION_IDENTIFIER_PATH_PARAM)
         final String sectionIdentifier,

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

@@ -2,11 +2,20 @@
 <html xmlns="http://www.w3.org/1999/xhtml" 
       xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap"
       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/authoringstep.xhtml">
 
         <ui:define name="authoringStep">
+            <template id="cms-sort-attachments-error-general">
+                <div class="alert alert-danger mt-3" role="alert">
+                    #{CmsDefaultStepsMessageBundle['relatedinfo.sortattachments.errors.general']}
+                </div>
+            </template>
+            <template id="cms-sort-attachments-error-save">
+                <div class="alert alert-danger mt-3" role="alert">
+                    #{CmsDefaultStepsMessageBundle['relatedinfo.sortattachments.errors.save']}
+                </div>
+            </template>
             <div class="text-right">
                 <button class="btn btn-primary"
                         data-toggle="modal"
@@ -22,7 +31,7 @@
                  id="add-attachment-list-dialog"
                  tabindex="-1">
                 <div class="modal-dialog">
-                    <form action="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@authoringSteps/relatedinfo/attachmentlists/@add"
+                    <form action="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@relatedinfo/attachmentlists/@add"
                           class="modal-content"
                           method="post">
                         <div class="modal-header">
@@ -66,14 +75,14 @@
                             </button>
                             <button class="btn btn-success"
                                     type="submit">
-                                #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.add.dialog.add_list']}"
+                                #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.add.dialog.add_list']}
                             </button>
                         </div>
                     </form>
                 </div>
             </div>
 
-            <div>
+<!--            <div>
                 <button class="btn btn-secondary save-order-button"
                         disabled="disabled"
                         type="button">
@@ -81,8 +90,10 @@
                     <span>#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.order.save']}</span>
                 </button>
             </div>
-            <ul class="cms-attachment-lists mt-3">
+            <div id="messages"></div>
-                <li class="cms-attachment-list mb-3" 
+            <ul class="cms-attachment-lists list-group mt-3"
+                data-baseUrl="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@relatedinfo-service/save-order">
+                <li class="cms-attachment-list mb-3 list-group-item list-group-item-primary" 
                     data-id="34aba2e6-a9b2-4b82-9889-c7ea591b6faf">
                     <div class="d-flex justify-content-between">
                         <div class="cms-attachment-list-name">List 1</div>
@@ -109,9 +120,9 @@
                             </button>
                         </div>
                     </div>
-                    <ul class="cms-attachments mt-3"
+                    <ul class="cms-attachments mt-3 list-group"
                         data-list-uuid="34aba2e6-a9b2-4b82-9889-c7ea591b6faf">
-                        <li class="cms-attachment mb-3 d-flex justify-content-between" 
+                        <li class="cms-attachment list-group-item mb-3 d-flex justify-content-between" 
                             data-id="a871c22b-f533-49eb-be3e-3600f4e83180">
                             <div class="cms-attachment-label">Attachment 1a</div>
                             <div class="cms-attachment-buttons">
@@ -137,7 +148,7 @@
                                 </button>
                             </div>
                         </li>
-                        <li class="cms-attachment mb-3 d-flex justify-content-between" 
+                        <li class="cms-attachment list-group-item mb-3 d-flex justify-content-between" 
                             data-id="6ab14e1e-dc9a-4a39-9514-9bea68bcd357">
                             <div class="cms-attachment-label">Attachment 1b</div>
                             <div class="cms-attachment-buttons">
@@ -163,7 +174,7 @@
                                 </button>
                             </div>
                         </li>
-                        <li class="cms-attachment mb-3 d-flex justify-content-between" 
+                        <li class="cms-attachment list-group-item mb-3 d-flex justify-content-between" 
                             data-id="f3a1d656-fb4e-4ba8-9f5c-e605700e7c5f">
                             <div class="cms-attachment-label">Attachment 1c</div>
                             <div class="cms-attachment-buttons">
@@ -191,7 +202,7 @@
                         </li>
                     </ul>
                 </li>
-                <li class="cms-attachment-list mb-3" 
+                <li class="cms-attachment-list mb-3 list-group-item list-group-item-primary" 
                     data-id="b962a838-e25e-4987-8058-6205692d2d92">
                     <div class="d-flex justify-content-between">
                         <div class="cms-attachment-list-name">List 2</div>
@@ -218,9 +229,9 @@
                             </button>
                         </div>
                     </div>
-                    <ul class="cms-attachments mt-3"
+                    <ul class="cms-attachments mt-3 list-group"
                         data-list-uuid="b962a838-e25e-4987-8058-6205692d2d92">
-                        <li class="cms-attachment mb-3 d-flex justify-content-between" 
+                        <li class="cms-attachment list-group-item mb-3 d-flex justify-content-between" 
                             data-id="296495bd-fbf6-4956-a047-5fa3400df367">
                             <div class="cms-attachment-label">Attachment 2a</div>
                             <div class="cms-attachment-buttons">
@@ -246,7 +257,7 @@
                                 </button>
                             </div>
                         </li>
-                        <li class="cms-attachment mb-3 d-flex justify-content-between"
+                        <li class="cms-attachment list-group-item mb-3 d-flex justify-content-between"
                             data-id="89d89ffd-a322-43a2-81b9-d127503bf52b">
                             <div class="cms-attachment-label">Attachment 2b</div>
                             <div class="cms-attachment-buttons">
@@ -272,7 +283,7 @@
                                 </button>
                             </div>
                         </li>
-                        <li class="cms-attachment mb-3 d-flex justify-content-between" 
+                        <li class="cms-attachment list-group-item mb-3 d-flex justify-content-between" 
                             data-id="f85193f2-38fc-4f34-b6fa-4ed6f4e30f69">
                             <div class="cms-attachment-label">Attachment 2c</div>
                             <div class="cms-attachment-buttons">
@@ -298,7 +309,7 @@
                                 </button>
                             </div>
                         </li>
-                        <li class="cms-attachment mb-3 d-flex justify-content-between" 
+                        <li class="cms-attachment list-group-item mb-3 d-flex justify-content-between" 
                             data-id="a063c64d-3da6-4948-837c-137bf3511579">
                             <div class="cms-attachment-label">Attachment 2d</div>
                             <div class="cms-attachment-buttons">
@@ -334,224 +345,299 @@
                     <bootstrap:svgIcon icon="save" />
                     <span>#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.order.save']}</span>
                 </button>
-            </div>
+            </div>-->
 
-            <ul>
+            <div>
+                <button class="btn btn-secondary save-order-button"
+                        disabled="disabled"
+                        type="button">
+                    <bootstrap:svgIcon icon="save" />
+                    <span>#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.order.save']}</span>
+                </button>
+            </div>
+            <div id="messages"></div>
+            <ul class="cms-attachment-lists mt-3 list-group"
+                data-baseUrl="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@relatedinfo-service/save-order">
                 <c:forEach items="#{CmsRelatedInfoStep.attachmentLists}"
                            var="list">
-                    <li>
+                    <li class="cms-attachment-list mb-3 list-group-item list-group-item-primary"
-                        <span>#{list.name}</span>
+                        data-id="#{list.uuid}">
-                        <!--                        <div class="d-flex">
+                        <div class="d-flex justify-content-between">
-                                                    <div class="text-right">
+                            <div>#{list.name}</div>
-                                                        <button class="btn btn-primary"
+                            <div class="cms-attachmentlist-buttons">
-                                                                data-target="#attachmentlist-#{list.name}-add-attachment-dialog"
+                                <button class="btn btn-secondary cms-sort-handle"
-                                                                data-toggle="modal"
+                                        type="button">
-                                                                type="button">
+                                    <bootstrap:svgIcon icon="arrows-move" />
-                                                            <bootstrap:svgIcon icon="plus-circle" />
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.move.button']}"</span>
-                                                            <span>#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.attachment.add.label']}</span>
+                                </button>
-                                                        </button>
+                                <button class="btn btn-secondary"
-                                                        <button class="btn btn-primary"
+                                        type="button">
-                                                                data-target="#attachmentlist-#{list.name}-add-internallink-dialog"
+                                    <bootstrap:svgIcon icon="info-circle" />
-                                                                data-toggle="modal"
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.info.button']}"</span>
-                                                                type="button">
+                                </button>
-                                                            <bootstrap:svgIcon icon="link-45deg" />
+                                <button class="btn btn-primary"
-                                                            <span>#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.internal_link.add.label']}</span>
+                                        type="button">
-                                                        </button>
+                                    <bootstrap:svgIcon icon="pen" />
-                                                    </div>
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.edit.button']}"</span>
-                                                    <div aria-hidden="true"
+                                </button>
-                                                         aria-labelledby="attachmentlist-#{list.name}-add-attachment-dialog-title"
+                                <button class="btn btn-primary"
-                                                         class="modal fade"
+                                        data-target="#attachmentlist-#{list.name}-add-attachment-dialog"
-                                                         id="attachmentlist-#{list.name}-add-attachment-dialog"
+                                        data-toggle="modal"
-                                                         tabindex="-1">
+                                        type="button">
-                                                        <div class="modal-dialog">
+                                    <bootstrap:svgIcon icon="plus-circle" />
-                                                            <div class="modal-content">
+                                    <span>#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.attachment.add.label']}</span>
-                                                                <div class="modal-header">
+                                </button>
-                                                                    <h3 class="modal-title" 
+                                <button class="btn btn-primary"
-                                                                        id="attachmentlist-#{list.name}-add-attachment-dialog-title">
+                                        data-target="#attachmentlist-#{list.name}-add-internallink-dialog"
-                        #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.attachment.add.dialog.title']}
+                                        data-toggle="modal"
-                    </h3>
+                                        type="button">
-                    <button aria-label="#{CmsDefaultStepsMessageBundle['relatedinfo.attachment.add.dialog.close']}"
+                                    <bootstrap:svgIcon icon="link-45deg" />
-                            class="close" 
+                                    <span>#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.link.add.label']}</span>
-                            data-dismiss="modal"
+                                </button>
-                            type="button">
+                                <button class="btn btn-danger"
-                        <bootstrap:svgIcon icon="x-circle" />
+                                    type="button">
-                    </button>
+                                        <bootstrap:svgIcon icon="x-circle" />
-                </div>
+                                        <span>#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.attachment.remove.label']}</span>
-                <div class="modal-body">
+                                </button>
-                    <div class="alert alert-info" role="alert">
+                            </div>
-                        Not implemented yet
+                        </div>
-                         Requires JavaScript to search for assets 
+                        <ul class="cms-attachments mt-3 list-group"
-                    </div>
+                            data-list-uuid="#{list.uuid}">
-                </div>
+                            <c:forEach items="#{list.attachments}"
-            </div>
+                                       var="attachment">
-        </div>
+                                <li class="cms-attachment list-group-item mb-3 d-flex justify-content-between"
-    </div>
+                                    data-id="#{attachment.uuid}">
-
+                                    <div class="cms-attachment-label">#{attachment.name}</div>
-    <div aria-hidden="true" 
+                                    <div class="cms-attachment-buttons">
-         aria-labelledby="attachmentlist-#{list.name}-add-internallink-dialog-title"
+                                        <button class="btn btn-secondary cms-sort-handle"
-         class="modal fade"
+                                        type="button">
-         id="attachmentlist-#{list.name}-add-internallink-dialog"
+                                    <bootstrap:svgIcon icon="arrows-move" />
-         tabindex="-1">
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.move.button']}"</span>
-        <div class="modal-dialog">
+                                </button>
-            <form class="modal-content">
+                                <button class="btn btn-secondary"
-                <div class="modal-header">
+                                        type="button">
-                    <h3 class="modal-title">
+                                    <bootstrap:svgIcon icon="info-circle" />
-                        #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.internallink.add.dialog.title']}
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.info.button']}"</span>
-                    </h3>
+                                </button>
-                    <button aria-label="#{CmsDefaultStepsMessageBundle['relatedinfo.internallink.add.dialog.close']}"
+                                <button class="btn btn-primary"
-                            class="close" 
+                                        type="button">
-                            data-dismiss="modal"
+                                    <bootstrap:svgIcon icon="pen" />
-                            type="button">
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.edit.button']}"</span>
-                        <bootstrap:svgIcon icon="x-circle" />
+                                </button>
-                    </button>
+                                <button class="btn btn-danger"
-                </div>
+                                        type="button">
-                <div class="modal-body">
+                                    <bootstrap:svgIcon icon="pen" />
-                    <div class="alert alert-info" role="alert">
+                                    <span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachments.delete.button']}"</span>
-                        Not implemented yet, requires JavaScript for good user experience.
+                                </button>
-                    </div>
+                                    </div>
-                </div>
+                                </li>
-                <div class="modal-footer">
+                            </c:forEach>
-                    <button class="btn btn-warning"
+                        </ul>
-                            data-dismiss="modal"
-                            type="button">
-                        #{CmsDefaultStepsMessageBundle['relatedinfo.internallink.add.dialog.close']}
-                    </button>
-                    <button class="btn btn-success">
-                        #{CmsDefaultStepsMessageBundle['relatedinfo.internallink.add.dialog.save']}
-                    </button>
-                </div>
-            </form>
-        </div>
-    </div>
-
-    <span>#{list.name}</span>
-    <button class="btn btn-info"
-            data-target="#attachmentlist-#{list.name}-info"
-            data-toggle="modal"
-            type="button">
-        <bootstrap:svgIcon icon="info-circle" />
-        <span class="sr-only">
-                        #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.info_button.label']}"
-                    </span>
-                </button>
-                <div aria-hidden="true"
-                     aria-labelledby="attachment-list-#{list.name}-info-title"
-                     class="modal fade"
-                     id="attachmentlist-#{list.name}-info"
-                     tabindex="-1">
-                    <div class="modal-dialog">
-                        <div class="modal-content">
-                            <div class="modal-header">
-                                <h3 class="model-title"
-                                    id="attachment-list-#{list.name}-info-title">
-                        #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.info_dialog.title']}"
-                    </h3>
-                    <button aria-label="#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.info_dialog.close']}"
-                            class="close"
-                            data-dismiss="modal"
-                            type="button">
-                        <bootstrap:svgIcon icon="x-circle" />
-                    </button>
-                </div>
-                <div class="modal-body">
-                        #{list.description}
-                    </div>
-                    <div class="modal-footer">
-                        <button class="btn btn-secondary"
-                                data-dismiss="modal"
-                                type="button">
-                        #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.info_dialog.close']}
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-    <a class="btn btn-primary" 
-       href="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@authoringSteps/relatedinfo/attachmentlists/#{list.name}/@details">
-        <bootstrap:svgIcon icon="pen" />
-        <span class="sr-only">
-                        #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.edit.label']}
-                    </span>
-                </a>
-                <form action="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@authoringSteps/relatedinfo/attachmentlists/#{list.name}/@moveDown"
-                      method="post">
-                    <button class="btn btn-secondary"
-                            type="submit">
-                        <bootstrap:svgIcon icon="caret-down-fill" />
-                        <span class="sr-only">
-                        #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.move_down.label']}
-                    </span>
-                </button>
-            </form>
-            <form action="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@authoringSteps/relatedinfo/attachmentlists/#{list.name}/@moveUp"
-                  method="post">
-                <button class="btn btn-secondary"
-                        type="submit">
-                    <bootstrap:svgIcon icon="caret-up-fill" />
-                    <span class="sr-only">
-                        #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.move_up.label']}
-                    </span>
-                </button>
-            </form>
-            <libreccm:deleteDialog 
-                actionTarget="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@authoringSteps/relatedinfo/attachmentlists/#{list.name}/@remove" 
-                buttonText="#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.remove.label']}"
-                cancelLabel="#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.remove.cancel']}"
-                confirmLabel="#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.remove.confirm']}"
-                dialogId="attachmentlist-#{list.name}-remove-dialog"
-                dialogTitle="#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.remove.title']}"
-                message="#{CmsDefaultStepsMessageBundle.getMessage('relatedinfo.attachmentlists.row.remove.message', [list.name])}"
-                />
-        </div>
-        <ul>
-            <c:forEach items="#{list.attachments}"
-                       var="attachment">
-                <li class="d-flex">
-                    <span>#{attachment.title}</span>
-                    <c:if test="#{attachment.internalLink}">
-                        <a class="btn btn-secondary" 
-                           href="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@authoringSteps/relatedinfo/attachmentlists/#{list.name}/internal-links/#{attachment.uuid}/@details">
-                            <bootstrap:svgIcon icon="pen" />
-                            <span class="sr-only">
-                        #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.internal_link.edit.label']}
-                    </span>
-                </a>
-            </c:if>
-            <form action="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@authoringSteps/relatedinfo//attachments/#{attachment.uuid}/@moveDown"
-                  method="post">
-                <button class="btn btn-secondary"
-                        type="submit">
-                    <bootstrap:svgIcon icon="caret-down-fill" />
-                    <span class="sr-only">
-                        #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.attachment.move_down.label']}
-                    </span>
-                </button>
-            </form>
-            <form action="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@authoringSteps/relatedinfo/attachmentlists/#{list.name}/attachments/#{attachment.uuid}/@moveUp"
-                  method="post">
-                <button class="btn btn-secondary"
-                        type="submit">
-                    <bootstrap:svgIcon icon="caret-up-fill" />
-                    <span class="sr-only">
-                        #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.attachment.row.move_up.label']}
-                    </span>
-                </button>
-            </form>
-            <libreccm:deleteDialog 
-                actionTarget="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@authoringSteps/relatedinfo/attachmentlists/#{list.name}/attachments/#{attachment.uuid}/@remove"
-                buttonText="#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.attachment.remove.label']}"
-                cancelLabel="#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.attachment.remove.cancel']}"
-                confirmLabel="#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.attachment.remove.confirm']}"
-                dialogId="remove-attachment-#{attachment.uuid}"
-                dialogTitle="#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.attachment.remove.title']}"
-                message="#{CmsDefaultStepsMessageBundle.getMessage('relatedinfo.attachmentlists.attachment.remove.message', [attachment.title])}"
-                />-->
-                        <!--                                </li>
-                                                    </c:forEach>
-                                                </ul>-->
                     </li>
                 </c:forEach>
             </ul>
+            <!--                            <div aria-hidden="true"
+                                             aria-labelledby="attachmentlist-#{list.name}-add-attachment-dialog-title"
+                                             class="modal fade"
+                                             id="attachmentlist-#{list.name}-add-attachment-dialog"
+                                             tabindex="-1">
+                                            <div class="modal-dialog">
+                                                <div class="modal-content">
+                                                    <div class="modal-header">
+                                                        <h3 class="modal-title" 
+                                                            id="attachmentlist-#{list.name}-add-attachment-dialog-title">
+            #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.attachment.add.dialog.title']}
+        </h3>
+        <button aria-label="#{CmsDefaultStepsMessageBundle['relatedinfo.attachment.add.dialog.close']}"
+                class="close" 
+                data-dismiss="modal"
+                type="button">
+            <bootstrap:svgIcon icon="x-circle" />
+        </button>
+    </div>
+    <div class="modal-body">
+        <div class="alert alert-info" role="alert">
+            Not implemented yet
+            Requires JavaScript to search for assets 
+        </div>
+    </div>
+</div>
+</div>
+</div>-->
+
+            <!--                            <div aria-hidden="true" 
+                                             aria-labelledby="attachmentlist-#{list.name}-add-internallink-dialog-title"
+                                             class="modal fade"
+                                             id="attachmentlist-#{list.name}-add-internallink-dialog"
+                                             tabindex="-1">
+                                            <div class="modal-dialog">
+                                                <form class="modal-content">
+                                                    <div class="modal-header">
+                                                        <h3 class="modal-title">
+            #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.internallink.add.dialog.title']}
+        </h3>
+        <button aria-label="#{CmsDefaultStepsMessageBundle['relatedinfo.internallink.add.dialog.close']}"
+                class="close" 
+                data-dismiss="modal"
+                type="button">
+            <bootstrap:svgIcon icon="x-circle" />
+        </button>
+    </div>
+    <div class="modal-body">
+        <div class="alert alert-info" role="alert">
+            Not implemented yet, requires JavaScript for good user experience.
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button class="btn btn-warning"
+                data-dismiss="modal"
+                type="button">
+            #{CmsDefaultStepsMessageBundle['relatedinfo.internallink.add.dialog.close']}
+        </button>
+        <button class="btn btn-success">
+            #{CmsDefaultStepsMessageBundle['relatedinfo.internallink.add.dialog.save']}
+        </button>
+    </div>
+</form>
+</div>
+</div>-->
+
+<!--                            <span>#{list.name}</span>
+                            <button class="btn btn-info"
+                                    data-target="#attachmentlist-#{list.name}-info"
+                                    data-toggle="modal"
+                                    type="button">
+                                <bootstrap:svgIcon icon="info-circle" />
+                                <span class="sr-only">
+            #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.info_button.label']}"
+        </span>
+    </button>
+    <div aria-hidden="true"
+         aria-labelledby="attachment-list-#{list.name}-info-title"
+         class="modal fade"
+         id="attachmentlist-#{list.name}-info"
+         tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h3 class="model-title"
+                        id="attachment-list-#{list.name}-info-title">
+            #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.info_dialog.title']}"
+        </h3>
+        <button aria-label="#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.info_dialog.close']}"
+                class="close"
+                data-dismiss="modal"
+                type="button">
+            <bootstrap:svgIcon icon="x-circle" />
+        </button>
+    </div>
+    <div class="modal-body">
+            #{list.description}
+        </div>
+        <div class="modal-footer">
+            <button class="btn btn-secondary"
+                    data-dismiss="modal"
+                    type="button">
+            #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.info_dialog.close']}
+        </button>
+    </div>
+</div>
+</div>
+</div>
+<a class="btn btn-primary" 
+href="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@authoringSteps/relatedinfo/attachmentlists/#{list.name}/@details">
+<bootstrap:svgIcon icon="pen" />
+<span class="sr-only">
+            #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.edit.label']}
+        </span>
+    </a>
+    <form action="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@authoringSteps/relatedinfo/attachmentlists/#{list.name}/@moveDown"
+          method="post">
+        <button class="btn btn-secondary"
+                type="submit">
+            <bootstrap:svgIcon icon="caret-down-fill" />
+            <span class="sr-only">
+            #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.move_down.label']}
+        </span>
+    </button>
+</form>
+<form action="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@authoringSteps/relatedinfo/attachmentlists/#{list.name}/@moveUp"
+      method="post">
+    <button class="btn btn-secondary"
+            type="submit">
+        <bootstrap:svgIcon icon="caret-up-fill" />
+        <span class="sr-only">
+            #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.move_up.label']}
+        </span>
+    </button>
+</form>
+<libreccm:deleteDialog 
+    actionTarget="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@authoringSteps/relatedinfo/attachmentlists/#{list.name}/@remove" 
+    buttonText="#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.remove.label']}"
+    cancelLabel="#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.remove.cancel']}"
+    confirmLabel="#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.remove.confirm']}"
+    dialogId="attachmentlist-#{list.name}-remove-dialog"
+    dialogTitle="#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.remove.title']}"
+    message="#{CmsDefaultStepsMessageBundle.getMessage('relatedinfo.attachmentlists.row.remove.message', [list.name])}"
+    />
+</div>
+<ul>
+<c:forEach items="#{list.attachments}"
+           var="attachment">
+    <li class="d-flex">
+        <span>#{attachment.title}</span>
+        <c:if test="#{attachment.internalLink}">
+            <a class="btn btn-secondary" 
+               href="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@authoringSteps/relatedinfo/attachmentlists/#{list.name}/internal-links/#{attachment.uuid}/@details">
+                <bootstrap:svgIcon icon="pen" />
+                <span class="sr-only">
+            #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.internal_link.edit.label']}
+        </span>
+    </a>
+</c:if>
+<form action="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@authoringSteps/relatedinfo//attachments/#{attachment.uuid}/@moveDown"
+      method="post">
+    <button class="btn btn-secondary"
+            type="submit">
+        <bootstrap:svgIcon icon="caret-down-fill" />
+        <span class="sr-only">
+            #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.row.attachment.move_down.label']}
+        </span>
+    </button>
+</form>
+<form action="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@authoringSteps/relatedinfo/attachmentlists/#{list.name}/attachments/#{attachment.uuid}/@moveUp"
+      method="post">
+    <button class="btn btn-secondary"
+            type="submit">
+        <bootstrap:svgIcon icon="caret-up-fill" />
+        <span class="sr-only">
+            #{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.attachment.row.move_up.label']}
+        </span>
+    </button>
+</form>
+<libreccm:deleteDialog 
+    actionTarget="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@authoringSteps/relatedinfo/attachmentlists/#{list.name}/attachments/#{attachment.uuid}/@remove"
+    buttonText="#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.attachment.remove.label']}"
+    cancelLabel="#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.attachment.remove.cancel']}"
+    confirmLabel="#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.attachment.remove.confirm']}"
+    dialogId="remove-attachment-#{attachment.uuid}"
+    dialogTitle="#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.attachment.remove.title']}"
+    message="#{CmsDefaultStepsMessageBundle.getMessage('relatedinfo.attachmentlists.attachment.remove.message', [attachment.title])}"
+    />
+                                </li>
+                            </c:forEach>
+                        </ul>
+</li>
+</c:forEach>
+</ul>-->
+            <div>
+                <button class="btn btn-secondary save-order-button"
+                        disabled="disabled"
+                        type="button">
+                    <bootstrap:svgIcon icon="save" />
+                    <span>#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.order.save']}</span>
+                </button>
+            </div>
 
         </ui:define>
 

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

@@ -96,3 +96,27 @@ assetpicker.column.type=Typ
 assetpicker.column.action=Action
 person.createform.title=Create new Person
 relatedinfo.attachmentlists.sort.button.label=Sort attachment lists
+relatedinfo.sortattachments.errors.general=Unexpected error. Failed to sort related information.
+relatedinfo.sortattachments.errors.save=Failed to save order.
+relatedinfo.attachmentlists.add.button.label=Add new attachment list
+relatedinfo.attachmentlists.add.dialog.title=Add new attachment list
+relatedinfo.attachmentlists.add.dialog.close=Cancel
+relatedinfo.attachmentlists.add.dialog.name.help=The name of the new attachment list. Only used internally.
+relatedinfo.attachmentlists.add.dialog.name.label=Name
+relatedinfo.attachmentlists.add.dialog.title.help=The title of the attachment list.
+relatedinfo.attachmentlists.add.dialog.title.label=Title
+relatedinfo.attachmentlists.add.dialog.description.help=A short description of the attachments in the list.
+relatedinfo.attachmentlists.add.dialog.description.label=Description
+relatedinfo.attachmentlists.add.dialog.add_list=Add list
+relatedinfo.attachmentlists.order.save=Save order
+relatedinfo.attachmentlists.move.button=Move attachment list
+relatedinfo.attachmentlists.info.button=Info
+relatedinfo.attachmentlists.edit.button=Edit attachment list
+relatedinfo.attachmentlists.delete.button=Remove attachment list
+relatedinfo.attachments.move.button=Move attachment
+relatedinfo.attachments.info.button=Info
+relatedinfo.attachments.edit.button=Edit attachment
+relatedinfo.attachments.delete.button=Remove attachment
+relatedinfo.attachmentlists.attachment.add.label=Add attachment
+relatedinfo.attachmentlists.internal_link.add.label=Add internal link
+relatedinfo.attachmentlists.link.add.label=Add link

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

@@ -96,3 +96,27 @@ assetpicker.column.type=Typ
 assetpicker.column.action=Aktion
 person.createform.title=Neue Person erstellen
 relatedinfo.attachmentlists.sort.button.label=Anhanglisten sortieren
+relatedinfo.sortattachments.errors.general=Unerwarteter Fehler. Sortieren der weiterf\u00fchrenden informationen nicht m\u00f6glich.
+relatedinfo.sortattachments.errors.save=Speichern der Sortierung fehlgeschlagen.
+relatedinfo.attachmentlists.add.button.label=Neue Anhangliste hinzuf\u00fcgen
+relatedinfo.attachmentlists.add.dialog.title=Neue Anhangliste hinzuf\u00fcgen
+relatedinfo.attachmentlists.add.dialog.close=Abbrechen
+relatedinfo.attachmentlists.add.dialog.name.help=Der Name der neuen Anhangliste. Wird nur intern genutzt.
+relatedinfo.attachmentlists.add.dialog.name.label=Name
+relatedinfo.attachmentlists.add.dialog.title.help=The title of the attachment list.
+relatedinfo.attachmentlists.add.dialog.title.label=Titel
+relatedinfo.attachmentlists.add.dialog.description.help=Eine kurze Beschreibung der Anh\u00e4nge in der Liste.
+relatedinfo.attachmentlists.add.dialog.description.label=Beschreibung
+relatedinfo.attachmentlists.add.dialog.add_list=Liste hinzuf\u00fcgen
+relatedinfo.attachmentlists.order.save=Sortierung speichern
+relatedinfo.attachmentlists.move.button=Anhangliste verschieben
+relatedinfo.attachmentlists.info.button=Info
+relatedinfo.attachmentlists.edit.button=Anhangliste bearbeiten
+relatedinfo.attachmentlists.delete.button=Anhangliste entfernen
+relatedinfo.attachments.move.button=Anhang verschieben
+relatedinfo.attachments.info.button=Info
+relatedinfo.attachments.edit.button=Anhang bearbeiten
+relatedinfo.attachments.delete.button=Anhang entfernen
+relatedinfo.attachmentlists.attachment.add.label=Anhang hinzuf\u00fcgen
+relatedinfo.attachmentlists.internal_link.add.label=Internen Link hinzuf\u00fcgen
+relatedinfo.attachmentlists.link.add.label=Link hinzuf\u00fcgen

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

@@ -62,7 +62,8 @@ function initAttachments(attachments: HTMLElement): Sortable {
 
     const listUuid = attachments.getAttribute("data-list-uuid");
     if (listUuid === null) {
-        throw Error("attachments with data-list-uuid attribute found.");
+        showGeneralError();
+        throw Error("attachments without data-list-uuid attribute found.");
     }
 
     attachmentsSortables[listUuid] = sortable;
@@ -90,12 +91,14 @@ function moveAttachment(event: SortableEvent) {
 
     const fromListUuid = event.from.getAttribute("data-list-uuid");
     if (!fromListUuid) {
+        showGeneralError();
         throw Error(
             "An attachment was moved, but the list from which the attachment was removed has no data-id attribute."
         );
     }
     const toListUuid = event.to.getAttribute("data-list-uuid");
     if (!toListUuid) {
+        showGeneralError();
         throw Error(
             "An attachment was moved, but the list to which the attachment was removed has no data-id attribute."
         );
@@ -104,6 +107,7 @@ function moveAttachment(event: SortableEvent) {
     if (fromListUuid !== toListUuid) {
         const attachmentUuid = event.item.getAttribute("data-id");
         if (!attachmentUuid) {
+            showGeneralError();
             throw Error(
                 "An attachment was moved, but the attachment was removed has no dat-id attribute."
             );
@@ -133,12 +137,68 @@ function saveOrder() {
     }
 
     console.dir(attachmentOrder);
+    const cmsAttachments = document.querySelector(".cms-attachment-lists");
+    if (!cmsAttachments) {
+        showGeneralError();
+        throw Error("cms-attachment-lists container not found.");
+    }
+    const baseUrl = cmsAttachments.getAttribute("data-baseUrl");
+    if (!baseUrl) {
+        showGeneralError();
+        throw Error(
+            "data-baseUrl attribute on cms-attachment-lists container is missing or empty."
+        );
+    }
+    const headers = new Headers();
+    headers.append("Content-Type", "application/json");
+    fetch(baseUrl, {
+        credentials: "include",
+        body: JSON.stringify(attachmentOrder),
+        headers,
+        method: "POST"
+    })
+        .then(response => {
+            if (response.ok) {
+                const saveOrderButtons =
+                    document.querySelectorAll("save-order-button");
+                for (let i = 0; i < saveOrderButtons.length; i++) {
+                    const saveOrderButton: HTMLButtonElement = saveOrderButtons[
+                        i
+                    ] as HTMLButtonElement;
+                    saveOrderButton.disabled = true;
+                }
+            } else {
+                throw Error(
+                    `Failed to save attachments order. Response status: ${response.status}, statusText: ${response.statusText}`
+                );
+            }
+        })
+        .catch(error => {
+            showSaveError();
+            throw new Error(`Failed to save attachments order: ${error}`);
+        });
+}
 
-    const saveOrderButtons = document.querySelectorAll("save-order-button");
+function showGeneralError(): void {
-    for (let i = 0; i < saveOrderButtons.length; i++) {
+    const alertTemplate = document.querySelector(
-        const saveOrderButton: HTMLButtonElement = saveOrderButtons[
+        "#cms-sort-attachments-error-general"
-            i
+    ) as HTMLTemplateElement;
-        ] as HTMLButtonElement;
+    const alert = alertTemplate.content.cloneNode(true) as Element;
-        saveOrderButton.disabled = true;
+
+    const container = document.querySelector("#messages");
+    if (container) {
+        container.appendChild(alert);
+    }
+}
+
+function showSaveError(): void {
+    const alertTemplate = document.querySelector(
+        "#cms-sort-attachments-error-save"
+    ) as HTMLTemplateElement;
+    const alert = alertTemplate.content.cloneNode(true) as Element;
+
+    const container = document.querySelector("#messages");
+    if (container) {
+        container.appendChild(alert);
     }
 }

ccm-core/package-lock.json

@@ -1572,9 +1572,9 @@
             "integrity": "sha512-vlGn0bcySYl/iV+BGA544JkkZP5LB3jsmkeKLFQakCOwCM3AOk7VkldBz4jrzSe+Z0Ezn99NVXa1o45cQY4R6A=="
         },
         "bootstrap-icons": {
-            "version": "1.0.0",
+            "version": "1.5.0",
-            "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.0.0.tgz",
+            "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz",
-            "integrity": "sha512-PaQm3VtSqbUnWuyqGmFJG5iF9UMieDuk8raPOmKOtKeyWyiVshgLoKa+9EWGolGU/nvyBLEBWhZoQqhu9ccNBg=="
+            "integrity": "sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA=="
         },
         "brace-expansion": {
             "version": "1.1.11",

ccm-core/package.json

@@ -18,7 +18,7 @@
     },
     "dependencies": {
         "bootstrap": "^4.5.2",
-        "bootstrap-icons": "^1.0.0",
+        "bootstrap-icons": "^1.5.0",
         "jquery": "^3.5.1",
         "popper.js": "^1.16.1"
     }