Skip to content

Commit 598f09c

Browse files
distantnativedistantnative
committed
refact: @select passes around only iDs
1 parent e9b1c23 commit 598f09c

File tree

10 files changed

+69
-76
lines changed

10 files changed

+69
-76
lines changed

‎panel/lab/components/items/1_list/index.vue

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,22 @@
1010
<k-items
1111
:items="selectableItems"
1212
:selecting="true"
13-
@selected="selected = $event"
13+
:selected="selected"
14+
@select="selected = $event"
1415
/>
1516
<br />
16-
<k-code>Selected: {{ selectedIds }}</k-code>
17+
<k-code>Selected: {{ selected.join(", ") }}</k-code>
1718
</k-lab-example>
18-
<k-lab-example label="Selected">
19+
<k-lab-example label="Selectable: single">
1920
<k-items
2021
:items="selectableItems"
2122
:selecting="true"
2223
selectmode="single"
2324
:selected="selected"
24-
@selected="selected = $event"
25+
@select="selected = $event"
2526
/>
2627
<br />
27-
<k-code>Selected: {{ selectedIds }}</k-code>
28+
<k-code>Selected: {{ selected.join(", ") }}</k-code>
2829
</k-lab-example>
2930
</k-lab-examples>
3031
</template>
@@ -47,9 +48,6 @@ export default {
4748
selectable: true
4849
};
4950
});
50-
},
51-
selectedIds() {
52-
return this.selected.map((item) => item.id).join(", ");
5351
}
5452
}
5553
};

‎panel/lab/components/items/2_cards/index.vue

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,24 @@
1010
<k-items
1111
:items="selectableItems"
1212
:selecting="true"
13+
:selected="selected"
1314
layout="cards"
14-
@selected="selected = $event"
15+
@select="selected = $event"
1516
/>
1617
<br />
1718
<k-code>Selected: {{ selectedIds }}</k-code>
1819
</k-lab-example>
19-
<k-lab-example label="Selected">
20+
<k-lab-example label="Selectable: single">
2021
<k-items
2122
:items="selectableItems"
2223
:selecting="true"
2324
selectmode="single"
2425
:selected="selected"
2526
layout="cards"
26-
@selected="selected = $event"
27+
@select="selected = $event"
2728
/>
2829
<br />
29-
<k-code>Selected: {{ selectedIds }}</k-code>
30+
<k-code>Selected: {{ selected.join(", ") }}</k-code>
3031
</k-lab-example>
3132
</k-lab-examples>
3233
</template>
@@ -49,9 +50,6 @@ export default {
4950
selectable: true
5051
};
5152
});
52-
},
53-
selectedIds() {
54-
return this.selected.map((item) => item.id).join(", ");
5553
}
5654
}
5755
};

‎panel/lab/components/items/3_cardlets/index.vue

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@
1010
<k-items
1111
:items="selectableItems"
1212
:selecting="true"
13+
:selected="selected"
1314
layout="cardlets"
14-
@selected="selected = $event"
15+
@select="selected = $event"
1516
/>
1617
<br />
17-
<k-code>Selected: {{ selectedIds }}</k-code>
18+
<k-code>Selected: {{ selected.join(", ") }}</k-code>
1819
</k-lab-example>
1920
<k-lab-example label="Selected">
2021
<k-items
@@ -23,10 +24,10 @@
2324
selectmode="single"
2425
:selected="selected"
2526
layout="cardlets"
26-
@selected="selected = $event"
27+
@select="selected = $event"
2728
/>
2829
<br />
29-
<k-code>Selected: {{ selectedIds }}</k-code>
30+
<k-code>Selected: {{ selected.join(", ") }}</k-code>
3031
</k-lab-example>
3132
</k-lab-examples>
3233
</template>
@@ -49,9 +50,6 @@ export default {
4950
selectable: true
5051
};
5152
});
52-
},
53-
selectedIds() {
54-
return this.selected.map((item) => item.id).join(", ");
5553
}
5654
}
5755
};

