floranet/src/pages/CategoryPage.vue

<template>
  <q-page class="category-container">
    <section class="products-section">
      <header class="products-section-header">
        <Container>
          <div class="product-header-content">
            <h3 class="product-header-title subtitle">Ramos para obsequiar</h3>
            <p class="product-header-paragraph">
              Descripción SEO: Lorem ipsum dolor sit amet, consectetur
              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua.
            </p>
          </div>

          <div class="product-header-filters">
            <div class="product-left-filters">
              <div class="filter-item availability-filter">
                <p class="filter-paragraph availability">
                  Disponibilidad para:
                  <span
                    v-if="availability.date && availability.postalCode"
                    class="green-text"
                  >
                    25 Julio en
                    {{ availability.postalCode.replace('-', '') }}</span
                  >
                </p>

                <q-btn
                  flat
                  class="btn filter-btn availability"
                  type="button"
                  @click="modalStore.openModal({ modal: 'availability' })"
                >
                  <IconPencil />
                </q-btn>
              </div>
            </div>

            <div class="product-right-filters">
              <q-btn
                flat
                class="btn filter-item filters filter-btn"
                type="button"
                @click="modalStore.openModal({ modal: 'filters' })"
              >
                <p class="filter-paragraph remove-mob">Filtros</p>
                <IconFilter />
              </q-btn>

              <div class="filter-item order-filter">
                <p class="filter-paragraph">
                  Ordenar por:
                  <span class="green-text">precio</span>
                </p>

                <q-btn flat type="button" class="btn filter-btn price-order">
                  <IconArrowDownWhite />
                </q-btn>
              </div>
            </div>
          </div>
        </Container>
      </header>

      <div class="products-section-body">
        <Container cardContainer>
          <Card
            v-for="(
              { imgSrc, discount, isNew, title, value, id }, i
            ) in cardsMock"
            :productValue="value"
            :productName="title"
            :discount="discount.toString()"
            :imgSrc="imgSrc"
            :isNew="isNew"
            :key="i"
            :id="id"
          />
        </Container>
      </div>

      <footer class="products-section-footer">
        <RouterLink class="btn rounded outlined" to="/">
          Ver todos los diseños <IconArrowCircleFilledRight />
        </RouterLink>
      </footer>
    </section>

    <dudas-section />
    <modal modalItem="isOpenAvailability" />
    <modal modalItem="isOpenFilters" />
  </q-page>
</template>

<script lang="ts">
import { fakerES } from '@faker-js/faker';
import { storeToRefs } from 'pinia';
import { defineComponent, ref } from 'vue';
import { useRoute } from 'vue-router';

import IconArrowCircleFilledRight from 'src/components/icons/IconArrowCircleFilledRight.vue';
import IconArrowDownWhite from 'src/components/icons/IconArrowDownWhite.vue';
import IconFilter from 'src/components/icons/IconFilter.vue';
import IconPencil from 'src/components/icons/IconPencil.vue';
import DudasSection from 'src/components/sections/DudasSection.vue';
import Card from 'src/components/ui/Card.vue';
import Container from 'src/components/ui/Container.vue';
import Modal from 'src/components/ui/Modal.vue';
import { useFormStore } from 'src/stores/forms';
import { useModalStore } from 'src/stores/modalStore';

type MonthES =
  | 'Enero'
  | 'Febrero'
  | 'Marzo'
  | 'Abril'
  | 'Mayo'
  | 'Junio'
  | 'Julio'
  | 'Agosto'
  | 'Septiembre'
  | 'Octubre'
  | 'Noviembre'
  | 'Diciembre';

export default defineComponent({
  name: 'CategoryPage',
  components: {
    IconArrowCircleFilledRight,
    IconArrowDownWhite,
    IconPencil,
    IconFilter,
    Container,
    Modal,
    Card,
    DudasSection,
  },
  setup() {
    const modalStore = useModalStore();
    const formStore = useFormStore();
    const { availability } = storeToRefs(formStore);
    const monthES: Record<number, MonthES> = {
      0: 'Enero',
      1: 'Febrero',
      2: 'Marzo',
      3: 'Abril',
      4: 'Mayo',
      5: 'Junio',
      6: 'Julio',
      7: 'Agosto',
      8: 'Septiembre',
      9: 'Octubre',
      10: 'Noviembre',
      11: 'Diciembre',
    };
    // monthES[] || console.error('Invalid date');

    const category = ref('');
    const { path } = useRoute();
    const [_a, _b, categoryValue] = path.split(/\//);

    const cardsMock = Array.from({ length: 8 }, (_, i) => ({
      id: i + 1,
      imgSrc: `../assets/flowers/flower-${i + 1}.png`,
      discount: fakerES.number.int({ min: 5, max: 15 }),
      isNew: fakerES.datatype.boolean(),
      title: fakerES.commerce.product(),
      value: fakerES.commerce.price({ min: 30, max: 100 }),
    }));

    return { modalStore, availability, cardsMock, category };
  },
});
</script>

<style lang="scss" scoped>
.products-section {
  display: flex;
  flex-direction: column;

  margin-bottom: 82px;

  & .products-section-header {
    & .product-header-content {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
      gap: 25px;
      margin-bottom: 93px;
    }

    & .product-header-filters {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 41px;
      margin-bottom: 78px;
      & .filter-paragraph {
        font-size: $font-14;
        color: $text-gray;
        white-space: nowrap;
      }

      & .filter-item {
        padding: 4px 0 4px 14px;
        background-color: $secondary-10;
        border-radius: 30px 0 0 30px;
        display: flex;
        align-items: center;
        position: relative;
        user-select: none;
        &.availability-filter {
          padding: 4px 30px 4px 14px;
        }
        &.order-filter {
          padding: 4px 30px 4px 14px;
        }

        &.filters {
          padding: 4px 15px 4px 10px;
          border-radius: 30px;
        }
        &.filter-price-order {
        }
      }

      & .filter-btn {
        padding: 8px;
        border-radius: 0 30px 30px 0;
        &.availability,
        &.price-order {
          position: absolute;
        }

        &.availability {
          right: -27px;
          padding: 6.5px;
        }

        &.price-order {
          right: -33px;
          padding: 9.5px;
        }
      }

      & .product-right-filters {
        display: flex;
        gap: 40px;
        margin-right: 33px;
      }

      @media only screen and (max-width: $med-md) {
        justify-content: center;
        align-items: center;

        & .filter-paragraph.remove-mob {
          display: none;
        }

        & .filter-item.filters {
          padding: 4px 8px;
        }

        & .product-left-filters {
          flex: 1;
          margin-right: 28px;
        }

        & .product-right-filters {
          flex: 1;
          justify-content: space-between;
        }
      }
    }
  }
  & .products-section-body {
    margin-bottom: 95px;
  }
  & .products-section-footer {
    align-self: center;
  }
}
</style>