filter drop targets

src/components/OpenwbNestedList.vue

@@ -68,7 +68,7 @@
           </span>
         </div>
         <openwb-nested-list
-          v-if="nesting && element.children && currentNestingDepth < maxNestingDepth"
+          v-if="showDropTarget(element)"
           v-model="element.children"
           :labels="labels"
           :linked-meters="linkedMeters"
@@ -154,6 +154,20 @@ export default {
         this.$emit("update:modelValue", val);
       },
     },
+    showDropTarget() {
+      return (element) => {
+        // always show the drop target if the element already has children for compatibility with previous nested lists
+        if (element.children?.length > 0) {
+          return true;
+        }
+        return (
+          this.nesting &&
+          element.children &&
+          this.currentNestingDepth < this.maxNestingDepth &&
+          ["group", "counter", "inverter"].includes(element.type)
+        );
+      };
+    },
     // nested lists inherit the name from their root, so items move within one list only
     resolvedGroupName() {
       return this.groupName ?? this.ownGroupName;
@@ -170,10 +184,25 @@ export default {
         name: this.resolvedGroupName,
         pull: true,
         put: (to, from, dragEl) => {
-          if (to.options.group.name !== from.options.group.name) return false;
+          // Prevent dragging items between different top-level groups
+          if (to.options.group.name !== from.options.group.name) {
+            return false;
+          }
           const draggedItem = dragEl?.__draggable_context?.element;
-          if (!draggedItem) return true;
-          return draggedItem.type !== "group";
+          if (!draggedItem) {
+            return true;
+          }
+          const targetItem = to.el.parentElement?.__draggable_context?.element;
+          if (["cp", "consumer", "bat", "vehicle"].includes(targetItem?.type)) {
+            return false;
+          }
+          if (targetItem?.type === "inverter") {
+            return draggedItem?.type === "bat";
+          }
+          if (draggedItem.type === "group") {
+            return false;
+          }
+          return true;
         },
       };
     },
@@ -238,14 +267,12 @@ export default {
 
       this.editingGroupId = element.id;
       this.editingValue = element.label;
-
       this.$nextTick(() => {
         const input = this.$el.querySelector(".group-rename-input");
         input?.focus();
         input?.select();
       });
     },
-
     finishEditing(groupId) {
       if (!this.editingValue.trim()) {
         this.editingGroupId = null;
@@ -266,7 +293,7 @@ export default {
   min-height: 40px;
   color: #e9ecef;
   list-style-type: none;
-  border: 1px solid #ced4da;
+  border: 1px solid var(--dark);
   border-radius: 3px;
   padding: 0px;
 }
@@ -302,6 +329,8 @@ export default {
   justify-content: space-between;
   padding: 7px;
   background: var(--info);
+  border: 1px solid var(--dark);
+  border-radius: 3px;
 }
 
 .element-titel.counter {