1 files changed, 75 insertions, 0 deletions
diff --git a/app/assets/javascripts/notebook/index.vue b/app/assets/javascripts/notebook/index.vue
new file mode 100644
index 00000000000..fd62c1231ef
--- /dev/null
+++ b/app/assets/javascripts/notebook/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <div v-if="hasNotebook">
+    <component
+      v-for="(cell, index) in cells"
+      :is="cellType(cell.cell_type)"
+      :cell="cell"
+      :key="index"
+      :code-css-class="codeCssClass" />
+  </div>
+</template>
+
+<script>
+  import {
+    MarkdownCell,
+    CodeCell,
+  } from './cells';
+
+  export default {
+    components: {
+      'code-cell': CodeCell,
+      'markdown-cell': MarkdownCell,
+    },
+    props: {
+      notebook: {
+        type: Object,
+        required: true,
+      },
+      codeCssClass: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    methods: {
+      cellType(type) {
+        return `${type}-cell`;
+      },
+    },
+    computed: {
+      cells() {
+        if (this.notebook.worksheets) {
+          const data = {
+            cells: [],
+          };
+
+          return this.notebook.worksheets.reduce((cellData, sheet) => {
+            const cellDataCopy = cellData;
+            cellDataCopy.cells = cellDataCopy.cells.concat(sheet.cells);
+            return cellDataCopy;
+          }, data).cells;
+        }
+
+        return this.notebook.cells;
+      },
+      hasNotebook() {
+        return Object.keys(this.notebook).length;
+      },
+    },
+  };
+</script>
+
+<style>
+.cell,
+.input,
+.output {
+  display: flex;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.cell pre {
+  margin: 0;
+  width: 100%;
+}
+</style>