Skip to content

Commit

Permalink
fix: filters content
Browse files Browse the repository at this point in the history
  • Loading branch information
@majkshkurti
majkshkurti committed Sep 25, 2023
1 parent b2436ab commit 0940938
Show file tree
Hide file tree
Showing 13 changed files with 578 additions and 301 deletions.
131 changes: 19 additions & 112 deletions apps/web/app/[lng]/(dashboard)/datasets/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,27 @@
"use client";

import {
Box,
Button,
Container,
Divider,
Grid,
IconButton,
InputBase,
Paper,
Typography,
} from "@mui/material";
import { Box, Button, Container, Grid, Paper, Typography } from "@mui/material";
import { ICON_NAME, Icon } from "@p4b/ui/components/Icon";
import GridViewIcon from "@mui/icons-material/GridView";
import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
import { useEffect, useState } from "react";
import { useState } from "react";
import { useLayers } from "@/lib/api/layers";
import TileGrid from "@/components/dashboard/common/TileGrid";
import type { SelectedFolder } from "@/components/dashboard/common/FoldersTreeView";
import FoldersTreeView from "@/components/dashboard/common/FoldersTreeView";
import type { GetContentQueryParams } from "@/lib/validations/common";
import { debounce } from "@mui/material/utils";
import type { GetLayersQueryParams } from "@/lib/validations/layer";
import ContentSearchBar from "@/components/dashboard/common/ContentSearchbar";

const Datasets = () => {
const [queryParams, setQueryParams] = useState<GetContentQueryParams>({
const [queryParams, setQueryParams] = useState<GetLayersQueryParams>({
order: "descendent",
order_by: "updated_at",
});
const [view, setView] = useState<"list" | "grid">("grid");

const {
layers: datasets,
isLoading: isDataLoading,
isLoading: isDatasetLoading,
isError: _isDatasetError,
} = useLayers(queryParams);

const [view, setView] = useState<"list" | "grid">("grid");
const handleViewToggle = () => {
const newView = view === "list" ? "grid" : "list";
setView(newView);
};
const [selectedFolder, setSelectedFolder] = useState<SelectedFolder>({
type: "folder",
id: "0",
name: "Home",
});

useEffect(() => {
if (selectedFolder.id !== "0" && selectedFolder.type === "folder") {
setQueryParams({
...queryParams,
folder_id: selectedFolder.id,
});
} else {
const { folder_id: _, ...rest } = queryParams;
setQueryParams({
...rest,
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedFolder]);

return (
<Container sx={{ py: 10, px: 10 }} maxWidth="xl">
<Box
Expand All @@ -76,89 +38,34 @@ const Datasets = () => {
startIcon={
<Icon iconName={ICON_NAME.PLUS} style={{ fontSize: 12 }} />
}
href="/layers"
href="/datasets"
>
Upload
New dataset
</Button>
</Box>
<Grid container justifyContent="space-between" spacing={4}>
<Grid item xs={12}>
<Box
sx={{
display: "flex",
justifyContent: "start",
alignItems: "center",
mt: 2,
}}
>
<Paper
component="form"
elevation={3}
sx={{
py: 1,
px: 4,
display: "flex",
alignItems: "center",
width: "100%",
}}
>
{/* Search bar */}
<Icon iconName={ICON_NAME.SEARCH} style={{ fontSize: 17 }} />
<InputBase
sx={{ ml: 3, flex: 1 }}
placeholder="Search Datasets"
inputProps={{ "aria-label": "search datasets" }}
onChange={(e) =>
debounce(() => {
setQueryParams({
...queryParams,
search: e.target.value,
});
}, 500)()
}
/>
<Divider orientation="vertical" flexItem />
<IconButton
sx={{
mx: 2,
p: 2,
borderRadius: 1,
}}
>
<Icon iconName={ICON_NAME.FILTER} fontSize="small" />
</IconButton>
<Divider orientation="vertical" flexItem />

<IconButton
onClick={handleViewToggle}
sx={{
ml: 2,
p: 2,
borderRadius: 1,
}}
>
{view === "list" ? (
<GridViewIcon />
) : (
<FormatListBulletedIcon />
)}
</IconButton>
</Paper>
</Box>
<ContentSearchBar
contentType="layer"
view={view}
setView={setView}
queryParams={queryParams}
setQueryParams={setQueryParams}
/>
</Grid>
<Grid item xs={3}>
<Paper elevation={3} sx={{ backgroundImage: "none" }}>
<FoldersTreeView
selectedFolder={selectedFolder}
onFolderSelect={setSelectedFolder}
queryParams={queryParams}
setQueryParams={setQueryParams}
/>
</Paper>
</Grid>
<Grid item xs={9}>
<TileGrid
view={view}
items={datasets?.items ?? []}
isLoading={isDataLoading}
isLoading={isDatasetLoading}
type="layer"
/>
</Grid>
Expand Down
123 changes: 15 additions & 108 deletions apps/web/app/[lng]/(dashboard)/projects/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,27 @@
"use client";

import {
Box,
Button,
Container,
Divider,
Grid,
IconButton,
InputBase,
Paper,
Typography,
} from "@mui/material";
import { Box, Button, Container, Grid, Paper, Typography } from "@mui/material";
import { ICON_NAME, Icon } from "@p4b/ui/components/Icon";
import GridViewIcon from "@mui/icons-material/GridView";
import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
import { useEffect, useState } from "react";
import { useState } from "react";
import { useProjects } from "@/lib/api/projects";
import TileGrid from "@/components/dashboard/common/TileGrid";
import type { SelectedFolder } from "@/components/dashboard/common/FoldersTreeView";
import FoldersTreeView from "@/components/dashboard/common/FoldersTreeView";
import type { GetContentQueryParams } from "@/lib/validations/common";
import { debounce } from "@mui/material/utils";
import type { GetProjectsQueryParams } from "@/lib/validations/project";
import ContentSearchBar from "@/components/dashboard/common/ContentSearchbar";

const Projects = () => {
const [queryParams, setQueryParams] = useState<GetContentQueryParams>({
const [queryParams, setQueryParams] = useState<GetProjectsQueryParams>({
order: "descendent",
order_by: "updated_at",
});
const [view, setView] = useState<"list" | "grid">("grid");

const {
projects,
isLoading: isProjectLoading,
isError: _isProjectError,
} = useProjects(queryParams);

const [view, setView] = useState<"list" | "grid">("grid");
const handleViewToggle = () => {
const newView = view === "list" ? "grid" : "list";
setView(newView);
};
const [selectedFolder, setSelectedFolder] = useState<SelectedFolder>({
type: "folder",
id: "0",
name: "Home",
});

useEffect(() => {
if (selectedFolder.id !== "0" && selectedFolder.type === "folder") {
setQueryParams({
...queryParams,
folder_id: selectedFolder.id,
});
} else {
const { folder_id: _, ...rest } = queryParams;
setQueryParams({
...rest,
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedFolder]);

return (
<Container sx={{ py: 10, px: 10 }} maxWidth="xl">
<Box
Expand All @@ -83,74 +45,19 @@ const Projects = () => {
</Box>
<Grid container justifyContent="space-between" spacing={4}>
<Grid item xs={12}>
<Box
sx={{
display: "flex",
justifyContent: "start",
alignItems: "center",
mt: 2,
}}
>
<Paper
component="form"
elevation={3}
sx={{
py: 1,
px: 4,
display: "flex",
alignItems: "center",
width: "100%",
}}
>
{/* Search bar */}
<Icon iconName={ICON_NAME.SEARCH} style={{ fontSize: 17 }} />
<InputBase
sx={{ ml: 3, flex: 1 }}
placeholder="Search Projects"
inputProps={{ "aria-label": "search projects" }}
onChange={(e) =>
debounce(() => {
setQueryParams({
...queryParams,
search: e.target.value,
});
}, 500)()
}
/>
<Divider orientation="vertical" flexItem />
<IconButton
sx={{
mx: 2,
p: 2,
borderRadius: 1,
}}
>
<Icon iconName={ICON_NAME.FILTER} fontSize="small" />
</IconButton>
<Divider orientation="vertical" flexItem />

<IconButton
onClick={handleViewToggle}
sx={{
ml: 2,
p: 2,
borderRadius: 1,
}}
>
{view === "list" ? (
<GridViewIcon />
) : (
<FormatListBulletedIcon />
)}
</IconButton>
</Paper>
</Box>
<ContentSearchBar
contentType="project"
view={view}
setView={setView}
queryParams={queryParams}
setQueryParams={setQueryParams}
/>
</Grid>
<Grid item xs={3}>
<Paper elevation={3} sx={{ backgroundImage: "none" }}>
<FoldersTreeView
selectedFolder={selectedFolder}
onFolderSelect={setSelectedFolder}
queryParams={queryParams}
setQueryParams={setQueryParams}
/>
</Paper>
</Grid>
Expand Down
Loading

0 comments on commit 0940938

Please sign in to comment.