From e032fd682d59b981b6ba90cdfa382cc0c4641b92 Mon Sep 17 00:00:00 2001
From: alekseybobkov <aleksey.bobkov@gmail.com>
Date: Wed, 3 Dec 2014 22:48:16 -0800
Subject: [PATCH] Table drop-down processor, in progress

---
 modules/backend/layouts/_head.htm             |   4 +-
 modules/backend/widgets/Table.php             |   1 +
 .../widgets/table/assets/css/table.css        |  29 ++++
 .../backend/widgets/table/assets/js/table.js  |   9 +-
 .../table/assets/js/table.processor.base.js   |   4 +-
 .../assets/js/table.processor.checkbox.js     |   4 +-
 .../assets/js/table.processor.dropdown.js     | 133 ++++++++++++++++++
 .../table/assets/js/table.processor.string.js |   4 +-
 .../widgets/table/assets/less/table.less      |  32 +++++
 .../backend/widgets/table/partials/_table.htm | 108 +++++++-------
 10 files changed, 263 insertions(+), 65 deletions(-)
 create mode 100644 modules/backend/widgets/table/assets/js/table.processor.dropdown.js

diff --git a/modules/backend/layouts/_head.htm b/modules/backend/layouts/_head.htm
index fb70124b5..0145647c9 100644
--- a/modules/backend/layouts/_head.htm
+++ b/modules/backend/layouts/_head.htm
@@ -20,9 +20,9 @@
 <script src="<?= Backend::skinAsset('assets/js/vendor/jquery.autoellipsis.js') ?>"></script>
 <script src="<?= Backend::skinAsset('assets/js/vendor/jquery.waterfall.js') ?>"></script>
 <script src="<?= Backend::skinAsset('assets/js/vendor/jquery.cookie.js') ?>"></script>
-
+-->
 <script src="<?= Backend::skinAsset('assets/vendor/select2/select2.js') ?>"></script>
-<script src="<?= Backend::skinAsset('assets/vendor/mustache/mustache.min.js') ?>"></script>
+<!--<script src="<?= Backend::skinAsset('assets/vendor/mustache/mustache.min.js') ?>"></script>
 <script src="<?= Backend::skinAsset('assets/vendor/dropzone/dropzone.js') ?>"></script>
 
 <script src="<?= URL::asset('modules/system/assets/vendor/bootstrap/js/tooltip.js') ?>"></script>
diff --git a/modules/backend/widgets/Table.php b/modules/backend/widgets/Table.php
index 1fc6a6365..5032fdb66 100644
--- a/modules/backend/widgets/Table.php
+++ b/modules/backend/widgets/Table.php
@@ -69,6 +69,7 @@ class Table extends WidgetBase
         $this->addJs('js/table.processor.base.js', 'core');
         $this->addJs('js/table.processor.string.js', 'core');
         $this->addJs('js/table.processor.checkbox.js', 'core');
