All files / app/assets/javascripts/blob/csv csv_viewer.vue

100% Statements 10/10
100% Branches 4/4
100% Functions 3/3
100% Lines 10/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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  1x 1x 1x                             5x             5x 5x   5x 1x     5x         33x                                  
<script>
import { GlLoadingIcon, GlTable } from '@gitlab/ui';
import Papa from 'papaparse';
import PapaParseAlert from '~/vue_shared/components/papa_parse_alert.vue';
 
export default {
  components: {
    PapaParseAlert,
    GlTable,
    GlLoadingIcon,
  },
  props: {
    csv: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      items: [],
      papaParseErrors: [],
      loading: true,
    };
  },
  mounted() {
    const parsed = Papa.parse(this.csv, { skipEmptyLines: true });
    this.items = parsed.data;
 
    if (parsed.errors.length) {
      this.papaParseErrors = parsed.errors;
    }
 
    this.loading = false;
  },
};
</script>
 
<template>
  <div class="container-fluid md gl-mt-3 gl-mb-3">
    <div v-if="loading" class="gl-text-center loading">
      <gl-loading-icon class="gl-mt-5" size="lg" />
    </div>
    <div v-else>
      <papa-parse-alert v-if="papaParseErrors.length" :papa-parse-errors="papaParseErrors" />
      <gl-table
        :empty-text="__('No CSV data to display.')"
        :items="items"
        :fields="$options.fields"
        show-empty
        thead-class="gl-display-none"
      />
    </div>
  </div>
</template>