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