closes #31

laravel-enso · Mar 11, 2018 · 924618b · 924618b
1 parent 17b507c
commit 924618b
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -60,7 +60,8 @@ Outside of Laravel Enso, the following dependencies are required:
 - [Bulma](https://bulma.io/) for styling
 - [Axios](https://github.com/axios/axios) for AJAX requests
 - [Lodash](https://lodash.com/) for debounce
-- [Font Awesome](https://fontawesome.com/) 5 for the icons
+- [Font Awesome 5](https://fontawesome.com/) for the icons
+- [Akryum v-tooltip](https://github.com/Akryum/v-tooltip) for displaying tooltips
 
 Next:
 1. `composer require laravel-enso/vuedatatable` to pull in the package and its dependencies

diff --git a/src/app/Classes/Attributes/Column.php b/src/app/Classes/Attributes/Column.php
@@ -6,5 +6,5 @@ class Column
 {
     const Mandatory = ['label', 'name', 'data'];
 
-    const Optional = ['meta', 'enum'];
+    const Optional = ['meta', 'enum', 'tooltip'];
 }
diff --git a/src/app/Classes/Template/Validators/Columns.php b/src/app/Classes/Template/Validators/Columns.php
@@ -22,7 +22,8 @@ public function validate()
             $this->checkMandatoryAttributes($column)
                 ->checkOptionalAttributes($column)
                 ->checkMeta($column)
-                ->checkEnum($column);
+                ->checkEnum($column)
+                ->checkTooltip($column);
         });
     }
 
@@ -95,4 +96,16 @@ private function checkEnum($column)
 
         return $this;
     }
+
+    private function checkTooltip($column)
+    {
+        if (property_exists($column, 'tooltip') && !is_string($column->tooltip)) {
+            throw new TemplateException(__(
+                    'The tooltip provided for ":column" must be a string',
+                    ['column' => $column->name]
+                ));
+        }
+
+        return $this;
+    }
 }
diff --git a/src/resources/assets/js/components/enso/vuedatatable/TableHeader.vue b/src/resources/assets/js/components/enso/vuedatatable/TableHeader.vue
@@ -6,26 +6,24 @@
                 v-if="template.crtNo">
                 {{ i18n(template.labels.crtNo) }}
             </th>
-            <th class="vue-table-header"
-                :class="template.align"
+            <th :class="['vue-table-header', template.align]"
                 v-for="column in template.columns"
+                v-tooltip="column.tooltip || null"
                 :key="column.label"
                 v-if="column.meta.visible && !column.meta.hidden && !column.meta.rogue">
-                <span>
-                    {{ i18n(column.label) }}
-                    <span class="table-header-controls">
-                        <span class="sorter"
-                            @click="toggleSort($event, column)"
-                            v-if="column.meta.sortable">
-                            <span class="icon is-small">
-                                <fa :icon="sortIcon(column.meta.sort)" size="xs"></fa>
-                            </span>
+                {{ i18n(column.label) }}
+                <span class="table-header-controls">
+                    <span class="sorter"
+                        @click="toggleSort($event, column)"
+                        v-if="column.meta.sortable">
+                        <span class="icon is-small">
+                            <fa :icon="sortIcon(column.meta.sort)" size="xs"></fa>
                         </span>
-                        <a class="delete is-small"
-                            v-if="column.meta.sort"
-                            @click="clearColumnSort(column)">
-                        </a>
                     </span>
+                    <a class="delete is-small"
+                        v-if="column.meta.sort"
+                        @click="clearColumnSort(column)">
+                    </a>
                 </span>
             </th>
             <th :class="template.align"
@@ -39,7 +37,9 @@
 
 <script>
 
+import { VTooltip } from 'v-tooltip';
 import fontawesome from '@fortawesome/fontawesome';
+
 import { faSort, faSortUp, faSortDown, faPlus, faFileExcel }
     from '@fortawesome/fontawesome-free-solid/shakable.es';
 
@@ -48,6 +48,8 @@ fontawesome.library.add(faSort, faSortUp, faSortDown, faPlus, faFileExcel);
 export default {
     name: 'Header',
 
+    directives: { tooltip: VTooltip },
+
     props: {
         template: {
             type: Object,

diff --git a/src/resources/assets/js/components/enso/vuedatatable/responsive/vResponsive.js b/src/resources/assets/js/components/enso/vuedatatable/responsive/vResponsive.js
@@ -2,14 +2,16 @@ import resizeDetector from 'element-resize-detector';
 import ResponsiveTable from './ResponsiveTable';
 
 const erd = resizeDetector({ strategy: 'scroll' });
+let table = null;
 
 export default {
-    componentUpdated: (el, binding, { context }) => {
-        const table = new ResponsiveTable(el, context);
-        table.resize();
-        erd.removeAllListeners(el);
+    inserted: (el, binding, { context }) => {
+        table = new ResponsiveTable(el, context);
         erd.listenTo(el, () => table.resize());
     },
+    componentUpdated: () => {
+        table.resize();
+    },
     unbind(el) {
         const erd = resizeDetector({ strategy: 'scroll' });
         erd.uninstall(el);