Listing - filtre by entity

This guide explains how to add a filter by entity to your listing, specifically focusing on filtering by a related node.

Overview

As an example, we'll demonstrate how to filter a list of "projects" by their associated filiale.

Follow these steps to expose the list of filiale to your front-end application and integrate the filter into your listing.

Step 1: Expose the List of Filiales to the Front-End

To make the list of filiales available to the front-end application, modify the settings.yml configuration file. This configuration will expose all nodes of the type "filiale."

Add the following code snippet to your settings.yml file:

filiales:
  type: decoupled_entity_reference
  options:
    '#default_value':
      entity_reference:
        bundle: filiale
        entity_type: node

This configuration serves to expose all nodes of the "filiale" content type. It allows the front-end application to retrieve and use these nodes in various features, such as filtering.

Step 2: Map the Exposed Data on the Front-End

Once the list is available on the front-end, map the data to a usable format for your filter component. Use the following code snippet to transform the filiales data into filter options.

const allFiliales = {
    id: "all",
    value: "all",
    label: t("Filiale"), // Default label for "All Filiales"
    // slug: "all",
    disabled: false,
}
const filialeOptions = data.components[0].filiales.map((filiale) => ({
  id: filiale.id,
  value: filiale.id,
  label: filiale.label,
  // slug: filiale.label.toLowerCase().replace(/\s+/g, "-"),
  disabled: false,
}));

Step 3: Integrate the Filter into the Listing

<UseListingFilter
  filters={[
    {
      type: "select",
      componentType: SelectNative,
      name: "secteur",
      id: "secteur",
      label: t("Nx:Secteur"),
      variant: "filter",
      list: context.terms?.secteur_projet,
      className: "min-w-[25%] w-full",
      position: 1,
    },
    {
      type: "select",
      componentType: SelectNative,
      name: "filiale",
      id: "filiale",
      label: t("Nx:Filiale"),
      variant: "filter",
      className: "min-w-[25%] w-full",
      list: [allFiliales, ...filialeOptions], // Include allFiliales as the default option
      position: 2,
    },
    {
      type: "select",
      componentType: SelectNative,
      name: "ville",
      id: "ville",
      label: t("Nx:Villes"),
      variant: "filter",
      className: "min-w-[25%] w-full",
      list: context.terms?.villes,
      position: 3,
    },
  ]}
  control={control}
/>

Step 3: Integrate the Filter into the filters object

setFilters((prev) => {
            let filters = {
                ...prev,
            }
            if (!selectedFiliale || selectedFiliale === allFiliales.id) {
                delete filters?.filter?.filiale
            } else {
                filters.filter.filiale = {
                    condition: {
                        path: "field_filiale.drupal_internal__nid",
                        operator: "=",
                        value: selectedFiliale,
                    },
                }
            }
})
Copy pastBasic Auth