Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@majkshkurti
majkshkurti committed Nov 27, 2023
1 parent e80c7ef commit 724e9b5
Show file tree
Hide file tree
Showing 60 changed files with 1,666 additions and 1,436 deletions.
1 change: 0 additions & 1 deletion apps/goat/tsconfig.tsbuildinfo
View file

This file was deleted.

17 changes: 7 additions & 10 deletions apps/web/app/[lng]/map/[projectId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,7 @@ import React, { useMemo } from "react";
import type { ViewStateChangeEvent } from "react-map-gl";
import Map, { MapProvider } from "react-map-gl";
import Layers from "@/components/map/Layers";
import MobileDrawer from "@/components/map/panels/MobileDrawer";

import { useSelector } from "react-redux";
import type { IStore } from "@/types/store";
import ProjectNavigation from "@/components/map/panels/ProjectNavigation";
import Header from "@/components/header/Header";
import {
Expand All @@ -20,15 +17,16 @@ import {
useProjectLayers,
} from "@/lib/api/projects";
import { LoadingPage } from "@/components/common/LoadingPage";
import { useAppSelector } from "@/hooks/store/ContextHooks";
import { selectActiveBasemap } from "@/lib/store/map/selectors";

const sidebarWidth = 52;
const toolbarHeight = 52;

export default function MapPage({ params: { projectId } }) {
const theme = useTheme();
const { basemaps, activeBasemapIndex } = useSelector(
(state: IStore) => state.styling,
);
const activeBasemap = useAppSelector(selectActiveBasemap);

const {
project,
isLoading: isProjectLoading,
Expand Down Expand Up @@ -118,17 +116,16 @@ export default function MapPage({ params: { projectId } }) {
maxZoom: initialView?.max_zoom ?? 24,
},
}}
mapStyle={basemaps[activeBasemapIndex[0]].url}
mapStyle={
activeBasemap?.url ?? "mapbox://styles/mapbox/streets-v11"
}
attributionControl={false}
mapboxAccessToken={MAPBOX_TOKEN}
>
<Layers projectId={projectId} />
</Map>
</Box>
</Box>
<Box>
<MobileDrawer />
</Box>
</MapProvider>
)}
</>
Expand Down
49 changes: 49 additions & 0 deletions apps/web/components/common/OverflowTypography.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import type { TooltipProps } from "@mui/material";
import { Tooltip, Typography, type TypographyProps } from "@mui/material";
import type { FC, ReactChild } from "react";
import { useEffect, useRef, useState } from "react";

export interface OverflowTypograpyProps extends TypographyProps {
children: ReactChild;
tooltipProps?: Omit<TooltipProps, "title" | "children">;
}

export const OverflowTypograpy: FC<OverflowTypograpyProps> = ({
children,
tooltipProps,
...props
}) => {
const ref = useRef<HTMLSpanElement>(null);
const [tooltipEnabled, setTooltipEnabled] = useState(false);

useEffect(() => {
const compareSize = () => {
if (ref.current) {
const compare = ref.current.scrollWidth > ref.current.clientWidth;

setTooltipEnabled(compare);
}
};
compareSize();
window.addEventListener("resize", compareSize);
return () => window.removeEventListener("resize", compareSize);
}, []);

return (
<Tooltip
title={children}
disableHoverListener={!tooltipEnabled}
{...tooltipProps}
>
<Typography
ref={ref}
noWrap
overflow="hidden"
textOverflow="ellipsis"
{...props}
>
{children}
</Typography>
</Tooltip>
);
};
59 changes: 31 additions & 28 deletions apps/web/components/dashboard/common/ContentSearchbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,34 +157,37 @@ export default function ContentSearchBar(props: ContentSearchBarProps) {
});
}}
/>
<Divider orientation="vertical" flexItem />

