193 lines
3.9 KiB
Vue
193 lines
3.9 KiB
Vue
<template>
|
|
<div class="container mt-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-10 coopcard-list">
|
|
<h1 class="title">Últimas cooperativas añadidas</h1>
|
|
<p class="help">
|
|
Si quieres que tu cooperativa forme parte de este gran proyecto
|
|
registrate en el siguiente
|
|
<NuxtLink to="/registro/cooperativa"><b>formulario</b></NuxtLink
|
|
>.
|
|
</p>
|
|
<div class="form-container">
|
|
<form class="search-container" @submit.prevent="search">
|
|
<input
|
|
v-model="searchText"
|
|
class="search-text"
|
|
type="text"
|
|
autocomplete="off"
|
|
placeholder="Buscar cooperativas"
|
|
/>
|
|
<img
|
|
class="search-icon"
|
|
src="@/assets/img/latienda-search-blue.svg"
|
|
alt="latienda.coop-search"
|
|
@click="search"
|
|
/>
|
|
</form>
|
|
</div>
|
|
<div v-for="coop in companyList" :key="coop.id">
|
|
<CoopCard :coop="coop" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <BPagination
|
|
v-model="currentPage"
|
|
class="pagination"
|
|
:total-rows="rows"
|
|
:per-page="perPage"
|
|
/> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
setup(){
|
|
definePageMeta({
|
|
layout: 'mainbanner',
|
|
})
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
currentPage: 1,
|
|
perPage: 10,
|
|
searchText: '',
|
|
companyList: null
|
|
}
|
|
},
|
|
// computed: {
|
|
// rows() {
|
|
// return this.companyList?.length
|
|
// },
|
|
// slicedCompanies() {
|
|
// const initial = (this.currentPage - 1) * this.perPage
|
|
// const final = this.currentPage * this.perPage
|
|
// const items = this.companyList ? this.companyList.slice(initial, final) : []
|
|
// return items
|
|
// },
|
|
// },
|
|
mounted() {
|
|
this.getCompanies()
|
|
},
|
|
methods: {
|
|
async getCompanies() {
|
|
const config = useRuntimeConfig()
|
|
try {
|
|
const response = await $fetch(`/companies/sample/`, {
|
|
baseURL: config.public.baseURL,
|
|
method: 'GET'
|
|
})
|
|
this.companyList = response
|
|
} catch (error) {
|
|
console.error('Error fetching companies:', error)
|
|
}
|
|
},
|
|
async search() {
|
|
const config = useRuntimeConfig()
|
|
if (this.searchText) {
|
|
const response = await $fetch(`/search/companies/?search=${this.searchText}`, {
|
|
baseURL: config.public.baseURL,
|
|
method: 'GET'
|
|
})
|
|
this.companyList = response
|
|
} else {
|
|
const response = await $fetch(`/companies/sample/`, {
|
|
baseURL: config.public.baseURL,
|
|
method: 'GET'
|
|
})
|
|
this.companyList = response
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
margin-top: 80px;
|
|
margin-bottom: 80px;
|
|
}
|
|
|
|
.title {
|
|
margin-top: 60px;
|
|
margin-bottom: 40px;
|
|
font-size: $xxl;
|
|
color: $color-navy;
|
|
}
|
|
|
|
.form-container {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.coopcard-list {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.pagination {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.help {
|
|
color: $color-navy;
|
|
margin-bottom: 0px;
|
|
font-size: $s;
|
|
}
|
|
|
|
.search-container {
|
|
border: none;
|
|
border-radius: 5px;
|
|
background: $color-consumo-base-light;
|
|
width: 50%;
|
|
height: 32px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 50px;
|
|
margin-bottom: 50px;
|
|
|
|
@include mobile {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.search-container img,
|
|
input,
|
|
select {
|
|
padding: 6px 10px;
|
|
margin-right: 16px;
|
|
background: transparent;
|
|
font-size: $xl;
|
|
border: none;
|
|
}
|
|
|
|
.search-icon {
|
|
float: right;
|
|
height: 90%;
|
|
}
|
|
|
|
.search-text {
|
|
outline: none;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: $color-navy;
|
|
font-size: $s;
|
|
font-weight: $regular;
|
|
}
|
|
|
|
::placeholder {
|
|
color: $color-navy;
|
|
font-size: $s;
|
|
}
|
|
|
|
select {
|
|
--webkit-appearance: auto;
|
|
}
|
|
</style>
|