‎panel/lab/components/items/4_table/index.vue

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,25 @@
1313
:columns="columns"
1414
:items="selectableItems"
1515
:selecting="true"
16+
:selected="selected"
1617
layout="table"
17-
@selected="selected = $event"
18+
@select="selected = $event"
1819
/>
1920
<br />
20-
<k-code>Selected: {{ selectedIds }}</k-code>
21+
<k-code>Selected: {{ selected.join(", ") }}</k-code>
2122
</k-lab-example>
22-
<k-lab-example label="Selected">
23+
<k-lab-example label="Selectable: single">
2324
<k-items
2425
:columns="columns"
2526
:items="selectableItems"
2627
:selecting="true"
2728
selectmode="single"
2829
:selected="selected"
2930
layout="table"
30-
@selected="selected = $event"
31+
@select="selected = $event"
3132
/>
3233
<br />
33-
<k-code>Selected: {{ selectedIds }}</k-code>
34+
<k-code>Selected: {{ selected.join(", ") }}</k-code>
3435
</k-lab-example>
3536
</k-lab-examples>
3637
</template>

‎panel/src/components/Collection/Collection.vue

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
@item="$emit('item', $event)"
2626
@option="onOption"
2727
@select="onSelect"
28-
@selected="onSelected"
2928
@sort="$emit('sort', $event)"
3029
>
3130
<template v-if="$slots.options" #options="{ item, index }">
@@ -147,9 +146,6 @@ export default {
147146
},
148147
onSelect(...args) {
149148
this.$emit("select", ...args);
150-
},
151-
onSelected(...args) {
152-
this.$emit("selected", ...args);
153149
}
154150
}
155151
};

‎panel/src/components/Collection/Items.vue

