checkItem and deleteItems in List

src/components/List.vue

@@ -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,7 +45,20 @@ export default {
           return frappe.getMeta(this.doctype);
       }
   },
-  async mounted() {
+  created() {
+    frappe.db.on(`change:${this.doctype}`, () => {
+      this.updateList();
+    });
+  },
+  mounted() {
+    this.updateList();
+  },
+  methods: {
+    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]
@@ -45,18 +66,25 @@ export default {
 
       this.data = data;
     },
-  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 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);
     }
   }
 }

src/components/ListActions.vue

@@ -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>

src/components/ListItem.vue

@@ -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>