mirror of
https://github.com/frappe/books.git
synced 2025-01-23 15:18:24 +00:00
checkItem and deleteItems in List
This commit is contained in:
parent
57c0b21ed9
commit
0b6862e79c
@ -1,12 +1,19 @@
|
||||
<template>
|
||||
<keep-alive>
|
||||
<div class="frappe-list">
|
||||
<list-actions :doctype="doctype" @new="newDoc"></list-actions>
|
||||
<list-actions
|
||||
:doctype="doctype"
|
||||
:showDelete="checkList.length"
|
||||
@new="newDoc"
|
||||
@delete="deleteCheckedItems"
|
||||
/>
|
||||
<ul class="list-group">
|
||||
<list-item v-for="doc of data" :key="doc.name"
|
||||
:id="doc.name" :isActive="doc.name === $route.params.name"
|
||||
@click.native="openForm(doc.name)"
|
||||
@keypress.native="selectAboveListItem"
|
||||
:id="doc.name"
|
||||
:isActive="doc.name === $route.params.name"
|
||||
:isChecked="isChecked(doc.name)"
|
||||
@clickItem="openForm(doc.name)"
|
||||
@checkItem="toggleCheck(doc.name)"
|
||||
>
|
||||
{{ doc[meta.titleField || 'name'] }}
|
||||
</list-item>
|
||||
@ -29,6 +36,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
data: [],
|
||||
checkList: [],
|
||||
activeItem: ''
|
||||
}
|
||||
},
|
||||
@ -37,27 +45,47 @@ export default {
|
||||
return frappe.getMeta(this.doctype);
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
const data = await frappe.db.getAll({
|
||||
doctype: this.doctype,
|
||||
fields: ['name', ...this.meta.keywordFields]
|
||||
created() {
|
||||
frappe.db.on(`change:${this.doctype}`, () => {
|
||||
this.updateList();
|
||||
});
|
||||
|
||||
this.data = data;
|
||||
},
|
||||
mounted() {
|
||||
this.updateList();
|
||||
},
|
||||
methods: {
|
||||
async newDoc() {
|
||||
let doc = await frappe.getNewDoc(this.doctype);
|
||||
this.$router.push(`/edit/${this.doctype}/${doc.name}`);
|
||||
},
|
||||
openForm(name) {
|
||||
this.activeItem = name;
|
||||
this.$router.push(`/edit/${this.doctype}/${name}`);
|
||||
},
|
||||
selectAboveListItem(index) {
|
||||
console.log(index);
|
||||
// this.openForm(this.data[index - 1].name);
|
||||
async newDoc() {
|
||||
let doc = await frappe.getNewDoc(this.doctype);
|
||||
this.$router.push(`/edit/${this.doctype}/${doc.name}`);
|
||||
},
|
||||
async updateList() {
|
||||
const data = await frappe.db.getAll({
|
||||
doctype: this.doctype,
|
||||
fields: ['name', ...this.meta.keywordFields]
|
||||
});
|
||||
|
||||
this.data = data;
|
||||
},
|
||||
openForm(name) {
|
||||
this.activeItem = name;
|
||||
this.$router.push(`/edit/${this.doctype}/${name}`);
|
||||
},
|
||||
async deleteCheckedItems() {
|
||||
debugger
|
||||
await frappe.db.deleteMany(this.doctype, this.checkList);
|
||||
debugger
|
||||
this.checkList = [];
|
||||
},
|
||||
toggleCheck(name) {
|
||||
if (this.checkList.includes(name)) {
|
||||
this.checkList = this.checkList.filter(docname => docname !== name);
|
||||
} else {
|
||||
this.checkList = this.checkList.concat(name);
|
||||
}
|
||||
},
|
||||
isChecked(name) {
|
||||
return this.checkList.includes(name);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<div class="frappe-list-actions d-flex justify-content-between align-items-center p-3 border-bottom">
|
||||
<h5 class="m-0">{{ doctype }} List</h5>
|
||||
<button class="btn btn-primary btn-sm" @click="$emit('new')">New</button>
|
||||
<button v-if="showDelete" class="btn btn-danger btn-sm" @click="$emit('delete')">Delete</button>
|
||||
<button v-else class="btn btn-primary btn-sm" @click="$emit('new')">New</button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['doctype']
|
||||
props: ['doctype', 'showDelete']
|
||||
}
|
||||
</script>
|
||||
|
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div :class="['list-group-item d-flex align-items-center', isActive ? 'active' : '']">
|
||||
<div :class="classList" @click.self="$emit('clickItem')">
|
||||
<div class="custom-control custom-checkbox d-flex">
|
||||
<input type="checkbox" class="custom-control-input" :id="id">
|
||||
<input type="checkbox" class="custom-control-input" :id="id"
|
||||
:value="isChecked" @change="$emit('checkItem', isChecked)"
|
||||
>
|
||||
<label class="custom-control-label" :for="id"></label>
|
||||
</div>
|
||||
<slot></slot>
|
||||
@ -9,6 +11,11 @@
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['id', 'isActive']
|
||||
props: ['id', 'isActive', 'isChecked'],
|
||||
computed: {
|
||||
classList() {
|
||||
return ['list-group-item d-flex align-items-center', this.isActive ? 'bg-light' : ''];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
Loading…
x
Reference in New Issue
Block a user