I want to filter the items list, in which i look if the selected item property is included in the one array (if the array has length) or in another if the second length is 0. For now I have a method where I do these checks step by step, which is not generic at all:
detailsStore.filteredValues = detailsStore.items.map((item) => {
return (
(detailsStore.checkedFilters.title.length
? detailsStore.checkedFilters.title.includes(item.Title!)
? item
: undefined
: detailsStore.filter.title.includes(item.Title!)
? item
: undefined) &&
(detailsStore.checkedFilters.orderStatus.length
? detailsStore.checkedFilters.orderStatus.includes(
item.LineStatus!
)
? item
: undefined
: detailsStore.filter.orderStatus.includes(item.LineStatus!)
? item
: undefined) &&
(detailsStore.checkedFilters.expectedDelivery.length
? detailsStore.checkedFilters.expectedDelivery.includes(
item.ExpectedDelivery!
)
? item
: undefined
: detailsStore.filter.expectedDelivery.includes(
item.ExpectedDelivery!
)
? item
: undefined) &&
[...]
The detailsStore.checkedFilters object and detailsStore.filter (objects created in pinia store) are both type of
type filtersColumnValues = {
title: string[];
orderStatus: string[];
expectedDelivery: string[];
price: string[];
quantity: string[];
totalPrice: string[];
};
I've tried to create an array of objects where objects are pairs of checks I do for one iteration in the return statement, like
filterValuesArray.value = [
{
checkCondition: "Title",
checkedFiltersArray: detailsStore.checkedFilters.title,
filtersArray: detailsStore.filter.title
},
{
checkCondition: "LineStatus",
checkedFiltersArray: detailsStore.checkedFilters.orderStatus,
filtersArray: detailsStore.filter.orderStatus
},
[...]
But nothing seems to work while working on this newly created array, so what can be the solution to make this long method more generic?
edit: I've tried with creating a function which iterates through the object values of detailsStore.checkedFilters and selectem item properties
const checkedFilterValuesArray = ref<string[][]>([
...Object.values(detailsStore.checkedFilters),
]);
const checkFilteredValues = () => {
detailsStore.filteredValues = [];
detailsStore.items.map((item) => {
const checkedParamsOfItem = [
item.Title!,
item.LineStatus!,
item.ExpectedDelivery!,
item.Price!.toString(),
item.Quantity!.toString(),
item.TotalPrice!.toString(),
];
for (const param of checkedParamsOfItem) {
checkedFilterValuesArray.value!.map((array) => {
array.includes(param) && !detailsStore.filteredValues.includes(item)
? detailsStore.filteredValues.push(item)
: undefined;
});
}
});
};
But this one returns the array of items which have selected item.Title on OR item.OrderStatus selected etc., I need the items which exactly have selected item.Title AND item.orderStatuses, or if the selected orderStatuses array is empty, take the all orderStatus possibilities (from detailsStore.filter which has all the options available)