refact: @select passes around only iDs

Author: distantnative

panel/src/components/Collection/Collection.vue

@@ -25,7 +25,6 @@
 			@item="$emit('item', $event)"
 			@option="onOption"
 			@select="onSelect"
-			@selected="onSelected"
 			@sort="$emit('sort', $event)"
 		>
 			<template v-if="$slots.options" #options="{ item, index }">
@@ -147,9 +146,6 @@ export default {
 		},
 		onSelect(...args) {
 			this.$emit("select", ...args);
-		},
-		onSelected(...args) {
-			this.$emit("selected", ...args);
 		}
 	}
 };

panel/src/components/Collection/Items.vue

@@ -6,7 +6,7 @@
 		:class="$attrs.class"
 		:style="$attrs.style"
 		@change="$emit('change', $event)"
-		@select="onSelect"
+		@select="$emit('select', $event)"
 		@sort="$emit('sort', $event)"
 		@option="onOption"
 	>
@@ -48,7 +48,7 @@
 					@drag="onDragStart($event, item.dragText)"
 					@mouseover="$emit('hover', $event, item, itemIndex)"
 					@option="onOption($event, item, itemIndex)"
-					@select="onSelect(item, itemIndex)"
+					@select="onSelect(item)"
 				>
 					<template v-if="$slots.options" #options>
 						<slot name="options" v-bind="{ item, index: itemIndex }" />
@@ -62,28 +62,6 @@
 <script>
 import { layout } from "@/mixins/props.js";
 
-export function findSelectedIndex(items, item) {
-	return items.findIndex((selected) =>
-		Object.hasOwn(selected, "_id")
-			? selected._id === item._id
-			: selected.id === item.id
-	);
-}
-
-export function updateSelection(items, item, mode = "multiple") {
-	if (mode === "single") {
-		return [item];
-	}
-
-	const index = findSelectedIndex(items, item);
-
-	if (index !== -1) {
-		return items.toSpliced(index, 1);
-	}
-
-	return [...items, item];
-}
-
 /**
  * Collection items that can be displayed in various layouts
  */
@@ -173,7 +151,7 @@ export default {
 			default: () => ({})
 		}
 	},
-	emits: ["change", "hover", "item", "option", "select", "selected", "sort"],
+	emits: ["change", "hover", "item", "option", "select", "sort"],
 	computed: {
 		dragOptions() {
 			return {
@@ -205,24 +183,32 @@ export default {
 		}
 	},
 	methods: {
+		findSelectedIndex(item) {
+			return this.selected.findIndex(
+				(selected) => selected === item._id ?? item.id
+			);
+		},
 		isSelected(item) {
-			return findSelectedIndex(this.selected, item) !== -1;
+			return this.findSelectedIndex(item) !== -1;
 		},
 		onDragStart($event, dragText) {
 			this.$panel.drag.start("text", dragText);
 		},
 		onOption(option, item, itemIndex) {
 			this.$emit("option", option, item, itemIndex);
 		},
-		onSelect(item, itemIndex) {
-			this.$emit("select", item, itemIndex);
-			this.onSelected(item);
-		},
-		onSelected(item) {
-			this.$emit(
-				"selected",
-				updateSelection(this.selected, item, this.selectmode)
-			);
+		onSelect(item) {
+			if (this.selectmode === "single") {
+				this.$emit("select", [item._id ?? item.id]);
+			}
+
+			const index = this.findSelectedIndex(item);
+
+			if (index !== -1) {
+				return this.selected.toSpliced(index, 1);
+			}
+
+			return this.$emit("select", [...this.selected, item._id ?? item.id]);
 		},
 		imageOptions(item) {
 			let globalOptions = this.image;

panel/src/components/Forms/Field/StructureField.vue

@@ -561,7 +561,9 @@ export default {
 		},
 
 		removeSelected() {
-			this.items = this.items.filter((item) => !this.selected.includes(item));
+			this.items = this.items.filter(
+				(item) => this.selected.includes(item._id) === false
+			);
 			this.save();
 		},
 

panel/src/components/Layout/Table.vue

@@ -145,7 +145,7 @@
 										:disabled="row.selectable === false"
 										:type="selectmode === 'single' ? 'radio' : 'checkbox'"
 										:checked="isSelected(row)"
-										@change="$emit('select', row, rowIndex)"
+										@change="onSelect(row)"
 									/>
 								</label>
 							</template>
@@ -174,8 +174,6 @@
 </template>
 
 <script>
-import { findSelectedIndex } from "@/components/Collection/Items.vue";
-
 /**
  * A simple table component with columns and rows
  */
@@ -334,6 +332,11 @@ export default {
 		}
 	},
 	methods: {
+		findSelectedIndex(row) {
+			return this.selected.findIndex(
+				(selected) => selected === row._id ?? row.id
+			);
+		},
 		/**
 		 * Checks if specific column is fully empty
 		 * @param {number} columnIndex
@@ -347,7 +350,7 @@ export default {
 			);
 		},
 		isSelected(row) {
-			return findSelectedIndex(this.selected, row) !== -1;
+			return this.findSelectedIndex(row) !== -1;
 		},
 		/**
 		 * Returns label for a column
@@ -396,6 +399,19 @@ export default {
 		onOption(option, row, rowIndex) {
 			this.$emit("option", option, row, rowIndex);
 		},
+		onSelect(row) {
+			if (this.selectmode === "single") {
+				this.$emit("select", [row._id ?? row.id]);
+			}
+
+			const index = this.findSelectedIndex(row);
+
+			if (index !== -1) {
+				return this.selected.toSpliced(index, 1);
+			}
+
+			return this.$emit("select", [...this.selected, row._id ?? row.id]);
+		},
 		/**
 		 * When the table has been sorted,
 		 * emit all items in new order

panel/src/components/Sections/ModelsSection.vue

@@ -229,7 +229,7 @@ export default {
 				await this.$api.delete(
 					this.parent + "/sections/" + this.name + "/delete",
 					{
-						ids: this.selected.map((item) => item.id)
+						ids: this.selected
 					}
 				);
 			} catch (error) {

panel/src/mixins/batchEditing.js

@@ -1,5 +1,3 @@
-import { updateSelection } from "@/components/Collection/Items.vue";
-
 /**
  * The Batch Editing mixin is intended for all components
  * that want to introduce batch editing capabilities. It provides the
@@ -82,8 +80,8 @@ export default {
 		onBatchDelete() {
 			throw new Error("Not implemented");
 		},
-		onSelect(item) {
-			this.selected = updateSelection(this.selected, item);
+		onSelect(ids) {
+			this.selected = ids;
 		},
 		onSelectToggle() {
 			this.isSelecting ? this.stopSelecting() : this.startSelecting();