diff --git a/src/lib/components/admin/Evaluations/Feedbacks.svelte b/src/lib/components/admin/Evaluations/Feedbacks.svelte index e51fe1f10..21848c5ca 100644 --- a/src/lib/components/admin/Evaluations/Feedbacks.svelte +++ b/src/lib/components/admin/Evaluations/Feedbacks.svelte @@ -21,10 +21,16 @@ import FeedbackModal from './FeedbackModal.svelte'; import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte'; + import ChevronUp from '$lib/components/icons/ChevronUp.svelte'; + import ChevronDown from '$lib/components/icons/ChevronDown.svelte'; + export let feedbacks = []; let page = 1; - $: paginatedFeedbacks = feedbacks.slice((page - 1) * 10, page * 10); + $: paginatedFeedbacks = sortedFeedbacks.slice((page - 1) * 10, page * 10); + + let orderBy: string = 'updated_at'; + let direction: 'asc' | 'desc' = 'desc'; type Feedback = { id: string; @@ -49,6 +55,45 @@ lost: number; }; + function setSortKey(key: string) { + if (orderBy === key) { + direction = direction === 'asc' ? 'desc' : 'asc'; + } else { + orderBy = key; + if (key === 'user' || key === 'model_id') { + direction = 'asc'; + } else { + direction = 'desc'; + } + } + page = 1; + } + + $: sortedFeedbacks = [...feedbacks].sort((a, b) => { + let aVal, bVal; + + switch (orderBy) { + case 'user': + aVal = a.user?.name || ''; + bVal = b.user?.name || ''; + return direction === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal); + case 'model_id': + aVal = a.data.model_id || ''; + bVal = b.data.model_id || ''; + return direction === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal); + case 'rating': + aVal = a.data.rating; + bVal = b.data.rating; + return direction === 'asc' ? aVal - bVal : bVal - aVal; + case 'updated_at': + aVal = a.updated_at; + bVal = b.updated_at; + return direction === 'asc' ? aVal - bVal : bVal - aVal; + default: + return 0; + } + }); + let showFeedbackModal = false; let selectedFeedback = null; @@ -162,20 +207,96 @@ class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 -translate-y-0.5" > - - {$i18n.t('User')} + setSortKey('user')} + > +
+ {$i18n.t('User')} + {#if orderBy === 'user'} + + {#if direction === 'asc'} + + {:else} + + {/if} + + {:else} + + {/if} +
- - {$i18n.t('Models')} + setSortKey('model_id')} + > +
+ {$i18n.t('Models')} + {#if orderBy === 'model_id'} + + {#if direction === 'asc'} + + {:else} + + {/if} + + {:else} + + {/if} +
- - {$i18n.t('Result')} + setSortKey('rating')} + > +
+ {$i18n.t('Result')} + {#if orderBy === 'rating'} + + {#if direction === 'asc'} + + {:else} + + {/if} + + {:else} + + {/if} +
- - {$i18n.t('Updated At')} + setSortKey('updated_at')} + > +
+ {$i18n.t('Updated At')} + {#if orderBy === 'updated_at'} + + {#if direction === 'asc'} + + {:else} + + {/if} + + {:else} + + {/if} +