91 lines
1.7 KiB
Vue
91 lines
1.7 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-10"></div>
|
|
<h1 class="title">Importar productos desde CSV</h1>
|
|
</div>
|
|
<form @submit.prevent="submitFile">
|
|
<div class="cont-col">
|
|
<label for="file"> Archivo .csv</label>
|
|
<input
|
|
id="file"
|
|
type="file"
|
|
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
|
|
placeholder="Elige un archivo"
|
|
required
|
|
@change="handleFile"
|
|
/>
|
|
</div>
|
|
<p v-if="error" class="error">{{ error }}</p>
|
|
<SubmitButton text="Importar"></SubmitButton>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
layout: 'admin',
|
|
middleware: 'auth',
|
|
meta: {
|
|
auth: { authority: 'SITE_ADMIN' },
|
|
},
|
|
data() {
|
|
return {
|
|
file: null,
|
|
error: null,
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
async handleFile(e) {
|
|
const selectedFile = await e.target.files[0]
|
|
this.file = selectedFile
|
|
},
|
|
|
|
async submitFile() {
|
|
this.error = null
|
|
const formData = new FormData()
|
|
formData.append('csv_file', this.file)
|
|
|
|
try {
|
|
await this.$api.post('/load_coops/', formData, {
|
|
headers: {
|
|
'Content-Type': 'multipart/form-data',
|
|
},
|
|
})
|
|
} catch {
|
|
this.error = 'Ha habido un error'
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
margin-top: 40px;
|
|
margin-bottom: 80px;
|
|
}
|
|
.title {
|
|
color: $color-navy;
|
|
font-size: $xxl;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
.cont-col {
|
|
margin: 15px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
label {
|
|
text-align: left;
|
|
color: $color-navy;
|
|
font-weight: $bold;
|
|
font-size: $xs;
|
|
}
|
|
|
|
.error {
|
|
color: $color-error;
|
|
}
|
|
</style>
|