Skip to content

Commit

Permalink
Small improvements to the export view
Browse files Browse the repository at this point in the history
  • Loading branch information
@Theophile-Madet
Theophile-Madet committed Jan 31, 2025
1 parent d618317 commit 7afe0d3
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 73 deletions.
152 changes: 81 additions & 71 deletions src/statistics/FancyExportCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,5 @@
import React, { useEffect, useState } from "react";
import {
Badge,
Card,
Col,
FloatingLabel,
Form,
Row,
Spinner,
Table,
} from "react-bootstrap";
import { Badge, Card, Col, Form, Row, Spinner, Table } from "react-bootstrap";
import { useApi } from "../hooks/useApi.ts";
import { DatapointExport, Dataset, StatisticsApi } from "../api-client";
import { getDateInputValue } from "./utils.tsx";
Expand Down Expand Up @@ -150,37 +141,57 @@ const FancyExportCard: React.FC = () => {
</Card.Header>
<Card.Body className={"p-2 m-2"}>
<div className={"d-flex flex-column gap-2"}>
<div>
<div className={"d-flex flex-row gap-2"}>
{availableDatasetsError ? (
<div>{availableDatasetsError}</div>
) : availableDatasetsLoading ? (
<Spinner />
) : (
<Form.Group className={"mb-1"}>
<FloatingLabel label={"Pick a source dataset"}>
<Form.Select
onChange={(event) => {
for (const dataset of availableDatasets) {
if (dataset.id == event.target.value) {
setSelectedDataset(dataset);
setRows([]);
return;
}
<Form.Group
style={{ flexBasis: 0, flexGrow: 1 }}
controlId={"sourceDataset"}
>
<Form.Label>{gettext("Source dataset")}</Form.Label>
<Form.Select
onChange={(event) => {
for (const dataset of availableDatasets) {
if (dataset.id == event.target.value) {
setSelectedDataset(dataset);
setRows([]);
return;
}
setSelectedDataset(undefined);
}}
>
<option value={""}></option>
{availableDatasets.map((dataset) => (
<option value={dataset.id} key={dataset.id}>
{dataset.displayName}
</option>
))}
</Form.Select>
</FloatingLabel>
}
setSelectedDataset(undefined);
}}
>
<option value={""}></option>
{availableDatasets.map((dataset) => (
<option value={dataset.id} key={dataset.id}>
{dataset.displayName}
</option>
))}
</Form.Select>
{selectedDataset && (
<Form.Text>{selectedDataset.description}</Form.Text>
)}
</Form.Group>
)}
{selectedDataset && <div>{selectedDataset.description}</div>}
<Form.Group style={{ flexBasis: 0, flexGrow: 1 }}>
<Form.Label>{gettext("Date")}</Form.Label>
<Form.Control
type={"date"}
value={getDateInputValue(date)}
onChange={(event) => {
setDate(new Date(event.target.value));
}}
/>
<Form.Text>
{gettext(
"The date is only relevant for the following fields: shift_status, is_working, is_exempted, is_paused, can_shop. " +
"For all other fields, the value as it is now is exported, not the value as it was at the given date.",
)}
</Form.Text>
</Form.Group>
</div>
<div>
{availableColumnsError ? (
Expand All @@ -189,20 +200,26 @@ const FancyExportCard: React.FC = () => {
<Spinner />
) : (
<Form.Group>
<FloatingLabel label={"Add columns to the export"}>
<Form.Select
onChange={(event) => {
addExportColumnToSelection(event.target.value);
}}
>
<option value=""></option>
{availableColumns.map((column) => (
<Form.Label>
{gettext("Add columns to the export")}
</Form.Label>
<Form.Select
onChange={(event) => {
addExportColumnToSelection(event.target.value);
}}
>
<option value=""></option>
{availableColumns
.filter((column) => !selectedColumns.has(column))
.map((column) => (
<option value={column} key={column}>
{column}
</option>
))}
</Form.Select>
</FloatingLabel>
</Form.Select>
<Form.Text>
{gettext("Click on a selected column to deselect it.")}
</Form.Text>
</Form.Group>
)}
</div>
Expand All @@ -217,26 +234,14 @@ const FancyExportCard: React.FC = () => {
</Badge>
))}
</div>
<div>
<Form.Group>
<FloatingLabel label={"Date"}>
<Form.Control
type={"date"}
value={getDateInputValue(date)}
onChange={(event) => {
setDate(new Date(event.target.value));
}}
/>
</FloatingLabel>
</Form.Group>
</div>
<div className={"d-flex flex-row gap-2"}>
<TapirButton
variant={"outline-secondary"}
text={
selectedDataset
? "Build export for " + selectedDataset.displayName
: "Pick a source dataset"
? gettext("Build export for ") +
selectedDataset.displayName
: gettext("Pick a source dataset")
}
icon={Download}
onClick={() => {
Expand All @@ -245,20 +250,25 @@ const FancyExportCard: React.FC = () => {
disabled={!selectedDataset}
loading={exportDownloading}
/>
{rows.length > 0 && (
<TapirButton
variant={"outline-secondary"}
text={"Copy export to clipboard"}
icon={Copy}
onClick={() => {
copyExportToClipboard();
}}
/>
)}
<TapirButton
variant={"outline-secondary"}
text={
rows.length > 0
? gettext("Copy export to clipboard")
: gettext("Build the export to copy it")
}
icon={Copy}
onClick={() => {
copyExportToClipboard();
}}
disabled={rows.length === 0}
/>
</div>
<div>
{downloadExportError ? (
downloadExportError
) : rows.length === 0 ? (
<div>{gettext("Waiting for build")}</div>
) : (
<Table
className={
Expand All @@ -277,13 +287,13 @@ const FancyExportCard: React.FC = () => {
<tr key={index}>
{Array.from(selectedColumns).map((columnName) => (
<td key={index.toString() + "_" + columnName}>
{
{buildColumnExport(
row[
snakeCaseToCamelCase(
columnName,
) as keyof DatapointExport
]
}
],
)}
</td>
))}
</tr>
Expand Down
6 changes: 4 additions & 2 deletions tapir/statistics/views/dataset_export_view.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,10 @@ def get(self, request):
reference_time = self.get_reference_time(request)
export_columns = request.query_params.getlist("export_columns")

queryset = data_providers[request.query_params.get("dataset")].get_queryset(
reference_time
queryset = (
data_providers[request.query_params.get("dataset")]
.get_queryset(reference_time)
.order_by("id")
)

return Response(
Expand Down

0 comments on commit 7afe0d3

Please sign in to comment.