snippet_blob_view.vue 2.7 KB
Newer Older
1
<script>
2 3
import GetBlobContent from 'shared_queries/snippet/snippet_blob_content.query.graphql';

4
import BlobContent from '~/blob/components/blob_content.vue';
5
import BlobHeader from '~/blob/components/blob_header.vue';
6

7 8 9 10 11 12
import {
  SIMPLE_BLOB_VIEWER,
  RICH_BLOB_VIEWER,
  BLOB_RENDER_EVENT_LOAD,
  BLOB_RENDER_EVENT_SHOW_SOURCE,
} from '~/blob/components/constants';
13

14 15
export default {
  components: {
16
    BlobHeader,
17
    BlobContent,
18 19
  },
  apollo: {
20 21 22 23
    blobContent: {
      query: GetBlobContent,
      variables() {
        return {
24
          ids: [this.snippet.id],
25
          rich: this.activeViewerType === RICH_BLOB_VIEWER,
26
          paths: [this.blob.path],
27 28
        };
      },
29 30 31
      update(data) {
        return this.onContentUpdate(data);
      },
32 33 34
      skip() {
        return this.viewer.renderError;
      },
35
    },
36
  },
37 38 39 40 41
  provide() {
    return {
      blobHash: Math.random().toString().split('.')[1],
    };
  },
42 43 44 45 46
  props: {
    snippet: {
      type: Object,
      required: true,
    },
47 48 49 50
    blob: {
      type: Object,
      required: true,
    },
51
  },
52 53
  data() {
    return {
54
      blobContent: '',
55
      activeViewerType:
56
        this.blob?.richViewer && !window.location.hash ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER,
57 58
    };
  },
59
  computed: {
60 61 62 63 64 65 66
    isContentLoading() {
      return this.$apollo.queries.blobContent.loading;
    },
    viewer() {
      const { richViewer, simpleViewer } = this.blob;
      return this.activeViewerType === RICH_BLOB_VIEWER ? richViewer : simpleViewer;
    },
67 68 69
    hasRenderError() {
      return Boolean(this.viewer.renderError);
    },
70 71
  },
  methods: {
72
    switchViewer(newViewer) {
73 74 75 76 77
      this.activeViewerType = newViewer || SIMPLE_BLOB_VIEWER;
    },
    forceQuery() {
      this.$apollo.queries.blobContent.skip = false;
      this.$apollo.queries.blobContent.refetch();
78
    },
79 80
    onContentUpdate(data) {
      const { path: blobPath } = this.blob;
81 82 83
      const {
        blobs: { nodes: dataBlobs },
      } = data.snippets.nodes[0];
84
      const updatedBlobData = dataBlobs.find((blob) => blob.path === blobPath);
85 86
      return updatedBlobData.richData || updatedBlobData.plainData;
    },
87
  },
88 89
  BLOB_RENDER_EVENT_LOAD,
  BLOB_RENDER_EVENT_SHOW_SOURCE,
90 91 92
};
</script>
<template>
Vitaly Slobodin's avatar
Vitaly Slobodin committed
93
  <figure class="file-holder snippet-file-content" :aria-label="__('Code snippet')">
94 95 96 97 98
    <blob-header
      :blob="blob"
      :active-viewer-type="viewer.type"
      :has-render-error="hasRenderError"
      @viewer-changed="switchViewer"
99
    />
100 101 102 103 104 105 106 107
    <blob-content
      :loading="isContentLoading"
      :content="blobContent"
      :active-viewer="viewer"
      :blob="blob"
      @[$options.BLOB_RENDER_EVENT_LOAD]="forceQuery"
      @[$options.BLOB_RENDER_EVENT_SHOW_SOURCE]="switchViewer"
    />
108
  </figure>
109
</template>