From 6c33bdeb1cd49f5daeb5640eca6854e0b5de928f Mon Sep 17 00:00:00 2001
From: Erin Bond <erin.bond@code.org>
Date: Fri, 30 Mar 2018 17:58:17 -0700
Subject: [PATCH 1/3] variable column widths

---
 .../sectionProgress/VirtualizedDetailView.jsx | 68 +++++++++++++++----
 1 file changed, 53 insertions(+), 15 deletions(-)

diff --git a/apps/src/templates/sectionProgress/VirtualizedDetailView.jsx b/apps/src/templates/sectionProgress/VirtualizedDetailView.jsx
index e0c2fae9e1de7..bd5093637516b 100644
--- a/apps/src/templates/sectionProgress/VirtualizedDetailView.jsx
+++ b/apps/src/templates/sectionProgress/VirtualizedDetailView.jsx
@@ -2,6 +2,14 @@ import React, { Component } from 'react';
 import { MultiGrid } from 'react-virtualized';
 import ProgressBubble from '../progress/ProgressBubble';
 
+const styles = {
+  cell: {
+    padding: 10,
+    width: '100%',
+    // color: 'red',
+  }
+};
+
 const STYLE = {
   border: '1px solid #ddd',
 };
@@ -19,6 +27,25 @@ const STYLE_TOP_RIGHT_GRID = {
   fontWeight: 'bold',
 };
 
