some index components changed

pages/productoras/index.vue

@@ -0,0 +1,192 @@
+<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: 'default',
+    })
+  },
+
+  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>