9 - adding pagination

README.md

@@ -0,0 +1,11 @@
+# Getting Started
+
+```
+$ ACCEPT_EULA=yes docker-compose up -d
+$ cd data-load
+$ npm install
+$ node index.js
+$ cd ../app
+$ npm install
+$ npm run start
+```

app/src/App.css

@@ -19,6 +19,17 @@
   flex-wrap: wrap;
 }
 
+.Main .paginate {
+  display: flex;
+  width: 85%;
+  justify-content: flex-end;
+}
+
+.Main .paginate .previous, .Main .paginate .next {
+  margin: 0.5em;
+  cursor: pointer;
+}
+
 .Filters {
   display: flex;
   flex-direction: column;

app/src/Main.js

@@ -4,11 +4,17 @@ import Movie from "./Movie"
 import EnigmaService from "./services/EnigmaService"
 
 class Main extends Component {
+  HEIGHT = 100
+
   constructor(props) {
     super(props)
 
     this.state = {
-      movieList: []
+      movieList: [],
+      hypercube: null,
+      top: 0,
+      hasMore: false,
+      dimensions: []
     }
   }
   async componentDidMount() {
@@ -69,7 +75,7 @@ class Main extends Component {
         qInitialDataFetch: [
           {
             qTop: 0,
-            qHeight: 100,
+            qHeight: this.HEIGHT,
             qLeft: 0,
             qWidth: 9
           }
@@ -79,27 +85,73 @@ class Main extends Component {
       }
     }
 
-    EnigmaService.getData(hypercubeProperties, this.updateData.bind(this))
+    let hypercube = await EnigmaService.getData(
+      hypercubeProperties,
+      this.updateData.bind(this)
+    )
+    await this.setState({ hypercube })
   }
 
   async updateData(model) {
     const layout = await model.getLayout()
-    const dimensions = layout.qHyperCube.qDimensionInfo
-    const movieList = layout.qHyperCube.qDataPages[0].qMatrix.map(
+    await this.setState({ top: 0, height: layout.qHyperCube.qSize.qcy, hasMore: layout.qHyperCube.qSize.qcy > this.HEIGHT, dimensions: layout.qHyperCube.qDimensionInfo })
+    this.transformMatrix(layout.qHyperCube.qDataPages[0].qMatrix)
+  }
+
+  transformMatrix(matrix) {
+    const movieList = matrix.map(
       (listItem, index) => {
         const item = {}
-        for (let i = 0; i < dimensions.length; i++) {
-          item[dimensions[i].qFallbackTitle] = listItem[i].qText
+        for (let i = 0; i < this.state.dimensions.length; i++) {
+          item[this.state.dimensions[i].qFallbackTitle] = listItem[i].qText
         }
         return <Movie key={`movie${index}`} movie={item} />
       }
     )
     this.setState({ movieList })
   }
 
+  async prevPage() {
+    await this.setState({top: this.state.top - this.HEIGHT, hasMore: this.state.height > this.state.top })
+    const pageDef = [
+      {
+        qTop: this.state.top,
+        qLeft: 0,
+        qWidth: 9,
+        qHeight: this.HEIGHT
+      }
+    ]
+    let pages = await this.state.hypercube.getHyperCubeData('/qHyperCubeDef', pageDef)
+    this.transformMatrix(pages[0].qMatrix)
+  }
+
+  async nextPage() {
+    await this.setState({top: this.state.top + this.HEIGHT, hasMore: this.state.height > this.state.top + (this.HEIGHT * 2) })
+    const pageDef = [
+      {
+        qTop: this.state.top,
+        qLeft: 0,
+        qWidth: 9,
+        qHeight: this.HEIGHT
+      }
+    ]
+    let pages = await this.state.hypercube.getHyperCubeData('/qHyperCubeDef', pageDef)
+    this.transformMatrix(pages[0].qMatrix)
+  }
+
   render() {
-    const { movieList } = this.state
-    return <div className="Main">{movieList}</div>
+    const { movieList, hasMore, top } = this.state
+    return (
+      <div className="Main">
+        {movieList}
+        {top > 0 || hasMore ? (
+          <div className="paginate">
+            {top >  0 ? <div className="previous" onClick={this.prevPage.bind(this)}>Previous</div> : null}
+            {hasMore ? <div className="next" onClick={this.nextPage.bind(this)}>Next</div> : null}
+        </div>
+        ) : null }
+      </div>
+    )
   }
 }
 

app/src/services/EnigmaService.js

@@ -92,6 +92,8 @@ class EnigmaService {
     if (callback) sessionObject.on("changed", () => callback(sessionObject))
 
     await callback(sessionObject)
+
+    return sessionObject
   }
 
   async makeSelection(fieldName, selection) {

docker-compose.yml

@@ -2,7 +2,7 @@ version: "2"
 
 services:
   engine:
-    image: qlikcore/engine:12.300.0
+    image: qlikcore/engine:12.350.0
     command: -S AcceptEULA=${ACCEPT_EULA} -S DocumentDirectory=/docs
     ports:
       - "19076:9076"