From 32cff43a88a88b20fd48f153bc60547981904ee2 Mon Sep 17 00:00:00 2001 From: Gaelle Date: Fri, 19 Apr 2024 11:37:30 +0200 Subject: [PATCH] add filterFunction & documentation --- .../BIMDataTable/BIMDataTable.vue | 30 +++--- .../column-filters/ColumnFilters.vue | 8 +- src/web/views/Components/Table/Table.vue | 93 +++++++++++++------ .../views/Components/Table/columns-data.js | 5 + .../Components/Table/example/FullNameCell.vue | 14 +++ 5 files changed, 105 insertions(+), 45 deletions(-) create mode 100644 src/web/views/Components/Table/example/FullNameCell.vue diff --git a/src/BIMDataComponents/BIMDataTable/BIMDataTable.vue b/src/BIMDataComponents/BIMDataTable/BIMDataTable.vue index 8828bf6d..69a8addb 100644 --- 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 index 7162ba07..b040be84 100644 --- 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 index ecfeb0bb..8463cc15 100644 --- a/src/web/views/Components/Table/Table.vue +++ b/src/web/views/Components/Table/Table.vue @@ -148,12 +148,12 @@ 
             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" }
             ];
@@ -168,15 +168,21 @@ 
             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 < fullNameB ? 1 : -1;
+                const fullFileNameA = `${a.fileName} ${a.extesionFile}`;
+                const fullFileNameB = `${b.fileName} ${b.extesionFile}`;
+                return fullFileNameA < 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" }
             ];
@@ -220,8 +226,8 @@
           :columns="advancedExample.columns"
           :rows="advancedExample.rows"
         >
-