Allow the items inside the inline crud list to be selected and have custom actions defined on them

aleksis/core/frontend/components/generic/InlineCRUDList.vue

@@ -25,6 +25,12 @@
 
         @update:sort-by="handleSortChange"
         @update:sort-desc="handleSortChange"
+
+        :show-select="actions.length > 0"
+        selectable-key="canDelete"
+        @item-selected="handleItemSelected"
+        @toggle-select-all="handleToggleAll"
+        @current-items="checkSelectAll"
       >
         <template #top>
           <v-toolbar flat class="height-fit child-height-fit">
@@ -54,23 +60,39 @@
                     </template>
                   </filter-dialog>
 
-                <slot name="title">
-                  <div class="text-h4 my-1">
-                    <v-text-field
-                      v-model="search"
-                      type="search"
+                <div class="my-1">
+                  <v-text-field
+                    v-model="search"
+                    type="search"
+                    clearable
+                    flat
+                    filled
+                    hide-details
+                    single-line
+                    prepend-inner-icon="$search"
+                    dense
+                    outlined
+                    :label="$t('actions.search')"
+                  ></v-text-field>
+                </div>
+
+                <div v-if="actions.length > 0 && selectedItems.length > 0" class="my-1">
+                  <v-autocomplete
+                      auto-select-first
                       clearable
-                      flat
-                      filled
-                      hide-details
-                      single-line
-                      prepend-inner-icon="$search"
-                      dense
+                      :items="actions"
+                      v-model="selectedAction"
+                      return-object
+                      :label="$t('actions.select_action')"
+                      item-text="name"
                       outlined
-                      :label="$t('actions.search')"
-                    ></v-text-field>
-                  </div>
-                </slot>
+                      dense
+                      :hint="$tc('selection.num_items_selected', selectedItems.length)"
+                      persistent-hint
+                      append-outer-icon="$send"
+                      @click:append-outer="handleAction"
+                  ></v-autocomplete>
+                </div>
               </v-toolbar-title>
 
                 <v-spacer class="flex-grow-0 flex-sm-grow-1 mx-n1 mx-sm-0"></v-spacer>
@@ -264,6 +286,9 @@ export default {
       sortBy: [],
       sortDesc: [],
       gqlOrderBy: [],
+      selectedAction: null,
+      selectedItems: [],
+      allSelected: false,
     };
   },
   computed: {
@@ -375,7 +400,12 @@ export default {
       type: Boolean,
       required: false,
       default: false,
-    }
+    },
+    actions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   methods: {
     requestCreate() {
@@ -539,7 +569,41 @@ export default {
       this.gqlOrderBy = this.sortBy.map(
           (value, key) => this.orderKey(value, this.sortDesc[key])
       )
-    }
+    },
+    handleItemSelected({item, value}) {
+      if (value) {
+        this.selectedItems.push(item);
+      } else {
+        const index = this.selectedItems.indexOf(item);
+        if (index >= 0) {
+          this.selectedItems.splice(index, 1);
+        }
+      }
+    },
+    handleToggleAll({items, value}) {
+      if (value) {
+        // There is a bug in vuetify: items contains all elements, even those that aren't selectable
+        this.selectedItems = items.filter(item => item.canDelete || false);
+      } else {
+        this.selectedItems = [];
+      }
+      this.allSelected = value;
+    },
+    checkSelectAll(newItems) {
+      if (this.allSelected) {
+        this.handleToggleAll(
+            {
+            items: newItems,
+            value: true,
+          }
+        )
+      }
+    },
+    handleAction() {
+      if (this.selectedAction) {
+        this.selectedAction.handler(this.selectedItems);
+      }
+    },
   },
   mounted() {
     this.$setToolBarTitle(this.$t(`${this.i18nKey}.title_plural`), null);

aleksis/core/frontend/messages/en.json

@@ -73,6 +73,7 @@
   },
   "actions": {
     "title": "Actions",
+    "select_action": "Select Action",
     "back": "Back",
     "cancel": "Cancel",
     "close": "Close",
@@ -290,5 +291,8 @@
     "A_4": "Friday",
     "A_5": "Saturday",
     "A_6": "Sunday"
+  },
+  "selection": {
+    "num_items_selected": "No items selected | 1 item selected | {n} items selected"
   }
 }