From db0a5d958d765cd6de2a19babf717fe9a2356dd0 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 18 Nov 2019 11:00:39 +0300
Subject: [PATCH] Refactored Table Header into a separate component

---
 src/components/datatable/DataTable.vue   | 42 ++---------------
 src/components/datatable/TableFooter.vue | 59 ++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 38 deletions(-)
 create mode 100644 src/components/datatable/TableFooter.vue

diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 7d25d2302..66375e3f8 100644
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -69,24 +69,7 @@
                         </td>
                     </tr>
                 </tbody>
-                <tfoot class="p-datatable-tfoot" v-if="hasFooter">
-                    <tr v-if="!footerColumnGroup">>
-                        <td v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.footerStyle" :class="col.footerClass"
-                            :colspan="col.colspan" :rowspan="col.rowspan">
-                            <ColumnSlot :column="col" type="footer" v-if="col.$scopedSlots.footer" />
-                            {{col.footer}}
-                        </td>
-                    </tr>
-                     <template v-else>
-                        <tr v-for="(row,i) of footerColumnGroup.rows" :key="i">
-                            <td v-for="(col,i) of row.columns" :key="col.columnKey||col.field||i" :style="col.footerStyle" :class="col.footerClass"
-                                :colspan="col.colspan" :rowspan="col.rowspan">
-                                <ColumnSlot :column="col" type="footer" v-if="col.$scopedSlots.footer" />
-                                {{col.footer}}
-                            </td>
-                        </tr>
-                    </template>
-                </tfoot>
+                <DTTableFooter :columnGroup="footerColumnGroup" :columns="columns" />
             </table>
         </div>
         <DTPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
@@ -112,10 +95,10 @@ import ObjectUtils from '../utils/ObjectUtils';
 import FilterUtils from '../utils/FilterUtils';
 import DomHandler from '../utils/DomHandler';
 import Paginator from '../paginator/Paginator';
-import ColumnSlot from './ColumnSlot.vue';
 import BodyCell from './BodyCell.vue';
 //import ScrollableView from './ScrollableView.vue';
 import TableHeader from './TableHeader.vue';
+import TableFooter from './TableFooter.vue';
 
 export default {
     props: {
@@ -1687,23 +1670,6 @@ export default {
         sorted() {
             return this.d_sortField || (this.d_multiSortMeta && this.d_multiSortMeta.length > 0);
         },
-        hasFooter() {
-            let hasFooter = false;
-
-            if (this.footerColumnGroup) {
-                hasFooter = true;
-            }
-            else {
-                for (let col of this.columns) {
-                    if (col.footer || col.$scopedSlots.footer) {
-                        hasFooter = true;
-                        break;
-                    }
-                }
-            }
-
-            return hasFooter;
-        },
         hasFilters() {
             return this.filters && Object.keys(this.filters).length > 0 && this.filters.constructor === Object;
         },
@@ -1719,11 +1685,11 @@ export default {
         }
     },
     components: {
-        'ColumnSlot': ColumnSlot,
         'DTPaginator': Paginator,
         'DTBodyCell': BodyCell,
         //'DTScrollableView': ScrollableView,
-        'DTTableHeader': TableHeader
+        'DTTableHeader': TableHeader,
+        'DTTableFooter': TableFooter
     }
 }
 </script>
diff --git a/src/components/datatable/TableFooter.vue b/src/components/datatable/TableFooter.vue
new file mode 100644
index 000000000..3cdd878d0
--- /dev/null
+++ b/src/components/datatable/TableFooter.vue
@@ -0,0 +1,59 @@
+<template>
+    <tfoot class="p-datatable-tfoot" v-if="hasFooter">
+        <tr v-if="!columnGroup">>
+            <td v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.footerStyle" :class="col.footerClass"
+                :colspan="col.colspan" :rowspan="col.rowspan">
+                <DTColumnSlot :column="col" type="footer" v-if="col.$scopedSlots.footer" />
+                {{col.footer}}
+            </td>
+        </tr>
+            <template v-else>
+            <tr v-for="(row,i) of columnGroup.rows" :key="i">
+                <td v-for="(col,i) of row.columns" :key="col.columnKey||col.field||i" :style="col.footerStyle" :class="col.footerClass"
+                    :colspan="col.colspan" :rowspan="col.rowspan">
+                    <DTColumnSlot :column="col" type="footer" v-if="col.$scopedSlots.footer" />
+                    {{col.footer}}
+                </td>
+            </tr>
+        </template>
+    </tfoot>
+</template>
+
+<script>
+import ColumnSlot from './ColumnSlot.vue';
+
+export default {
+    props: {
+        columnGroup: {
+            type: null,
+            default: null
+        },
+        columns: {
+            type: null,
+            default: null
+        },
+    },
+    computed: {
+        hasFooter() {
+            let hasFooter = false;
+
+            if (this.columnGroup) {
+                hasFooter = true;
+            }
+            else {
+                for (let col of this.columns) {
+                    if (col.footer || col.$scopedSlots.footer) {
+                        hasFooter = true;
+                        break;
+                    }
+                }
+            }
+
+            return hasFooter;
+        },
+    },
+    components: {
+        'DTColumnSlot': ColumnSlot
+    }
+}
+</script>
\ No newline at end of file