diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-08 03:17:29 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-08 03:17:29 +0300 |
commit | ffb0a8971203ead090e22aef741d10ea076085b6 (patch) | |
tree | a6332ac5f6997e9651950de55e4b3cdafd30b1c0 /app/assets/javascripts/blob | |
parent | c608e2662b48cacb296815a2d7c0cf649f063465 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/blob')
-rw-r--r-- | app/assets/javascripts/blob/csv/csv_viewer.vue | 55 | ||||
-rw-r--r-- | app/assets/javascripts/blob/csv/index.js | 17 | ||||
-rw-r--r-- | app/assets/javascripts/blob/csv_viewer.js | 3 | ||||
-rw-r--r-- | app/assets/javascripts/blob/viewer/index.js | 2 |
4 files changed, 77 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> diff --git a/app/assets/javascripts/blob/csv/index.js b/app/assets/javascripts/blob/csv/index.js new file mode 100644 index 00000000000..4cf6c169c68 --- /dev/null +++ b/app/assets/javascripts/blob/csv/index.js @@ -0,0 +1,17 @@ +import Vue from 'vue'; +import CsvViewer from './csv_viewer.vue'; + +export default () => { + const el = document.getElementById('js-csv-viewer'); + + return new Vue({ + el, + render(createElement) { + return createElement(CsvViewer, { + props: { + csv: el.dataset.data, + }, + }); + }, + }); +}; diff --git a/app/assets/javascripts/blob/csv_viewer.js b/app/assets/javascripts/blob/csv_viewer.js new file mode 100644 index 00000000000..64d3ba0b390 --- /dev/null +++ b/app/assets/javascripts/blob/csv_viewer.js @@ -0,0 +1,3 @@ +import renderCSV from './csv'; + +export default renderCSV; diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js index 47b82296128..db91d478b39 100644 --- a/app/assets/javascripts/blob/viewer/index.js +++ b/app/assets/javascripts/blob/viewer/index.js @@ -21,6 +21,8 @@ const loadRichBlobViewer = (type) => { return import(/* webpackChunkName: 'notebook_viewer' */ '../notebook_viewer'); case 'openapi': return import(/* webpackChunkName: 'openapi_viewer' */ '../openapi_viewer'); + case 'csv': + return import(/* webpackChunkName: 'csv_viewer' */ '../csv_viewer'); case 'pdf': return import(/* webpackChunkName: 'pdf_viewer' */ '../pdf_viewer'); case 'sketch': |