From 808171488a1229edd6799eac6280f268479bc26f Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Tue, 1 Dec 2020 11:33:50 -0800
Subject: Add documentation for table batch actions

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Id450f9f461c40c5ff7e1c9510b082e88abd1a3ef
---
 docs/guide/components/table/index.md               |  95 ++++++++++++++++++++-
 .../components/table/table-batch-action-active.png | Bin 0 -> 111744 bytes
 docs/guide/components/table/table-batch-action.png | Bin 0 -> 98173 bytes
 3 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 docs/guide/components/table/table-batch-action-active.png
 create mode 100644 docs/guide/components/table/table-batch-action.png

(limited to 'docs/guide/components')

diff --git a/docs/guide/components/table/index.md b/docs/guide/components/table/index.md
index 3805f8a1..3d13a2b8 100644
--- a/docs/guide/components/table/index.md
+++ b/docs/guide/components/table/index.md
@@ -412,5 +412,98 @@ export default {
 
 To add a date filter, import the `<table-date-filter>` component. It will emit a `@change` event with the user input date values. There is a date filter method, `getFilteredTableDataByDate`, in the `TableFilterMixin`.
 
+
+## Batch actions
+
+Batch actions allow a user to take a single action on many items in a table at once.
+
+To add table batch actions:
+1. Import the `<table-toolbar> `component and BVTableSelectableMixin
+1. Add the `selectable`, `no-select-on-click` props and a unique `ref` to the table. The table will emit a `@row-selected` event. Use the `onRowSelected` mixin method as a callback and provide the `$event` as the first argument and the total table items count as the second argument.
+1. Add a table column for checkboxes. The table header checkbox should use the `tableHeaderCheckboxModel` and `tableHeaderCheckboxIndeterminate` values provided by the mixin. The table header checkbox should also use the `onChangeHeaderCheckbox` method as a callback for the `@change` event with the table `ref` passed as an argument. The table row checkboxes should use the `toggleSelectRow` method as a callback for the `@change` event with the table `ref` passed as the first argument and the row index passed as the second argument.
+1. Add an actions prop to the `<table-toolbar>` component. This prop should be an array of toolbar actions–required to have a value and label prop. Add the `selected-items-count` prop to the `<table-toolbar>` component. The component will emit a `@batch-action` event that will provide the user selected action. It will also emit a `@clear-selected` event. Provide the `clearSelectedRows` as a callback with the table `ref` passed as an argument.
+
+![Table batch action example](./table-batch-action.png)
+
+![Table batch action active example](./table-batch-action-active.png)
+
+```vue
+<template>
+  <b-container>
+    <table-toolbar
+      :selected-items-count="selectedRows.length"
+      :actions="tableToolbarActions"
+      @clear-selected="clearSelectedRows($refs.table)"
+      @batch-action="onBatchAction"
+    />
+    <b-table
+      ref="table"
+      hover
+      selectable
+      no-select-on-click
+      responsive="md"
+      :items="filteredItems"
+      :fields="fields"
+      @row-selected="onRowSelected($event, items.length)"
+    >
+      <template #head(checkbox)>
+        <b-form-checkbox
+          v-model="tableHeaderCheckboxModel"
+          :indeterminate="tableHeaderCheckboxIndeterminate"
+          @change="onChangeHeaderCheckbox($refs.table)"
+        />
+      </template>
+      <template #cell(checkbox)="row">
+        <b-form-checkbox
+          v-model="row.rowSelected"
+          @change="toggleSelectRow($refs.table, row.index)"
+        />
+      </template>
+    </b-table>
+  </b-container>
+</template>
+<script>
+import TableToolbar from '@/components/Global/TableToolbar';
+import BVTableSelectableMixin, {
+  tableHeaderCheckboxModel,
+  tableHeaderCheckboxIndeterminate,
+  selectedRows
+} from '@/components/Mixins/BVTableSelectableMixin';
+
+export default {
+  components: { TableToolbar },
+  mixins: [ BVTableSelectableMixin ],
+  data() {
+    return {
+      items: [...],
+      fields: [
+        {
+          key: 'checkbox'
+        },
+        ...
+      ],
+      tableToolbarActions: [
+        {
+          value: 'edit',
+          label: this.$t('global.action.edit')
+        },
+        {
+          value: 'delete',
+          label: this.$t('global.action.delete')
+        },
+      ],
+      tableHeaderCheckboxModel,
+      tableHeaderCheckboxIndeterminate,
+      selectedRows
+    },
+  },
+  methods: {
+    onBatchAction(action) {
+      // Do something with selected batch action and selected rows
+    },
+  },
+}
+</script>
+```
+
 <!-- ## Pagination -->
-<!-- ## Batch actions -->
diff --git a/docs/guide/components/table/table-batch-action-active.png b/docs/guide/components/table/table-batch-action-active.png
new file mode 100644
index 00000000..3e0f6c95
Binary files /dev/null and b/docs/guide/components/table/table-batch-action-active.png differ
diff --git a/docs/guide/components/table/table-batch-action.png b/docs/guide/components/table/table-batch-action.png
new file mode 100644
index 00000000..6b95c1fc
Binary files /dev/null and b/docs/guide/components/table/table-batch-action.png differ
-- 
cgit v1.2.3