internal: rework meeting agenda table using ember-sortable

lblod · Jan 31, 2025 · 36977a5 · 36977a5
1 parent 3f9fbdb
commit 36977a5
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 105 deletions.
diff --git a/.changeset/early-snails-cheat.md b/.changeset/early-snails-cheat.md
@@ -0,0 +1,5 @@
+---
+'frontend-gelinkt-notuleren': patch
+---
+
+Rework meeting agenda table using `ember-sortable` package
diff --git a/app/components/agenda-manager/agenda-context.js b/app/components/agenda-manager/agenda-context.js
@@ -151,7 +151,8 @@ export default class AgendaManagerAgendaContextComponent extends Component {
    * Handles a rearrangement of the this.items array
    * Takes the array index as source of truth.
    */
-  onSortTask = task(async () => {
+  onSortTask = task(async (items) => {
+    this.items = tracked(items);
     await this.repairPositionsTask.unlinked().perform();
     await this.saveItemsTask.unlinked().perform();
   });

diff --git a/app/components/agenda-manager/agenda-table/body.hbs b/app/components/agenda-manager/agenda-table/body.hbs
@@ -1,15 +1,8 @@
-<SortableObjects
-  @tagName='tbody'
-  @sortEndAction={{@onSort}}
-  @sortableObjectList={{@items}}
-  @enableSort={{true}}
-  @useSwap={{true}}
-  @inPlace={{true}}
->
+<tbody {{sortable-group onChange=@onSort}}>
   {{yield
     (hash
       Row=(component 'agenda-manager/agenda-table/row' readOnly=@readOnly)
       Empty=(component 'agenda-manager/agenda-table/empty' onCreate=@onCreate)
     )
   }}
-</SortableObjects>
+</tbody>
diff --git a/app/components/agenda-manager/agenda-table/header.hbs b/app/components/agenda-manager/agenda-table/header.hbs
@@ -6,10 +6,5 @@
         'manage-agenda-zitting-modal.title-label'
       }}</th>
     <th>{{t 'manage-agenda-zitting-modal.gepland-openbaar'}}</th>
-    <th class='au-u-table-right'>
-      <span class='au-u-hidden-visually'>{{t
-          'manage-agenda-zitting-modal.actions-label'
-        }}</span>
-    </th>
   </tr>
 </thead>
diff --git a/app/components/agenda-manager/agenda-table/row.hbs b/app/components/agenda-manager/agenda-table/row.hbs
@@ -22,12 +22,12 @@
     </td>
   </tr>
 {{else}}
-  <DraggableObject @tagName='tr' @content={{@item}} @isSortable={{true}}>
+  <tr {{sortable-item model=@item}}>
     <td>
-      <AuButton @skin='link' class='au-c-button--drag'>
-        <AuIcon @icon='drag' class='au-u-hide-on-print' />
+      <span class='drag-handle' {{sortable-handle}}>
+        <AuIcon @icon='drag' class='au-u-hide-on-print drag-handle__icon' />
         {{add @item.position 1}}
-      </AuButton>
+      </span>
     </td>
     <td>
       <AuButton
@@ -45,5 +45,5 @@
         (t 'manage-agenda-zitting-modal.gepland-openbaar-false-label')
       }}
     </td>
-  </DraggableObject>
+  </tr>
 {{/if}}
diff --git a/app/styles/_shame.scss b/app/styles/_shame.scss
@@ -40,18 +40,6 @@ body {
   padding-bottom: $au-unit-tiny;
 }
 
-// Drag button
-.au-c-button--drag {
-  cursor: grab;
-  text-decoration: none;
-
-  .au-c-icon {
-    width: 1.75rem;
-    height: 1.75rem;
-    bottom: 0;
-  }
-}
-
 // Data table quick fix
 // @TODO port to appuniversum
 .au-c-data-table__header th {

diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -28,6 +28,7 @@
 @import 'project/c-template';
 @import 'project/c-environment-banner';
 @import 'project/c-inauguration-meeting-synchronization';
+@import 'project/c-sortable';
 
 // PLUGINS
 @import 'ember-rdfa-editor';

diff --git a/app/styles/project/_c-meeting-chrome.scss b/app/styles/project/_c-meeting-chrome.scss
@@ -273,7 +273,7 @@
   position: relative;
   min-width: 50rem;
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
   margin-bottom: -0.1rem;
 
   strong {
@@ -291,9 +291,9 @@
     @include au-font-size($au-base, 1.2);
   }
 
-  tbody tr {
-    border-bottom: 0.1rem solid $au-gray-300;
+  tr {
     background-color: $au-gray-100;
+    position: relative;
   }
 
   th {
@@ -313,6 +313,7 @@
 
   th,
   td {
+    border-bottom: 0.1rem solid $au-gray-300;
     max-width: 55ch;
     position: relative;
     vertical-align: middle;

diff --git a/app/styles/project/_c-sortable.scss b/app/styles/project/_c-sortable.scss
@@ -0,0 +1,23 @@
+tr.sortable-item {
+  transition: all 0.125s;
+}
+
+tr.sortable-item.is-dragging {
+  transition-duration: 0s;
+  z-index: 10;
+}
+
+.drag-handle {
+  cursor: grab;
+  color: var(--au-blue-700);
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0 0.6rem;
+}
+
+.drag-handle__icon {
+  width: 1.75rem;
+  height: 1.75rem;
+}