admin/cooperativas page and functionality

pages/admin/importar.vue

@@ -0,0 +1,90 @@
+<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>