@projectcaluma/ember-analytics 11.1.0 → 11.1.1

package/addon/components/ca-field-selector-list.hbs

@@ -1,8 +1,4 @@
-<table
-  class="uk-table uk-table-divider uk-table-hover"
-  uk-overflow-auto
-  {{did-insert this.setupUIkit}}
->
+<table class="uk-table uk-table-divider uk-table-hover uk-overflow-auto">
   <thead>
     <tr>
       <th></th>
@@ -18,20 +14,19 @@
   </thead>
   <tbody
     data-test-field-list
-    uk-sortable="handle: .uk-sortable-handle;"
     class="uk-list"
     id="field-list"
+    {{sortable-group onChange=(perform this.reorderFields)}}
   >
     {{#each this.fields as |field|}}
       {{#let (fn this.updateField field) as |update|}}
-        <tr id={{field.id}}>
-          <td>
-            <span
-              data-test-sort-handle
-              uk-icon="menu"
-              class="uk-sortable-handle"
-              role="button"
-            ></span>
+        <tr
+          id={{field.id}}
+          class="uk-position-relative"
+          {{sortable-item model=field}}
+        >
+          <td data-test-sort-handle {{sortable-handle}}>
+            <span uk-icon="menu" role="button" class="uk-drag"></span>
           </td>
           <td>
             {{field.dataSource}}

package/addon/components/ca-field-selector-list.js

@@ -1,10 +1,9 @@
 import { action } from "@ember/object";
-import { run } from "@ember/runloop";
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 import { queryManager, getObservable } from "ember-apollo-client";
 import { enqueueTask, restartableTask } from "ember-concurrency";
-import UIkit from "uikit";
 
 import removeAnalyticsFieldMutation from "@projectcaluma/ember-analytics/gql/mutations/remove-analytics-field.graphql";
 import reorderAnalyticsFieldsMutation from "@projectcaluma/ember-analytics/gql/mutations/reorder-analytics-fields.graphql";
@@ -16,10 +15,13 @@ export default class CaFieldSelectorListComponent extends Component {
   @service intl;
 
   @enqueueTask saveField = saveAnalyticsField;
+  @tracked _fields;
 
   get fields() {
     return (
-      this.args.analyticsTable?.fields?.edges?.map((edge) => edge.node) ?? []
+      this._fields ??
+      this.args.analyticsTable?.fields?.edges?.map((edge) => edge.node) ??
+      []
     );
   }
 
@@ -57,13 +59,14 @@ export default class CaFieldSelectorListComponent extends Component {
 
   @restartableTask
   *reorderFields(fields) {
+    this._fields = fields;
     try {
       yield this.apollo.mutate({
         mutation: reorderAnalyticsFieldsMutation,
         variables: {
           input: {
             table: this.args.analyticsTable.id,
-            fields,
+            fields: fields.map((field) => field.id),
           },
         },
       });
@@ -71,23 +74,11 @@ export default class CaFieldSelectorListComponent extends Component {
       this.notification.success(
         this.intl.t("caluma.analytics.notification.reorder-success")
       );
+      this._fields = null;
     } catch (e) {
       this.notification.danger(
         this.intl.t("caluma.analytics.notification.reorder-error")
       );
     }
   }
-
-  _handleMoved({ detail: [sortable] }) {
-    const options = [...sortable.$el.children];
-
-    this.reorderFields.perform(options.map((option) => option.id));
-  }
-
-  @action
-  setupUIkit() {
-    UIkit.util.on("#field-list", "moved", (...args) =>
-      run(this, this._handleMoved, ...args)
-    );
-  }
 }

package/addon/components/ca-filter-modal.hbs

@@ -32,8 +32,7 @@
 
     <UkList
       @divider="true"
-      class="uk-padding-small uk-padding-remove-left"
-      uk-overflow-auto
+      class="uk-padding-small uk-padding-remove-left uk-overflow-auto"
       as |List|
     >
       {{#each this.filters as |filter|}}

package/app/styles/@projectcaluma/ember-analytics.scss

@@ -1 +1,6 @@
 @import "../ca-uikit-powerselect";
+
+.sortable-item.is-dropping,
+.sortable-item.is-dragging {
+  z-index: 10;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-analytics",
-  "version": "11.1.0",
+  "version": "11.1.1",
   "description": "Ember addon for Caluma analytics.",
   "keywords": [
     "ember-addon",
@@ -18,7 +18,7 @@
     "@ember/legacy-built-in-components": "^0.4.1",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@projectcaluma/ember-core": "^11.1.0",
+    "@projectcaluma/ember-core": "^11.1.1",
     "ember-apollo-client": "^4.0.2",
     "ember-auto-import": "^2.6.1",
     "ember-changeset": "^4.1.2",
@@ -32,6 +32,7 @@
     "ember-intl": "^5.7.0",
     "ember-power-select": "6.0.1",
     "ember-resources": "^5.6.2",
+    "ember-sortable": "^5.0.0",
     "ember-uikit": "^6.1.1",
     "ember-validated-form": "^6.2.0",
     "graphql": "^15.6.1"
@@ -47,7 +48,7 @@
     "@ember/test-helpers": "2.7.0",
     "@embroider/test-setup": "2.1.1",
     "@faker-js/faker": "7.6.0",
-    "@projectcaluma/ember-testing": "11.1.0",
+    "@projectcaluma/ember-testing": "11.1.1",
     "broccoli-asset-rev": "3.0.0",
     "concurrently": "7.6.0",
     "ember-cli": "4.9.2",
@@ -70,7 +71,7 @@
     "qunit": "2.19.4",
     "qunit-dom": "2.0.0",
     "sass": "1.58.3",
-    "webpack": "5.75.0"
+    "webpack": "5.76.2"
   },
   "peerDependency": {
     "ember-engines": ">= 0.8"