+        $this->addJs('js/table.processor.dropdown.js', 'core');
     }
 
     /**
diff --git a/modules/backend/widgets/table/assets/css/table.css b/modules/backend/widgets/table/assets/css/table.css
index f3c87d6bf..372acce40 100644
--- a/modules/backend/widgets/table/assets/css/table.css
+++ b/modules/backend/widgets/table/assets/css/table.css
@@ -149,3 +149,32 @@
   border-color: #5fb6f5;
   outline: none;
 }
+/*
+ * Dropdown editor
+ */
+.table-control td[data-column-type=dropdown] [data-view-container] {
+  padding-right: 20px;
+  position: relative;
+  cursor: pointer;
+}
+.table-control td[data-column-type=dropdown] [data-view-container]:after {
+  font-family: FontAwesome;
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  -webkit-font-smoothing: antialiased;
+  *margin-right: .3em;
+  content: "\f107";
+  font-size: 13px;
+  line-height: 100%;
+  color: #95a5a6;
+  position: absolute;
+  top: 8px;
+  right: 10px;
+}
+.table-control td[data-column-type=dropdown] [data-view-container]:hover:after {
+  color: #0181b9;
+}
+.table-control td[data-column-type=dropdown] [data-view-container] select {
+  display: none;
+}
diff --git a/modules/backend/widgets/table/assets/js/table.js b/modules/backend/widgets/table/assets/js/table.js
index a2cc56122..fb79ee3ac 100644
--- a/modules/backend/widgets/table/assets/js/table.js
+++ b/modules/backend/widgets/table/assets/js/table.js
@@ -132,10 +132,11 @@
 
     Table.prototype.initCellProcessors = function() {
         for (var i = 0, len = this.options.columns.length; i < len; i++) {
-            var column = this.options.columns[i].key,
-                columnType = this.options.columns[i].type
+            var columnConfiguration = this.options.columns[i],
+                column = columnConfiguration.key,
+                columnType = columnConfiguration.type
 
-            // Resolve the default column type string
+            // Resolve the default column type to string
             if (columnType === undefined) {
                 columnType = 'string'
                 this.options.columns[i].type = columnType
@@ -145,7 +146,7 @@
                 throw new Error('The table cell processor for the column type "'+columnType+'" is not ' +
                     'found in the $.oc.table.processor namespace.')
 
-            this.cellProcessors[column] = new $.oc.table.processor[columnType](this, column)
+            this.cellProcessors[column] = new $.oc.table.processor[columnType](this, column, columnConfiguration)
         }
     }
 
diff --git a/modules/backend/widgets/table/assets/js/table.processor.base.js b/modules/backend/widgets/table/assets/js/table.processor.base.js
index 4bf55409d..b3baa588b 100644
--- a/modules/backend/widgets/table/assets/js/table.processor.base.js
+++ b/modules/backend/widgets/table/assets/js/table.processor.base.js
@@ -15,7 +15,7 @@
     // CLASS DEFINITION
     // ============================
 
-    var Base = function(tableObj, columnName) {
+    var Base = function(tableObj, columnName, columnConfiguration) {
         //
         // State properties
         //
@@ -24,6 +24,8 @@
 
         this.columnName = columnName
 
+        this.columnConfiguration = columnConfiguration
+
         this.activeCell = null
 
         // Register event handlers
diff --git a/modules/backend/widgets/table/assets/js/table.processor.checkbox.js b/modules/backend/widgets/table/assets/js/table.processor.checkbox.js
index 327d7ffc4..59b8e2e1e 100644
--- a/modules/backend/widgets/table/assets/js/table.processor.checkbox.js
+++ b/modules/backend/widgets/table/assets/js/table.processor.checkbox.js
@@ -18,12 +18,12 @@
     var Base = $.oc.table.processor.base,
         BaseProto = Base.prototype
 
-    var CheckboxProcessor = function(tableObj, columnName) {
+    var CheckboxProcessor = function(tableObj, columnName, columnConfiguration) {
         //
         // Parent constructor
         //
 
-        Base.call(this, tableObj, columnName)
+        Base.call(this, tableObj, columnName, columnConfiguration)
     }
 
     CheckboxProcessor.prototype = Object.create(BaseProto)
diff --git a/modules/backend/widgets/table/assets/js/table.processor.dropdown.js b/modules/backend/widgets/table/assets/js/table.processor.dropdown.js
new file mode 100644
index 000000000..2b1fb624d
--- /dev/null
+++ b/modules/backend/widgets/table/assets/js/table.processor.dropdown.js
@@ -0,0 +1,133 @@
+/*
+ * Drop-down cell processor for the table control.
+ */
++function ($) { "use strict";
+
+    // NAMESPACE CHECK
+    // ============================
+
+    if ($.oc.table === undefined)
+        throw new Error("The $.oc.table namespace is not defined. Make sure that the table.js script is loaded.");
+
+    if ($.oc.table.processor === undefined)
+        throw new Error("The $.oc.table.processor namespace is not defined. Make sure that the table.processor.base.js script is loaded.");
+
+    // CLASS DEFINITION
+    // ============================
+
+    var Base = $.oc.table.processor.base,
+        BaseProto = Base.prototype
+
+    var DropdownProcessor = function(tableObj, columnName, columnConfiguration) {
+        //
+        // Parent constructor
+        //
+
+        Base.call(this, tableObj, columnName, columnConfiguration)
+    }
+
+    DropdownProcessor.prototype = Object.create(BaseProto)
+    DropdownProcessor.prototype.constructor = DropdownProcessor
+
+    DropdownProcessor.prototype.dispose = function() {
+        BaseProto.dispose.call(this)
+    }
+
+    /*
+     * Determines if the processor's cell is focusable.
+     */
+    DropdownProcessor.prototype.isCellFocusable = function() {
+        return false
+    }
+
+    /*
+     * Renders the cell in the normal (no edit) mode
+     */
+    DropdownProcessor.prototype.renderCell = function(value, cellContentContainer) {
+        var self = this
+
+        this.fetchOptions(function renderCellFetchOptions(options) {
+            if ( options[value] !== undefined )
+                value = options[value]
+
+            self.createViewContainer(cellContentContainer, value)
+            self = null
+        })
+    }
+
+    /*
+     * This method is called when the cell managed by the processor
+     * is focused (clicked or navigated with the keyboard).
+     */
+    DropdownProcessor.prototype.onFocus = function(cellElement, isClick) {
+        if (this.activeCell === cellElement)
+            return
+
+        this.activeCell = cellElement
+        this.buildEditor(cellElement, this.getCellContentContainer(cellElement))
+    }
+
+    /*
+     * Forces the processor to hide the editor when the user navigates
+     * away from the cell. Processors can update the sell value in this method.
+     * Processors must clear the reference to the active cell in this method.
+     */
+    DropdownProcessor.prototype.onUnfocus = function() {
+        if (!this.activeCell)
+            return
+
+        var select = this.activeCell.querySelector('select')
+        if (select) {
+            // Update the cell value and remove the select element
+            $(select).select2('destroy')
+
+            var value = select.options[select.selectedIndex].value,
+                text = select.options[select.selectedIndex].text
+
+            this.tableObj.setCellValue(this.activeCell, value)
+            this.setViewContainerValue(this.activeCell, text)
+
+            select.parentNode.removeChild(select)
+        }
+
+        this.showViewContainer(this.activeCell)
+        this.activeCell = null
+    }
+
+
+    DropdownProcessor.prototype.buildEditor = function(cellElement, cellContentContainer) {
+        this.hideViewContainer(this.activeCell)
+
+        // Create the select control 
+        var select = document.createElement('select'),
+            currentValue = this.tableObj.getCellValue(cellElement)
+
+        this.fetchOptions(function renderCellFetchOptions(options) {
+            for (var value  in options) {
+                var option = document.createElement('option')
+                option.value = value
+                option.text = options[value]
+
+                if (value == currentValue)
+                    option.selected = true
+
+                select.appendChild(option)
+            }
+
+            cellContentContainer.appendChild(select)
+            $(select).select2()
+            cellContentContainer = null
+            select = null
+        })
+    }
+
+    DropdownProcessor.prototype.fetchOptions = function(onSuccess) {
+        // TODO: implement caching and AJAX support,
+        // loading indicator is required here for AJAX-based options.
+        //
+        if ( this.columnConfiguration.options )
+            onSuccess(this.columnConfiguration.options)
+    }
+
+    $.oc.table.processor.dropdown = DropdownProcessor;
+}(window.jQuery);
\ No newline at end of file
diff --git a/modules/backend/widgets/table/assets/js/table.processor.string.js b/modules/backend/widgets/table/assets/js/table.processor.string.js
index 0e8fbd822..723d029f7 100644
--- a/modules/backend/widgets/table/assets/js/table.processor.string.js
+++ b/modules/backend/widgets/table/assets/js/table.processor.string.js
@@ -20,7 +20,7 @@
     var Base = $.oc.table.processor.base,
         BaseProto = Base.prototype
 
-    var StringProcessor = function(tableObj, columnName) {
+    var StringProcessor = function(tableObj, columnName, columnConfiguration) {
         //
         // State properties
         //
@@ -31,7 +31,7 @@
         // Parent constructor
         //
 
-        Base.call(this, tableObj, columnName)
+        Base.call(this, tableObj, columnName, columnConfiguration)
     }
 
     StringProcessor.prototype = Object.create(BaseProto)
diff --git a/modules/backend/widgets/table/assets/less/table.less b/modules/backend/widgets/table/assets/less/table.less
index e6b66b98a..a37e60db2 100644
--- a/modules/backend/widgets/table/assets/less/table.less
+++ b/modules/backend/widgets/table/assets/less/table.less
@@ -184,3 +184,35 @@
         }
     }
 }
+
+/*
+ * Dropdown editor
+ */
+
+.table-control {
+    td[data-column-type=dropdown] {
+        [data-view-container] {
+            padding-right: 20px;
+            position: relative;
+            cursor: pointer;
+
+            &:after {
+                .icon(@angle-down);
+                font-size: 13px;
+                line-height: 100%;
+                color: #95a5a6;
+                position: absolute;
+                top: 8px;
+                right: 10px;
+            }
+
+            &:hover:after {
+                color: @color-link;
+            }
+
+            select {
+                display: none;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/modules/backend/widgets/table/partials/_table.htm b/modules/backend/widgets/table/partials/_table.htm
index 630f81e4a..d52c69b11 100644
--- a/modules/backend/widgets/table/partials/_table.htm
+++ b/modules/backend/widgets/table/partials/_table.htm
@@ -3,8 +3,8 @@
     $data = [
         [
             'name' => 'City',
-            'type' => true,
-            'default' => 'Vancouver',
+            'billabe' => true,
+            'type' => 'string',
             'description' => 'City name',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -15,8 +15,8 @@
         ],
         [
             'name' => 'Country',
-            'type' => false,
-            'default' => 'Canada',
+            'billabe' => false,
+            'type' => 'checkbox',
             'description' => 'Country name',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -27,8 +27,8 @@
         ],
         [
             'name' => 'State',
-            'type' => true,
-            'default' => 'BC',
+            'billabe' => true,
+            'type' => 'dropdown',
             'description' => 'British columbia',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -39,8 +39,8 @@
         ],
         [
             'name' => 'Country',
-            'type' => true,
-            'default' => 'Canada',
+            'billabe' => true,
+            'type' => 'checkbox',
             'description' => 'Country name',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -51,8 +51,8 @@
         ],
         [
             'name' => 'State',
-            'type' => false,
-            'default' => 'BC',
+            'billabe' => false,
+            'type' => 'dropdown',
             'description' => 'British columbia',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -63,8 +63,8 @@
         ],
         [
             'name' => 'Country',
-            'type' => false,
-            'default' => 'Canada',
+            'billabe' => false,
+            'type' => 'checkbox',
             'description' => 'Country name',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -75,8 +75,8 @@
         ],
         [
             'name' => 'State',
-            'type' => false,
-            'default' => 'BC',
+            'billabe' => false,
+            'type' => 'dropdown',
             'description' => 'British columbia',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -87,8 +87,8 @@
         ],
         [
             'name' => 'Country',
-            'type' => true,
-            'default' => 'Canada',
+            'billabe' => true,
+            'type' => 'checkbox',
             'description' => 'Country name',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -99,8 +99,8 @@
         ],
         [
             'name' => 'State',
-            'type' => true,
-            'default' => 'BC',
+            'billabe' => true,
+            'type' => 'dropdown',
             'description' => 'British columbia',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -111,8 +111,8 @@
         ],
         [
             'name' => 'Country',
-            'type' => false,
-            'default' => 'Canada',
+            'billabe' => false,
+            'type' => 'checkbox',
             'description' => 'Country name',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -123,8 +123,8 @@
         ],
         [
             'name' => 'State',
-            'type' => true,
-            'default' => 'BC',
+            'billabe' => true,
+            'type' => 'dropdown',
             'description' => 'British columbia',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -135,8 +135,8 @@
         ],
         [
             'name' => 'Country',
-            'type' => false,
-            'default' => 'Canada',
+            'billabe' => false,
+            'type' => 'checkbox',
             'description' => 'Country name',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -147,8 +147,8 @@
         ],
         [
             'name' => 'State',
-            'type' => true,
-            'default' => 'BC',
+            'billabe' => true,
+            'type' => 'dropdown',
             'description' => 'British columbia',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -159,8 +159,8 @@
         ],
         [
             'name' => 'State',
-            'type' => false,
-            'default' => 'BC',
+            'billabe' => false,
+            'type' => 'dropdown',
             'description' => 'British columbia',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -171,8 +171,8 @@
         ],
         [
             'name' => 'Country',
-            'type' => false,
-            'default' => 'Canada',
+            'billabe' => false,
+            'type' => 'checkbox',
             'description' => 'Country name',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -183,8 +183,8 @@
         ],
         [
             'name' => 'State',
-            'type' => true,
-            'default' => 'BC',
+            'billabe' => true,
+            'type' => 'dropdown',
             'description' => 'British columbia',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -195,8 +195,8 @@
         ],
         [
             'name' => 'Country',
-            'type' => true,
-            'default' => 'Canada',
+            'billabe' => true,
+            'type' => 'checkbox',
             'description' => 'Country name',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -207,8 +207,8 @@
         ],
         [
             'name' => 'State',
-            'type' => true,
-            'default' => 'BC',
+            'billabe' => true,
+            'type' => 'dropdown',
             'description' => 'British columbia',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -219,8 +219,8 @@
         ],
         [
             'name' => 'Country',
-            'type' => true,
-            'default' => 'Canada',
+            'billabe' => true,
+            'type' => 'checkbox',
             'description' => 'Country name',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -231,8 +231,8 @@
         ],
         [
             'name' => 'State',
-            'type' => true,
-            'default' => 'BC',
+            'billabe' => true,
+            'type' => 'dropdown',
             'description' => 'British columbia',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -243,8 +243,8 @@
         ],
         [
             'name' => 'State',
-            'type' => true,
-            'default' => 'BC',
+            'billabe' => true,
+            'type' => 'dropdown',
             'description' => 'British columbia',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -255,8 +255,8 @@
         ],
         [
             'name' => 'Country',
-            'type' => true,
-            'default' => 'Canada',
+            'billabe' => true,
+            'type' => 'checkbox',
             'description' => 'Country name',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -267,8 +267,8 @@
         ],
         [
             'name' => 'State',
-            'type' => true,
-            'default' => 'BC',
+            'billabe' => true,
+            'type' => 'dropdown',
             'description' => 'British columbia',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -279,8 +279,8 @@
         ],
         [
             'name' => 'Country',
-            'type' => true,
-            'default' => 'Canada',
+            'billabe' => true,
+            'type' => 'checkbox',
             'description' => 'Country name',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -291,8 +291,8 @@
         ],
         [
             'name' => 'State',
-            'type' => true,
-            'default' => 'BC',
+            'billabe' => true,
+            'type' => 'dropdown',
             'description' => 'British columbia',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -303,8 +303,8 @@
         ],
         [
             'name' => 'Country',
-            'type' => true,
-            'default' => 'Canada',
+            'billabe' => true,
+            'type' => 'checkbox',
             'description' => 'Country name',
             'details' => 'Details string',
             'monitors' => 'Monitors string',
@@ -315,8 +315,8 @@
         ],
         [
             'name' => 'State',
-            'type' => true,
-            'default' => 'BC',
+            'billabe' => true,
+            'type' => 'dropdown',
             'description' => 'British columbia',
             'details' => 'Details string',
             'monitors' => 'Monitors string',