use id instead of eid in Events.vue and use index independent of sorting

This commit is contained in:
j3d1 2024-12-22 18:18:54 +01:00
parent e4fa48eb75
commit c512da2660

View file

@ -1,6 +1,7 @@
<template> <template>
<AsyncLoader :loaded="events.length > 0"> <AsyncLoader :loaded="events.length > 0">
<ExpandableTable v-if="!!events" :columns="['slug', 'name']" :items="events" :keyName="'slug'"> <ExpandableTable v-if="!!events" :columns="['slug', 'name']" :items="events.map((e,i)=>({idx: i, ...e}))"
:keyName="'slug'">
<template v-slot:header_actions> <template v-slot:header_actions>
<button class="btn btn-success" @click.prevent="openAddEventModal"> <button class="btn btn-success" @click.prevent="openAddEventModal">
<font-awesome-icon icon="plus"/> <font-awesome-icon icon="plus"/>
@ -43,7 +44,7 @@
<div class="mt-3"> <div class="mt-3">
<label class="mr-3">Addresses: </label> <label class="mr-3">Addresses: </label>
<div v-for="(address, a_id) in item.addresses" class="btn-group btn-group-sm mr-3" <div v-for="(address, a_id) in item.addresses" class="btn-group btn-group-sm mr-3"
@click.stop="deleteAddress(id, a_id)"> @click.stop="deleteAddress(item.idx, a_id)">
<button class="btn btn-secondary" disabled style="opacity: 1"> <button class="btn btn-secondary" disabled style="opacity: 1">
{{ address }} {{ address }}
</button> </button>
@ -52,8 +53,9 @@
</button> </button>
</div> </div>
<div class="btn-group btn-group-sm"> <div class="btn-group btn-group-sm">
<input type="text" v-model="new_address[id]"> <input type="text" v-model="new_address[item.idx]">
<button class="btn btn-secondary" @click.stop="addAddress(id)" style="white-space: nowrap;"> <button class="btn btn-secondary" @click.stop="addAddress(item.idx)"
style="white-space: nowrap;">
<font-awesome-icon icon="envelope"/>&nbsp;add <font-awesome-icon icon="envelope"/>&nbsp;add
</button> </button>
</div> </div>
@ -88,11 +90,11 @@ export default {
if (!this.events[id].addresses.includes(a)) if (!this.events[id].addresses.includes(a))
this.events[id].addresses.push(a) this.events[id].addresses.push(a)
this.new_address[id] = "" this.new_address[id] = ""
this.updateEvent({id: this.events[id].eid, partial_event: {addresses: this.events[id].addresses}}); this.updateEvent({id: this.events[id].id, partial_event: {addresses: this.events[id].addresses}});
}, },
deleteAddress(id, a_id) { deleteAddress(id, a_id) {
this.events[id].addresses = this.events[id].addresses.filter((e, i) => i !== a_id); this.events[id].addresses = this.events[id].addresses.filter((e, i) => i !== a_id);
this.updateEvent({id: this.events[id].eid, partial_event: {addresses: this.events[id].addresses}}); this.updateEvent({id: this.events[id].id, partial_event: {addresses: this.events[id].addresses}});
} }
}, },
}; };