From e080ba7aed41b2baecb16e1a05c8f37963c396f5 Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Thu, 12 Nov 2020 14:06:54 -0800
Subject: Add documentation for table search

Create table directory to organize related images in the same
directory and add updates to image path that will fix incorrect
path in final build.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I896ed5babc596306c082ca6e79aa3c0948a61227
---
 docs/.vuepress/config.js                           |   2 +-
 docs/.vuepress/public/table-empty.png              | Bin 23143 -> 0 bytes
 docs/.vuepress/public/table-expand-row.png         | Bin 140722 -> 0 bytes
 docs/.vuepress/public/table-sort.png               | Bin 94267 -> 0 bytes
 docs/.vuepress/public/table.png                    | Bin 36144 -> 0 bytes
 docs/guide/components/table.md                     | 190 ---------------
 docs/guide/components/table/index.md               | 265 +++++++++++++++++++++
 docs/guide/components/table/table-empty.png        | Bin 0 -> 23143 bytes
 docs/guide/components/table/table-expand-row.png   | Bin 0 -> 140722 bytes
 .../guide/components/table/table-search-active.png | Bin 0 -> 60242 bytes
 docs/guide/components/table/table-search-empty.png | Bin 0 -> 37368 bytes
 docs/guide/components/table/table-search.png       | Bin 0 -> 102892 bytes
 docs/guide/components/table/table-sort.png         | Bin 0 -> 94267 bytes
 docs/guide/components/table/table.png              | Bin 0 -> 36144 bytes
 14 files changed, 266 insertions(+), 191 deletions(-)
 delete mode 100644 docs/.vuepress/public/table-empty.png
 delete mode 100644 docs/.vuepress/public/table-expand-row.png
 delete mode 100644 docs/.vuepress/public/table-sort.png
 delete mode 100644 docs/.vuepress/public/table.png
 delete mode 100644 docs/guide/components/table.md
 create mode 100644 docs/guide/components/table/index.md
 create mode 100644 docs/guide/components/table/table-empty.png
 create mode 100644 docs/guide/components/table/table-expand-row.png
 create mode 100644 docs/guide/components/table/table-search-active.png
 create mode 100644 docs/guide/components/table/table-search-empty.png
 create mode 100644 docs/guide/components/table/table-search.png
 create mode 100644 docs/guide/components/table/table-sort.png
 create mode 100644 docs/guide/components/table/table.png

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index fffc2590..1cf949b1 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -49,7 +49,7 @@ module.exports = {
             "/guide/components/",
             "/guide/components/alert",
             "/guide/components/buttons/",
-            "/guide/components/table",
+            "/guide/components/table/",
             "/guide/components/toast",
           ]
           },