+const list = [
+  ["Lesson", "1", "2", "3", "4"],
+  ["Level Type", "1", "2", "3", "4"],
+  ["Student 1"],
+  ["Student 2"],
+  ["Student 3"],
+  ["Student 4"],
+  ["Student 5"],
+  ["Student 6"],
+  ["Student 7"],
+  ["Student 8"],
+  ["Student 9"],
+  ["Student 10"],
+  ["Student 11"],
+  ["Student 12"],
+];
+
+const columnWidths = [150, 50, 100, 300, 50];
+
 export default class VirtualizedDetailView extends Component {
 
   constructor(props, context) {
@@ -26,27 +53,27 @@ export default class VirtualizedDetailView extends Component {
 
     this.state = {
       fixedColumnCount: 1,
-      fixedRowCount: 1,
+      fixedRowCount: 2,
       scrollToColumn: 0,
       scrollToRow: 0,
     };
 
     this._cellRenderer = this._cellRenderer.bind(this);
+    this._getColumnWidth = this._getColumnWidth.bind(this);
   }
 
   render() {
-
     return (
         <MultiGrid
           {...this.state}
           cellRenderer={this._cellRenderer}
-          columnWidth={75}
-          columnCount={50}
+          columnWidth={this._getColumnWidth}
+          columnCount={5}
           enableFixedColumnScroll
           enableFixedRowScroll
           height={300}
           rowHeight={40}
-          rowCount={300}
+          rowCount={list.length}
           style={STYLE}
           styleBottomLeftGrid={STYLE_BOTTOM_LEFT_GRID}
           styleTopLeftGrid={STYLE_TOP_LEFT_GRID}
@@ -58,18 +85,29 @@ export default class VirtualizedDetailView extends Component {
 
   _cellRenderer({columnIndex, key, rowIndex, style}) {
     return (
-      <div className="cell" key={key} style={style}>
-        <ProgressBubble
-          level={{
-            levelNumber: 3,
-            status: "perfect",
-            url: "/foo/bar",
-            icon: "fa-document"
-          }}
-          disabled={false}
-        />
+      <div className={styles.Cell} key={key} style={style}>
+        {rowIndex > 1 && columnIndex > 0 && (
+          <ProgressBubble
+            level={{
+              levelNumber: 3,
+              status: "complete",
+              url: "/foo/bar",
+              icon: "fa-document"
+            }}
+            disabled={false}
+          />
+        )}
+        {(rowIndex <= 1 || columnIndex === 0) && (
+          <span style={styles.cell}>
+            {list[rowIndex][columnIndex]}
+          </span>
+        )}
       </div>
     );
   }
 
+  _getColumnWidth({index}) {
+    return columnWidths[index];
+  }
+
 }

From 3b1f10b91bf8a1fa8222189eb9861629b53a4cf0 Mon Sep 17 00:00:00 2001
From: Erin Bond <erin.bond@code.org>
Date: Mon, 2 Apr 2018 09:34:24 -0700
Subject: [PATCH 2/3] remove unnecessary binding

---
 .../sectionProgress/VirtualizedDetailView.jsx         | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/apps/src/templates/sectionProgress/VirtualizedDetailView.jsx b/apps/src/templates/sectionProgress/VirtualizedDetailView.jsx
index bd5093637516b..621c22f064f14 100644
--- a/apps/src/templates/sectionProgress/VirtualizedDetailView.jsx
+++ b/apps/src/templates/sectionProgress/VirtualizedDetailView.jsx
@@ -57,17 +57,14 @@ export default class VirtualizedDetailView extends Component {
       scrollToColumn: 0,
       scrollToRow: 0,
     };
-
-    this._cellRenderer = this._cellRenderer.bind(this);
-    this._getColumnWidth = this._getColumnWidth.bind(this);
   }
 
   render() {
     return (
         <MultiGrid
           {...this.state}
-          cellRenderer={this._cellRenderer}
-          columnWidth={this._getColumnWidth}
+          cellRenderer={this.cellRenderer}
+          columnWidth={this.getColumnWidth}
           columnCount={5}
           enableFixedColumnScroll
           enableFixedRowScroll
@@ -83,7 +80,7 @@ export default class VirtualizedDetailView extends Component {
     );
   }
 
-  _cellRenderer({columnIndex, key, rowIndex, style}) {
+  cellRenderer({columnIndex, key, rowIndex, style}) {
     return (
       <div className={styles.Cell} key={key} style={style}>
         {rowIndex > 1 && columnIndex > 0 && (
@@ -106,7 +103,7 @@ export default class VirtualizedDetailView extends Component {
     );
   }
 
-  _getColumnWidth({index}) {
+  getColumnWidth({index}) {
     return columnWidths[index];
   }
 

From 8b8b713b1b07f701af6b84004ce678fa9082f8bc Mon Sep 17 00:00:00 2001
From: Erin Bond <erin.bond@code.org>
Date: Mon, 2 Apr 2018 10:59:35 -0700
Subject: [PATCH 3/3] use styles object consistent with other components

---
 .../sectionProgress/VirtualizedDetailView.jsx | 91 +++++++++----------
 1 file changed, 42 insertions(+), 49 deletions(-)

diff --git a/apps/src/templates/sectionProgress/VirtualizedDetailView.jsx b/apps/src/templates/sectionProgress/VirtualizedDetailView.jsx
index 621c22f064f14..3b5e59685f2c9 100644
--- a/apps/src/templates/sectionProgress/VirtualizedDetailView.jsx
+++ b/apps/src/templates/sectionProgress/VirtualizedDetailView.jsx
@@ -6,27 +6,25 @@ const styles = {
   cell: {
     padding: 10,
     width: '100%',
-    // color: 'red',
+  },
+  multigrid: {
+    border: '1px solid #ddd',
+  },
+  bottomLeft: {
+    borderRight: '2px solid #aaa',
+    backgroundColor: '#f7f7f7',
+  },
+  topLeft: {
+    borderBottom: '2px solid #aaa',
+    borderRight: '2px solid #aaa',
+    fontWeight: 'bold',
+  },
+  topRight: {
+    borderBottom: '2px solid #aaa',
+    fontWeight: 'bold',
   }
 };
 
-const STYLE = {
-  border: '1px solid #ddd',
-};
-const STYLE_BOTTOM_LEFT_GRID = {
-  borderRight: '2px solid #aaa',
-  backgroundColor: '#f7f7f7',
-};
-const STYLE_TOP_LEFT_GRID = {
-  borderBottom: '2px solid #aaa',
-  borderRight: '2px solid #aaa',
-  fontWeight: 'bold',
-};
-const STYLE_TOP_RIGHT_GRID = {
-  borderBottom: '2px solid #aaa',
-  fontWeight: 'bold',
-};
-
 const list = [
   ["Lesson", "1", "2", "3", "4"],
   ["Level Type", "1", "2", "3", "4"],
@@ -48,37 +46,12 @@ const columnWidths = [150, 50, 100, 300, 50];
 
 export default class VirtualizedDetailView extends Component {
 
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      fixedColumnCount: 1,
-      fixedRowCount: 2,
-      scrollToColumn: 0,
-      scrollToRow: 0,
-    };
-  }
-
-  render() {
-    return (
-        <MultiGrid
-          {...this.state}
-          cellRenderer={this.cellRenderer}
-          columnWidth={this.getColumnWidth}
-          columnCount={5}
-          enableFixedColumnScroll
-          enableFixedRowScroll
-          height={300}
-          rowHeight={40}
-          rowCount={list.length}
-          style={STYLE}
-          styleBottomLeftGrid={STYLE_BOTTOM_LEFT_GRID}
-          styleTopLeftGrid={STYLE_TOP_LEFT_GRID}
-          styleTopRightGrid={STYLE_TOP_RIGHT_GRID}
-          width={970}
-        />
-    );
-  }
+  state = {
+    fixedColumnCount: 1,
+    fixedRowCount: 2,
+    scrollToColumn: 0,
+    scrollToRow: 0,
+  };
 
   cellRenderer({columnIndex, key, rowIndex, style}) {
     return (
@@ -107,4 +80,24 @@ export default class VirtualizedDetailView extends Component {
     return columnWidths[index];
   }
 
+  render() {
+    return (
+        <MultiGrid
+          {...this.state}
+          cellRenderer={this.cellRenderer}
+          columnWidth={this.getColumnWidth}
+          columnCount={5}
+          enableFixedColumnScroll
+          enableFixedRowScroll
+          height={300}
+          rowHeight={40}
+          rowCount={list.length}
+          style={styles.multigrid}
+          styleBottomLeftGrid={styles.bottomLeft}
+          styleTopLeftGrid={styles.topLeft}
+          styleTopRightGrid={styles.topRight}
+          width={970}
+        />
+    );
+  }
 }