feat: added group option to custom draggable

frontend/src/components/AdvancedTable.vue

@@ -1531,7 +1531,10 @@ watch(selectedRows, (newSelectedRows, oldSelectedRows) => {
 								<draggable
 									v-model:list="orderedColumns"
 									item-key="name"
-									:options="columnDragOptions"
+									:options="{
+										...columnDragOptions,
+										group: 'dropdown-columns'
+									}"
 									@update="columnOrderChanged"
 									:attributes="{
 										class: column => ({

frontend/src/components/Draggable.vue

@@ -10,6 +10,7 @@ const props = defineProps({
 	options: { type: Object, default: () => ({}) },
 	tag: { type: String, default: "div" },
 	class: { type: String, default: "" },
+	group: { type: String, default: "" },
 	disabled: { type: [Boolean, Function], default: false }
 });
 
@@ -21,6 +22,16 @@ onMounted(() => {
 
 const emit = defineEmits(["update:list", "start", "end", "update"]);
 
+const itemOnMove = index => {
+	// Deletes the remove function for the dragging element
+	delete window.draggingItem.itemOnMove;
+	// Remove the item from the current list and return it
+	const list = props.list.slice();
+	const listItem = list.splice(index, 1)[0];
+	emit("update:list", list);
+	return listItem;
+};
+
 // When an element starts being dragged
 const onDragStart = (itemIndex: number, event: DragEvent) => {
 	const { draggable } = event.target;
@@ -34,14 +45,11 @@ const onDragStart = (itemIndex: number, event: DragEvent) => {
 	event.dataTransfer.dropEffect = "move";
 
 	// Sets the dragging element index, list name and adds a remove function for when this item is moved to a different list
-	window.draggingItemIndex = itemIndex;
-	window.draggingItemListName = props.name;
-	window.draggingItemOnMove = index => {
-		delete window.draggingItemOnMove;
-		const list = props.list.slice();
-		const listItem = list.splice(index, 1)[0];
-		emit("update:list", list);
-		return listItem;
+	window.draggingItem = {
+		itemIndex,
+		itemListName: props.name,
+		itemGroup: props.options.group,
+		itemOnMove
 	};
 
 	// Emits the start event to the parent component, indicating that dragging has started
@@ -60,8 +68,8 @@ const onDragOver = (itemIndex: number, event: DragEvent) => {
 	if (props.disabled === true || !draggable) return;
 
 	// The index and list name of the item that is being dragged, stored in window since it can come from another list as well
-	const fromIndex = window.draggingItemIndex;
-	const fromList = window.draggingItemListName;
+	const fromIndex = window.draggingItem.itemIndex;
+	const fromList = window.draggingItem.itemListName;
 	// The new index and list name of the item that is being dragged
 	const toIndex = itemIndex;
 	const toList = props.name;
@@ -69,24 +77,20 @@ const onDragOver = (itemIndex: number, event: DragEvent) => {
 	// If the item hasn't changed position in the same list, don't continue
 	if (fromIndex === toIndex && fromList === toList) return;
 
+	// If the dragging item isn't from the same group, don't continue
+	if (window.draggingItem.itemGroup !== props.options.group) return;
+
 	// Update the index and list name of the dragged item
-	window.draggingItemIndex = toIndex;
-	window.draggingItemListName = props.name;
+	window.draggingItem.itemIndex = toIndex;
+	window.draggingItem.itemListName = props.name;
 
 	// If the item comes from another list
 	if (toList !== fromList) {
 		// Call the remove function from the dragging element, which removes the item from the previous list and returns it
-		const item = window.draggingItemOnMove(fromIndex);
+		const item = window.draggingItem.itemOnMove(fromIndex);
 		// Define a new remove function for the dragging element
-		window.draggingItemOnMove = index => {
-			// Deletes the remove function for the dragging element
-			delete window.draggingItemOnMove;
-			// Remove the item from the current list and return it
-			const list = props.list.slice();
-			const listItem = list.splice(index, 1)[0];
-			emit("update:list", list);
-			return listItem;
-		};
+		window.draggingItem.itemOnMove = itemOnMove;
+		window.draggingItem.itemGroup = props.options.group;
 		// Add the item to the list at the new index
 		const list = props.list.slice();
 		list.splice(toIndex, 0, item);
@@ -120,10 +124,10 @@ const convertAttributes = item =>
 		])
 	);
 
-function hasSlotContent(slot: Slot | undefined, slotProps = {}): boolean {
+const hasSlotContent = (slot, slotProps = {}) => {
 	if (!slot) return false;
 
-	return slot(slotProps).some((vnode: VNode) => {
+	return slot(slotProps).some(vnode => {
 		if (
 			vnode.type === Comment ||
 			vnode.type.toString() === "Symbol(Comment)"
@@ -135,11 +139,11 @@ function hasSlotContent(slot: Slot | undefined, slotProps = {}): boolean {
 
 		return (
 			vnode.type !== Text ||
-			vnode.type.toString() === "Symbol(Text)" ||
+			vnode.type.toString() !== "Symbol(Text)" ||
 			(typeof vnode.children === "string" && vnode.children.trim() !== "")
 		);
 	});
-}
+};
 </script>
 
 <template>