app.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia';
import { useContractorStore } from '@/stores/contractor';
import { useFilter } from '@/composables/useFilter';
import ContractorModal from '@/components/modals/ContractorModal.vue'
const contractorStore = useContractorStore();

const { setSelectedContractor, getContractors, getStatusName } = contractorStore;
const { Contractors } = storeToRefs(contractorStore)
const openModal = ref(false)

const openContractor = (contractor: any) => {
    setSelectedContractor(contractor);
    openModal.value = true
}

const { values, filterItems, setSortedList, sortedList, sortNestedList } = useFilter(
    {
        initialValues: {
            pep: {
                selectedValue: "All",
                options: 'contractorLink.contractorActivityLink.name'
            },
            status: {
                selectedValue: "All",
                options: 'status'
            },
            name: {
                selectedValue: "All",
                options: 'contractorLink.contactPersonName'
            }
        },
    }
)
onMounted(async () => {
    await getContractors()
    setSortedList(Contractors.value)
});
</script>
<template>
<table>
 <tr v-for="contract in sortedList" @click="openContractor(contract)">
            <td>
                <div><input type="checkbox" class="checkbox-input"><span></span></div>
            </td>
            <td class="flex items-center">
                <div class="flex pl-1">{{ contract.contractorLink.name }}</div>
            </td>
            <td class="pl-2 flex items-center">
                <div class="flex items-center">
                    {{ contract.contractorLink.contactPersonName }}
                </div>
            </td>
            <td class="pl-2 flex items-center">{{ contract.contractorLink.contractorActivityLink.name }}</td>
            <td class="py-1 px-2.5"><span class="block text-center">{{ getStatusName(contract.status) }}</span></td>
        </tr>
    </table>
<select placeholder="Select email" @change="filterItems('pep');" name="country" id="country"
        class="country form-sel" v-model="values.pep.selectedValue">
        <option value="All">Contractor Activity</option>
        <option v-for="item in values.pep.optionList" :value="item" :key="item"> {{ item }}</option>
    </select>
    <select placeholder="Select firstPhone" @change="filterItems('name');" name="country" id="country"
        class="country form-sel" v-model="values.name.selectedValue">
        <option value="All">Contractor name</option>
        <option v-for="item in values.name.optionList" :value="item" :key="item"> {{ item }}</option>
    </select>
    <select placeholder="Select status" @change="filterItems('status');" name="country" id="country"
        class="country form-sel" v-model="values.status.selectedValue">
        <option value="All">Status name</option>
        <option v-for="item in values.status.optionList" :value="item" :key="item"> {{ item }}</option>
    </select>
</template>

useFilter.ts

import { onMounted, ref } from "vue";

type FilterProps = {
  initialValues?: object,
  list?: Array<any>,
  filters?: Object,
}

export const useFilter = ({ initialValues = {}, list = [] }: FilterProps) => {

  const initialList = ref(JSON.parse(JSON.stringify(list)))

  const values = ref<any>(initialValues)
  const sortedList = ref<any>();
  const checkedSortedList = ref<any>();
  const sortedbyASC = ref(true);


  const setSortedList = (list: object) => {
    sortedList.value = list
    initialList.value = list
    removeDuplicatesSelectedList()
  }

  const sortList = (sortBy: string) => {
    if (sortedbyASC.value == false) {
      sortedList.value.sort((x: any, y: any) => (x[sortBy] > y[sortBy] ? -1 : 1));
      sortedbyASC.value = true;
    } else {
      sortedList.value.sort((x: any, y: any) => (x[sortBy] < y[sortBy] ? -1 : 1));
      sortedbyASC.value = false
    }
  }

  const sortNestedList = (sortBy: string) => {
    const keys = sortBy.split(".");
    if (sortedbyASC.value == false) {
      sortedList.value.sort(function (a: any, b: any) {
        for (let i = 0; i < keys.length; i++) {
          a = a[keys[i]];
          b = b[keys[i]];
          if (!a || !b) {
            break;
          }
        }
        return a.toString().toLowerCase() > b.toString().toLowerCase() ? -1 : 1
      })
    }
    else {
      sortedList.value.sort((x: any, y: any) => {
        for (let i = 0; i < keys.length; i++) {
          x = x[keys[i]];
          y = y[keys[i]];
          if (!x || !y) {
            break;
          }
        }
        return x.toString().toLowerCase() < y.toString().toLowerCase() ? -1 : 1
      })
    }
    sortedbyASC.value = !sortedbyASC.value;
  }

  // const filterItems = (keyitem: any) => {
  //   const getValuesKeys = values.value[keyitem].options;
  //   const keys = getValuesKeys.split(".");
  //   sortedList.value =
  //     values.value[keyitem].selectedValue === "All"
  //       ? (sortedList.value = checkedSortedList.value)
  //       :
  //       sortedList.value.filter((item: any) => {
  //         for (let i = 0; i < keys.length; i++) {
  //           item = item[keys[i]];
  //           if (!item) {
  //             break;
  //           }
  //         }  
  //         checkedSortedList.value = sortedList.value;
  //         return item === values.value[keyitem].selectedValue
  //       })

    
  //   console.log(checkedSortedList.value)
  //   let getObjectKeys = Array();
  //   Object.keys(values.value).map((key) => {
  //     getObjectKeys.push(values.value[key].selectedValue.toString())
  //   //  console.log(buclesBUCLEEES)

  //   })
  //   console.log('EL BUCLE PASA POR AQUI')
  //   let checkAllArray = getObjectKeys.every((key: any) => key == "All")
  //   if (checkAllArray) {
  //     sortedList.value = initialList.value;
  //     checkedSortedList.value = sortedList.value;
  //   }

  //   removeDuplicatesSelectedList();
  // }


  const filterItems = (keyitem: any) => {
    const getValuesKeys = values.value[keyitem].options;
    const keys = getValuesKeys.split(".");
    sortedList.value =
      values.value[keyitem].selectedValue === "All"
        ? (sortedList.value = checkedSortedList.value)
        :
        sortedList.value.filter((item: any) => {
          for (let i = 0; i < keys.length; i++) {
            item = item[keys[i]];
            if (!item) {
              break;
            }
          }  
          checkedSortedList.value = sortedList.value;
          return item === values.value[keyitem].selectedValue
        })

    let getObjectKeys = Array();
    Object.keys(values.value).map((key) => {
      getObjectKeys.push(values.value[key].selectedValue.toString())
    //  console.log(buclesBUCLEEES)

    })
    console.log('EL BUCLE PASA POR AQUI')
    let checkAllArray = getObjectKeys.every((key: any) => key == "All")
    if (checkAllArray) {
      sortedList.value = initialList.value;
      checkedSortedList.value = sortedList.value;
    }

    removeDuplicatesSelectedList();
  }

  const removeDuplicatesSelectedList = () => {
    let removedFromArray: Array<any> = new Array();
    Object.keys(values.value).map((items: any) => {
      const getValuesKeys = values.value[items].options;
      const keys = getValuesKeys.split(".");
      const getListSorted = sortedList.value.map((list: any) => {
        for (let i = 0; i < keys.length; i++) {
          list = list[keys[i]];
          if (!list) {
            break;
          }
        }
        return list;
      })
      removedFromArray = [...new Set(getListSorted)];
      console.log(removedFromArray)
      values.value[items]['optionList'] = removedFromArray;
    })
  }

  return {
    sortedList,
    sortList,
    initialList,
    removeDuplicatesSelectedList,
    filterItems,
    values,
    setSortedList,
    sortNestedList
  }
};