@mints-cloud/cxf-content-filter-hub NPM

@mints-cloud/cxf-content-filter-hub

A Filter component for CXF implementations. This library provides components and utilities for filtering and managing content in a structured and efficient way.

Installation

Install the library via npm:

npm install @mints-cloud/cxf-content-filter-hub

Usage

Basic Example

Here is an example of how to use the cxf-content-filter-hub components in your project:

<template>
  <div class="layout">
    <aside class="filters">
      <FilterComponent />
    </aside>

    <main class="content">
      <div class="top-bar">
        <SearchComponent />
        <OrderComponent />
        <ButtonFilterModalComponent />
      </div>

      <div class="bottom-top-bar">
        <FilterChipsComponent class="chips" />
        <div class="grow"></div>
        <PaginationInfoComponent />
      </div>

      <CardComponent :data="data">
        <template v-slot:content="{ item }">
          <span>Name: {{ item.title }}</span>
          <span>Date: {{ formatDate(item.created_at) }}</span>
          <span>Price: <b>{{ formatPrice(item.content_instance.item_codes[0].default_price_cents) }}</b></span>
        </template>
      </CardComponent>

      <div class="pagination">
        <PaginationComponent />
      </div>
    </main>
  </div>
</template>

<script>
import { mapState, mapActions } from "pinia";
import {
  useFiltersStore,
  CardComponent,
  PaginationInfoComponent,
  FilterComponent,
  SearchComponent,
  OrderComponent,
  FilterChipsComponent,
  PaginationComponent,
  ButtonFilterModalComponent
} from "@mints-cloud/cxf-content-filter-hub";

import "@mints-cloud/cxf-content-filter-hub/dist/index.css";

export default {
  components: {
    ButtonFilterModalComponent,
    CardComponent,
    PaginationInfoComponent,
    FilterComponent,
    SearchComponent,
    OrderComponent,
    FilterChipsComponent,
    PaginationComponent
  },
  data() {
    return {
      data: []
    };
  },
  mounted() {
    this.setLanguage("es"); // Set the library's language to Spanish (default is English)
    this.getTaxonomies();

    // Triggered after any action that changes the filters store
    useFiltersStore().afterAction = () => {
      this.getInstances();
    };
  },
  computed: {
    ...mapState(useFiltersStore, ["getParamsOptions", "options", "total"])
  },
  methods: {
    ...mapActions(useFiltersStore, [
      "setFacets",
      "setMeta",
      "setSelectTaxonomies",
      "setTaxonomies",
      "setLanguage"
    ]),
    getInstances() {
      let options = this.getParamsOptions; // Get the filter options
      this.$axios
        .get(`/content/print-versions?type=products&${options}`)
        .then((response) => {
          this.data = response.data.data;
          this.setMeta(response.data.meta); // Update metadata in the store
        });
    },
    getTaxonomies() {
      this.$axios
        .get("/config/taxonomies?parent_slug=category")
        .then((response) => {
          this.setSelectTaxonomies(response.data.data); // Update taxonomies in the store
        });

      this.$axios.get("/config/taxonomies").then((response) => {
        this.setTaxonomies(response.data.data); // Update taxonomies in the store
      });
    },
    formatDate(date) {
      const dateObj = new Date(date);
      return `${dateObj.getFullYear()}-${dateObj.getMonth() + 1}-${dateObj.getDate()} ${dateObj.getHours()}:${dateObj.getMinutes()}:${dateObj.getSeconds()}`;
    },
    formatPrice(price) {
      if (price === null) return "No disponible";
      const formattedPrice = (price / 100).toFixed(2);
      return `$ ${formattedPrice}`;
    }
  }
};
</script>

Features

FilterComponent: A sidebar filter component to manage advanced filtering.
SearchComponent: A search bar to refine content.
OrderComponent: A component to handle content ordering.
CardComponent: A flexible card component for displaying content with a customizable slot.
PaginationComponent: Handles pagination efficiently.
FilterChipsComponent: Displays active filters as chips.

Required Store Actions

The library integrates with Pinia. You need to use the following actions and states from the useFiltersStore:

Actions
setFacets
setMeta
setSelectTaxonomies
setTaxonomies
setLanguage
States
getParamsOptions
options
total

Styling

Import the CSS file for styling:

import "@mints-cloud/cxf-content-filter-hub/dist/index.css";

API Requirements

This library requires the following API endpoints to fetch data:

/config/taxonomies
/content/print-versions

Props Requirements by Component

FilterComponent:

disableAttrUrlTracking: (Boolean, default: false)
disableTaxUrlTracking (Boolean, default: false)
taxParamName (String, default: null)
attrParamName (String, default: null)
searchParamName (String, default: 'search')
defaultMainTaxonomy (String, default: null)
isHiddenInMobile (Boolean, default: true)
classes (Object, default: { closeButton: "", container: "", title: "", selectContainer: "", label: "", select: "" })
labels (Object, default: { title: "Filtros", selectLabel: "Categoría" })

SearchComponent:

placeholder (String, default: "Search")
classes (Object, default: { container: "", input: "", icon: "" })

OrderComponent:

selectOptions (Object, default: { created_at: "Creado", title: "Título" })
searchScoreLabel (String, default: 'Mejor coincidencia')
classes (Object, default: { container: "", select: "", options: "" })

PaginationComponent:

labels (Object, default: { perPage: "Per page", separator: "of" })
classes (Object, default: { container: "", perPageContainer: "", perPageSelect: "", paginationInfo: "" })

PaginationInfoComponent:

label (String, default: "Productos de")
classes (Object, default: { paginationInfo: "" })

ButtonFilterModalComponent:

label (String, default: "Filtros")
classes (Object, default: { container: "", button: "" })
filterClasses (Object, default: { closeButton: "", container: "", title: "", selectContainer: "", label: "", select: "" })

CardComponent:

data (Array, required): The data to be displayed in the card.
classes (Object, default: { container: "", card: "" })
slotName (String, default: "content")
slotProps (Object, default: { item: "" })

Example:

  <CardComponent :data="data">
    <template v-slot:content="{ item }">
      <span>Name: {{ item.title }}</span>
      <span>Date: {{ formatDate(item.created_at) }}</span>
      <span>Price: <b>{{ formatPrice(item.content_instance.item_codes[0].default_price_cents) }}</b></span>
    </template>
  </CardComponent>