PATCH: add filterFunction & documentation (#353)

* add filterFunction & documentation * fix table documentation * add documentation for filename
bimdata · Apr 19, 2024 · d2740f0 · d2740f0
1 parent 1d71978
commit d2740f0
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 47 deletions.
diff --git a/src/BIMDataComponents/BIMDataTable/BIMDataTable.vue b/src/BIMDataComponents/BIMDataTable/BIMDataTable.vue
@@ -53,7 +53,7 @@
                     class="m-l-6"
                     :class="{
                       active: filters.some(
-                        filter => filter.columnKey === column.id,
+                        filter => filter.columnKey === column.id
                       ),
                     }"
                     @click="toggleFiltersMenu(column)"
@@ -65,7 +65,7 @@
                     :column="column"
                     :columnData="
                       computedRows.map(
-                        computedRow => computedRow.data[column.id],
+                        computedRow => computedRow.data[column.id]
                       )
                     "
                     :filters="
@@ -249,7 +249,7 @@ export default {
   setup(props, { emit }) {
     // Compute rows keys based on props values.
     const computedRows = computed(() =>
-      props.rows.map((row, i) => ({ key: row[props.rowKey] ?? i, data: row })),
+      props.rows.map((row, i) => ({ key: row[props.rowKey] ?? i, data: row }))
     );
 
     const { rowSelection, toggleRowSelection, toggleFullSelection } =
@@ -275,7 +275,7 @@ export default {
               emit("all-deselected");
             }
           },
-        },
+        }
       );
 
     const toggleRow = row => {
@@ -381,7 +381,7 @@ export default {
       return sortedRows.value.filter(row => {
         return filters.value.every(filter => {
           const column = props.columns.find(
-            column => column.id === filter.columnKey,
+            column => column.id === filter.columnKey
           );
           const columnRowData = row.data[filter.columnKey];
 
@@ -390,16 +390,20 @@ export default {
           if (Array.isArray(columnRowData)) {
             return columnRowData.some(columnRowDataElement =>
               filter.columnFilters.includes(
-                column.filterKey
+                typeof column.filterFunction === "function"
+                  ? column.filterFunction(columnRowDataElement)
+                  : column.filterKey
                   ? columnRowDataElement[column.filterKey]
-                  : columnRowDataElement,
-              ),
+                  : columnRowDataElement
+              )
             );
           } else {
             return filter.columnFilters.includes(
-              column.filterKey
+              typeof column.filterFunction === "function"
+                ? column.filterFunction(columnRowData)
+                : column.filterKey
                 ? columnRowData[column.filterKey]
-                : columnRowData,
+                : columnRowData
             );
           }
         });
@@ -411,7 +415,7 @@ export default {
      */
     const updateFilters = (column, columnFilters) => {
       filters.value = filters.value.filter(
-        filter => filter.columnKey !== column.id,
+        filter => filter.columnKey !== column.id
       );
       if (columnFilters.length > 0) {
         filters.value.push({
@@ -432,7 +436,7 @@ export default {
       () => {
         pageIndex.value = 0;
       },
-      { immediate: true },
+      { immediate: true }
     );
     // Compute `paginatedRows` according to rows array and pagination settings.
     watch(
@@ -450,7 +454,7 @@ export default {
           paginatedRows.value = rowKeys;
         }
       },
-      { immediate: true },
+      { immediate: true }
     );
 
     return {

diff --git a/src/BIMDataComponents/BIMDataTable/column-filters/ColumnFilters.vue b/src/BIMDataComponents/BIMDataTable/column-filters/ColumnFilters.vue
@@ -50,13 +50,17 @@ export default {
       return [
         ...new Set(
           newColumnData.flatMap(data => {
+            if (typeof column.filterFunction === "function") {
+              return column.filterFunction(data);
+            }
+
             if (!Array.isArray(data)) {
               data = [data];
             }
             return column?.filterKey
               ? data.map(d => d[column?.filterKey])
               : data;
-          }),
+          })
         ),
       ];
     });
@@ -65,7 +69,7 @@ export default {
       elements.value.map(element => ({
         data: element,
         checked: props.filters.includes(element),
-      })),
+      }))
     );
 
     const toggle = (element, checked) => {

diff --git a/src/web/views/Components/Table/Table.vue b/src/web/views/Components/Table/Table.vue
@@ -148,12 +148,12 @@
         <Code language="javascript">
           <pre>
             let rows = [
-              { firstName: "John", lastName: "Doe", age: 26, country: "Germany" },
-              { firstName: "Jane", lastName: "Doe", age: 21, country: "Austria" },
-              { firstName: "Martine", lastName: "Durand", age: 35, country: "France" },
-              { firstName: "Giuseppe", lastName: "Bompiani", age: 64, country: "Italy" },
-              { firstName: "Enrico", lastName: "Fermi", age: 41, country: "Italy" },
-              { firstName: "Lev Davidovitch", lastName: "Landau", age: 23, country: "Russia" }
+              { created_by: {firstName: "John", lastName: "Doe"}, fileName: "My_file_name", age: 26, priority: "High", tags: [{ name: "Tag 2", color: "#ff69b4"}],country: "Germany" },
+              { created_by: {firstName: "Jane", lastName: "Doe"}, fileName: "My_other_file_name", age: 21, priority: "Low", tags: [{ name: "Tag 2", color: "#ff69b4"}],country: "Austria" },
+              { created_by: {firstName: "Martine", lastName: "Durand"}, fileName: "My_file_name", age: 35, priority: "Medium", tags: [{ name: "My tag", color: "#2AAA8A"}, { name: "Reviewed", color: "#ff6954"}],country: "France" },
+              { created_by: {firstName: "Giuseppe", lastName: "Bompiani"}, fileName: "One_file_name", age: 64, priority: "Low", tags: [{ name: "Tag 5", color: "#bf70a4"}],country: "Italy" },
+              { created_by: {firstName: "Giuseppe", lastName: "Bompiani"}, fileName: "One_file_name", age: 64, priority: "low", tags: [{ name: "Missing", color: "#fh69u6"}],country: "Italy" },
+              { created_by: {firstName: "Lev Davidovitch", lastName: "Landau"}, fileName: "filename", age: 23, priority: "low", tags: [{ name: "Tag 2", color: "#ff69b4"}],country: "Russia" }
             ];
           </pre>
         </Code>
@@ -168,15 +168,21 @@
           <pre>
             let columns = [
             { 
-              id: "fullName",
-              label: "Name",
+              id: "fileName",
+              label: "Filename",
               sortable: true, defaultSortOrder: "asc",
               sortFunction: (a, b) => {
-                const fullNameA = `${a.firstName} ${a.lastName}`;
-                const fullNameB = `${b.firstName} ${b.lastName}`;
-                return fullNameA &lt; fullNameB ? 1 : -1;
+                const fullFileNameA = `${a.fileName} ${a.extesionFile}`;
+                const fullFileNameB = `${b.fileName} ${b.extesionFile}`;
+                return fullFileNameA &lt; fullFileNameB ? 1 : -1;
+              },
+              id: "created_by",
+              label: "Full name",
+              filter: true,
+              filterFunction: rowData => `${rowData.lastName} ${rowData.firstName}`,
               },
               { id: "age", label: "Age", width: "64px", sortable: true, defaultSortOrder: "asc" },
+              { id: "priority", label: "Priority", width: "200px", align: "center", filter: true },
               { id: "tags", label: "Tags", width: "200px", align: "center", filter: true },
               { id: "country", label: "Country", width: "200px", align: "center", sortable: true, defaultSortOrder: "asc" }
             ];
@@ -194,8 +200,11 @@
         <Code language="xml">
           <pre>
             &lt;BIMDataTable :columns="columns" :rows="rows"&gt;
-              &lt;template #cell-fullName="{ row }"&gt;
-                {{ "{" + "{ `${row.firstName} ${row.lastName}` }" + "}" }}
+              &lt;template #cell-filename="{ row }"&gt;
+                {{ "{" + "{ `${row.fileName}${row.extensionFile}` }" + "}" }}
+              &lt;/template&gt;
+              &lt;template #cell-created_by="{ row }"&gt;
+              &lt;FullNameCell :creator="row.created_by" /&gt;
               &lt;/template&gt;
               &lt;template #cell-age="{ row }"&gt;
                 &lt;AgeCustomCell :age="row.age" /&gt;
@@ -220,8 +229,11 @@
           :columns="advancedExample.columns"
           :rows="advancedExample.rows"
         >
-          <template #cell-fullName="{ row }">
-            {{ `${row.firstName} ${row.lastName}` }}
+          <template #cell-filename="{ row }">
+            {{ `${row.fileName}${row.extensionFile}` }}
+          </template>
+          <template #cell-created_by="{ row }">
+            <FullNameCell :creator="row.created_by" />
           </template>
           <template #cell-age="{ row }">
             <AgeCustomCell :age="row.age" />
@@ -288,6 +300,7 @@ import Code from "../../Elements/Code/Code.vue";
 import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
 import AgeCustomCell from "./example/AgeCustomCell.vue";
 import CountryCustomCell from "./example/CountryCustomCell.vue";
+import FullNameCell from "./example/FullNameCell.vue";
 import TagsCustomCell from "./example/TagsCustomCell.vue";
 
 export default {
@@ -296,6 +309,7 @@ export default {
     ComponentCode,
     AgeCustomCell,
     CountryCustomCell,
+    FullNameCell,
     TagsCustomCell,
   },
   data() {
@@ -319,17 +333,24 @@ export default {
       advancedExample: {
         columns: [
           {
-            id: "fullName",
-            label: "Name",
+            id: "filename",
+            label: "Filename",
             sortable: true,
             defaultSortOrder: "asc",
             sortFunction: (a, b) => {
-              const fullNameA = `${a.firstName} ${a.lastName}`;
-              const fullNameB = `${b.firstName} ${b.lastName}`;
+              const fullFileNameA = `${a.fileName} ${a.extesionFile}`;
+              const fullFileNameB = `${b.fileName} ${b.extesionFile}`;
 
-              return fullNameA < fullNameB ? 1 : -1;
+              return fullFileNameA < fullFileNameB ? 1 : -1;
             },
           },
+          {
+            id: "created_by",
+            label: "Full name",
+            filter: true,
+            filterFunction: rowData =>
+              `${rowData.lastName} ${rowData.firstName}`,
+          },
           {
             id: "age",
             label: "Age",
@@ -363,8 +384,12 @@ export default {
         ],
         rows: [
           {
-            firstName: "John",
-            lastName: "Doe",
+            created_by: {
+              firstName: "John",
+              lastName: "Doe",
+            },
+            fileName: "My_file_name",
+            extensionFile: ".pdf",
             age: 26,
             priority: "High",
             tags: [
@@ -376,8 +401,12 @@ export default {
             country: "Germany",
           },
           {
-            firstName: "Jane",
-            lastName: "Doe",
+            created_by: {
+              firstName: "Jane",
+              lastName: "Doe",
+            },
+            fileName: "My_other_file_name",
+            extensionFile: ".jpeg",
             age: 21,
             priority: "Low",
             tags: [
@@ -389,8 +418,12 @@ export default {
             country: "Austria",
           },
           {
-            firstName: "Martine",
-            lastName: "Durand",
+            created_by: {
+              firstName: "Martine",
+              lastName: "Durand",
+            },
+            fileName: "File_name",
+            extensionFile: ".png",
             age: 35,
             priority: "Medium",
             tags: [
@@ -406,8 +439,12 @@ export default {
             country: "France",
           },
           {
-            firstName: "Giuseppe",
-            lastName: "Bompiani",
+            created_by: {
+              firstName: "Giuseppe",
+              lastName: "Bompiani",
+            },
+            fileName: "One_file_name",
+            extensionFile: ".pdf",
             age: 64,
             priority: "Low",
             tags: [
@@ -419,8 +456,12 @@ export default {
             country: "Italy",
           },
           {
-            firstName: "Enrico",
-            lastName: "Fermi",
+            created_by: {
+              firstName: "Enrico",
+              lastName: "Doe",
+            },
+            fileName: "filename",
+            extensionFile: ".pdf",
             age: 41,
             priority: "low",
             tags: [
@@ -432,8 +473,12 @@ export default {
             country: "Italy",
           },
           {
-            firstName: "Lev Davidovitch",
-            lastName: "Landau",
+            created_by: {
+              firstName: "Lev Davidovitch",
+              lastName: "Landau",
+            },
+            fileName: "filename",
+            extensionFile: ".jpeg",
             age: 23,
             priority: "Medium",
             tags: [

diff --git a/src/web/views/Components/Table/columns-data.js b/src/web/views/Components/Table/columns-data.js
@@ -48,5 +48,10 @@ export default [
     "filterKey",
     "String",
     "Set the key to specify a filter by.",
+  ],
+  [
+    "filterFunction",
+    "Function",
+    "Set a custom filter function for the column. Be careful, this property takes precedence over “FilterKey”",
   ]
 ];
diff --git a/src/web/views/Components/Table/example/FullNameCell.vue b/src/web/views/Components/Table/example/FullNameCell.vue
@@ -0,0 +1,14 @@
+<template>
+  {{ `${creator.firstName} ${creator.lastName}` }}
+</template>
+
+<script>
+export default {
+  props: {
+    creator: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>