fix querytable headers

Unipisa · Jan 3, 2024 · 42d0200 · 42d0200
1 parent b99c6f6
commit 42d0200
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 79 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -3,6 +3,23 @@
   "version": "1.0.0",
   "description": "",
   "private": true,
+  "watch": {
+    "deploy": {
+      "patterns": "{src,scss}/*",
+      "extensions": "scss,css,js"
+    }
+  },
+  "scripts": {
+    "test": "mocha -r esm",
+    "js": "webpack --config webpack.config.js",
+    "js:dev": "webpack --config webpack.config.dev.js",
+    "deploy": "npm run js",
+    "deploy:dev": "npm run js:dev",
+    "watch:dev": "webpack --watch --config webpack.config.dev.js",
+    "watch": "webpack --watch --config webpack.config.js"
+  },
+  "keywords": [],
+  "author": "",
   "dependencies": {
     "@ckeditor/ckeditor5-build-classic": "^29.2.0",
     "@ckeditor/ckeditor5-react": "^5.1.0",
@@ -63,22 +80,5 @@
     "webpack": "^5.50.0",
     "webpack-cli": "^4.7.2"
   },
-  "watch": {
-    "deploy": {
-      "patterns": "{src,scss}/*",
-      "extensions": "scss,css,js"
-    }
-  },
-  "scripts": {
-    "test": "mocha -r esm",
-    "js": "webpack --config webpack.config.js",
-    "js:dev": "webpack --config webpack.config.dev.js",
-    "deploy": "npm run js",
-    "deploy:dev": "npm run js:dev",
-    "watch:dev": "webpack --watch --config webpack.config.dev.js",
-    "watch": "webpack --watch --config webpack.config.js"
-  },
-  "keywords": [],
-  "author": "",
   "license": "AGPL-3.0-or-later"
 }
diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx
@@ -111,7 +111,7 @@ export default function NavBar() {
         </NavItem>
 
         <NavItem>
-            <NavLink className="nav-link" href="/users?admin=admin">
+            <NavLink className="nav-link" href="/users">
                 <svg className="svg-inline--fa fa-user fa-w-14 mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path></svg>
                 <span>Utenti</span>
             </NavLink >

diff --git a/frontend/src/components/QueryTable.tsx b/frontend/src/components/QueryTable.tsx
@@ -73,7 +73,7 @@ export function QueryTable<T extends {_id:string}>({ path, headers, renderCells}
                     <th></th>
                     { headers }
                 </tr>
-            </thead>        
+            </thead> 
             <TableBody<T> renderCells={renderCells} />
         </TableItems>
     </div>
@@ -225,7 +225,7 @@ function TableBody<T extends {_id:string}>({ renderCells }:{
                 key={ item._id } 
                 style={ selected ? {background: "lightgray" } : {}}>
                 <td><input type="checkbox" checked={ selected } readOnly onClick={ () => onToggle(item) }/></td>
-                { renderCells(item) }
+                {renderCells(item)}
                 <td />
             </tr>})
         }

diff --git a/frontend/src/pages/CurriculaPage.tsx b/frontend/src/pages/CurriculaPage.tsx
@@ -3,25 +3,7 @@ import {
     TableTopRightButtons, FilterButton, FilterInput,
     ItemAddButton, CsvDownloadButton, ExcelDownloadButton,
     } from '../components/TableElements'
-import {QueryTableCard, QueryTableBar, QueryTable, FilterBadges} from '../components/QueryTable'
-
-const path = "/curricula/"
-const headers=[
-    {   
-        field: 'degree.academic_year',
-        label: "Anno",
-        enable_sort: true
-    }, {   
-        field: 'degree.name',
-        label: "laurea",
-        enable_sort: true,
-        enable_link: true
-    }, {   
-        field: 'name',
-        label: "nome",
-        enable_sort: true,
-        enable_link: true
-    }]
+import {QueryTableCard, QueryTableBar, QueryTable, FilterBadges, SortHeader} from '../components/QueryTable'
 
 export default function CurriculaPage() {
     return <>
@@ -44,8 +26,24 @@ export default function CurriculaPage() {
                 </TableTopRightButtons>
             </QueryTableBar>
             <FilterBadges />
-            <QueryTable path={path} headers={headers}/>
+            <QueryTable path="/curricula" headers={Headers()} renderCells={renderCells}/>
         </QueryTableCard>
     </>
 }
 
+function renderCells(item) {
+    return <>
+        <td>{item.degree.academic_year}</td>
+        <td>{item.degree.name}</td>
+        <td><a href={item._id}>{item.name}</a></td>
+    </>
+}
+
+function Headers() {
+    return <>
+        <th><SortHeader field="degree.academic_year">anno</SortHeader></th>
+        <th><SortHeader field="degree.name">laurea</SortHeader></th>
+        <th><SortHeader field="name">nome</SortHeader></th>
+    </>
+}
+
diff --git a/frontend/src/pages/DegreesPage.tsx b/frontend/src/pages/DegreesPage.tsx
@@ -6,8 +6,6 @@ import {
     ItemAddButton, CsvDownloadButton, ExcelDownloadButton,
     } from '../components/TableElements'
 
-const path = "/degrees/"
-
 export default function DegreesPage() {
     return <>
         <h1>Corsi di Laurea</h1>
@@ -31,12 +29,24 @@ export default function DegreesPage() {
                 </TableTopRightButtons>
             </QueryTableBar>
             <FilterBadges />
-            <QueryTable path={path} headers={Headers()} renderCells={renderCells} />
+            xxx
+            <QueryTable path="/degrees" headers={Headers()} renderCells={renderCells} />
         </QueryTableCard>
     </>
 }
 
 function Headers() {
+    return <>
+        <th><SortHeader field='name'>nome</SortHeader></th>
+        <th>etichette</th>
+        <th><SortHeader field='code'>codice</SortHeader></th>
+        <th><SortHeader field='sector'>settore</SortHeader></th>
+        <th><SortHeader field='credits'>crediti</SortHeader></th>
+        <th>note</th>
+    </>
+}
+
+function Headers_() {
     return <>
         <th>attivo</th>
         <th>richiesta parere</th>

diff --git a/frontend/src/pages/UsersPage.tsx b/frontend/src/pages/UsersPage.tsx
@@ -6,39 +6,9 @@ import {
     ItemAddButton, 
     CsvDownloadButton, ExcelDownloadButton
     } from '../components/TableElements'
-import {QueryTableCard, QueryTableBar, QueryTable, FilterBadges} from '../components/QueryTable'
+import {QueryTableCard, QueryTableBar, QueryTable, FilterBadges, SortHeader} from '../components/QueryTable'
 
 const path="/users" 
-const headers=[
-    {   
-        field: 'id_number',
-        label: "Matricola",
-        enable_link: true,
-        enable_sort: true
-    }, {   
-        field: 'username',
-        label: "Username",
-        enable_link: true,
-        enable_sort: true 
-    }, {   
-        field: 'email',
-        label: "Email",
-        enable_sort: true
-    }, {   
-        field: 'last_name',
-        label: "Cognome",
-        enable_link: true,
-        enable_sort: true
-    }, {   
-        field: 'first_name',
-        label: "Nome",
-        enable_link: true,
-        enable_sort: true
-    }, {
-        field: 'admin',
-        label: "admin"
-    }]
-
 export default function UsersPage({engine}) {
     return <>
         <h1>Utenti</h1>
@@ -62,13 +32,30 @@ export default function UsersPage({engine}) {
                 </TableTopRightButtons>
             </QueryTableBar>
             <FilterBadges />
-            <QueryTable path={path} headers={headers} getField={getField} />
+            <QueryTable path="/users" headers={Headers()} renderCells={renderCells} />
+
         </QueryTableCard>
     </>
 
-    function getField(item, field) {
-        const value = item[field]
-        if (field === "admin") return value ? "•" : ""
-        return value
+    function renderCells(item) {
+        return <>
+            <td><a href={item._id}>{item.id_number}</a></td>
+            <td><a href={item._id}>{item.username}</a></td>
+            <td><a href={item._id}>{item.email}</a></td>
+            <td><a href={item._id}>{item.last_name}</a></td>
+            <td><a href={item._id}>{item.first_name}</a></td>
+            <td>{item.admin ? "•" : ""}</td>
+        </>
     }
 }
+
+function Headers() {
+    return <>
+        <th><SortHeader field="id_number">matricola</SortHeader></th>
+        <th><SortHeader field="username">username</SortHeader></th>
+        <th><SortHeader field="email">email</SortHeader></th>
+        <th><SortHeader field="last_name">cognome</SortHeader></th>
+        <th><SortHeader field="first_name">nome</SortHeader></th>
+        <th>admin</th>
+    </>
+}