Learn: drag & drop sections and articles on chapter and section pages

web/src/main/resources/templates/learn/section.html

@@ -2,7 +2,7 @@
 <html lang="ru" xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/base :: layout(~{::title}, ~{::#content})}">
 <head><title th:text="${section.title} + ' — LMS'">Раздел</title></head>
 <body>
-<div id="content">
+<div id="content" th:attr="data-csrf=${csrfToken},data-sort-scope='section',data-section-id=${section.id}">
     <nav class="text-sm mb-4 breadcrumb">
         <a th:href="@{/learn}" class="nav-link">Материалы</a>
         <span class="nav-sep">/</span>
@@ -37,12 +37,22 @@
         </form>
     </div>
 
+    <div th:if="${currentUser != null and currentUser.admin}" class="card card-body text-sm text-muted mb-4">
+        Перетаскивайте статьи за значок ⠿, чтобы менять их порядок. Порядок сохраняется сразу.
+    </div>
+    <div th:if="${currentUser != null and currentUser.admin}" id="sort-status" class="sort-status" hidden>
+        <span id="sort-status-text">Изменения не сохранены…</span>
+    </div>
+
     <div class="card card-flush">
         <table>
             <thead><tr><th>Статья</th><th class="th-w-md" data-nosort>Действия</th></tr></thead>
-            <tbody>
-            <tr th:each="article : ${section.articles}">
+            <tbody data-article-list>
+            <tr th:each="article : ${section.articles}" th:attr="data-article-id=${article.id}">
                 <td>
+                    <span th:if="${currentUser != null and currentUser.admin}" class="drag-handle" draggable="true"
+                          th:attr="data-drag-kind='article',data-drag-id=${article.id}"
+                          title="Перетащите, чтобы изменить порядок статей">⠿</span>
                     <a th:href="@{/learn/{c}/{s}/{a}(c=${chapter.slug}, s=${section.slug}, a=${article.slug})}"
                        th:text="${article.title}">—</a>
                     <span th:if="${!article.published}" class="badge badge-warn ml-1">скрыто</span>
@@ -125,7 +135,7 @@
                     <div th:replace="~{fragments/md-toolbar :: toolbar('#naBody')}"></div>
                     <textarea class="input md-editor-body" id="naBody" name="bodyMd" rows="18"></textarea></div>
                 <p class="hint">
-                    Картинка: <code class="code">:::figure assets/имя.svg | Рис. 1. Подпись</code>;
+                    Картинка: <code class="code">:::figure assets/имя.png | Рис. 1. Подпись</code>;
                     видео: <code class="code">:::video assets/имя.mp4 | Подпись</code>;
                     спойлер: <code class="code">:::spoiler Решение … :::</code>.
                 </p>
@@ -133,6 +143,8 @@
             </form>
         </div>
     </dialog>
+
+    <script src="/js/content-sort.js" defer></script>
 </div>
 </body>
 </html>