admin/cooperativas page and functionality
This commit is contained in:
María
180
pages/admin/cooperativas.vue
Normal file
180
pages/admin/cooperativas.vue
Normal file
@@ -0,0 +1,180 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="!loading" class="container" >
|
||||||
|
<BModal
|
||||||
|
id="modal-center"
|
||||||
|
v-model="activeModal"
|
||||||
|
centered
|
||||||
|
title="latienda.coop"
|
||||||
|
:ok-variant="modalColor"> {{ modalText }}
|
||||||
|
</BModal>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-10">
|
||||||
|
<h1 class="title">Administrar cooperativas</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<template v-if="companies">
|
||||||
|
<v-data-table
|
||||||
|
v-model="selectedItemsIndexes"
|
||||||
|
show-select
|
||||||
|
:single-select="false"
|
||||||
|
:headers="headers"
|
||||||
|
:search="search"
|
||||||
|
:items="companies"
|
||||||
|
:loading="loading"
|
||||||
|
loading-text="Cargando cooperativas..."
|
||||||
|
>
|
||||||
|
<template #top>
|
||||||
|
<v-toolbar flat color="white">
|
||||||
|
<!-- Search -->
|
||||||
|
<v-text-field
|
||||||
|
v-model="search"
|
||||||
|
append-icon="mdi-magnify"
|
||||||
|
label="Buscar cooperativa"
|
||||||
|
single-line
|
||||||
|
hide-details
|
||||||
|
/>
|
||||||
|
<!-- . Search -->
|
||||||
|
</v-toolbar>
|
||||||
|
</template>
|
||||||
|
<template #[`item.company_name`]="item">
|
||||||
|
<a :href="`/c/${item.item.id}`" target="_blank" class="mr-2">
|
||||||
|
{{ item.item.company_name }}
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
<template #[`item.is_validated`]="item">
|
||||||
|
<v-icon v-if="item.item.is_validated" small class="mr-2 validated">
|
||||||
|
mdi-check
|
||||||
|
</v-icon>
|
||||||
|
<v-icon v-else small class="mr-2 not-validated"> mdi-close </v-icon>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</template>
|
||||||
|
<div>
|
||||||
|
<button class="submit-btn" @click="validateCompanies">Validar</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { useAuthStore } from '@/stores/auth'
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'admin',
|
||||||
|
middleware: 'auth',
|
||||||
|
auth: { authority: 'SITE_ADMIN' },
|
||||||
|
})
|
||||||
|
const auth = useAuthStore();
|
||||||
|
return {
|
||||||
|
auth
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
search: '',
|
||||||
|
companies: [],
|
||||||
|
selectedItemsIndexes: [],
|
||||||
|
loading: true,
|
||||||
|
headers: [
|
||||||
|
{ text: 'Nombre', value: 'company_name' },
|
||||||
|
{ text: 'C.I.F', value: 'cif' },
|
||||||
|
{ text: 'Ciudad', value: 'city' },
|
||||||
|
{ text: 'Email', value: 'email' },
|
||||||
|
{ text: 'Validada', value: 'is_validated' },
|
||||||
|
],
|
||||||
|
modalText: '',
|
||||||
|
modalColor: '',
|
||||||
|
activeModal: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
selectedItems() {
|
||||||
|
const itemsArr = []
|
||||||
|
this.selectedItemsIndexes.forEach(index => {
|
||||||
|
this.companies.forEach(item => {
|
||||||
|
if (item.id === index) {
|
||||||
|
itemsArr.push(item)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
return itemsArr
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async mounted() {
|
||||||
|
try{
|
||||||
|
const config = useRuntimeConfig()
|
||||||
|
const data = await $fetch('admin_companies/', {
|
||||||
|
baseURL: config.public.baseURL,
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${this.auth.access}`
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.companies = data
|
||||||
|
this.loading = false
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching companies:', error)
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
async validateCompanies() {
|
||||||
|
const config = useRuntimeConfig()
|
||||||
|
try {
|
||||||
|
await this.selectedItems.forEach(async (item) => {
|
||||||
|
await $fetch(`admin_companies/${item.id}/`, {
|
||||||
|
baseURL: config.public.baseURL,
|
||||||
|
method: 'PATCH',
|
||||||
|
body: {
|
||||||
|
is_validated: true,
|
||||||
|
},
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${this.auth.access}`
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const index = this.companies.indexOf(item)
|
||||||
|
this.companies[index].is_validated = true
|
||||||
|
this.selectedItemsIndexes = []
|
||||||
|
this.modalText = 'Los productos han sido eliminados correctamente.'
|
||||||
|
this.modalColor = 'success'
|
||||||
|
this.activeModal = true
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error validating companies:', error)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-bottom: 80px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
color: $color-navy;
|
||||||
|
font-size: $xxl;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
background-color: $color-orange;
|
||||||
|
color: $color-light;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 10px 15px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.validated {
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
.not-validated {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
80
pages/admin/estadisticas.vue
Normal file
80
pages/admin/estadisticas.vue
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row general">
|
||||||
|
<div class="text-center col-6">
|
||||||
|
<h2>Cooperativas</h2>
|
||||||
|
<p class="general-value">
|
||||||
|
<strong>{{ companiesCount }}</strong>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center col-6">
|
||||||
|
<h2>Productos</h2>
|
||||||
|
<p class="general-value">
|
||||||
|
<strong>{{ productsCount }}</strong>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<trend-stats
|
||||||
|
:color="`#39af77`"
|
||||||
|
:name="`Nuevas cooperativas`"
|
||||||
|
:values="companiesTimeline"
|
||||||
|
/>
|
||||||
|
<trend-stats
|
||||||
|
:color="`red`"
|
||||||
|
:name="`Nuevos productos`"
|
||||||
|
:values="productsTimeline"
|
||||||
|
/>
|
||||||
|
<trend-stats
|
||||||
|
:color="`purple`"
|
||||||
|
:name="`Nuevos usuarios`"
|
||||||
|
:values="usersTimeline"
|
||||||
|
/>
|
||||||
|
<trend-stats
|
||||||
|
:color="`blue`"
|
||||||
|
:name="`Contactados`"
|
||||||
|
:values="contactTimeline"
|
||||||
|
/>
|
||||||
|
<trend-stats
|
||||||
|
:color="`orange`"
|
||||||
|
:name="`Redirecciones a producto`"
|
||||||
|
:values="shoppingTimeline"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
layout: 'admin',
|
||||||
|
middleware: 'auth',
|
||||||
|
meta: {
|
||||||
|
auth: { authority: 'SITE_ADMIN' },
|
||||||
|
},
|
||||||
|
async asyncData(context) {
|
||||||
|
const { data } = await context.$api.get(`/admin_stats/`)
|
||||||
|
const companiesCount = data.company_count
|
||||||
|
const productsCount = data.product_count
|
||||||
|
const companiesTimeline = data.companies_timeline
|
||||||
|
const productsTimeline = data.products_timeline
|
||||||
|
const usersTimeline = data.users_timeline
|
||||||
|
const contactTimeline = data.contact_timeline
|
||||||
|
const shoppingTimeline = data.shopping_timeline
|
||||||
|
|
||||||
|
return {
|
||||||
|
companiesCount,
|
||||||
|
productsCount,
|
||||||
|
companiesTimeline,
|
||||||
|
productsTimeline,
|
||||||
|
usersTimeline,
|
||||||
|
contactTimeline,
|
||||||
|
shoppingTimeline,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.general-value {
|
||||||
|
font-size: 50px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
90
pages/admin/importar.vue
Normal file
90
pages/admin/importar.vue
Normal file
@@ -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>
|
||||||
29
pages/admin/index.vue
Normal file
29
pages/admin/index.vue
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
<template>
|
||||||
|
<BContainer class="admin-dashboard">
|
||||||
|
<h1>Panel de Administración</h1>
|
||||||
|
<p>Bienvenido al panel de administración. Aquí puedes gestionar la configuración del sitio y los permisos de los usuarios.</p>
|
||||||
|
</BContainer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'admin',
|
||||||
|
middleware: 'auth',
|
||||||
|
auth: { authority: 'SITE_ADMIN' },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.admin-dashboard {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-dashboard h1 {
|
||||||
|
font-size: 24px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user