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
author: Yoshie Muranaka <yoshiemuranaka@gmail.com> 2020-11-13 01:06:54 +0300
committer: Derick Montague <derick.montague@ibm.com> 2020-11-28 18:48:18 +0300
commit: e080ba7aed41b2baecb16e1a05c8f37963c396f5 (patch)
tree: 665719d248e7ec9985cb160545b41264386f3688
parent: e9116ebe409d7b1e49b8a31a292a55735a13638a (diff)
download: webui-vue-e080ba7aed41b2baecb16e1a05c8f37963c396f5.tar.xz
9 files changed, 81 insertions, 6 deletions
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index fffc2590b..1cf949b1b 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/guide/components/table.md b/docs/guide/components/table/index.md
index 6e9e57a88..aca509c23 100644
--- a/docs/guide/components/table.md
+++ b/docs/guide/components/table/index.md
@@ -17,8 +17,8 @@ There are a few required properties to maintain consistency across the applicati
 - `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)
+![Basic table example](./table.png)
+![Basic empty table example](./table-empty.png)
 
 ```vue
 <template>
@@ -74,7 +74,7 @@ To enable table sort, include `sortable: true` in the fields array for sortable
 - `no-sort-reset`
 - `sort-icon-left`
 
-![Table sort example](/table-sort.png)
+![Table sort example](./table-sort.png)
 
 
 ```vue
@@ -132,7 +132,7 @@ Use the [row-details slot](https://bootstrap-vue.org/docs/components/table#comp-
 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)
+![Table row expand example](./table-expand-row.png)
 
 ```vue
 <template>
@@ -183,8 +183,83 @@ export default {
 </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 -->
-<!-- ## Search -->
 <!-- ## Filter -->
diff --git a/docs/.vuepress/public/table-empty.png b/docs/guide/components/table/table-empty.png
index 90ecfc144..90ecfc144 100644
--- a/docs/.vuepress/public/table-empty.png
+++ b/docs/guide/components/table/table-empty.png
diff --git a/docs/.vuepress/public/table-expand-row.png b/docs/guide/components/table/table-expand-row.png
index b8ee9c965..b8ee9c965 100644
--- a/docs/.vuepress/public/table-expand-row.png
+++ b/docs/guide/components/table/table-expand-row.png
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 000000000..4fe5c44a4
--- /dev/null
+++ b/docs/guide/components/table/table-search-active.png
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 000000000..5fee61000
--- /dev/null
+++ b/docs/guide/components/table/table-search-empty.png
diff --git a/docs/guide/components/table/table-search.png b/docs/guide/components/table/table-search.png
new file mode 100644
index 000000000..8621d17d1
--- /dev/null
+++ b/docs/guide/components/table/table-search.png
diff --git a/docs/.vuepress/public/table-sort.png b/docs/guide/components/table/table-sort.png
index af6d831ed..af6d831ed 100644
--- a/docs/.vuepress/public/table-sort.png
+++ b/docs/guide/components/table/table-sort.png
diff --git a/docs/.vuepress/public/table.png b/docs/guide/components/table/table.png
index 0160013e8..0160013e8 100644
--- a/docs/.vuepress/public/table.png
+++ b/docs/guide/components/table/table.png
author	Yoshie Muranaka <yoshiemuranaka@gmail.com>	2020-11-13 01:06:54 +0300
committer	Derick Montague <derick.montague@ibm.com>	2020-11-28 18:48:18 +0300
commit	e080ba7aed41b2baecb16e1a05c8f37963c396f5 (patch)
tree	665719d248e7ec9985cb160545b41264386f3688
parent	e9116ebe409d7b1e49b8a31a292a55735a13638a (diff)
download	webui-vue-e080ba7aed41b2baecb16e1a05c8f37963c396f5.tar.xz