consumocuidado/pages/productoras/index.vue

<template>
  <div class="">
    <div class="content">
      <HeroWithSearch 
        title="Encuentra tu entidad aliada"
        subtitle="Colabora, compra o aprende con la economía social"
      />
      <div v-if="companyList && companyList.length" class="cards-section">
        <section  class="cards-grid">
          <article v-for="(coop, index) in companyList" :key="index">
            <CoopCard :coop="coop" />
          </article>
        </section>
        <BPagination
          v-model="currentPage"
          class="pagination"
          :total-rows="rows"
          :per-page="perPage"
        />
      </div>
      <div v-else class="cards-section">
        <p>No se han encontrado resultados</p>
      </div>
      <TextWithImageAndButton />
    </div>
  </div>
</template>

<script>
export 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>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 1rem;
  margin-top: 2rem;

  .cards-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 4rem;
    border-radius: 1.5rem;
    background: $color-bg-light;
    margin: 2rem 0;

    .cards-grid {
      display: grid;
      gap: 1.5rem;
      border: none;
      width: 100%;
      padding: 4rem;
      

      // responsive breakpoints
      grid-template-columns: 1fr;

      @media (min-width: 640px) {
        grid-template-columns: repeat(2, 1fr);
      }

      @media (min-width: 1024px) {
        grid-template-columns: repeat(3, 1fr);
      }

      @media (min-width: 1280px) {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .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>