Lines changed: 21 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
:class="$attrs.class"
77
:style="$attrs.style"
88
@change="$emit('change', $event)"
9-
@select="onSelect"
9+
@select="$emit('select', $event)"
1010
@sort="$emit('sort', $event)"
1111
@option="onOption"
1212
>
@@ -48,7 +48,7 @@
4848
@drag="onDragStart($event, item.dragText)"
4949
@mouseover="$emit('hover', $event, item, itemIndex)"
5050
@option="onOption($event, item, itemIndex)"
51-
@select="onSelect(item, itemIndex)"
51+
@select="onSelect(item)"
5252
>
5353
<template v-if="$slots.options" #options>
5454
<slot name="options" v-bind="{ item, index: itemIndex }" />
@@ -62,28 +62,6 @@
6262
<script>
6363
import { layout } from "@/mixins/props.js";
6464
65-
export function findSelectedIndex(items, item) {
66-
return items.findIndex((selected) =>
67-
Object.hasOwn(selected, "_id")
68-
? selected._id === item._id
69-
: selected.id === item.id
70-
);
71-
}
72-
73-
export function updateSelection(items, item, mode = "multiple") {
74-
if (mode === "single") {
75-
return [item];
76-
}
77-
78-
const index = findSelectedIndex(items, item);
79-
80-
if (index !== -1) {
81-
return items.toSpliced(index, 1);
82-
}
83-
84-
return [...items, item];
85-
}
86-
8765
/**
8866
* Collection items that can be displayed in various layouts
8967
*/
@@ -173,7 +151,7 @@ export default {
173151
default: () => ({})
174152
}
175153
},
176-
emits: ["change", "hover", "item", "option", "select", "selected", "sort"],
154+
emits: ["change", "hover", "item", "option", "select", "sort"],
177155
computed: {
178156
dragOptions() {
179157
return {
@@ -205,24 +183,32 @@ export default {
205183
}
206184
},
207185
methods: {
186+
findSelectedIndex(item) {
187+
return this.selected.findIndex(
188+
(selected) => selected === (item._id ?? item.id)
189+
);
190+
},
208191
isSelected(item) {
209-
return findSelectedIndex(this.selected, item) !== -1;
192+
return this.findSelectedIndex(item) !== -1;
210193
},
211194
onDragStart($event, dragText) {
212195
this.$panel.drag.start("text", dragText);
213196
},
214197
onOption(option, item, itemIndex) {
215198
this.$emit("option", option, item, itemIndex);
216199
},
217-
onSelect(item, itemIndex) {
218-
this.$emit("select", item, itemIndex);
219-
this.onSelected(item);
220-
},
221-
onSelected(item) {
222-
this.$emit(
223-
"selected",
224-
updateSelection(this.selected, item, this.selectmode)
225-
);
200+
onSelect(item) {
201+
if (this.selectmode === "single") {
202+
return this.$emit("select", [item._id ?? item.id]);
203+
}
204+
205+
const index = this.findSelectedIndex(item);
206+
207+
if (index !== -1) {
208+
return this.selected.toSpliced(index, 1);
209+
}
210+
211+
return this.$emit("select", [...this.selected, item._id ?? item.id]);
226212
},
227213
imageOptions(item) {
228214
let globalOptions = this.image;

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -561,7 +561,9 @@ export default {
561561
},
562562
563563
removeSelected() {
564-
this.items = this.items.filter((item) => !this.selected.includes(item));
564+
this.items = this.items.filter(
565+
(item) => this.selected.includes(item._id) === false
566+
);
565567
this.save();
566568
},
567569

‎panel/src/components/Layout/Table.vue

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@
145145
:disabled="row.selectable === false"
146146
:type="selectmode === 'single' ? 'radio' : 'checkbox'"
147147
:checked="isSelected(row)"
148-
@change="$emit('select', row, rowIndex)"
148+
@change="onSelect(row)"
149149
/>
150150
</label>
151151
</template>
@@ -174,8 +174,6 @@
174174
</template>
175175

176176
<script>
177-
import { findSelectedIndex } from "@/components/Collection/Items.vue";
178-
179177
/**
180178
* A simple table component with columns and rows
181179
*/
@@ -334,6 +332,11 @@ export default {
334332
}
335333
},
336334
methods: {
335+
findSelectedIndex(row) {
336+
return this.selected.findIndex(
337+
(selected) => selected === (row._id ?? row.id)
338+
);
339+
},
337340
/**
338341
* Checks if specific column is fully empty
339342
* @param {number} columnIndex
@@ -347,7 +350,7 @@ export default {
347350
);
348351
},
349352
isSelected(row) {
350-
return findSelectedIndex(this.selected, row) !== -1;
353+
return this.findSelectedIndex(row) !== -1;
351354
},
352355
/**
353356
* Returns label for a column
@@ -396,6 +399,19 @@ export default {
396399
onOption(option, row, rowIndex) {
397400
this.$emit("option", option, row, rowIndex);
398401
},
402+
onSelect(row) {
403+
if (this.selectmode === "single") {
404+
return this.$emit("select", [row._id ?? row.id]);
405+
}
406+
407+
const index = this.findSelectedIndex(row);
408+
409+
if (index !== -1) {
410+
return this.selected.toSpliced(index, 1);
411+
}
412+
413+
return this.$emit("select", [...this.selected, row._id ?? row.id]);
414+
},
399415
/**
400416
* When the table has been sorted,
401417
* emit all items in new order

‎panel/src/components/Sections/ModelsSection.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@ export default {
229229
await this.$api.delete(
230230
this.parent + "/sections/" + this.name + "/delete",
231231
{
232-
ids: this.selected.map((item) => item.id)
232+
ids: this.selected
233233
}
234234
);
235235
} catch (error) {

‎panel/src/mixins/batchEditing.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { updateSelection } from "@/components/Collection/Items.vue";
2-
31
/**
42
* The Batch Editing mixin is intended for all components
53
* that want to introduce batch editing capabilities. It provides the
@@ -82,8 +80,8 @@ export default {
8280
onBatchDelete() {
8381
throw new Error("Not implemented");
8482
},
85-
onSelect(item) {
86-
this.selected = updateSelection(this.selected, item);
83+
onSelect(ids) {
84+
this.selected = ids;
8785
},
8886
onSelectToggle() {
8987
this.isSelecting ? this.stopSelecting() : this.startSelecting();

0 commit comments

Comments
 (0)