npm package: @mints-cloud/cxf-content-filter-hub
Description: Filter component for CXF implementations
Author: Luis Hesiquio, Ruben Gomez
Latest version: 0.0.16

# @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>
    ```

### FilterChipsComponent:

- classes `(Object, default: { container: "", chip: "", closeButton: "" })`

## Authors

- Luis Hesiquio

- Ruben Garcia

## License

This project is licensed under the MIT License.