summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/notebook/index.vue
blob: c5cc8c97dda0b6483fe5f3de288ae34da6e7e48d (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<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: '',
    },
  },
  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;
    },
  },
  methods: {
    cellType(type) {
      return `${type}-cell`;
    },
  },
};
</script>

<template>
  <div v-if="hasNotebook">
    <component
      :is="cellType(cell.cell_type)"
      v-for="(cell, index) in cells"
      :key="index"
      :cell="cell"
      :code-css-class="codeCssClass" />
  </div>
</template>

<style>
.cell,
.input,
.output {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
}

.cell pre {
  margin: 0;
  width: 100%;
}
</style>