diff --git a/docs/.vuepress/public/table-empty.png b/docs/.vuepress/public/table-empty.png
deleted file mode 100644
index 90ecfc14..00000000
Binary files a/docs/.vuepress/public/table-empty.png and /dev/null differ
diff --git a/docs/.vuepress/public/table-expand-row.png b/docs/.vuepress/public/table-expand-row.png
deleted file mode 100644
index b8ee9c96..00000000
Binary files a/docs/.vuepress/public/table-expand-row.png and /dev/null differ
diff --git a/docs/.vuepress/public/table-sort.png b/docs/.vuepress/public/table-sort.png
deleted file mode 100644
index af6d831e..00000000
Binary files a/docs/.vuepress/public/table-sort.png and /dev/null differ
diff --git a/docs/.vuepress/public/table.png b/docs/.vuepress/public/table.png
deleted file mode 100644
index 0160013e..00000000
Binary files a/docs/.vuepress/public/table.png and /dev/null differ
diff --git a/docs/guide/components/table.md b/docs/guide/components/table.md
deleted file mode 100644
index 6e9e57a8..00000000
--- a/docs/guide/components/table.md
+++ /dev/null
@@ -1,190 +0,0 @@
-# Table
-
-All tables in the application are using the [BoostrapVue table component](https://bootstrap-vue.org/docs/components/table).
-
-To use the component, include the `<b-table>` tag in the template. The component is registered globally so does not need to be imported in each SFC.
-
-## Basic table
-There are a few required properties to maintain consistency across the application. The full list of options can be viewed on the [Bootstrap-vue table component's documentation page](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-props).
-
-
-### Required properties
-
-- `items` - renders table items
-- `fields` - renders table header
-- `hover` - enables table row hover state
-- `responsive` or `stacked` - makes the table responsive (enables horizontal scrolling or stacked view) at the defined breakpoint
-- `show-empty` *(required if table data is generated dynamically)* - shows an empty message if there are no items in the table
-- `empty-text` *(required if table data is generated dynamically)* - the translated empty message
-
-![Basic table example](/table.png)
-![Basic empty table example](/table-empty.png)
-
-```vue
-<template>
-  <b-table
-    hover
-    show-empty
-    responsive="md"
-    :items="items"
-    :fields="fields"
-    :empty-text="$t('global.table.emptyMessage')"
-  />
-</template>
-
-<script>
-  export default {
-    data() {
-      items: [
-        {
-          name: 'Babe',
-          age: '3 years',
-          color: 'white, orange, grey'
-        },
-        {
-          name: 'Grey Boy',
-          age: '4 months',
-          color: 'grey'
-        },
-      ],
-      fields: [
-        {
-          key: 'name',
-          label: this.$t('table.name') //translated label
-        },
-        {
-          key: 'age',
-          label: this.$t('table.age') //translated label
-        },
-        {
-          key: 'color',
-          label: this.$t('table.color') // translated label
-        }
-      ]
-    }
-  }
-</script>
-```
-
-## Sort
-
-To enable table sort, include `sortable: true` in the fields array for sortable columns and add the following props to the `<b-table>` component:
-
-- `sort-by`
-- `no-sort-reset`
-- `sort-icon-left`
-
-![Table sort example](/table-sort.png)
-
-
-```vue
-<template>
-  <b-table
-    hover
-    no-sort-reset
-    sort-icon-left
-    sort-by="rank"
-    responsive="md"
-    :items="items"
-    :fields="fields"
-  />
-</template>
-<script>
-export default {
-  data() {
-    return {
-      items: [...],
-      fields: [
-        {
-          key: 'name',
-          label: 'Name', //should be translated
-          sortable: true
-        },
-        {
-          key: 'rank',
-          label: 'Rank', //should be translated
-          sortable: true
-        },
-        {
-          key: 'description',
-          label: 'Description', //should be translated
-          sortable: false
-        }
-      ]
-    }
-  }
-}
-</script>
-```
-
-## Expandable rows
-
-To add an expandable row in the table, add a column for the expand button in the fields array. Include the tdClass `table-row-expand` to ensure icon rotation is handled. Use the built in [cell slot](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots) to target the expand button column and add a button with the chevron icon.
-
-Include the [TableRowExpandMixin](https://github.com/openbmc/webui-vue/blob/master/src/components/Mixins/TableRowExpandMixin.js). The mixin contains the dynamic `aria-label` and `title` attribute values that need to be included with the expand button. The `toggleRowDetails` method should be the button's click event callback. Be sure to pass the `row` object to the function.
-
-Use the [row-details slot](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots) to format the expanded row content. The slot has access to the row `item` property.
-
-### Summary
-
-1. Add a column for the expansion row button with the tdClass, `table-row-expand`
-2. Include the `TableRowExpandMixin` to handle the dynamic aria label, title, and row expansion toggling
-3. Use the `#cell` slot to target the expandable row column and add the button with accessible markup and click handler
-4. Use the `#row-details` slot to format expanded row content
-
-![Table row expand example](/table-expand-row.png)
-
-```vue
-<template>
-  <b-table
-    hover
-    responsive="md"
-    :items="items"
-    :fields="fields"
-  >
-    <template #cell(expandRow)="row">
-      <b-button
-        variant="link"
-        :aria-label="expandRowLabel"
-        :title="expandRowLabel"
-        @click="toggleRowDetails(row)"
-      >
-        <icon-chevron />
-      </b-button>
-    </template>
-    <template #row-details="row">
-      <h3>Expanded row details</h3>
-      {{ row.item }}
-    </template>
-  </b-table>
-</template>
-<script>
-import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
-import TableRowExpandMixin, { expandRowLabel } from '@/components/Mixins/TableRowExpandMixin';
-
-export default {
-  components: { IconChevron },
-  mixins: [ TableRowExpandMixin ],
-  data() {
-    return {
-      items: [...],
-      fields: [
-        {
-          key: 'expandRow',
-          label: '',
-          tdClass: 'table-row-expand',
-        },
-        ...
-      ],
-      expandRowLabel
-    }
-  }
-}
-</script>
-```
-
-<!-- ## Pagination -->
-<!-- ## Row actions -->
-<!-- ## Batch actions -->
-<!-- ## Search -->
-<!-- ## Filter -->
diff --git a/docs/guide/components/table/index.md b/docs/guide/components/table/index.md
new file mode 100644
index 00000000..aca509c2
--- /dev/null
+++ b/docs/guide/components/table/index.md
@@ -0,0 +1,265 @@
+# Table
+
+All tables in the application are using the [BoostrapVue table component](https://bootstrap-vue.org/docs/components/table).
+
+To use the component, include the `<b-table>` tag in the template. The component is registered globally so does not need to be imported in each SFC.
+
+## Basic table
+There are a few required properties to maintain consistency across the application. The full list of options can be viewed on the [Bootstrap-vue table component's documentation page](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-props).
+
+
+### Required properties
+
+- `items` - renders table items
+- `fields` - renders table header
+- `hover` - enables table row hover state
+- `responsive` or `stacked` - makes the table responsive (enables horizontal scrolling or stacked view) at the defined breakpoint
+- `show-empty` *(required if table data is generated dynamically)* - shows an empty message if there are no items in the table
+- `empty-text` *(required if table data is generated dynamically)* - the translated empty message
+
+![Basic table example](./table.png)
+![Basic empty table example](./table-empty.png)
+
+```vue
+<template>
+  <b-table
+    hover
+    show-empty
+    responsive="md"
+    :items="items"
+    :fields="fields"
+    :empty-text="$t('global.table.emptyMessage')"
+  />
+</template>
+
+<script>
+  export default {
+    data() {
+      items: [
+        {
+          name: 'Babe',
+          age: '3 years',
+          color: 'white, orange, grey'
+        },
+        {
+          name: 'Grey Boy',
+          age: '4 months',
+          color: 'grey'
+        },
+      ],
+      fields: [
+        {
+          key: 'name',
+          label: this.$t('table.name') //translated label
+        },
+        {
+          key: 'age',
+          label: this.$t('table.age') //translated label
+        },
+        {
+          key: 'color',
+          label: this.$t('table.color') // translated label
+        }
+      ]
+    }
+  }
+</script>
+```
+
+## Sort
+
+To enable table sort, include `sortable: true` in the fields array for sortable columns and add the following props to the `<b-table>` component:
+
+- `sort-by`
+- `no-sort-reset`
+- `sort-icon-left`
+
+![Table sort example](./table-sort.png)
+
+
+```vue
+<template>
+  <b-table
+    hover
+    no-sort-reset
+    sort-icon-left
+    sort-by="rank"
+    responsive="md"
+    :items="items"
+    :fields="fields"
+  />
+</template>
+<script>
+export default {
+  data() {
+    return {
+      items: [...],
+      fields: [
+        {
+          key: 'name',
+          label: 'Name', //should be translated
+          sortable: true
+        },
+        {
+          key: 'rank',
+          label: 'Rank', //should be translated
+          sortable: true
+        },
+        {
+          key: 'description',
+          label: 'Description', //should be translated
+          sortable: false
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+
+## Expandable rows
+
+To add an expandable row in the table, add a column for the expand button in the fields array. Include the tdClass `table-row-expand` to ensure icon rotation is handled. Use the built in [cell slot](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots) to target the expand button column and add a button with the chevron icon.
+
+Include the [TableRowExpandMixin](https://github.com/openbmc/webui-vue/blob/master/src/components/Mixins/TableRowExpandMixin.js). The mixin contains the dynamic `aria-label` and `title` attribute values that need to be included with the expand button. The `toggleRowDetails` method should be the button's click event callback. Be sure to pass the `row` object to the function.
+
+Use the [row-details slot](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots) to format the expanded row content. The slot has access to the row `item` property.
+
+### Summary
+
+1. Add a column for the expansion row button with the tdClass, `table-row-expand`
+2. Include the `TableRowExpandMixin` to handle the dynamic aria label, title, and row expansion toggling
+3. Use the `#cell` slot to target the expandable row column and add the button with accessible markup and click handler
+4. Use the `#row-details` slot to format expanded row content
+
+![Table row expand example](./table-expand-row.png)
+
+```vue
+<template>
+  <b-table
+    hover
+    responsive="md"
+    :items="items"
+    :fields="fields"
+  >
+    <template #cell(expandRow)="row">
+      <b-button
+        variant="link"
+        :aria-label="expandRowLabel"
+        :title="expandRowLabel"
+        @click="toggleRowDetails(row)"
+      >
+        <icon-chevron />
+      </b-button>
+    </template>
+    <template #row-details="row">
+      <h3>Expanded row details</h3>
+      {{ row.item }}
+    </template>
+  </b-table>
+</template>
+<script>
+import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+import TableRowExpandMixin, { expandRowLabel } from '@/components/Mixins/TableRowExpandMixin';
+
+export default {
+  components: { IconChevron },
+  mixins: [ TableRowExpandMixin ],
+  data() {
+    return {
+      items: [...],
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+        },
+        ...
+      ],
+      expandRowLabel
+    }
+  }
+}
+</script>
+```
+
+## Search
+
+The table is leveraging [BootstrapVue table filtering](https://bootstrap-vue.org/docs/components/table#filtering) for search. Add the [@filtered](https://bootstrap-vue.org/docs/components/table#filter-events) event listener onto the `<b-table>` component. The event callback should track the total filtered items count.
+
+Import the `<search>` and `<table-cell-count>` components and include them in the template above the `<b-table>` component.
+
+Include the [SearchFilterMixin](https://github.com/openbmc/webui-vue/blob/master/src/components/Mixins/SearchFilterMixin.js). Add the `@change-search` and `@clear-search` event listeners on the `<search>` component and use the corresponding `onChangeSearchInput` and `onClearSearchInput` methods as the event callbacks. The table should also include the dynamic `:filter` prop with `searchFilter` set as the value.
+
+The `<table-cell-count>` component requires two properties, total table item count and total filtered items count.
+
+Add the `:empty-filtered-text` prop to the table to show the translated message if there are no search matches.
+
+![Table search example](./table-search.png)
+
+![Table search active example](./table-search-active.png)
+
+![Table search empty example](./table-search-empty.png)
+
+```vue
+<template>
+  <b-container>
+  <b-row>
+    <b-col>
+      <search
+        @changeSearch="onChangeSearchInput"
+        @clearSearch="onClearSearchInput"
+      />
+    </b-col>
+    <b-col>
+      <table-cell-count
+        :filtered-items-count="filteredItemsCount"
+        :total-number-of-cells="items.length"
+      />
+    </b-col>
+  </b-row>
+  <b-table
+    hover
+    responsive="md"
+    :items="items"
+    :fields="fields"
+    :filter="searchFilter"
+    :empty-filtered-text="$t('global.table.emptySearchMessage')"
+    @filtered="onFiltered"
+  />
+  </b-container>
+</template>
+<script>
+import Search from '@/components/Global/Search';
+import TableCellCount from '@/components/Global/TableCellCount';
+import SearchFilterMixin, { searchFilter } from '@/components/Mixins/SearchFilterMixin';
+
+export default {
+  components: { Search, TableCellCount },
+  mixins: [ SearchFilterMixin ],
+  data() {
+    return {
+      items: [...],
+      fields: [...],
+      searchFilter,
+      filteredItems: [],
+    }
+  },
+  computed: {
+    filteredItemsCount() {
+      return this.filteredItems.length;
+    },
+  },
+  methods: {
+    onFiltered(items) {
+      this.filteredItems = items;
+    },
+  },
+}
+</script>
+```
+
+<!-- ## Pagination -->
+<!-- ## Row actions -->
+<!-- ## Batch actions -->
+<!-- ## Filter -->
diff --git a/docs/guide/components/table/table-empty.png b/docs/guide/components/table/table-empty.png
new file mode 100644
index 00000000..90ecfc14
Binary files /dev/null and b/docs/guide/components/table/table-empty.png differ
diff --git a/docs/guide/components/table/table-expand-row.png b/docs/guide/components/table/table-expand-row.png
new file mode 100644
index 00000000..b8ee9c96
Binary files /dev/null and b/docs/guide/components/table/table-expand-row.png differ
diff --git a/docs/guide/components/table/table-search-active.png b/docs/guide/components/table/table-search-active.png
new file mode 100644
index 00000000..4fe5c44a
Binary files /dev/null and b/docs/guide/components/table/table-search-active.png differ
diff --git a/docs/guide/components/table/table-search-empty.png b/docs/guide/components/table/table-search-empty.png
new file mode 100644
index 00000000..5fee6100
Binary files /dev/null and b/docs/guide/components/table/table-search-empty.png differ
diff --git a/docs/guide/components/table/table-search.png b/docs/guide/components/table/table-search.png
new file mode 100644
index 00000000..8621d17d
Binary files /dev/null and b/docs/guide/components/table/table-search.png differ
diff --git a/docs/guide/components/table/table-sort.png b/docs/guide/components/table/table-sort.png
new file mode 100644
index 00000000..af6d831e
Binary files /dev/null and b/docs/guide/components/table/table-sort.png differ
diff --git a/docs/guide/components/table/table.png b/docs/guide/components/table/table.png
new file mode 100644
index 00000000..0160013e
Binary files /dev/null and b/docs/guide/components/table/table.png differ
-- 
cgit v1.2.3