Skip to content
Snippets Groups Projects
Commit 318f852b authored by Remco Tukker's avatar Remco Tukker
Browse files

initial admin survey overview page

parent 447c5f8e
No related branches found
No related tags found
1 merge request!52Feature/admin workflow surveys page
......@@ -6,6 +6,7 @@ from typing import Any, Optional
from flask import Blueprint, jsonify, request
from sqlalchemy import select
from sqlalchemy.orm import joinedload, load_only
from compendium_v2.db import db
from compendium_v2.db.model import NREN
......@@ -37,6 +38,33 @@ def get_nrens() -> Any:
return jsonify(entries)
# TODO admin only
@routes.route('/list', methods=['GET'])
@common.require_accepts_json
def list_surveys() -> Any:
surveys = db.session.scalars(
select(Survey).options(
load_only(Survey.year, Survey.status),
joinedload(Survey.responses).load_only(SurveyResponse.status)
.joinedload(SurveyResponse.nren).load_only(NREN.name)
).order_by(Survey.year.desc())
).unique()
entries = [
{
"year": entry.year,
"status": entry.status.value,
"responses": [{"nren": r.nren.name, "status": r.status.value} for r in entry.responses]
}
for entry in surveys
]
# TODO fix the ordering of the responses by nren name, i couldnt convince SA yet..
return jsonify(entries)
@routes.route('/open/<string:nren_name>', methods=['GET'])
@common.require_accepts_json
def open_survey(nren_name) -> Any:
......
import React, { ReactElement } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import SurveySelectionComponent from './SurveySelectionComponent';
import ShowUser from './ShowUser';
import UserManagementComponent from "./UserManagementComponent";
import SurveyManagementComponent from './SurveyManagementComponent'
import SurveySelectionComponent from './SurveySelectionComponent';
import UserManagementComponent from './UserManagementComponent';
function App(): ReactElement {
......@@ -10,7 +12,8 @@ function App(): ReactElement {
<div className="app">
<Router>
<Routes>
<Route path="survey/admin/surveys" element={<SurveySelectionComponent />} />
<Route path="survey/admin/surveysdata" element={<SurveySelectionComponent />} />
<Route path="survey/admin/surveys" element={<SurveyManagementComponent />} />
<Route path="survey/admin/users" element={<UserManagementComponent />} />
<Route path="*" element={<ShowUser />} />
</Routes>
......
import React, { useState, useEffect } from "react";
import Accordion from 'react-bootstrap/Accordion';
import Button from 'react-bootstrap/Button';
import Table from 'react-bootstrap/Table';
async function fetchSurveys(): Promise<Survey[]> {
try {
const response = await fetch('/api/survey/list');
const userList = await response.json();
return userList
} catch (error) {
console.log('handle this better..');
return [];
}
}
interface Response {
nren: string
status: string
}
interface Survey {
year: number
status: string
responses: Response[]
}
function SurveyManagementComponent() {
const [surveys, setSurveys] = useState<Survey[]>([]);
useEffect(() => {
// Fetch user
fetchSurveys().then((userList) => {
setSurveys(userList);
});
}, []);
console.log(surveys);
return (
<div>
<Button>start new survey - only available when all surveys published (or not started)</Button>
<Accordion>
{surveys.map(survey => (
<Accordion.Item eventKey={survey.year.toString()} key={survey.year}>
<Accordion.Header>{survey.year} - {survey.status} - <Button>inspect - show whole survey with all questions visible</Button> <Button>open - only available when closed and no other surveys open</Button> <Button>close - only available when open</Button> <Button>publish - only available when closed and all answers checked</Button></Accordion.Header>
<Accordion.Body>
<Table>
<tbody>
{survey.responses.map(response => (
<tr key={response.nren}>
<td>{response.nren}</td>
<td>{response.status}</td>
<td>locked by</td>
<td>
inspect (with the option to mark as checked)
edit (only available when completed)
remove lock (only available when locked)
</td>
</tr>
))}
</tbody>
</Table>
</Accordion.Body>
</Accordion.Item>
))}
</Accordion>
</div>
);
}
export default SurveyManagementComponent;
import React from 'react';
import { createRoot } from 'react-dom/client';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';
const container = document.getElementById('root') as HTMLElement;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment