Skip to content

Commit

Permalink
fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@majkshkurti
majkshkurti committed Jun 23, 2024
1 parent cd904be commit 7e7fbf3
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 36 deletions.
1 change: 1 addition & 0 deletions apps/web/components/map/common/LayerFieldSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export const containsText = (text: string, searchText: string) =>
export const FieldTypeColors = {
string: [140, 210, 205],
number: [248, 194, 28],
object: [255, 138, 101],
};

export const FieldTypeTag = styled("div")<{ fieldType: string }>(
Expand Down
134 changes: 112 additions & 22 deletions apps/web/components/modals/DatasetTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { FieldTypeTag } from "@/components/map/common/LayerFieldSelector";
import useLayerFields from "@/hooks/map/CommonHooks";
import { useDatasetCollectionItems } from "@/lib/api/layers";
import { IconButton, Skeleton } from "@mui/material";
import { Box, Collapse, IconButton, Skeleton } from "@mui/material";

import type {
GetCollectionItemsQueryParams,
Expand All @@ -22,7 +22,9 @@ import {
TableRow,
Typography,
} from "@mui/material";
import { useEffect, useState } from "react";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import { useEffect, useMemo, useState } from "react";
import { ICON_NAME, Icon } from "@p4b/ui/components/Icon";
import NoValuesFound from "@/components/map/common/NoValuesFound";

Expand All @@ -33,14 +35,101 @@ interface DatasetTableDialogProps {
dataset: ProjectLayer | Layer;
}

const Row = ({ row, fields }) => {
const [open, setOpen] = useState(false);

const primitiveFields = useMemo(
() => fields.filter((field) => field.type !== "object"),
[fields],
);

const objectFields = useMemo(
() => fields.filter((field) => field.type === "object"),
[fields],
);

return (
<>
<TableRow key={row.id}>
{objectFields.length > 0 && (
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</TableCell>
)}
{primitiveFields.map((field, fieldIndex) => (
<TableCell key={fieldIndex}>{row.properties[field.name]}</TableCell>
))}
</TableRow>

{!!objectFields.length && (
<TableRow>
<TableCell
style={{ paddingBottom: 0, paddingTop: 0 }}
colSpan={primitiveFields.length + 1}
>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ margin: 2 }}>
{objectFields.map((field) => {
const jsonData = JSON.parse(row.properties[field.name]);
return (
<>
<Stack direction="column" spacing={1} sx={{ py: 1, pl: 4 }}>
<Typography variant="body2" fontWeight="bold">
{field.name}
</Typography>
<FieldTypeTag fieldType={field.type}>
{field.type}
</FieldTypeTag>
</Stack>
<Table
size="small"
aria-label="purchases"
key={field.name}
>
<TableHead>
<TableRow>
{jsonData.length > 0 &&
Object.keys(jsonData[0]).map((key) => (
<TableCell key={key}>{key}</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{jsonData.map((item, rowIndex) => (
<TableRow key={rowIndex}>
{Object.values(item).map((value: string, cellIndex) => (
<TableCell key={cellIndex}>{value}</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</>
);
})}
</Box>
</Collapse>
</TableCell>
</TableRow>
)}
</>
);
};

const DatasetTableModal: React.FC<DatasetTableDialogProps> = ({
open,
onClose,
dataset,
}) => {
const { layerFields: fields, isLoading: areFieldsLoading } = useLayerFields(
dataset["layer_id"] || dataset["id"] || "",
undefined
undefined,
);
const defaultParams = {
limit: 50,
Expand All @@ -56,6 +145,8 @@ const DatasetTableModal: React.FC<DatasetTableDialogProps> = ({
dataQueryParams,
);

console.log(data);

const [displayData, setDisplayData] = useState(data);
useEffect(() => {
if (data) {
Expand Down Expand Up @@ -105,18 +196,23 @@ const DatasetTableModal: React.FC<DatasetTableDialogProps> = ({
<Table size="small" aria-label="simple table" stickyHeader>
<TableHead>
<TableRow>
{fields.map((field, index) => (
<TableCell key={index}>
<Stack direction="column" spacing={1} sx={{ py: 1 }}>
<Typography variant="body2" fontWeight="bold">
{field.name}
</Typography>
<FieldTypeTag fieldType={field.type}>
{field.type}
</FieldTypeTag>
</Stack>
</TableCell>
))}
{fields.some((field) => field.type === "object") && (
<TableCell />
)}
{fields
.filter((field) => field.type !== "object")
.map((field, index) => (
<TableCell key={index}>
<Stack direction="column" spacing={1} sx={{ py: 1 }}>
<Typography variant="body2" fontWeight="bold">
{field.name}
</Typography>
<FieldTypeTag fieldType={field.type}>
{field.type}
</FieldTypeTag>
</Stack>
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
Expand All @@ -133,13 +229,7 @@ const DatasetTableModal: React.FC<DatasetTableDialogProps> = ({
)}
{displayData.features?.length &&
displayData.features.map((row) => (
<TableRow key={row.id}>
{fields.map((field, fieldIndex) => (
<TableCell key={fieldIndex}>
{row.properties[field.name]}
</TableCell>
))}
</TableRow>
<Row key={row.id} row={row} fields={fields} />
))}
</TableBody>
</Table>
Expand Down
27 changes: 14 additions & 13 deletions apps/web/i18n/locales/de/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@
"create_message": "Erstellen Sie Teams, um Ihre Projekte einfach zu verwalten",
"create_new_dataset": "Neuen Datensatz erstellen",
"create_new_project": "Neues Projekt erstellen",
"create_scenario": "",
"create_scenario": "Szenario erstellen",
"created": "Erstellt",
"created_successfully": "Ordner erfolgreich erstellt",
"csv": "CSV",
Expand Down Expand Up @@ -176,8 +176,8 @@
"delete_project": "Projekt löschen",
"delete_project_error": "Fehler beim Löschen des Projekts",
"delete_project_success": "Projekt erfolgreich gelöscht",
"delete_scenario": "",
"delete_scenario_confirmation": "",
"delete_scenario": "Szenario löschen",
"delete_scenario_confirmation": "Sind Sie sicher, dass Sie das Szenario <b>{{scenario}}</b> löschen möchten?",
"delete_starting_point": "Startpunkt löschen",
"deleted_successfully": "Ordner erfolgreich gelöscht",
"desc": "Absteigend",
Expand All @@ -198,7 +198,7 @@
"duplicate": "Duplizieren",
"edit": "Bearbeiten",
"edit_metadata": "Metadaten bearbeiten",
"edit_scenario": "",
"edit_scenario": "Szenario bearbeiten",
"editor": "Bearbeiter",
"eg": "z.B.",
"email": "E-Mail",
Expand All @@ -212,8 +212,8 @@
"error": "Fehler",
"error_adding_layer": "Fehler beim Hinzufügen des Layers",
"error_creating_project": "Fehler beim Erstellen des Projekts",
"error_creating_scenario": "",
"error_deleting_scenario": "",
"error_creating_scenario": "Fehler beim Erstellen des Szenarios",
"error_deleting_scenario": "Fehler beim Löschen des Szenarios",
"error_downloading": "Fehler beim Herunterladen",
"error_duplicating_layer": "Fehler beim Duplizieren der Ebene",
"error_loading_chart_data": "Fehler beim Laden der Diagrammdaten",
Expand All @@ -229,7 +229,7 @@
"error_running_oev_gueteklassen": "Fehler beim Ausführen der ÖV-Güteklassen",
"error_running_trip_count": "Fehler beim Ausführen der Abfahrten-Berechnung",
"error_updating_project_layer_order": "Fehler beim Aktualisieren der Reihenfolge der Projektlayer",
"error_updating_scenario": "",
"error_updating_scenario": "Fehler beim Aktualisierungsszenario",
"error_uploading_dataset": "Fehler beim Hochladen des Datensatzes",
"exit_fullscreen": "Beenden Sie den Vollbildmodus",
"expired": "Abgelaufen",
Expand Down Expand Up @@ -499,7 +499,7 @@
"no_projects_found": "Keine Projekte gefunden",
"no_result": "Kein Ergebnis",
"no_result_found": "Keine Ergebnisse gefunden!",
"no_scenarios_created": "",
"no_scenarios_created": "Keine Szenarien erstellt",
"no_starting_points_added": "Keine Startpunkte hinzugefügt",
"no_table_layers": "Keine Tabellen-Layer gefunden",
"no_values_found": "Keine Werte gefunden",
Expand All @@ -517,7 +517,7 @@
"oev_gueteklasse_header": "ÖV-Güteklassen",
"oev_gueteklassen_computation_started": "Berechnung der ÖV-Güteklassen gestartet",
"oev_guteklassen": "ÖV-Güteklassen",
"ok": "",
"ok": "OK",
"opacity": "Deckkraft",
"open_data_table": "Daten ansehen",
"open_documentation": "Dokumentation öffnen",
Expand Down Expand Up @@ -697,10 +697,10 @@
"save_as_default": "Speichern als Standard",
"save_in_folder": "In Ordner speichern",
"scenario": "Szenario",
"scenario_created_successfully": "",
"scenario_deleted_success": "",
"scenario_updated_successfully": "",
"scenarios": "",
"scenario_created_successfully": "Szenario erfolgreich erstellt",
"scenario_deleted_success": "Szenario erfolgreich gelöscht",
"scenario_updated_successfully": "Szenario erfolgreich aktualisiert",
"scenarios": "Szenarien",
"search": "Suche",
"search_address": "Adresse suchen",
"search_datasets": "Datensatz durchsuchen",
Expand Down Expand Up @@ -794,6 +794,7 @@
"starting": "Startpunkte",
"starting_point": "Startpunkt",
"starting_point_desc": "Wählen Sie eine Variante aus um die Startpunkte auszuwählen",
"starting_point_max_points": "Maximale Startpunkte:",
"starting_points": "Starting Points",
"station_configuration": "Station Konfiguration",
"statistics": "Statistiken",
Expand Down
1 change: 1 addition & 0 deletions apps/web/i18n/locales/en/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -794,6 +794,7 @@
"starting": "Starting Points",
"starting_point": "Starting Point",
"starting_point_desc": "Chose a way to select the starting point/s of the catchment area",
"starting_point_max_points": "Maximum starting points:",
"starting_points": "Starting Points",
"station_configuration": "Station Configuration",
"statistics": "Statistics",
Expand Down
2 changes: 1 addition & 1 deletion apps/web/lib/validations/layer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const classBreaks = z.enum([
export const sizeScale = z.enum(["linear", "logarithmic", "exponential"]);
const layerFieldType = z.object({
name: z.string(),
type: z.union([z.literal("string"), z.literal("number")]),
type: z.union([z.literal("string"), z.literal("number"), z.literal("object")]),
});

export const layerClassBreaks = z.object({
Expand Down

0 comments on commit 7e7fbf3

Please sign in to comment.