<IconButton
onClick={handleViewToggle}
sx={{
...(view === "grid" && {
color: theme.palette.primary.main,
}),
ml: 2,
p: 2,
borderRadius: 1,
}}
>
<GridViewIcon />
</IconButton>
<IconButton
onClick={handleViewToggle}
sx={{
...(view === "list" && {
color: theme.palette.primary.main,
}),
ml: 0,
p: 2,
borderRadius: 1,
}}
>
<FormatListBulletedIcon />
</IconButton>
{setView && (
<>
<Divider orientation="vertical" flexItem />
<IconButton
onClick={handleViewToggle}
sx={{
...(view === "grid" && {
color: theme.palette.primary.main,
}),
ml: 2,
p: 2,
borderRadius: 1,
}}
>
<GridViewIcon />
</IconButton>
<IconButton
onClick={handleViewToggle}
sx={{
...(view === "list" && {
color: theme.palette.primary.main,
}),
ml: 0,
p: 2,
borderRadius: 1,
}}
>
<FormatListBulletedIcon />
</IconButton>
</>
)}
</Paper>
</Box>
);
Expand Down
14 changes: 10 additions & 4 deletions apps/web/components/dashboard/common/FoldersTreeView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,11 @@ interface FoldersTreeViewProps {
params: GetLayersQueryParams | GetProjectsQueryParams,
) => void;
queryParams: GetLayersQueryParams | GetProjectsQueryParams;
enableActions?: boolean;
}

