feat: aggiunte feature per l'admin e cambiamenti stilistici minori

client/pages/AdminPage.tsx

@@ -1,6 +1,6 @@
 import { route } from 'preact-router'
 import { useState } from 'preact/hooks'
-import { isAdministrator, Solution as SolutionModel, SolutionId } from '../../shared/model'
+import { isAdministrator, Solution as SolutionModel, SolutionId, User as UserModel } from '../../shared/model'
 import { sortByStringKey } from '../../shared/utils'
 import { prependBaseUrl, server } from '../api'
 import { Header } from '../components/Header'
@@ -63,6 +63,18 @@ export const AdminPage = ({}) => {
     const [trackInteracted, setTrackedInteracted] = useState<Set<SolutionId>>(new Set())
     const hasUntrackedPending = sortedSolutions.filter(s => s.status === 'pending' || trackInteracted.has(s.id)).length > 0
 
+    const [users] = useListResource<UserModel>(`/api/users`)
+    const [adminSuUsername, setAdminSuUsername] = useState<string>('')
+
+    const handleAdminSu = async () => {
+        await server.post(`/api/admin/su`, {
+            username: adminSuUsername,
+        })
+
+        route(prependBaseUrl('/u/' + adminSuUsername))
+        location.reload()
+    }
+
     return (
         <>
             <Header />
@@ -108,24 +120,37 @@ export const AdminPage = ({}) => {
                 {user.role === 'admin' && (
                     <>
                         <hr />
-                        <div class="subtitle">Utenti</div>
-                        <div class="table" style={{ '--cols': 4 }}>
-                            <div class="cell header">Nome Utente</div>
+                        <div class="subtitle">Controlli speciali solo per Admin</div>
+                        <div class="users-table" style={{ '--cols': 4 }}>
                             <div class="cell header">Username Ateneo</div>
+                            <div class="cell header">Nome Utente</div>
                             <div class="cell header">Ruolo</div>
-                            <div class="cell header last-col">Ultimo Login</div>
-                            <div class="cell">User 1</div>
-                            <div class="cell">user1</div>
-                            <div class="cell">admin</div>
-                            <div class="cell last-col">2/6/2075 20:32</div>
-                            <div class="cell">User 2</div>
-                            <div class="cell">user2</div>
-                            <div class="cell">moderator</div>
-                            <div class="cell last-col">5/12/2102 20:61</div>
-                            <div class="cell last-row">User 3</div>
-                            <div class="cell last-row">user3</div>
-                            <div class="cell last-row">studente</div>
-                            <div class="cell last-row last-col">11/5/2066 20:49</div>
+                            <div class="cell header last-col">Azioni</div>
+
+                            {users.map(user => (
+                                <>
+                                    <div class="cell mono">{user.id}</div>
+                                    <div class="cell">{user.fullName}</div>
+                                    <div class="cell">{user.role}</div>
+                                    <div class="cell last-col">
+                                        <button>Boh 1</button>
+                                        <button>Boh 2</button>
+                                    </div>
+                                </>
+                            ))}
+                        </div>
+                        <div class="form">
+                            <div class="fill subtitle mono">su $USER</div>
+                            <p class="fill">Gli admin per fare prove possono immedesimarsi come un altro utente</p>
+                            <label>User</label>
+                            <input
+                                type="text"
+                                value={adminSuUsername}
+                                onInput={e => setAdminSuUsername(e.target instanceof HTMLInputElement ? e.target.value : '')}
+                            />
+                            <div class="fill">
+                                <button onClick={() => handleAdminSu()}>Cambia Utente</button>
+                            </div>
                         </div>
                     </>
                 )}

client/pages/ProfilePage.tsx

@@ -31,14 +31,17 @@ export const ProfilePage = ({}) => {
         <>
             <Header />
             <main class="page-profile">
-                <div class="subtitle">Profilo</div>
-                <button onClick={handleLogout}>Logout</button>
                 <div class="subtitle">Le tue soluzioni</div>
                 <div class="solution-list">
                     {sortedSolutions.map(solution => (
                         <Solution refreshSolution={refreshSolutions} {...solution} adminControls={isAdministrator(user.role)} />
                     ))}
                 </div>
+                <div class="subtitle">Profilo</div>
+                <a href={prependBaseUrl('/u/' + user.id)} class="button" role="button">
+                    Vai alla tua pagina utente
+                </a>
+                <button onClick={handleLogout}>Logout</button>
             </main>
         </>
     )

client/pages/ScoresPage.tsx

@@ -35,7 +35,7 @@ export const ScoresPage = () => {
     let orderedStats
 
     if (sortStateColumn === 'student') {
-        orderedStats = sortByStringKey(Object.entries(stats), ([user, s]) => user, sortStateOrder === 'ascending')
+        orderedStats = sortByStringKey(Object.entries(stats), ([user, s]) => user.toLowerCase(), sortStateOrder === 'ascending')
     } else {
         orderedStats = sortByNumericKey(
             Object.entries(stats),
@@ -94,7 +94,7 @@ export const ScoresPage = () => {
                                     <a href={prependBaseUrl(`/u/${user}`)}>@{user}</a>
                                 </div>
                                 <div class="cell">{s.sentSolutionsCount}</div>
-                                <div class="cell">{s.correctSolutionsCount}</div>
+                                <div class="cell last-col">{s.correctSolutionsCount}</div>
                             </>
                         ))}
                     </div>

client/pages/UserPage.tsx

@@ -11,45 +11,48 @@ type RouteProps = {
 }
 
 export const UserPage = ({ uid }: RouteProps) => {
-    const [user] = useCurrentUser()
-
-    const [stats] = useResource<null | Record<string, SolutionStat>>(`/api/stats`, null)
-    if (stats) {
-        const userStats = stats[uid]
-
-        const [solutions, refreshSolutions] = useResource<SolutionModel[]>(`/api/solutions?user=${uid}&public`, [])
-        const sortedSolutions = sortByStringKey(solutions, s => s.createdAt, false)
-
-        return (
-            <>
-                <Header />
-                <main class="page-profile">
-                    <div class="title">
-                        Profilo di <a href={prependBaseUrl(`/u/${uid}`)}>@{uid}</a>
-                    </div>
-                    <hr />
-                    <div class="subtitle">Statistiche</div>
-                    <div class="info">
-                        <div>Soluzioni inviate</div>
-                        <div>Soluzioni corrette</div>
-                        <div class="info-box">{userStats.sentSolutionsCount}</div>
-                        <div class="info-box">{userStats.correctSolutionsCount}</div>
-                    </div>
-                    <hr />
-                    <div class="subtitle">Soluzioni notevoli</div>
-                    <div class="solution-list">
-                        {sortedSolutions.map(solution => (
-                            <Solution
-                                refreshSolution={refreshSolutions}
-                                {...solution}
-                                adminControls={user !== null && isAdministrator(user.role)}
-                            />
-                        ))}
-                    </div>
-                </main>
-            </>
-        )
-    } else {
+    const [user, ready] = useCurrentUser()
+    if (!ready) {
         return <></>
     }
+
+    const [stats] = useResource<null | Record<string, SolutionStat | undefined>>(`/api/stats`, null)
+    if (!stats) {
+        return <></>
+    }
+
+    const userStats = stats[uid]
+
+    const [solutions, refreshSolutions] = useResource<SolutionModel[]>(`/api/solutions?user=${uid}&public`, [])
+    const sortedSolutions = sortByStringKey(solutions, s => s.createdAt, false)
+
+    return (
+        <>
+            <Header />
+            <main class="page-profile">
+                <div class="title">
+                    Profilo di <a href={prependBaseUrl(`/u/${uid}`)}>{user?.fullName}</a>
+                </div>
+                <hr />
+                <div class="subtitle">Statistiche</div>
+                <div class="info">
+                    <div>Soluzioni inviate</div>
+                    <div>Soluzioni corrette</div>
+                    <div class="info-box">{userStats?.sentSolutionsCount ?? 0}</div>
+                    <div class="info-box">{userStats?.correctSolutionsCount ?? 0}</div>
+                </div>
+                <hr />
+                <div class="subtitle">Soluzioni notevoli</div>
+                <div class="solution-list">
+                    {sortedSolutions.map(solution => (
+                        <Solution
+                            refreshSolution={refreshSolutions}
+                            {...solution}
+                            adminControls={user !== null && isAdministrator(user.role)}
+                        />
+                    ))}
+                </div>
+            </main>
+        </>
+    )
 }