grid.column.Progress #6546

Author: tobiu

examples/grid/bigData/GridContainer.mjs

@@ -46,7 +46,7 @@ class GridContainer extends BaseGridContainer {
      * @protected
      */
     afterSetAmountColumns(value, oldValue) {
-        let i       = 6,
+        let i       = 7,
             columns = [
                 {type: 'index', dataField: 'id', text: '#', width: 60},
                 {cellAlign: 'left', dataField: 'firstname', defaultSortDirection: 'ASC', text: 'Firstname', width: 150},
@@ -57,7 +57,8 @@ class GridContainer extends BaseGridContainer {
                     text  : record.firstname + ' ++',
                     width : 130
                 })},
-                {type: 'animatedChange', dataField: 'counter', text: 'Counter'}
+                {type: 'animatedChange', dataField: 'counter', text: 'Counter'},
+                {type: 'progress',       dataField: 'progress', text: 'Progress', width: 150}
             ];
 
         for (; i <= value; i++) {

examples/grid/bigData/MainModel.mjs

@@ -24,13 +24,14 @@ class MainModel extends Model {
      * @protected
      */
     afterSetAmountColumns(value, oldValue) {
-        let i      = 6,
+        let i      = 7,
             fields = [
                 {name: 'id',        type: 'Int'},
                 {name: 'countAction'},
                 {name: 'counter',   type: 'Int'},
                 {name: 'firstname', type: 'String'},
-                {name: 'lastname',  type: 'String'}
+                {name: 'lastname',  type: 'String'},
+                {name: 'progress',  type: 'Int'}
             ];
 
         for (; i <= value; i++) {

examples/grid/bigData/MainStore.mjs

@@ -113,12 +113,13 @@ class MainStore extends Store {
             column, record;
 
         for (; row < amountRows; row++) {
-            column = 5;
+            column = 7;
             record = {
                 id       : row + 1,
                 counter  : Math.round(Math.random() * 100),
                 firstname: me.firstnames[Math.floor(Math.random() * amountFirstnames)],
-                lastname : me.lastnames[ Math.floor(Math.random() * amountLastnames)]
+                lastname : me.lastnames[ Math.floor(Math.random() * amountLastnames)],
+                progress : Math.round(Math.random() * 100)
             };
 
             for (; column <= amountColumns; column++) {

resources/scss/src/grid/column/Progress.scss

@@ -0,0 +1,34 @@
+.neo-grid-cell {
+    .neo-progress-wrapper {
+        progress[value] {
+            appearance: none;
+            border    : none;
+            display   : flex;
+            height    : var(--grid-cell-progress-height);
+
+            @-moz-document url-prefix() {
+                background-color: var(--grid-cell-progress-track-color);
+                border-radius   : var(--grid-cell-progress-border-radius);
+                box-shadow      : 0 2px 5px rgba(0, 0, 0, 0.25) inset;
+            }
+
+            // for webkit the progress-bar is the track
+            &::-webkit-progress-bar {
+                background-color: var(--grid-cell-progress-track-color);
+                border-radius   : var(--grid-cell-progress-border-radius);
+                box-shadow      : 0 2px 5px rgba(0, 0, 0, 0.25) inset;
+            }
+
+            // for mozilla the progress-bar is the active range
+            &::-moz-progress-bar {
+                background-color: var(--grid-cell-progress-active-color);
+                border-radius   : var(--grid-cell-progress-border-radius);
+            }
+
+            &::-webkit-progress-value {
+                background-color: var(--grid-cell-progress-active-color);
+                border-radius   : var(--grid-cell-progress-border-radius);
+            }
+        }
+    }
+}

resources/scss/theme-dark/grid/column/Progress.scss

@@ -0,0 +1,6 @@
+:root .neo-theme-dark { // .neo-grid-cell
+    --grid-cell-progress-active-color : #5d83a7;
+    --grid-cell-progress-border-radius: 2px;
+    --grid-cell-progress-height       : 10px;
+    --grid-cell-progress-track-color  : #333;
+}

resources/scss/theme-light/grid/column/Progress.scss

@@ -0,0 +1,6 @@
+:root .neo-theme-light { // .neo-grid-cell
+    --grid-cell-progress-active-color : #5d83a7;
+    --grid-cell-progress-border-radius: 2px;
+    --grid-cell-progress-height       : 10px;
+    --grid-cell-progress-track-color  : #eee;
+}

resources/scss/theme-neo-light/grid/column/Progress.scss

@@ -0,0 +1,6 @@
+:root .neo-theme-neo-light { // .neo-grid-cell
+    --grid-cell-progress-active-color : #5d83a7;
+    --grid-cell-progress-border-radius: 2px;
+    --grid-cell-progress-height       : 10px;
+    --grid-cell-progress-track-color  : #eee;
+}

src/grid/Container.mjs

@@ -22,7 +22,8 @@ class GridContainer extends BaseContainer {
         animatedChange: column.AnimatedChange,
         column        : column.Base,
         component     : column.Component,
-        index         : column.Index
+        index         : column.Index,
+        progress      : column.Progress
     }
     /**
      * @member {Object} delayable

src/grid/column/Component.mjs

@@ -15,6 +15,11 @@ class Component extends Column {
          * @member {Function|Object|null} component=null
          */
         component: null,
+        /**
+         * @member {Object} defaults
+         * @protected
+         */
+        defaults: null,
         /**
          * Components can delegate event listeners (or button handlers) into methods somewhere inside
          * the view controller or component tree hierarchy.
@@ -37,6 +42,16 @@ class Component extends Column {
      */
     map = new Map()
 
+    /**
+     * Override as needed inside class extensions
+     * @param {Object} config
+     * @param {Record} record
+     * @returns {Object}
+     */
+    applyRecordConfigs(config, record) {
+        return config
+    }
+
     /**
      * @param {Object}             data
      * @param {Neo.column.Base}    data.column
@@ -54,14 +69,16 @@ class Component extends Column {
             {appName, view, windowId}         = gridContainer,
             me               = this,
             {recordProperty} = me,
-            id               = `${me.id}-component-${rowIndex % (view.availableRows + 2 * view.bufferRowRange)}`,
+            id               = me.getComponentId(rowIndex),
             component        = me.map.get(id),
             componentConfig  = me.component;
 
         if (Neo.typeOf(componentConfig) === 'Function') {
             componentConfig = componentConfig(data)
         }
 
+        componentConfig = me.applyRecordConfigs(componentConfig, record);
+
         if (component) {
             delete componentConfig.className;
             delete componentConfig.module;
@@ -73,6 +90,7 @@ class Component extends Column {
             component.set(componentConfig)
         } else {
             component = Neo.create({
+                ...me.defaults,
                 ...componentConfig,
                 appName,
                 id,
@@ -88,6 +106,17 @@ class Component extends Column {
 
         return component.createVdomReference()
     }
+
+    /**
+     * @param {Number} rowIndex
+     * @returns {String}
+     */
+    getComponentId(rowIndex) {
+        let me     = this,
+            {view} = me.parent;
+
+        return `${me.id}-component-${rowIndex % (view.availableRows + 2 * view.bufferRowRange)}`
+    }
 }
 
 export default Neo.setupClass(Component);

src/grid/column/Progress.mjs

@@ -0,0 +1,42 @@
+import ComponentColumn   from './Component.mjs';
+import ProgressComponent from '../../component/Progress.mjs';
+
+/**
+ * @class Neo.grid.column.Progress
+ * @extends Neo.grid.column.Component
+ */
+class Progress extends ComponentColumn {
+    static config = {
+        /**
+         * @member {String} className='Neo.grid.column.Progress'
+         * @protected
+         */
+        className: 'Neo.grid.column.Progress',
+        /**
+         * @member {Object} defaults
+         * @protected
+         */
+        defaults: {
+            module: ProgressComponent
+        },
+        /**
+         * @member {String} type='progress'
+         * @protected
+         */
+        type: 'progress'
+    }
+
+    /**
+     * @param {Object} config
+     * @param {Record} record
+     * @returns {Object}
+     */
+    applyRecordConfigs(config, record) {
+        return {
+            value: record[this.dataField],
+            ...config
+        }
+    }
+}
+
+export default Neo.setupClass(Progress);