diff options
Diffstat (limited to 'app/assets/javascripts/blob/csv/csv_viewer.vue')
-rw-r--r-- | app/assets/javascripts/blob/csv/csv_viewer.vue | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/app/assets/javascripts/blob/csv/csv_viewer.vue b/app/assets/javascripts/blob/csv/csv_viewer.vue new file mode 100644 index 00000000000..050f2785d9a --- /dev/null +++ b/app/assets/javascripts/blob/csv/csv_viewer.vue @@ -0,0 +1,55 @@ +<script> +import { GlAlert, GlLoadingIcon, GlTable } from '@gitlab/ui'; +import Papa from 'papaparse'; + +export default { + components: { + GlTable, + GlAlert, + GlLoadingIcon, + }, + props: { + csv: { + type: String, + required: true, + }, + }, + data() { + return { + items: [], + errorMessage: null, + loading: true, + }; + }, + mounted() { + const parsed = Papa.parse(this.csv, { skipEmptyLines: true }); + this.items = parsed.data; + + if (parsed.errors.length) { + this.errorMessage = parsed.errors.map((e) => e.message).join('. '); + } + + 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> + <gl-alert v-if="errorMessage" variant="danger" :dismissible="false"> + {{ errorMessage }} + </gl-alert> + <gl-table + :empty-text="__('No CSV data to display.')" + :items="items" + :fields="$options.fields" + show-empty + thead-class="gl-display-none" + /> + </div> + </div> +</template> |