From 9b8fdc78c1c56a1f5bb5c5caa2f2ff96a93b9d86 Mon Sep 17 00:00:00 2001
From: Steve Sutton <steve@gaslightmedia.com>
Date: Mon, 14 Oct 2019 16:49:04 -0400
Subject: [PATCH] Update table list to use js Tabulator.info

Using new javascript library for the table list views.
---
 models/admin/plugins/index.php         |  3 ++
 models/admin/plugins/plugins.php       |  4 +--
 models/admin/plugins/servers.php       |  3 ++
 models/admin/plugins/sites.php         |  3 ++
 views/admin/plugins/index.html         | 11 +++---
 views/admin/plugins/plugin-detail.html | 47 +++++++++++++++++++++++---
 views/admin/plugins/plugins.html       | 35 ++++++++++++++++++-
 views/admin/plugins/server-detail.html | 34 ++++++++++++++++---
 views/admin/plugins/servers.html       | 34 ++++++++++++++++++-
 views/admin/plugins/site-detail.html   | 38 +++++++++++++++++++--
 views/admin/plugins/sites.html         | 33 +++++++++++++++++-
 11 files changed, 223 insertions(+), 22 deletions(-)

diff --git a/models/admin/plugins/index.php b/models/admin/plugins/index.php
index 55d8b71..3daa615 100644
--- a/models/admin/plugins/index.php
+++ b/models/admin/plugins/index.php
@@ -110,6 +110,9 @@ class GlmMembersAdmin_plugins_index // extends GlmDataEmailMessages
         wp_enqueue_style( 'Foundation6', GLM_MEMBERS_PLUGIN_URL . 'css/foundation-6.min.css' );
         wp_enqueue_script( 'Foundation6', GLM_MEMBERS_PLUGIN_URL . 'js/foundation-6.min.js' );
 
+        wp_enqueue_style( 'Tabulator', GLM_MEMBERS_PLUGINS_PLUGIN_URL . '/js/tabulator/dist/css/tabulator.min.css' );
+        wp_enqueue_script( 'Tabulator', GLM_MEMBERS_PLUGINS_PLUGIN_URL . '/js/tabulator/dist/js/tabulator.min.js' );
+
         if ( isset( $_REQUEST['option'] ) ) {
             $option = $_REQUEST['option'];
         }
diff --git a/models/admin/plugins/plugins.php b/models/admin/plugins/plugins.php
index 2b278d6..74166f3 100644
--- a/models/admin/plugins/plugins.php
+++ b/models/admin/plugins/plugins.php
@@ -109,8 +109,8 @@ class GlmMembersAdmin_plugins_plugins extends GlmDataPlugins
         wp_enqueue_style( 'Foundation6', GLM_MEMBERS_PLUGIN_URL . '/css/foundation-6.min.css' );
         wp_enqueue_script( 'Foundation6', GLM_MEMBERS_PLUGIN_URL . '/js/foundation-6.min.js' );
 
