Integrated sortable.js

pull/10/head
Jens Pelzetter 2021-07-14 20:29:21 +02:00
parent 719d386410
commit 9b95f72c5c
9 changed files with 514 additions and 227 deletions

View File

@ -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",

View File

@ -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

View File

@ -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(

View File

@ -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: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:composition template="/WEB-INF/views/org/librecms/ui/contentsection/documents/authoringstep.xhtml">
<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,218 +81,456 @@
</div>
</div>
<div class="text-right">
<button class="btn btn-primary"
data-target="#attachmentlist-#{list.name}-add-attachment-dialog"
data-toggle="modal"
type="button">
<bootstrap:svgIcon icon="plus-circle" />
<span>#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.attachment.add.label']}</span>
</button>
<button class="btn btn-primary"
data-target="#attachmentlist-#{list.name}-add-internallink-dialog"
data-toggle="modal"
type="button">
<bootstrap:svgIcon icon="link-45deg" />
<span>#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.internal_link.add.label']}</span>
</button>
</div>
<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"
<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="x-circle" />
<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 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.
<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>
</div>
<div class="modal-footer">
<button class="btn btn-warning"
data-dismiss="modal"
</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">
#{CmsDefaultStepsMessageBundle['relatedinfo.internallink.add.dialog.close']}
<bootstrap:svgIcon icon="arrows-move" />
<span class="sr-only">#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.move.button']}"</span>
</button>
<button class="btn btn-success">
#{CmsDefaultStepsMessageBundle['relatedinfo.internallink.add.dialog.save']}
<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>
</form>
</div>
</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>
<div class="d-flex">
<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>
<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"
data-toggle="modal"
type="button">
<bootstrap:svgIcon icon="plus-circle" />
<span>#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.attachment.add.label']}</span>
</button>
<button class="btn btn-primary"
data-target="#attachmentlist-#{list.name}-add-internallink-dialog"
data-toggle="modal"
type="button">
<bootstrap:svgIcon icon="link-45deg" />
<span>#{CmsDefaultStepsMessageBundle['relatedinfo.attachmentlists.internal_link.add.label']}</span>
</button>
</div>
<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>

View File

@ -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

View File

@ -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

View File

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

View File

@ -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"
});
}

View File

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