feat: use sorter

frontend/src/composables/useFilter.ts

@@ -0,0 +1,62 @@
+import {computed, ref} from 'vue'
+import type {Ref} from 'vue'
+
+export enum FilterConfigTypeEnum {
+    STRING = 'string',
+    // DATE = 'date', // todo
+    // SELECT = 'select', // todo
+    CUSTOM = 'custom'
+}
+type FilterConfig = {
+    property: string
+    type: FilterConfigTypeEnum
+    propFunc?: (a: any) => any // todo T
+    customFunc?: (a: any) => boolean // todo T
+}
+type Filter = FilterConfig & {
+    value: any // todo type ?
+}
+
+function propFilter<T>(filter: FilterConfig): (item: any) => bool {
+    let filterFunc: (prop: any) => bool
+    switch (item.type) {
+        case FilterConfigTypeEnum.DATE:
+            // todo
+          break;
+        case FilterConfigTypeEnum.SELECT:
+            // todo
+          break;
+        case FilterConfigTypeEnum.STRING:
+          filterFunc = (prop: string) => {
+            if (filter.filterValue.length < 1) {
+              return true
+            }
+            return String(prop).toLowerCase().includes(filter.filterValue.toLowerCase())
+          }
+          break;
+    }
+
+    return (item: any): bool => {
+        if (FilterConfigTypeEnum.CUSTOM === filter.type) {
+            return filter.customFunc(item)
+        }
+
+        return filterFunc(filter.propFunc(item))
+    }
+}
+
+export function useFilter<T>(options: FilterConfig[], list: Ref<T>[]) {
+    const filters: Ref<Filter[]> = ref(options.map((option) => ({...option, value: ''})))
+
+    const filteredList = computed(() => {
+        const rList = [...list.value]
+        filters.value.forEach((filter) => {
+            rList.filter(propFilter(filter))
+        })
+        return rList
+    })
+
+    return {
+        filteredList
+    }
+}

frontend/src/composables/useSorter.ts

@@ -18,14 +18,18 @@ type SortConfig = {
 type Sort = Pick<SortConfig, 'property' | 'type' | 'customCompare'>
 
 function propCompare<T>(sort: SortConfig): (a: T, b: T) => number {
-  let compareFunc = (a: number, b: number): number => a - b
+  let compareFunc: (a: number, b: number) => number
   switch (sort.type) {
     case SortConfigTypeEnum.STRING:
       compareFunc = (a: string, b: string): number => String(a).localeCompare(String(b))
       break
     case SortConfigTypeEnum.DATE: // dayjs
       compareFunc = (a: Dayjs, b: Dayjs): number => a.diff(b)
       break
+    case SortConfigTypeEnum.NUMBER:
+    default:
+      compareFunc = (a: number, b: number): number => a - b
+      break
   }
 
   return (a: T, b: T): number => {
@@ -48,7 +52,7 @@ function propCompare<T>(sort: SortConfig): (a: T, b: T) => number {
 }
 
 export function useSorter<T>(options: SortConfig[], list: Ref<T>[]) {
-  const sorts = ref(options.map((option) => ({ ...option, priority: 0, asc: true })))
+  const sorts: Ref<Sort[]> = ref(options.map((option) => ({ ...option, priority: 0, asc: true })))
   let maxPriority = 0
 
   function levelSorts(currentPriority: number) {

frontend/src/views/tenders/TenderView.vue

@@ -261,7 +261,7 @@ onMounted(async () => {
             :average-daily-rate="tender.averageDailyRate"
             @show-form="showTenderRowForm(tenderRow)"
           />
-          <tr class="total" v-if="tenderRowFilterSearch.length < 3">
+          <tr class="total">
             <td colspan="2" class="text-end">Total:</td>
             <td>{{ tenderSoldDays }}</td>
             <td>{{ tenderFixedRate }}</td>

frontend/src/views/users/UsersView.vue

@@ -5,21 +5,28 @@ import Mp3000Table from '@/components/Mp3000Table.vue'
 import Mp3000TableHeader from '@/components/Mp3000TableHeader.vue'
 import UserRow from '@/views/users/UserRow.vue'
 import { useSorter, SortConfigTypeEnum } from '@/composables/useSorter'
+import {FilterConfigTypeEnum, useFilter} from "@/composables/useFilter";
 
 const userStore = useUserStore()
 
 const isLoading = ref(false)
 
 const users = computed(() => userStore.users)
 
-const filterSearch = ref('')
-const filteredUsers = computed(() =>
-  users.value.filter((user) => {
-    if (filterSearch.value.length < 1) {
-      return true
-    }
-    return (user.email + user.username).toLowerCase().includes(filterSearch.value.toLowerCase())
-  })
+// const filterSearch = ref('')
+// const filteredUsers = computed(() =>
+//   users.value.filter((user) => {
+//     if (filterSearch.value.length < 1) {
+//       return true
+//     }
+//     return (user.email + user.username).toLowerCase().includes(filterSearch.value.toLowerCase())
+//   })
+// )
+const { filteredList, filter } = useFilter(
+  [
+    { property: 'email', type: FilterConfigTypeEnum.STRING },
+  ],
+  users
 )
 const { getAsc, getPriority, sort, sortedList } = useSorter(
   [
@@ -28,7 +35,7 @@ const { getAsc, getPriority, sort, sortedList } = useSorter(
     { property: 'username', type: SortConfigTypeEnum.STRING },
     { property: 'roles', type: SortConfigTypeEnum.STRING }
   ],
-  filteredUsers
+  filteredList
 )
 
 onMounted(async () => {
@@ -42,6 +49,7 @@ onMounted(async () => {
 <template>
   <div>
     <h2>Utilisateurs</h2>
+    <h3> {{ filteredList.length }}</h3>
     <mp3000-table :is-loading="isLoading">
       <template v-slot:filters>
         <div class="col-auto">