Skip to content

Instantly share code, notes, and snippets.

@MLS535
Last active January 16, 2023 10:46
Show Gist options
  • Save MLS535/7eb0f9496accb48905a6756155872040 to your computer and use it in GitHub Desktop.
Save MLS535/7eb0f9496accb48905a6756155872040 to your computer and use it in GitHub Desktop.
<template>
//SIMPLIFICADO AQUI PUEDE HABER COSAS MAL PORQUE LO HAGO UN POCO DE CABEZA
<select placeholder="Select country"
@change="filterList(testing2,filters,details, selectedFilter)"
name="details"
id="details"
class="details form-sel"
v-model="selectedFilter">
<option value="All">details List</option>
<option v-for="item of testing2" :value="item"> {{ item }}</option>
</select>
<ul>
<li v-for="item in sortedData">item.details</li>
</ul>
</template>
<script setup lang="ts">
import { useFilter } from '@/composables/useFilter';
import { onMounted, ref } from 'vue';
//Products sería un ejemplo de lo que viene de la api
const products = ref<any>([
{ name: 'A', color: 'Blue', size: 50, locations: ['USA', 'Europe'], details: { length: 20, width: 70 } },
{ name: 'B', color: 'Blue', size: 60, locations: [], details: { length: 20, width: 70 } },
{ name: 'C', color: 'Black', size: 70, locations: ['Japan'], details: { length: 20, width: 71 } },
{ name: 'D', color: 'Green', size: 50, locations: ['USA'], details: { length: 20, width: 71 } },
]);
const testing2 = ref<any>();
onMounted( => {
sortedData.value = products.value;
testing2.value = removeDuplicatesSelectedList(details);
}
)
const filters = {
details: (details:any) => details.length == selectedFilter.value,
};
const details = {
countryLink: (details:any) => details.lengt
}
</script>
import { onMounted, ref, toRefs } from "vue";
export const useFilter = () => {
const sortedData = ref<any>();
const valueObject = ref<any>();
const getObject = ref<any>([]);
const sortedbyASC = ref(true);
const selectedFilter = ref<any>();
const filterArray = ref<any>();
const filterList = (testing: any,filters: any, getSelectedList: any, valueSelected: any) => {
const filterKeys = Object.keys(filters);
console.log(filters);
sortedData.value = valueSelected === "All"
? (sortedData.value = valueObject.value)
: sortedData.value.filter((item: any) => {
// validates all filter criteria
return filterKeys.every((key: string) => {
// ignores non-function predicates
if (typeof filters[key] !== 'function') return true;
return filters[key](item[key]);
});
});
console.log(valueSelected);
if (valueSelected === "All") {
//El problema se encuentra aqui
testing = removeDuplicatesSelectedList(getSelectedList);
console.log(testing);
return testing
} else {
testing = removeDuplicatesSelectedList(valueSelected);
console.log(testing);
return testing
}
}
const removeDuplicatesSelectedList = (filters: any) => {
const filterKeys = Object.keys(filters);
let getList: Array<string> = [];
sortedData.value.filter((item: any) => {
return filterKeys.every((key: any) => {
if (typeof filters[key] !== 'function') return true;
return getList.push(filters[key](item[key]))
});
});
let removedFromArray = [...new Set(getList)];
if (removedFromArray.length <= 0) {
removedFromArray.push(filters)
}
return removedFromArray
}
return {
selectedFilter,
valueObject,
filterList,
filterArray,
removeDuplicatesSelectedList,
}
};
@MLS535
Copy link
Author

MLS535 commented Jan 13, 2023

Dynamic filter list.

@MLS535
Copy link
Author

MLS535 commented Jan 13, 2023

on const filter we will pass the type of filter we want
const filters = {
details: details => details.length == selectedFilter.value
};

@MLS535
Copy link
Author

MLS535 commented Jan 16, 2023

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment