110 lines
3.2 KiB
Vue
110 lines
3.2 KiB
Vue
<template>
|
|
<div class="a-m2m-edit">
|
|
<table class="table is-fullwidth">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
<slot name="items-title"></slot>
|
|
</th>
|
|
<th style="width: 1rem">
|
|
<span class="icon">
|
|
<i class="fa fa-trash"/>
|
|
</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template v-for="item of items" :key="item.id">
|
|
<tr :class="[item.created && 'has-text-info', item.deleted && 'has-text-danger']">
|
|
<td>
|
|
<slot name="item" :item="item">
|
|
{{ item.data }}
|
|
</slot>
|
|
</td>
|
|
<td class="align-center">
|
|
<input type="checkbox" class="checkbox" @change="item.deleted = $event.target.checked">
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
<div>
|
|
<label>
|
|
<span class="icon">
|
|
<i class="fa fa-plus"/>
|
|
</span>
|
|
Add
|
|
</label>
|
|
<a-autocomplete ref="autocomplete" v-bind="autocomplete"
|
|
@select="onSelect">
|
|
<template #item="{item}">
|
|
<slot name="autocomplete-item" :item="item">{{ item }}</slot>
|
|
</template>
|
|
</a-autocomplete>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Model, { Set } from "../model.js"
|
|
import AAutocomplete from "./AAutocomplete.vue"
|
|
|
|
export default {
|
|
components: {AAutocomplete},
|
|
props: {
|
|
model: {type: Function, default: Model },
|
|
// List url
|
|
url: String,
|
|
// POST url
|
|
commitUrl: String,
|
|
// v-bind to autocomplete search box
|
|
autocomplete: {type: Object },
|
|
|
|
source_id: Number,
|
|
source_field: String,
|
|
target_field: String,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
set: new Set(this.model, {url: this.url, unique: true}),
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
items() { return this.set?.items || [] },
|
|
initials() {
|
|
let obj = {}
|
|
obj[this.source_id_attr] = this.source_id
|
|
return obj
|
|
},
|
|
|
|
source_id_attr() { return this.source_field + "_id" },
|
|
target_id_attr() { return this.target_field + "_id" },
|
|
target_ids() { return this.set?.items.map(i => i.data[this.target_id_attr]) },
|
|
},
|
|
|
|
methods: {
|
|
onSelect(index, item, value) {
|
|
if(this.target_ids.indexOf(item.id) != -1)
|
|
return
|
|
|
|
let obj = {...this.initials}
|
|
obj[this.target_field] = {...item}
|
|
obj[this.target_id_attr] = item.id
|
|
this.set.push(obj)
|
|
this.$refs.autocomplete.reset()
|
|
},
|
|
|
|
save() {
|
|
this.set.commit(this.commitUrl, {
|
|
fields: [...Object.keys(this.initials), this.target_id_attr]
|
|
})
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
this.set.fetch()
|
|
},
|
|
}
|
|
</script>
|