-        // wp_enqueue_style( 'Tabulator', GLM_MEMBERS_PLUGINS_PLUGIN_URL . '/js/tabulator/dist/css/tabulator.min.css' );
-        // wp_enqueue_script( 'Tabulator', GLM_MEMBERS_PLUGINS_PLUGIN_URL . '/js/tabulator/dist/js/tabulator.min.js' );
+        wp_enqueue_style( 'Tabulator', GLM_MEMBERS_PLUGINS_PLUGIN_URL . '/js/tabulator/dist/css/tabulator.min.css' );
+        wp_enqueue_script( 'Tabulator', GLM_MEMBERS_PLUGINS_PLUGIN_URL . '/js/tabulator/dist/js/tabulator.min.js' );
 
         if ( isset( $_REQUEST['option'] ) ) {
             $option = $_REQUEST['option'];
diff --git a/models/admin/plugins/servers.php b/models/admin/plugins/servers.php
index 6eae634..d8e9b28 100644
--- a/models/admin/plugins/servers.php
+++ b/models/admin/plugins/servers.php
@@ -108,6 +108,9 @@ class GlmMembersAdmin_plugins_servers extends GlmDataServers
         wp_enqueue_style( 'Foundation6', GLM_MEMBERS_PLUGIN_URL . 'css/foundation-6.min.css' );
         wp_enqueue_script( 'Foundation6', GLM_MEMBERS_PLUGIN_URL . 'js/foundation-6.min.js' );
 
+        wp_enqueue_style( 'Tabulator', GLM_MEMBERS_PLUGINS_PLUGIN_URL . '/js/tabulator/dist/css/tabulator.min.css' );
+        wp_enqueue_script( 'Tabulator', GLM_MEMBERS_PLUGINS_PLUGIN_URL . '/js/tabulator/dist/js/tabulator.min.js' );
+
         if ( isset( $_REQUEST['option'] ) ) {
             $option = $_REQUEST['option'];
         }
diff --git a/models/admin/plugins/sites.php b/models/admin/plugins/sites.php
index 74e8b45..c160d7c 100644
--- a/models/admin/plugins/sites.php
+++ b/models/admin/plugins/sites.php
@@ -108,6 +108,9 @@ class GlmMembersAdmin_plugins_sites extends GlmDataSites
         wp_enqueue_style( 'Foundation6', GLM_MEMBERS_PLUGIN_URL . 'css/foundation-6.min.css' );
         wp_enqueue_script( 'Foundation6', GLM_MEMBERS_PLUGIN_URL . 'js/foundation-6.min.js' );
 
+        wp_enqueue_style( 'Tabulator', GLM_MEMBERS_PLUGINS_PLUGIN_URL . '/js/tabulator/dist/css/tabulator.min.css' );
+        wp_enqueue_script( 'Tabulator', GLM_MEMBERS_PLUGINS_PLUGIN_URL . '/js/tabulator/dist/js/tabulator.min.js' );
+
         if ( isset( $_REQUEST['option'] ) ) {
             $option = $_REQUEST['option'];
         }
diff --git a/views/admin/plugins/index.html b/views/admin/plugins/index.html
index fc40a39..f996296 100644
--- a/views/admin/plugins/index.html
+++ b/views/admin/plugins/index.html
@@ -20,15 +20,18 @@
     jQuery(document).ready(function($){
         var tabledata = [
             {foreach $plugins as $plugin}
-                { id:"{$plugin.id}", name:"{$plugin.name}", latestVersion: "{$plugin.latest_version}", numProdUpdates: "{count($plugin.oldProdVersions)}", numDevUpdates: "{count($plugin.oldDevVersions)}" },
+                { id:"{$plugin.id}", name:"{$plugin.name|escape:'quotes'}", latestVersion: "{$plugin.latest_version}", numProdUpdates: "{count($plugin.oldProdVersions)}", numDevUpdates: "{count($plugin.oldDevVersions)}" },
             {/foreach}
         ];
 
         {literal}
         var table = new Tabulator("#dashboard-plugins",{
-            height: 300,
+            height: "350px",
             data: tabledata,
             layout: "fitColumns",
+            tooltips: true,
+            addRowPos: "top",
+            initialSort: [ {column: "name", dir: "asc"} ],
             columns:[
                 {title:"Plugin Name", field:"name", width:"350"},
                 {title:"Latest Version", field:"latestVersion", align:"left"},
@@ -37,13 +40,11 @@
             ],
             rowClick:function(e, row){
                 console.log('Row ' + row.getData().id + ' Clicked!!!');
+                window.location.href="{/literal}{$thisUrl}?page={$thisPage}&glm_action=plugins&option=view&plugin_id={literal}" + row.getData().id;
             }
         });
         {/literal}
     });
 </script>
 
-<link href="https://unpkg.com/tabulator-tables@4.4.3/dist/css/tabulator.min.css" rel="stylesheet">
-<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.3/dist/js/tabulator.min.js"></script>
-
 {include file='admin/footer.html'}
diff --git a/views/admin/plugins/plugin-detail.html b/views/admin/plugins/plugin-detail.html
index a1da9d5..fdec3bf 100644
--- a/views/admin/plugins/plugin-detail.html
+++ b/views/admin/plugins/plugin-detail.html
@@ -114,7 +114,7 @@
 <a class="button primary" href="{$baseUrl}&option=pluginSite{if !empty($smarty.request.order)}&order={$smarty.request.order}{/if}">Add Site</a>
 
 {if !empty($sites) && !$newEntry}
-    <table class="stack hover">
+    <table class="stack hover hide">
         <tr>
             <th class="text-left"><a href="{$baseUrl}&order={if !empty($smarty.request.order) && $smarty.request.order != 'nameA'}nameA{else}nameD{/if}">Site Name</a></th>
             <th class="text-left"><a href="{$baseUrl}&order={if !empty($smarty.request.order) && $smarty.request.order != 'prod_serverA'}prod_serverA{else}prod_serverD{/if}">Prod Server</a></th>
@@ -132,16 +132,53 @@
             </tr>
         {/foreach}
     </table>
+
+    <div id="siteList"></div>
 {/if}
 
 {* Grid End *}
 {include file='ui/f6/grid-end.html'}
 
 <script>
-jQuery(document).ready(function($){
-    $(document).foundation();
-
-});
+    jQuery(document).ready(function($){
+        $(document).foundation();
+        var tabledata = [
+            {foreach $sites as $site}
+                { id:"{$site.id}", name:"{$site.site_name|escape:'quotes'}",
+                prodServer: "{$site.prod_server}", prodVersion: "{$site.prod_version}",
+                prodUpToDate: {if !empty($site.prod_version) && version_compare( $plugin.fieldData.latest_version, $site.prod_version, '>' )}false{elseif !empty($site.prod_version)}true{else}null{/if},
+                devServer: "{$site.dev_server}", devVersion: "{$site.dev_version}",
+                devUpToDate: {if !empty($site.dev_version) && version_compare( $plugin.fieldData.latest_version, $site.dev_version, '>' )}false{elseif !empty($site.dev_version)}true{else}null{/if}
+                },
+            {/foreach}
+        ];
+
+        {literal}
+        var table = new Tabulator("#siteList",{
+            height: "350px",
+            data: tabledata,
+            layout: "fitColumns",
+            tooltips: true,
+            addRowPos: "top",
+            initialSort: [ {column: "name", dir: "asc"} ],
+            columns:[
+                {title:"Site Name", field:"name", width:"250"},
+                {title:"Prod Server", field:"prodServer", align:"left"},
+                {title:"Prod Version", field:"prodVersion", align:"left", editor:true, cellEdited: function(cell){
+                    console.log('Edit: ', cell );
+                }},
+                {title:"Status", field:"prodUpToDate", formatter:"tickCross"},
+                {title:"Dev Server", field:"devServer", align:"left"},
+                {title:"Dev Version", field:"devVersion", align:"left", editor: true},
+                {title:"Status", field:"devUpToDate", formatter:"tickCross"},
+            ],
+            rowClick:function(e, row){
+                console.log('Row ' + row.getData().id + ' Clicked!!!');
+                window.location.href="{/literal}{$baseUrl}&option=pluginSite{if !empty($smarty.request.order)}&order={$smarty.request.order}{/if}&site_id={literal}" + row.getData().id;
+            }
+        });
+        {/literal}
+    });
 </script>
 
 {* Footer *}
diff --git a/views/admin/plugins/plugins.html b/views/admin/plugins/plugins.html
index 010d4ea..06b0e4d 100644
--- a/views/admin/plugins/plugins.html
+++ b/views/admin/plugins/plugins.html
@@ -4,7 +4,7 @@
 {include file="admin/header.html"}
 <h3>List Plugins</h3>
 
-<table class="stack hover">
+<table class="stack hover hide">
     <thead>
         <tr>
             <th width="10">ID</th>
@@ -28,6 +28,39 @@
 
 </table>
 
+<div id="pluginList"></div>
+
+<script>
+    jQuery(document).ready(function($){
+        var tabledata = [
+            {foreach $plugins as $plugin}
+                {
+                    id:"{$plugin.id}",
+                    name:"{$plugin.name|escape:'quotes'}",
+                    latestVersion:"{$plugin.latest_version}", glmAssociate:{if $plugin.glm_associate.value}true{else}false{/if} },
+            {/foreach}
+        ];
+        {literal}
+        var table = new Tabulator("#pluginList",{
+            height: "350px",
+            data: tabledata,
+            layout: "fitColumns",
+            tooltips: true,
+            addRowPos: "top",
+            initialSort: [ {column: "name", dir: "asc"} ],
+            columns:[
+                {title:"Plugin Name", field:"name", width:"350"},
+                {title:"Latest Version", field:"latestVersion", align:"left"},
+                {title:"GLM Assoc", field:"glmAssociate", align:"left", formatter:"tickCross"},
+            ],
+            rowClick:function(e, row){
+                console.log('Row ' + row.getData().id + ' Clicked!!!');
+                window.location.href="{/literal}{$thisUrl}?page={$thisPage}&glm_action={$thisAction}&option=view&plugin_id={literal}" + row.getData().id;
+            }
+        });
+        {/literal}
+    });
+</script>
 
 {* Footer *}
 {include file="../../admin/footer.html"}
diff --git a/views/admin/plugins/server-detail.html b/views/admin/plugins/server-detail.html
index 041ae07..9a7e50e 100644
--- a/views/admin/plugins/server-detail.html
+++ b/views/admin/plugins/server-detail.html
@@ -106,7 +106,7 @@
 </style>
 
 {if !empty($sites)}
-    <table class="stack hover">
+    <table class="stack hover hide">
         <tr>
             <th class="text-left">Site Name</th>
             <th class="text-left">URL</th>
@@ -118,16 +118,40 @@
             </tr>
         {/foreach}
     </table>
+
+    <div id="siteList"></div>
 {/if}
 
 {* Grid End *}
 {include file='ui/f6/grid-end.html'}
 
 <script>
-jQuery(document).ready(function($){
-    $(document).foundation();
-
-});
+    jQuery(document).ready(function($){
+        $(document).foundation();
+        var tabledata = [
+            {foreach $sites as $site}
+                { id:"{$site.id}", name:"{$site.site_name|escape:'quotes'}", url: "{$site.url}" },
+            {/foreach}
+        ];
+
+        {literal}
+        var table = new Tabulator("#siteList",{
+            height: "350px",
+            data: tabledata,
+            layout: "fitColumns",
+            tooltips: true,
+            addRowPos: "top",
+            initialSort: [ {column: "name", dir: "asc"} ],
+            columns:[
+                {title:"Site Name", field:"name", width:"250"},
+                {title:"URL", field:"url", align:"left"},
+            ],
+            rowClick:function(e, row){
+                console.log('Row ' + row.getData().id + ' Clicked!!!');
+            }
+        });
+        {/literal}
+    });
 </script>
 
 {* Footer *}
diff --git a/views/admin/plugins/servers.html b/views/admin/plugins/servers.html
index 55f025a..a3b12ed 100644
--- a/views/admin/plugins/servers.html
+++ b/views/admin/plugins/servers.html
@@ -4,7 +4,7 @@
 {include file="admin/header.html"}
 <h3>List Servers</h3>
 
-<table class="stack hover">
+<table class="stack hover hide">
     <thead>
         <tr>
             <th width="10">ID</th>
@@ -30,6 +30,38 @@
 
 </table>
 
+<div id="serverList"></div>
+
+<script>
+    jQuery(document).ready(function($){
+        var tabledata = [
+            {foreach $servers as $server}
+                { id:"{$server.id}", name:"{$server.name|escape:'quotes'}", location: "{$server.location}", phpVersion: "{$server.php_version}", mysqlVersion:"{$server.mysql_version}" },
+            {/foreach}
+        ];
+
+        {literal}
+        var table = new Tabulator("#serverList",{
+            height: "200px",
+            data: tabledata,
+            layout: "fitColumns",
+            tooltips: true,
+            addRowPos: "top",
+            initialSort: [ {column: "name", dir: "asc"} ],
+            columns:[
+                {title:"Server Name", field:"name", width:"350"},
+                {title:"Location", field:"location", align:"left"},
+                {title:"PHP Version", field:"phpVersion", align:"left"},
+                {title:"MySQL Version", field:"mysqlVersion", align:"left"},
+            ],
+            rowClick:function(e, row){
+                console.log('Row ' + row.getData().id + ' Clicked!!!');
+                window.location.href="{/literal}{$thisUrl}?page={$thisPage}&glm_action={$thisAction}&option=view&server_id={literal}" + row.getData().id;
+            }
+        });
+        {/literal}
+    });
+</script>
 
 {* Footer *}
 {include file="../../admin/footer.html"}
diff --git a/views/admin/plugins/site-detail.html b/views/admin/plugins/site-detail.html
index 3040ccc..0d7dc51 100644
--- a/views/admin/plugins/site-detail.html
+++ b/views/admin/plugins/site-detail.html
@@ -160,7 +160,7 @@
 </style>
 
 {if !empty($plugins)}
-    <table class="stack hover">
+    <table class="stack hover hide">
         <tr>
             <th class="text-left">Plugin Name</th>
             <th class="text-left">Prod Version</th>
@@ -174,15 +174,49 @@
             </tr>
         {/foreach}
     </table>
+
+    <div id="pluginList"></div>
 {/if}
 
+
 {* Grid End *}
 {include file='ui/f6/grid-end.html'}
 
 <script>
 jQuery(document).ready(function($){
     $(document).foundation();
-
+      var tabledata = [
+            {foreach $plugins as $plugin}
+                { id:"{$plugin.id}", name:"{$plugin.name|escape:'quotes'}",
+                prodVersion: "{$plugin.prod_version}",
+                prodUpToDate: {if !empty($plugin.prod_version) && version_compare( $plugin.latest_version, $plugin.prod_version, '>' )}false{elseif !empty($plugin.prod_version)}true{else}null{/if},
+                devVersion: "{$plugin.dev_version}",
+                devUpToDate: {if !empty($plugin.dev_version) && version_compare( $plugin.latest_version, $plugin.dev_version, '>' )}false{elseif !empty($plugin.dev_version)}true{else}null{/if}
+                },
+            {/foreach}
+        ];
+
+        {literal}
+        var table = new Tabulator("#pluginList",{
+            height: "350px",
+            data: tabledata,
+            layout: "fitColumns",
+            tooltips: true,
+            addRowPos: "top",
+            initialSort: [ {column: "name", dir: "asc"} ],
+            columns:[
+                {title:"Site Name", field:"name", width:"250"},
+                {title:"Prod Version", field:"prodVersion", align:"left"},
+                {title:"Status", field:"prodUpToDate", formatter:"tickCross"},
+                {title:"Dev Version", field:"devVersion", align:"left"},
+                {title:"Status", field:"devUpToDate", formatter:"tickCross"},
+            ],
+            rowClick:function(e, row){
+                console.log('Row ' + row.getData().id + ' Clicked!!!');
+                window.location.href="{/literal}{$baseUrl}&option=pluginSite{if !empty($smarty.request.order)}&order={$smarty.request.order}{/if}&site_id={literal}" + row.getData().id;
+            }
+        });
+        {/literal}
 });
 </script>
 
diff --git a/views/admin/plugins/sites.html b/views/admin/plugins/sites.html
index 1d98d78..9909bf0 100644
--- a/views/admin/plugins/sites.html
+++ b/views/admin/plugins/sites.html
@@ -4,7 +4,7 @@
 {include file="admin/header.html"}
 <h3>List Sites</h3>
 
-<table class="stack hover">
+<table class="stack hover hide">
     <thead>
         <tr>
             <th width="10">ID</th>
@@ -28,6 +28,37 @@
 
 </table>
 
+<div id="siteList"></div>
+
+<script>
+    jQuery(document).ready(function($){
+        var tabledata = [
+            {foreach $sites as $site}
+                { id:"{$site.id}", name:"{$site.name|escape:'quotes'}", prodUrl: "{$site.prod_url}", devUrl: "{$site.dev_url}" },
+            {/foreach}
+        ];
+
+        {literal}
+        var table = new Tabulator("#siteList",{
+            height: "350px",
+            data: tabledata,
+            layout: "fitColumns",
+            tooltips: true,
+            addRowPos: "top",
+            initialSort: [ {column: "name", dir: "asc"} ],
+            columns:[
+                {title:"Site Name", field:"name", width:"350", headerFilter: true},
+                {title:"Prod Url", field:"prodUrl", align:"left"},
+                {title:"Dev Url", field:"devUrl", align:"left"},
+            ],
+            rowClick:function(e, row){
+                console.log('Row ' + row.getData().id + ' Clicked!!!');
+                window.location.href="{/literal}{$thisUrl}?page={$thisPage}&glm_action={$thisAction}&option=view&site_id={literal}" + row.getData().id;
+            }
+        });
+        {/literal}
+    });
+</script>
 
 {* Footer *}
 {include file="../../admin/footer.html"}
-- 
2.17.1