134 lines
3.8 KiB
Vue
134 lines
3.8 KiB
Vue
<template>
|
|
<div class="list">
|
|
<v-data-table :headers="headers" :items="itemlist" :items-per-page="20" class="elevation-1">
|
|
<template v-slot:[`item.active`]="{ item }">
|
|
<v-simple-checkbox v-model="item.active" disabled></v-simple-checkbox>
|
|
</template>
|
|
<template v-slot:[`item.actions`]="{ item }">
|
|
<v-icon small class="mr-2" @click="editItem(item)">
|
|
mdi-pencil
|
|
</v-icon>
|
|
<v-icon small @click="deleteItem(item)">
|
|
mdi-delete
|
|
</v-icon>
|
|
</template>
|
|
</v-data-table>
|
|
<v-dialog v-model="dialog" max-width="500px">
|
|
<v-card>
|
|
<v-card-title>
|
|
<span class="headline">{{ formTitle }}</span>
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<v-container>
|
|
Edit Entry
|
|
<v-row v-for="item in headers" :key="item">
|
|
<template v-if="item.editable">
|
|
<v-col cols="16" sm="8" md="6">
|
|
<v-checkbox v-if="typeof editedItem[item.value] == 'boolean'" v-model="editedItem[item.value]"
|
|
v-bind:label="item.text"></v-checkbox>
|
|
<v-text-field v-if="typeof editedItem[item.value] == 'string'" v-model="editedItem[item.value]"
|
|
v-bind:label="item.text"></v-text-field>
|
|
</v-col>
|
|
</template>
|
|
</v-row>
|
|
</v-container>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="blue darken-1" text @click="close">Cancel</v-btn>
|
|
<v-btn color="blue darken-1" text @click="save">Save</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
<v-snackbar v-model="snackbarshow" :timeout="snackbartimeout">
|
|
{{ snackbartext }}
|
|
|
|
<template v-slot:action="{ attrs }">
|
|
<v-btn color="blue" text v-bind="attrs" @click="snackbarshow=false">
|
|
Close
|
|
</v-btn>
|
|
</template>
|
|
</v-snackbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'List',
|
|
data() {
|
|
return {
|
|
snackbarshow: false,
|
|
snackbartext: "",
|
|
snackbartimeout: 10000,
|
|
colsize: 3,
|
|
editedItem: {}
|
|
}
|
|
},
|
|
computed: {
|
|
position() {
|
|
return this.itemlist.length() + 1
|
|
}
|
|
},
|
|
methods: {
|
|
/*createItem(name) {
|
|
this.editedIndex = this.itemlist.indexOf(item);
|
|
this.editedItem = Object.assign({}, item);
|
|
this.dialog = true;
|
|
},*/
|
|
editItem(item) {
|
|
this.editedIndex = this.itemlist.indexOf(item);
|
|
this.editedItem = Object.assign({}, item);
|
|
this.dialog = true;
|
|
},
|
|
deleteItem(item) {
|
|
const index = this.itemlist.indexOf(item);
|
|
// Assuming that first elem of item is the primary key
|
|
confirm('Are you sure you want to delete this item?') && this.object.DeleteItem(item[Object.keys(item)[0]])
|
|
.then(() => {
|
|
this.itemlist.splice(index, 1);
|
|
});
|
|
},
|
|
close() {
|
|
this.dialog = false
|
|
this.$nextTick(() => {
|
|
this.editedItem = Object.assign({}, this.defaultItem)
|
|
this.editedIndex = -1
|
|
})
|
|
},
|
|
save() {
|
|
if (this.editedIndex > -1) {
|
|
Object.assign(this.itemlist[this.editedIndex], this.editedItem)
|
|
} else {
|
|
this.itemlist.push(this.editedItem)
|
|
}
|
|
this.object.ModifyItem(this.editedItem.id, this.editedItem).then((response) => {
|
|
this.snackbarshow = true;
|
|
this.snackbartext = response;
|
|
this.$parent.RefreshData();
|
|
});
|
|
this.close();
|
|
},
|
|
},
|
|
props: ["headers", "itemlist", "object"]
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
h3 {
|
|
margin: 40px 0 0;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
display: inline-block;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
a {
|
|
color: #42b983;
|
|
}
|
|
</style> |