export default function FoldersTreeView(props: FoldersTreeViewProps) {
const { setQueryParams, queryParams } = props;
const { setQueryParams, queryParams, enableActions = true } = props;
const [open, setOpen] = useState<boolean[]>([true, false, false]);
const { t } = useTranslation("dashboard");

Expand Down Expand Up @@ -92,7 +93,11 @@ export default function FoldersTreeView(props: FoldersTreeViewProps) {
const theme = useTheme();

const folderTypes = ["folder", "team", "organization"];
const folderTypeTitles = [t("projects.my_content"), t("projects.teams"), t("projects.organizations")];
const folderTypeTitles = [
t("projects.my_content"),
t("projects.teams"),
t("projects.organizations"),
];

const moreMenuItems: PopperMenuItem[] = [
{
Expand Down Expand Up @@ -204,7 +209,7 @@ export default function FoldersTreeView(props: FoldersTreeViewProps) {
</Typography>
}
/>
{typeIndex === 0 && (
{typeIndex === 0 && enableActions && (
<Tooltip title={t("projects.new_folder")} placement="top">
<IconButton
size="small"
Expand Down Expand Up @@ -280,7 +285,8 @@ export default function FoldersTreeView(props: FoldersTreeViewProps) {
}}
/>
{folderTypes[typeIndex] === "folder" &&
item?.id !== "0" && (
item?.id !== "0" &&
enableActions && (
<MoreMenu
menuItems={moreMenuItems}
menuButton={
Expand Down
111 changes: 65 additions & 46 deletions apps/web/components/dashboard/common/TileCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,12 @@ export interface TileCard {
cardType: "list" | "grid";
item: Project | Layer;
moreMenuOptions?: PopperMenuItem[];
onMoreMenuSelect?: (menuItem: PopperMenuItem, contentItem: Project | Layer) => void;
onMoreMenuSelect?: (
menuItem: PopperMenuItem,
contentItem: Project | Layer,
) => void;
enableActions?: boolean;
selected?: Project | Layer;
}

export interface ActiveCard {
Expand Down Expand Up @@ -75,7 +80,7 @@ const CardTags = ({ tags, maxTags = 5 }: CardTagsProps) => {
};

const TileCard = (props: TileCard) => {
const { cardType, item } = props;
const { cardType, item, enableActions = true } = props;
const theme = useTheme();
const [moreMenuOpen, setMoreMenuOpen] = useState(false);
const moreMenu = (
Expand Down Expand Up @@ -173,7 +178,6 @@ const TileCard = (props: TileCard) => {
position: "relative",
height: "100%",
display: "flex",
flexDirection: cardType === "grid" ? "column" : "row",
...(cardType === "list" && {
p: 2,
borderTop: `1px solid ${theme.palette.divider}`,
Expand All @@ -190,6 +194,12 @@ const TileCard = (props: TileCard) => {
}),
},
},
...(props.selected?.id === item?.id && {
backgroundColor: "rgba(43, 179, 129, 0.08)",
fontWeight: "bold",
}),
flexDirection: cardType === "grid" ? "column" : "row",

}}
>
{item?.thumbnail_url && cardType === "grid" && (
Expand Down Expand Up @@ -249,49 +259,58 @@ const TileCard = (props: TileCard) => {
{cardType === "grid" && gridContent}
{cardType === "list" && (
<Grid container alignItems="center" justifyContent="space-between">
<Grid item xs={11} sm={5} md={4}>
{cardTitle}
</Grid>
<Grid
item
sm={4}
md={3}
sx={{
display: { xs: "none", sm: "block" },
}}
>
<Box sx={{ px: 1, pb: 0 }} display="flex-start">
{updatedAtText}
</Box>
</Grid>
<Grid
item
md={3}
sx={{
display: { xs: "none", md: "block" },
}}
>
<Box sx={{ px: 1, pb: 0 }} display="flex-start">
{createdAtText}
</Box>
</Grid>
<Grid
item
md={1}
sm={2}
sx={{
display: { xs: "none", sm: "block" },
}}
>
<Box display="flex-start">
<CardTags tags={item?.tags} maxTags={1} />
</Box>
</Grid>
<Grid item sm={1}>
<Box display="flex" justifyContent="flex-end">
{moreMenu}
</Box>
</Grid>
{enableActions && (
<>
<Grid item xs={11} sm={5} md={4}>
{cardTitle}
</Grid>
<Grid
item
sm={4}
md={3}
sx={{
display: { xs: "none", sm: "block" },
}}
>
<Box sx={{ px: 1, pb: 0 }} display="flex-start">
{updatedAtText}
</Box>
</Grid>
<Grid
item
md={3}
sx={{
display: { xs: "none", md: "block" },
}}
>
<Box sx={{ px: 1, pb: 0 }} display="flex-start">
{createdAtText}
</Box>
</Grid>
<Grid
item
md={1}
sm={2}
sx={{
display: { xs: "none", sm: "block" },
}}
>
<Box display="flex-start">
<CardTags tags={item?.tags} maxTags={1} />
</Box>
</Grid>
<Grid item sm={1}>
<Box display="flex" justifyContent="flex-end">
{moreMenu}
</Box>
</Grid>
</>
)}
{!enableActions && (
<Grid item xs={12}>
{cardTitle}
</Grid>
)}
</Grid>
)}
</CardContent>
Expand Down
12 changes: 11 additions & 1 deletion apps/web/components/dashboard/common/TileGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ interface TileGridProps {
type: "project" | "layer";
items: Project[] | Layer[];
isLoading: boolean;
enableActions?: boolean;
onClick?: (item: Project | Layer) => void;
selected?: Project | Layer;
}

const TileGrid = (props: TileGridProps) => {
Expand Down Expand Up @@ -61,7 +64,7 @@ const TileGrid = (props: TileGridProps) => {
<Box
sx={{
...(props.view === "list" && {
boxShadow: 3,
boxShadow: props.enableActions ? 3 : 0,
}),
}}
>
Expand Down Expand Up @@ -99,6 +102,11 @@ const TileGrid = (props: TileGridProps) => {
(item: Project | Layer, index: number) => (
<Grid
item
onClick={() => {
if (props.onClick) {
props.onClick(item);
}
}}
key={item?.id ?? index}
{...(props.view === "list" ? listProps : gridProps)}
>
Expand All @@ -109,6 +117,8 @@ const TileGrid = (props: TileGridProps) => {
/>
) : (
<TileCard
selected={props.selected}
enableActions={props.enableActions}
cardType={props.view}
item={item}
moreMenuOptions={moreMenuOptions}
Expand Down
Loading

0 comments on commit 724e9b5

Please sign in to comment.