fix refactoring

frontend/src/components/StateBadge.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Badge } from 'react-bootstrap'
+
+export default function StatusBadge({state}:{state: string}) {
+    return <Badge text="light" bg={
+        {
+            'draft': 'primary',
+            'submitted': 'warning',
+            'approved': 'success',
+            'rejected': 'error',
+        }[state]
+    }>{{
+            'draft': 'bozza',
+            'submitted': 'inviato',
+            'approved': 'approvato',
+            'rejected': 'respinto',
+        }[state]}
+    </Badge>
+}

frontend/src/models/Proposal.js

@@ -11,42 +11,6 @@ export default class Proposal extends Model {
         this.date_managed = Moment(this.date_managed)
     }
 
-    static api_url = 'proposals/'
-    static table_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,
-        }]
-    static sort_default = 'date_managed'
-    static sort_default_direction = -1
-
     badge() {
         return <Badge text="light" bg={
             {

frontend/src/modules/engine.tsx

@@ -169,14 +169,14 @@ export function useCreateEngine(): Engine {
     }
 }
 
-export function useGet(path:string, id:string) {
+export function useGet(path:string, id:string|undefined) {
     return useQuery<any,any>({
         queryKey: [path, id],
         queryFn: async () => {
             const res = await axios.get(`${api_root}${path}${id}`)
             return res.data
         },
-        enabled: id !== null,
+        enabled: !!id,
     })
 }        
 

frontend/src/modules/utils.ts

@@ -0,0 +1,10 @@
+import Moment from 'moment'
+
+export function formatDate(d) {
+    const date = Moment(d)
+    return date.format("D.M.Y")
+}
+
+export function displayAcademicYears(n) {
+    return `${n}/${n+1}`
+}

frontend/src/pages/CurriculumPage.tsx

@@ -4,6 +4,7 @@ import { useParams } from "react-router-dom"
 import { useGet } from '../modules/engine'
 import Card from '../components/Card'
 import LoadingMessage from '../components/LoadingMessage'
+import { displayAcademicYears } from '../modules/utils'
 
 const path = "/curricula/"
 const exam_path = "/exams/"
@@ -78,7 +79,3 @@ function ordinal(n) {
     if (n < ordinals.length) return ordinals[n]
     else return `${ n+1 }-mo`
 }
-
-function displayAcademicYears(n) {
-    return `${n}/${n+1}`
-}

frontend/src/pages/DegreePage.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { Link, useParams } from "react-router-dom"
 
 import { useEngine, useGet, useIndex } from '../modules/engine'
-import Degree from '../models/Degree'
 import Card from '../components/Card'
 import LoadingMessage from '../components/LoadingMessage'
 

frontend/src/pages/ProposalPage.tsx

@@ -1,15 +1,17 @@
 import React, { useState } from 'react'
 import { useParams } from "react-router-dom"
+import {Button} from 'react-bootstrap' 
 
 import { useEngine, useGet, useIndex } from '../modules/engine'
 import LoadingMessage from '../components/LoadingMessage'
 import Card from '../components/Card'
-import {Button} from 'react-bootstrap' 
+import {formatDate,displayAcademicYears} from '../modules/utils'
+import StateBadge from '../components/StateBadge'
 
-const exam_path = '/exams/'
-const degree_path = '/degrees/'
-const curriculum_path = '/curricula/'
-const proposal_path = '/proposals/'
+const exam_path = 'exams/'
+const degree_path = 'degrees/'
+const curriculum_path = 'curricula/'
+const proposal_path = 'proposals/'
 
 function ProposalForm({ proposal }) {
     const engine = useEngine()
@@ -228,7 +230,7 @@ function ProposalForm({ proposal }) {
                             (a,b) => (b.academic_year - a.academic_year) || (a.name.localeCompare(b.name))
                         ).map((degree) => 
                                 <option key={degree._id} value={degree._id}>
-                                    {degree.name} &mdash; anno di immatricolazione {degree.academic_years()}
+                                    {degree.name} &mdash; anno di immatricolazione {displayAcademicYears(degree.academic_year)}
                                 </option>
                         )
                     }
@@ -307,18 +309,25 @@ export default function ProposalPage() {
     const user = engine.user
     const { id } = useParams()
 
-    const query = useGet(proposal_path, id || '')
+    const query = useGet(proposal_path, id)
     const proposal = query.data
     const degreeQuery = useGet(degree_path, proposal?.degree_id)
     const curriculumQuery = useGet(curriculum_path, proposal?.curriculum_id)
 
     const degree = degreeQuery.data
     const curriculum = curriculumQuery.data
 
-    if (proposal === null || (proposal.curriculum_id && (curriculum === null || degree === null))) {
+    if (proposal === null || (proposal?.curriculum_id && (curriculum === null || degree === null))) {
         return <LoadingMessage>caricamento piano di studi...</LoadingMessage>
     }
 
+    return <>
+        <h1>Piano di studi di {proposal?.user_name}</h1>
+        {proposal && <MessageCard />}
+        {proposal && <InfoCard />}
+        { proposal?.exams?.map((year_exams, index) => <Year key={index} number={index} exams={year_exams}/>)}
+    </>
+
     function AdminButtons() {
         if (engine.user.admin && proposal.state === 'submitted') return <>
             <Button>accetta</Button>
@@ -354,13 +363,13 @@ export default function ProposalPage() {
                 'submitted': "border-left-warning",
                 'approved': "border-left-success",
                 'rejected': "border-left-error",
-            }[proposal.state]
+            }[proposal?.state]
         }>{
             {
                 'draft': `Questo piano è in stato di bozza. Devi inviarlo per avere l'approvazione.`,
-                'submitted': `Il piano è stato inviato in data ${proposal.date_submitted.format("D.M.Y")}. Riceverai un email quando verrà approvato o rifiutato`,
-                'approved': `Il piano è stato approvato in data ${proposal.date_managed.format("D.M.Y")}.`,
-                'rejected': `Il piano è stato rigettato in data ${proposal.date_managed.format("D.M.Y")}. Puoi farne una copia, modificarlo e inviarlo nuovamente.`,
+                'submitted': `Il piano è stato inviato in data ${formatDate(proposal.date_submitted)}. Riceverai un email quando verrà approvato o rifiutato`,
+                'approved': `Il piano è stato approvato in data ${formatDate(proposal.date_managed)}.`,
+                'rejected': `Il piano è stato rigettato in data ${formatDate(proposal.date_managed)}. Puoi farne una copia, modificarlo e inviarlo nuovamente.`,
             }[proposal.state]
         }</Card>
     }
@@ -451,7 +460,7 @@ export default function ProposalPage() {
             <table className="table"><tbody>
                 <tr>
                     <th>Stato</th>
-                    <td>{proposal.badge()}</td>
+                    <td><StateBadge state={proposal.state} /></td>
                 </tr>
                 <tr>
                     <th>Corso di Laurea</th>
@@ -463,17 +472,10 @@ export default function ProposalPage() {
                 </tr>
                 <tr>
                     <th>Anno di immatricolazione</th>
-                    <td>{proposal.degree_academic_years()}</td>
+                    <td>{displayAcademicYears(proposal.degree_academic_year)}</td>
                 </tr>                
             </tbody></table>        
         </Card>
     }
-
-    return <>
-        <h1>Piano di studi di {proposal.user_name}</h1>
-        <MessageCard />
-        <InfoCard />
-        { proposal.exams.map((year_exams, index) => <Year key={index} number={index} exams={year_exams}/>)}
-    </>
 }
 

frontend/src/pages/ProposalsPage.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+
+import { 
+    TableTopRightButtons, FilterButton, FilterInput,
+    ItemAddButton, CsvDownloadButton, ExcelDownloadButton,
+    } from '../components/TableElements'
+import QueryTable from '../components/QueryTable'
+
+export default function ProposalsPage() {
+    return <>
+        <h1>Piani di studio</h1>
+        <QueryTable 
+            path="proposals/" 
+            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,
+                }]}
+            sort="date_managed"
+            direction={-1}
+        >
+            <FilterButton>
+            <FilterInput name="name" label="nome" />
+            <FilterInput name="enabled" label="attivato" />
+            </FilterButton>
+
+            <TableTopRightButtons>
+                <CsvDownloadButton cb={async query=>[]}/>
+                <ExcelDownloadButton />
+            </TableTopRightButtons>
+        </QueryTable>
+    </>
+}
+