Resources: add batch delete in table

assets/vue/mixins/UploadMixin.js

@@ -7,7 +7,7 @@ export default {
     formatDateTime,
     onCreated(item) {
       this.showMessage(this.$i18n.t('{resource} created', {'resource': item['resourceNode'].title}));
-      this.$refs.createForm.files = [];
+      const createForm = this.$refs.createForm;
 
       let folderParams = this.$route.query;
 

assets/vue/store/modules/crud.js

@@ -44,6 +44,7 @@ export const ACTIONS = {
   RESET_UPDATE: 'RESET_UPDATE',
   SET_CREATED: 'SET_CREATED',
   SET_DELETED: 'SET_DELETED',
+  SET_DELETED_MULTIPLE: 'SET_DELETED_MULTIPLE',
   SET_ERROR: 'SET_ERROR',
   SET_SELECT_ITEMS: 'SET_SELECT_ITEMS',
   SET_TOTAL_ITEMS: 'SET_TOTAL_ITEMS',
@@ -86,6 +87,29 @@ export default function makeCrudModule({
           })
           .catch(e => handleError(commit, e));
       },
+      delMultiple: ({ commit }, items) => {
+        console.log('delete items');
+        commit(ACTIONS.TOGGLE_LOADING);
+
+        const promises = items.map(async item => {
+          const result = await service.del(item).then(() => {
+            //commit(ACTIONS.TOGGLE_LOADING);
+            commit(ACTIONS.SET_DELETED_MULTIPLE, item);
+
+            console.log(item.title);
+            console.log('item deleted');
+          });
+
+          return result;
+        });
+
+        const result = Promise.all(promises);
+
+        if (result) {
+          commit(ACTIONS.TOGGLE_LOADING);
+        }
+      },
+
       fetchAll: ({ commit, state }, params) => {
         if (!service) throw new Error('No service specified!');
 
@@ -252,7 +276,20 @@ export default function makeCrudModule({
         Object.assign(state, { created });
       },
       [ACTIONS.SET_DELETED]: (state, deleted) => {
-        if (!state.allIds.includes(deleted['@id'])) return;
+        if (!state.allIds.includes(deleted['@id'])) {
+          return;
+        }
+        Object.assign(state, {
+          allIds: remove(state.allIds, item => item['@id'] === deleted['@id']),
+          byId: remove(state.byId, id => id === deleted['@id']),
+          deleted
+        });
+      },
+      [ACTIONS.SET_DELETED_MULTIPLE]: (state, deleted) => {
+        //console.log(deleted['@id']);
+        /*if (!state.allIds.includes(deleted['@id'])) {
+          return;
+        }*/
         Object.assign(state, {
           allIds: remove(state.allIds, item => item['@id'] === deleted['@id']),
           byId: remove(state.byId, id => id === deleted['@id']),

assets/vue/views/documents/List.vue

@@ -43,16 +43,19 @@
       <b-col>
         <b-table
           id="documents"
+          ref="selectableTable"
           striped
           hover
           no-local-sorting
           responsive="sm"
-
           :per-page="0"
           :fields="fields"
           :items="items"
-          :current-page.sync="options.page"
 
+          @row-selected="onRowSelected"
+
+          selectable
+          :current-page.sync="options.page"
           :sort-by.sync="options.sortBy"
           :sort-desc.sync="options.sortDesc"
 
@@ -68,6 +71,17 @@
             </div>
           </template>
 
+          <template v-slot:cell(selected)="{ rowSelected }">
+        <template v-if="rowSelected">
+          <span aria-hidden="true">&check;</span>
+          <span class="sr-only">{{ $t('Selected') }}</span>
+        </template>
+        <template v-else>
+          <span aria-hidden="true">&nbsp;</span>
+          <span class="sr-only">{{ $t('Not selected') }}</span>
+        </template>
+      </template>
+
           <template
             v-slot:cell(resourceNode.title)="row"
           >
@@ -118,6 +132,14 @@
             />
           </template>
         </b-table>
+
+        <p>
+          <b-button size="sm" @click="selectAllRows">{{ $t('Select all') }}</b-button>
+          <b-button size="sm" @click="clearSelected">{{ $t('Clear selected') }}</b-button>
+            <b-button v-if="this.selected.length > 0" variant="danger" size="sm" @click="deleteSelected">
+              {{ $t('Delete ...') }}
+            </b-button>
+        </p>
       </b-col>
     </b-row>
   </span>
@@ -131,69 +153,113 @@ import ActionCell from '../../components/ActionCell';
 import Toolbar from '../../components/Toolbar';
 import ResourceFileIcon from './ResourceFileIcon';
 
-
 export default {
-    name: 'DocumentsList',
-    servicePrefix: 'Documents',
-    components: {
-      Toolbar,
-      ActionCell,
-      ResourceFileIcon
+  name: 'DocumentsList',
+  servicePrefix: 'Documents',
+  components: {
+    Toolbar,
+    ActionCell,
+    ResourceFileIcon
+  },
+  mixins: [ListMixin],
+  data() {
+    return {
+      sortBy: 'title',
+      sortDesc: false,
+      fields: [
+        'selected',
+        {label: this.$i18n.t('Title'), key: 'resourceNode.title', sortable: true},
+        {label: this.$i18n.t('Modified'), key: 'resourceNode.updatedAt', sortable: true},
+        {label: this.$i18n.t('Size'), key: 'resourceNode.resourceFile.size', sortable: true},
+        {label: this.$i18n.t('Actions'), key: 'action', sortable: false}
+      ],
+      pageOptions: [5, 10, 15, 20, this.$i18n.t('All')],
+      selected: [],
+      selectMode: 'multi',
+    };
+
+  },
+  created() {
+    let nodeId = this.$route.params['node'];
+    this.findResourceNode('/api/resource_nodes/' + nodeId);
+    this.onUpdateOptions(this.options);
+  },
+  computed: {
+    // From crud.js list function
+    ...mapGetters('documents', {
+      items: 'list'
+    }),
+    ...mapGetters('resourcenode', {
+      resourceNode: 'getResourceNode'
+    }),
+    // From ListMixin
+    ...mapFields('documents', {
+      deletedItem: 'deleted',
+      error: 'error',
+      isLoading: 'isLoading',
+      resetList: 'resetList',
+      totalItems: 'totalItems',
+      view: 'view'
+    }),
+  },
+  methods: {
+    onRowSelected(items) {
+      this.selected = items
+    },
+    selectAllRows() {
+      this.$refs.selectableTable.selectAllRows()
     },
-    mixins: [ListMixin],
-    data() {
-        return {
-          sortBy: 'title',
-          sortDesc: false,
-          fields: [
-                {label:  this.$i18n.t('Title'), key: 'resourceNode.title', sortable: true},
-                {label: this.$i18n.t('Modified'), key: 'resourceNode.updatedAt', sortable: true},
-                {label: this.$i18n.t('Size'), key: 'resourceNode.resourceFile.size', sortable: true},
-                {label: this.$i18n.t('Actions'), key: 'action', sortable: false}
-            ],
-            selected: [],
-            pageOptions: [5, 10, 15, 20, this.$i18n.t('All')],
-        };
+    clearSelected() {
+      this.$refs.selectableTable.clearSelected()
     },
-    created() {
-        let nodeId = this.$route.params['node'];
-        this.findResourceNode('/api/resource_nodes/'+ nodeId);
-        this.onUpdateOptions(this.options);
+    allSelected() {
+    },
+    toggleSelected() {
+    },
+    async deleteSelected() {
+      console.log('deleteSelected');
+      /*for (let i = 0; i < this.selected.length; i++) {
+        let item = this.selected[i];
+        //this.deleteHandler(item);
+        this.deleteItem(item);
+      }*/
+
+      this.deleteItem(this.selected);
+      this.onUpdateOptions(this.options);
+
+      /*const promises = this.selected.map(async item => {
+        const result = await this.deleteItem(item);
+
+        console.log('item');
+        return result;
+      });
+
+      const result = await Promise.all(promises);
+
+      console.log(result);
+      if (result) {
+        console.log(result);
+        //this.onUpdateOptions(this.options);
+      }
+*/
+
+      console.log('end -- deleteSelected');
     },
-    computed: {
-        // From crud.js list function
-        ...mapGetters('documents', {
-            items: 'list'
-        }),
-        ...mapGetters('resourcenode', {
-            resourceNode: 'getResourceNode'
-        }),
-        // From ListMixin
-        ...mapFields('documents', {
-            deletedItem: 'deleted',
-            error: 'error',
-            isLoading: 'isLoading',
-            resetList: 'resetList',
-            totalItems: 'totalItems',
-            view: 'view'
-        }),
+    sortingChanged(ctx) {
+      this.options.sortDesc = ctx.sortDesc;
+      this.options.sortBy = ctx.sortBy;
+      this.onUpdateOptions(this.options);
+      // ctx.sortBy   ==> Field key for sorting by (or null for no sorting)
+      // ctx.sortDesc ==> true if sorting descending, false otherwise
     },
-    methods: {
-        sortingChanged(ctx) {
-          this.options.sortDesc = ctx.sortDesc;
-          this.options.sortBy = ctx.sortBy;
-          this.onUpdateOptions(this.options);
-          // ctx.sortBy   ==> Field key for sorting by (or null for no sorting)
-          // ctx.sortDesc ==> true if sorting descending, false otherwise
-        },
-        // From ListMixin
-        ...mapActions('documents', {
-            getPage: 'fetchAll',
-            deleteItem: 'del'
-        }),
-        ...mapActions('resourcenode', {
-            findResourceNode: 'findResourceNode',
-        }),
-    }
+    // From ListMixin
+    ...mapActions('documents', {
+      getPage: 'fetchAll',
+      deleteItem: 'delMultiple'
+    }),
+    ...mapActions('resourcenode', {
+      findResourceNode: 'findResourceNode',
+    }),
+  }
 };
 </script>