utenti: filter by user category

src/client/Paginate.tsx

@@ -16,8 +16,6 @@ export const ShowMore = <T extends any>({
         return items.value.slice(0, $shownItems.value)
     })
 
-    console.log($paginatedItems.value)
-
     return (
         <>
             {$paginatedItems.value.map(children)}

src/client/UtentiPage.tsx

@@ -1,7 +1,6 @@
-import { useComputed, useSignal } from '@preact/signals'
+import { effect, useComputed, useSignal } from '@preact/signals'
 import Fuse from 'fuse.js'
 import { useEffect } from 'preact/hooks'
-import { trottleDebounce } from './lib/util'
 import { ShowMore } from './Paginate'
 
 type User = {
@@ -22,15 +21,48 @@ function applyPatches(users: User[]) {
     users.reverse()
 }
 
+const MACCHINISTI = [
+    // Lista dei macchinisti attuali
+    'delucreziis',
+    'minnocci',
+    'baldino',
+    'mossa',
+    'manicastri',
+    'llombardo',
+]
+
+const RAPPSTUD = [
+    // Lista dei rappresentanti degli studenti attuali
+    'smannella',
+    'falcionella',
+    'piazza',
+]
+
 export const UtentiPage = () => {
     const $utentiData = useSignal<User[]>([])
-    const $fuse = useSignal<Fuse<User> | null>(null)
+
+    const $filter = useSignal('utenti')
+
+    const $filteredData = useComputed(() =>
+        $filter.value === 'macchinisti'
+            ? $utentiData.value.filter(user => MACCHINISTI.includes(user.uid))
+            : $filter.value === 'rappstud'
+              ? $utentiData.value.filter(user => RAPPSTUD.includes(user.uid))
+              : $utentiData.value,
+    )
+
+    const $fuse = useComputed(
+        () =>
+            new Fuse($filteredData.value, {
+                keys: ['gecos', 'uid'],
+            }),
+    )
 
     const $searchText = useSignal('')
     const $searchResults = useComputed(() =>
         $searchText.value.trim().length > 0
             ? ($fuse.value?.search($searchText.value).map(result => result.item) ?? [])
-            : $utentiData.value,
+            : $filteredData.value,
     )
 
     useEffect(() => {
@@ -40,23 +72,25 @@ export const UtentiPage = () => {
                 applyPatches(data)
 
                 $utentiData.value = data
-                $fuse.value = new Fuse(data, {
+
-                    keys: ['gecos'],
+                $fuse.value.setCollection(data)
-                })
             })
     }, [])
 
     return (
         <>
             <div class="search-bar">
-                <div class="filter-select">
+                <div
+                    class="filter-select"
+                    onClick={e => {
+                        e.currentTarget.querySelector('select')?.showPicker()
+                    }}
+                >
                     <span class="material-symbols-outlined">filter_list</span>
-                    <select>
+                    <select onChange={e => ($filter.value = e.currentTarget.value)} value={$filter.value}>
-                        <option value="new-first">Nuovi utenti</option>
+                        <option value="utenti">Utenti</option>
-                        <option value="old-first">Vecchi utenti</option>
+                        <option value="macchinisti">Macchinisti</option>
-                        <option value="first-name">Nome</option>
+                        <option value="rappstud">RappStud</option>
-                        <option value="last-name">Cognome</option>
-                        <option value="uid">Username</option>
                     </select>
                     <span class="material-symbols-outlined">expand_more</span>
                 </div>
@@ -74,23 +108,20 @@ export const UtentiPage = () => {
                 {$searchResults.value ? (
                     <ShowMore items={$searchResults} pageSize={10}>
                         {poissonUser => (
-                            console.log(poissonUser),
+                            <div class="search-result">
-                            (
+                                <div class="icon">
-                                <div class="search-result">
+                                    <span class="material-symbols-outlined">person</span>
-                                    <div class="icon">
+                                </div>
-                                        <span class="material-symbols-outlined">person</span>
+                                <div class="text">{poissonUser.gecos}</div>
-                                    </div>
+                                <div class="right">
-                                    <div class="text">{poissonUser.gecos}</div>
+                                    <a
-                                    <div class="right">
+                                        href={`https://poisson.phc.dm.unipi.it/~${poissonUser.uid}`}
-                                        <a
+                                        target="_blank"
-                                            href={`https://poisson.phc.dm.unipi.it/~${poissonUser.uid}`}
+                                    >
-                                            target="_blank"
+                                        <span class="material-symbols-outlined">open_in_new</span>
-                                        >
+                                    </a>
-                                            <span class="material-symbols-outlined">open_in_new</span>
-                                        </a>
-                                    </div>
                                 </div>
-                            )
+                            </div>
                         )}
                     </ShowMore>
                 ) : (