Filter block to split content

💬 Feature Requests
1

image
image565×143 10.7 KB

Mockup
image
image442×466 45.5 KB

If it makes sense :smiley:


// Externalized filters
const filters = [
  {
    weight: 2, // Less restrictive filter
    name: "Filter 2",
    filter: item =>
      (item.category === "Fruit" || item.category === "Vegetable") &&
      item.color === "Green"
  },
  {
    weight: 1, // Most restrictive filter
    name: "Filter 1",
    filter: item =>
      (item.category === "Fruit" || item.category === "Vegetable") &&
      item.color === "Red"
  }
];

// Function to apply filters
function filterItemsWithWeight(items, filters) {
  // Sort filters by weight in descending order
  const sortedFilters = filters.sort((a, b) => b.weight - a.weight);

  // Initialize results
  const filterResults = {};
  let remainingItems = items;

  // Apply filters sequentially
  sortedFilters.forEach(f => {
    const filteredItems = remainingItems.filter(f.filter);
    filterResults[f.name] = filteredItems;
    remainingItems = remainingItems.filter(item => !filteredItems.includes(item));
  });

  // Add leftover items to the results
  filterResults.leftoverItems = remainingItems;

  // Return all results
  return filterResults;
}

// Example usage:
const items = [
  { name: "Apple", category: "Fruit", color: "Red" },
  { name: "Carrot", category: "Vegetable", color: "Orange" },
  { name: "Banana", category: "Fruit", color: "Yellow" },
  { name: "Broccoli", category: "Vegetable", color: "Green" },
  { name: "Orange", category: "Fruit", color: "Orange" },
  { name: "Spinach", category: "Vegetable", color: "Green" },
  { name: "Grapes", category: "Fruit", color: "Purple" },
  { name: "Potato", category: "Vegetable", color: "Brown" },
  { name: "Strawberry", category: "Fruit", color: "Red" },
  { name: "Cucumber", category: "Vegetable", color: "Green" }
];

// Apply filters
const result = filterItemsWithWeight(items, filters);
console.log("Filter 1 Results:", result["Filter 1"]);
console.log("Filter 2 Results:", result["Filter 2"]);
console.log("Leftover Items:", result.leftoverItems);

input

const items = [
  { name: "Apple", category: "Fruit", color: "Red" },
  { name: "Carrot", category: "Vegetable", color: "Orange" },
  { name: "Banana", category: "Fruit", color: "Yellow" },
  { name: "Broccoli", category: "Vegetable", color: "Green" },
  { name: "Orange", category: "Fruit", color: "Orange" },
  { name: "Spinach", category: "Vegetable", color: "Green" },
  { name: "Grapes", category: "Fruit", color: "Purple" },
  { name: "Potato", category: "Vegetable", color: "Brown" },
  { name: "Strawberry", category: "Fruit", color: "Red" },
  { name: "Cucumber", category: "Vegetable", color: "Green" }
];

output filter 1 and 2

{
  "Filter 1": [
    { name: "Apple", category: "Fruit", color: "Red" },
    { name: "Strawberry", category: "Fruit", color: "Red" }
  ],
  "Filter 2": [
    { name: "Broccoli", category: "Vegetable", color: "Green" },
    { name: "Spinach", category: "Vegetable", color: "Green" },
    { name: "Cucumber", category: "Vegetable", color: "Green" }
  ],
  "leftoverItems": [
    { name: "Carrot", category: "Vegetable", color: "Orange" },
    { name: "Banana", category: "Fruit", color: "Yellow" },
    { name: "Orange", category: "Fruit", color: "Orange" },
    { name: "Grapes", category: "Fruit", color: "Purple" },
    { name: "Potato", category: "Vegetable", color: "Brown" }
  ]
}

blocks speaking is like this but it would be inside the filter block that has inside the filter/splitter subblock similar to if/else block

image
image1620×904 157 KB