first commit + add fe component vue accone
This commit is contained in:
194
libs/vendor/xlsprse/components/ColumnChooser.vue
vendored
Normal file
194
libs/vendor/xlsprse/components/ColumnChooser.vue
vendored
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="catalog-column-chooser">
|
||||
<a href="#" class="header-tool" @click="toggleHeaders">
|
||||
{{ withHeaders ? text[lang].file.withoutHeaders : text[lang].file.withHeaders }}
|
||||
</a>
|
||||
<br><br>
|
||||
<div v-for="(column, index) in localUserColumns">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="panel panel-success" :class="{ 'panel-success': column.selection, 'panel-danger': !column.selection }">
|
||||
<div class="panel-heading">
|
||||
<p v-if="column.selection">{{ column.selection.name }}</p>
|
||||
<p v-else>{{ text[lang].chooseColumn }}</p>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<multiselect
|
||||
:id="index"
|
||||
v-model="column.selection"
|
||||
deselect-label=""
|
||||
:selected-label="text[lang].selected"
|
||||
:select-label="text[lang].select"
|
||||
track-by="name"
|
||||
label="name"
|
||||
:placeholder="text[lang].selectColumn"
|
||||
:options="column.options"
|
||||
:searchable="false"
|
||||
:allow-empty="false"
|
||||
@select="onSelectChange"
|
||||
></multiselect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading">
|
||||
{{ text[lang].columnData }} <i>"{{ column.name }}"</i>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center">{{ column.name }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="data in column.displayedData">
|
||||
<td>{{ data }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right" v-if="showValidateButton">
|
||||
<button @click="validate" id="validate-columns" class="btn btn-primary">{{ text[lang].submit }}</button>
|
||||
</div>
|
||||
<simplert
|
||||
:useRadius="true"
|
||||
:useIcon="true"
|
||||
ref="simplert">
|
||||
</simplert>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Multiselect from 'vue-multiselect';
|
||||
import Simplert from 'vue2-simplert';
|
||||
import _ from 'lodash';
|
||||
import text from '../lang';
|
||||
|
||||
export default {
|
||||
name: 'ColumnChooser',
|
||||
components: { Multiselect, Simplert },
|
||||
props: {
|
||||
userColumns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
validator: columns => columns.every(column => _.has(column, 'name') && _.has(column, 'data')),
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
validator: columns => columns.every(column => _.has(column, 'name') && _.has(column, 'value')),
|
||||
},
|
||||
showValidateButton: {
|
||||
type: Boolean,
|
||||
default: () => true,
|
||||
},
|
||||
lang: {
|
||||
type: String,
|
||||
default: () => 'en',
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
userColumns(newColumns) {
|
||||
this.fillLocalUserColumns(newColumns);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onSelectChange({ value: selectedValue }, id) { // eslint-disable-line
|
||||
if (this.optionalValues.indexOf(selectedValue) !== -1) return;
|
||||
|
||||
_.forEach(this.localUserColumns, (column, index) => {
|
||||
if (index !== id) {
|
||||
const hasSelectionConflict = column.selection && column.selection.value === selectedValue;
|
||||
if (hasSelectionConflict) {
|
||||
column.selection = null; // eslint-disable-line
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
validate() {
|
||||
const hasMadeAllSelections = this.localUserColumns.every(column => column.selection !== null);
|
||||
if (!hasMadeAllSelections) {
|
||||
this.showError(text[this.lang].error.selectColumn); // eslint-disable-line
|
||||
} else {
|
||||
const selectedRequiredValues = _
|
||||
.map(this.localUserColumns, 'selection.value')
|
||||
.filter(value => this.requiredValues.indexOf(value) !== -1);
|
||||
|
||||
const missingValues = _.difference(this.requiredValues, selectedRequiredValues);
|
||||
if (missingValues.length > 0) {
|
||||
this.showError(`${text[this.lang].error.missingColumns} ${missingValues.join(', ')}`); // eslint-disable-line
|
||||
return;
|
||||
}
|
||||
|
||||
this.results = this.localUserColumns.map(localColumn => ({
|
||||
column: localColumn.selection.value,
|
||||
data: localColumn.data,
|
||||
}));
|
||||
this.$emit('on-validate', this.results);
|
||||
}
|
||||
},
|
||||
fillLocalUserColumns(newColumns) {
|
||||
this.localUserColumns = newColumns.map(column => ({
|
||||
name: column.name,
|
||||
displayedData: _.take(column.data, 4),
|
||||
data: column.data,
|
||||
options: _.clone(this.columns),
|
||||
selection: null,
|
||||
}));
|
||||
},
|
||||
toggleHeaders() {
|
||||
if (this.withHeaders) {
|
||||
this.localUserColumns.forEach((column, index) => {
|
||||
const data = [column.name].concat(column.data);
|
||||
column.name = `${text[this.lang].column} ${index + 1}`; // eslint-disable-line
|
||||
column.data = data; // eslint-disable-line
|
||||
column.displayedData = _.take(column.data, 4); // eslint-disable-line
|
||||
});
|
||||
} else {
|
||||
this.localUserColumns.forEach((column) => {
|
||||
column.name = column.data.shift(); // eslint-disable-line
|
||||
column.displayedData = _.take(column.data, 4); // eslint-disable-line
|
||||
});
|
||||
}
|
||||
this.withHeaders = !this.withHeaders;
|
||||
},
|
||||
showError(message) {
|
||||
this.$refs.simplert.openSimplert({
|
||||
title: text[this.lang].error.title,
|
||||
message,
|
||||
type: 'error',
|
||||
customCloseBtnText: text[this.lang].close,
|
||||
});
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
withHeaders: true,
|
||||
localUserColumns: [],
|
||||
requiredValues: [],
|
||||
optionalValues: [],
|
||||
results: [],
|
||||
text,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.fillLocalUserColumns(this.userColumns);
|
||||
this.optionalValues = this.columns
|
||||
.filter(column => column.isOptional)
|
||||
.map(column => column.value);
|
||||
this.requiredValues = this.columns
|
||||
.filter(column => !column.isOptional)
|
||||
.map(column => column.value);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
|
||||
Reference in New Issue
Block a user