Skip to content

Commit

Permalink
refactoring tables
Browse files Browse the repository at this point in the history
  • Loading branch information
@paolini
paolini committed Dec 31, 2023
1 parent 5e114af commit e7b2413
Show file tree
Hide file tree
Showing 5 changed files with 93 additions and 121 deletions.
45 changes: 9 additions & 36 deletions frontend/src/components/QueryTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,47 +61,22 @@ export function QueryTableBar({ children }) {

}

export function QueryTable<T>({ path, headers, getField}:{
export function QueryTable<T extends {_id:string}>({ path, headers, renderCells}:{
path: string,
headers: IQueryTableHeader[],
getField?: (item: any, field: string) => JSX.Element | string,
children?: any,
headers: JSX.Element|JSX.Element[],
renderCells: (item: T) => JSX.Element|JSX.Element[],
}) {
return <div className="table-responsive-lg">
<TableItems<T> path={path} headers={headers} getField={getField}>
<TableItems<T> path={path}>
<thead>
<tr>
<th></th>
{ headers.map( ({ field, label, enable_sort }) =>
<th key={ field }>
{enable_sort
? <SortHeader field={ field } label={ label } />
: label}
</th>
)}
{ headers }
</tr>
</thead>
<TableBody renderCells={renderCells} />
<TableBody<T> renderCells={renderCells} />
</TableItems>
</div>

function renderCells(item) {
return <>
{headers.map(({ field, enable_link }) =>
<td key={ field }>{ render(item, field, enable_link) }</td>
)}
</>
}

function render(item, field, enable_link) {
const content = getField ? getField(item, field) : defaultGetField(item, field)
if (enable_link) {
return <Link to={ `${item._id}` }>{ content }</Link>
} else {
return content;
}
}

}

export function defaultGetField(item, field:string) {
Expand Down Expand Up @@ -167,8 +142,6 @@ export function useSetSelectedIds() {

function TableItems<T>({ path, children }: {
path:string,
headers: IQueryTableHeader[],
getField?: (item: any, field: string) => JSX.Element | string,
children?: any,
}) {
const ctx = useQuery()
Expand Down Expand Up @@ -207,18 +180,18 @@ function TableItems<T>({ path, children }: {
}
}

function SortHeader({ field, label }) {
export function SortHeader({ field, children }) {
const { query, setQuery } = useQuery() || {}

if (query && setQuery) {
return <a href="#" onClick={() => toggleSort(field, setQuery)}>
{ label }&nbsp;{
{ children }&nbsp;{
(query._sort === field)
? (query._direction > 0 ? <>↓</> : <>↑</>)
: ""}
</a>
} else {
return label;
return children
}

function toggleSort(field, setQuery) {
Expand Down
54 changes: 20 additions & 34 deletions frontend/src/pages/DegreesPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,13 @@
import React from 'react'

import {QueryTableCard, QueryTableBar, QueryTable, FilterBadges} from '../components/QueryTable'
import {QueryTableCard, QueryTableBar, QueryTable, FilterBadges, SortHeader} from '../components/QueryTable'
import {
TableTopRightButtons, FilterButton, FilterInput,
ItemAddButton, CsvDownloadButton, ExcelDownloadButton,
} from '../components/TableElements'

const path = "/degrees/"

const headers=[
{
field: 'enabled',
label: "Attivo",
}, {
field: 'enable_sharing',
label: "Richiesta parere"
}, {
field: 'academic_year',
label: "Anno accademico",
enable_sort: true
}, {
field: 'name',
label: "nome",
enable_sort: true,
enable_link: true
}, {
field: 'years',
label: "Anni",
enable_sort: true
}]

export default function DegreesPage() {
return <>
<h1>Corsi di Laurea</h1>
Expand All @@ -53,19 +31,27 @@ export default function DegreesPage() {
</TableTopRightButtons>
</QueryTableBar>
<FilterBadges />
<QueryTable path={path} headers={headers} getField={getField} />
<QueryTable path={path} headers={Headers()} renderCells={renderCells} />
</QueryTableCard>
</>
}

function getField(item, field) {
const value = item[field]
if (field == "enabled") {
return value ? "attivo" : "non attivo"
} else if (field == "enable_sharing") {
return value ? "abilitata" : "non abilitata"
} else {
return value
}
}
function Headers() {
return <>
<th>attivo</th>
<th>richiesta parere</th>
<th><SortHeader field='academic_year'>anno</SortHeader></th>
<th><SortHeader field='name'>nome</SortHeader></th>
<th><SortHeader field='years'>anni</SortHeader></th>
</>
}

function renderCells(item) {
return <>
<td>{item.enabled ? "•" : ""}</td>
<td>{item.enable_sharing ? "•" : ""}</td>
<td>{item.academic_year}</td>
<td><a href={item._id}>{item.name}</a></td>
<td>{item.years}</td>
</>
}
29 changes: 22 additions & 7 deletions frontend/src/pages/ExamsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
TableTopRightButtons, FilterButton, FilterInput,
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="/exams/"
const headers=[
Expand Down Expand Up @@ -54,14 +54,29 @@ export default function ExamsPage() {
</TableTopRightButtons>
</QueryTableBar>
<FilterBadges />
<QueryTable path={path} headers={headers} getField={getField} />
<QueryTable path={path} headers={Headers()} renderCells={renderCells} />
</QueryTableCard>
</>
}

function getField(item, field) {
const value = item[field]
if (field === "tags") return value.join(", ")
return value
}
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 renderCells(item) {
return <>
<td><a href={item._id}>{item.name}</a></td>
<td>{item.tags.join(", ")}</td>
<td>{item.code}</td>
<td>{item.sector}</td>
<td>{item.credits}</td>
<td>{item.notes}</td>
</>
}
25 changes: 14 additions & 11 deletions frontend/src/pages/FormTemplatesPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
FilterCheckbox,
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="form_templates/"
const headers=[
Expand Down Expand Up @@ -40,18 +40,21 @@ export default function FormTemplatesPage() {
</TableTopRightButtons>
</QueryTableBar>
<FilterBadges />
<QueryTable path={path} headers={headers} getField={getField}/>
<QueryTable path={path} headers={Headers()} renderCells={renderCells}/>
</QueryTableCard>
</>
}

function getField(item, field) {
const value = item[field]
switch(field) {
case 'enabled':
return value ? "•" : ""
default:
return value
}
}
function Headers() {
return <>
<th><SortHeader field='name'>nome</SortHeader></th>
<th><SortHeader field='enabled'>attivato</SortHeader></th>
</>
}

function renderCells(item) {
return <>
<td><a href={item._id}>{item.name}</a></td>
<td>{item.enabled? "•" : ""}</td>
</>
}
61 changes: 28 additions & 33 deletions frontend/src/pages/ProposalsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,42 +4,13 @@ import {
TableTopRightButtons, FilterButton, FilterInput,
ItemAddButton, CsvDownloadButton, ExcelDownloadButton, FilterSelect,
} from '../components/TableElements'
import {QueryTableCard, QueryTableBar, QueryTable, FilterBadges} from '../components/QueryTable'
import {QueryTableCard, QueryTableBar, QueryTable, FilterBadges, SortHeader} from '../components/QueryTable'
import { ProposalGet } from '../modules/engine'
import { formatDate } from '../modules/dates'
import StateBadge from '../components/StateBadge'

const path = "/proposals/"

const headers = [
{
field: 'state',
label: 'stato',
}, {
field: 'user_name',
label: 'studente',
enable_sort: true,
enable_link: true,
}, {
field: 'degree_academic_year',
label: 'anno',
enable_sort: true,
}, {
field: 'degree_name',
label: 'laurea',
enable_sort: true,
}, {
field: 'curriculum_name',
label: "piano di studio",
enable_sort: true,
}, {
field: 'date_submitted',
label: 'data invio',
enable_sort: true,
}, {
field: 'date_managed',
label: 'data gestione',
enable_sort: true,
}]

export default function ProposalsPage() {
return <>
<h1>Piani di studio</h1>
Expand All @@ -65,8 +36,32 @@ export default function ProposalsPage() {
</TableTopRightButtons>
</QueryTableBar>
<FilterBadges/>
<QueryTable<ProposalGet> path={path} headers={headers} />
<QueryTable<ProposalGet> path={path} headers={Headers()} renderCells={renderCells}>
</QueryTable>
</QueryTableCard>
</>

function renderCells(item: ProposalGet) {
return <>
<td><StateBadge state={item.state}/></td>
<td><a href={item.user_id}>{item.user_name}</a></td>
<td>{item.degree_academic_year}</td>
<td>{item.degree_name}</td>
<td>{item.curriculum_name}</td>
<td>{formatDate(item.date_submitted)}</td>
<td>{formatDate(item.date_managed)}</td>
</>
}
}

function Headers() {
return <>
<th>stato</th>
<th><SortHeader field='user_name'>studente</SortHeader></th>
<th><SortHeader field='degree_academic_year'>anno</SortHeader></th>
<th><SortHeader field='degree_name'>laurea</SortHeader></th>
<th><SortHeader field='curriculum_name'>piano di studio</SortHeader></th>
<th><SortHeader field='date_submitted'>data invio</SortHeader></th>
<th><SortHeader field='date_managed'>data gestione</SortHeader></th>
</>
}

0 comments on commit e7b2413

Please sign in to comment.