Mirrors/rowy
1
0
Fork 0
mirror of https://github.com/rowyio/rowy.git synced 2025-12-29 00:16:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

implement requested changes in PR #10

Browse Source
This commit is contained in:
Sidney Alcantara
2022-10-21 11:39:25 +11:00
parent 7fa0955dce
commit 4c387fb5c9
11 changed files with 47 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/icons/index.ts
View File

@@ -103,9 +103,6 @@ export { FileTableBoxOutline as Project };
import { TableColumn } from "mdi-material-ui";
export { TableColumn };
import { InformationOutline } from "mdi-material-ui";
export { InformationOutline as TableInformation };
export * from "./AddRow";
export * from "./AddRowTop";
export * from "./ChevronDown";

90
src/components/TableInformationDrawer/Details.tsx
View File

@@ -1,15 +1,9 @@
import { useMemo } from "react";
import { format } from "date-fns";
import { find } from "lodash-es";
import MDEditor from "@uiw/react-md-editor";
import {
Box,
Grid,
IconButton,
Stack,
Typography,
useTheme,
} from "@mui/material";
import { Box, IconButton, Stack, Typography } from "@mui/material";
import EditIcon from "@mui/icons-material/EditOutlined";
@@ -21,13 +15,9 @@ import {
tableSettingsDialogAtom,
userRolesAtom,
} from "@src/atoms/projectScope";
import { find } from "lodash-es";
import { DATE_TIME_FORMAT } from "@src/constants/dates";
export interface IDetailsProps {
handleOpenTemplate?: any;
}
export default function Details({ handleOpenTemplate }: IDetailsProps) {
export default function Details() {
const [userRoles] = useAtom(userRolesAtom, projectScope);
const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
const [tables] = useAtom(tablesAtom, projectScope);
@@ -41,18 +31,13 @@ export default function Details({ handleOpenTemplate }: IDetailsProps) {
[tables, tableSettings.id]
);
const theme = useTheme();
if (!settings) {
return null;
}
const editButton = userRoles.includes("ADMIN") && (
<IconButton
sx={{
position: "absolute",
right: 0,
}}
aria-label="Edit"
onClick={() =>
openTableSettingsDialog({
mode: "update",
@@ -68,27 +53,26 @@ export default function Details({ handleOpenTemplate }: IDetailsProps) {
const { description, details, _createdBy } = settings;
return (
<Grid
container
flexDirection="column"
<Stack
direction="column"
gap={3}
sx={{
paddingTop: theme.spacing(3),
paddingRight: theme.spacing(3),
paddingBottom: theme.spacing(5),
paddingTop: 3,
paddingRight: 3,
paddingBottom: 5,
"& > .MuiGrid-root": {
position: "relative",
},
}}
>
{/* Description */}
<Grid container direction="column" gap={1}>
<Stack direction="column" gap={1}>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
alignItems="flex-end"
>
<Typography variant="body1" sx={{ fontWeight: 500 }}>
<Typography variant="subtitle1" component="h3">
Description
</Typography>
{editButton}
@@ -96,16 +80,16 @@ export default function Details({ handleOpenTemplate }: IDetailsProps) {
<Typography variant="body2" color="text.secondary">
{description ? description : "No description"}
</Typography>
</Grid>
</Stack>
{/* Details */}
<Grid container direction="column" gap={1}>
<Stack direction="column" gap={1}>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
alignItems="flex-end"
>
<Typography variant="body1" sx={{ fontWeight: 500 }}>
<Typography variant="subtitle1" component="h3">
Details
</Typography>
{editButton}
@@ -123,16 +107,11 @@ export default function Details({ handleOpenTemplate }: IDetailsProps) {
<MDEditor.Markdown source={details} />
</Box>
)}
</Grid>
</Stack>
{/* Table Audits */}
{_createdBy && (
<Grid
container
sx={{
fontSize: theme.typography.body2,
}}
>
<Stack>
<Typography
variant="caption"
color="text.secondary"
@@ -143,36 +122,13 @@ export default function Details({ handleOpenTemplate }: IDetailsProps) {
<Typography variant="caption" color="text.primary">
{_createdBy.displayName}
</Typography>{" "}
at{" "}
on{" "}
<Typography variant="caption" color="text.primary">
{format(_createdBy.timestamp.toDate(), "LLL d, yyyy · p")}
{format(_createdBy.timestamp.toDate(), DATE_TIME_FORMAT)}
</Typography>
</Typography>
</Grid>
</Stack>
)}
{/* Template Settings */}
{/* {handleOpenTemplate && (
<Divider sx={{ my: 1.5 }} />
<Button
sx={{ width: "100%", boxShadow: "none", padding: 0 }}
onClick={handleOpenTemplate}
>
<Stack
direction="row"
justify-content="flex-start"
alignItems="center"
sx={{ width: "100%" }}
>
<ChevronLeft />
<ListItemText
primary="Template - Roadmap"
secondary={<StepsProgress steps={5} value={3} />}
sx={{ maxWidth: "188px" }}
/>
</Stack
</Button>
)} */}
</Grid>
</Stack>
);
}

2
src/components/TableInformationDrawer/SideDrawer.tsx → src/components/TableInformationDrawer/TableInformationDrawer.tsx
View File

@@ -107,7 +107,7 @@ export default function SideDrawer() {
alignItems="center"
py={1}
>
<Typography variant="h5" sx={{ fontWeight: "bold" }}>
<Typography variant="h5" component="h2">
Information
</Typography>
</Stack>

4
src/components/TableInformationDrawer/index.ts
View File

@@ -1,2 +1,2 @@
export * from "../TableToolbar/TableInformation";
export { default } from "../TableToolbar/TableInformation";
export * from "./TableInformationDrawer";
export { default } from "./TableInformationDrawer";

61
src/components/TableInformationDrawer/withTemplate.tsx
View File

@@ -1,61 +0,0 @@
// import {
// projectScope,
// tablesAtom,
// templateSettingsDialogAtom,
// } from "@src/atoms/projectScope";
// import { TemplateSettings } from "@src/components/Tables/Templates";
// import { getTemplateById } from "@src/components/Tables/Templates/utills";
// import { useAtom, useSetAtom } from "jotai";
// import { useEffect, useState } from "react";
import Details from "./Details";
export default function withTemplate(DetailsComponent: typeof Details) {
// const [tables] = useAtom(tablesAtom, projectScope);
// const setTemplateSettingsDialog = useSetAtom(
// templateSettingsDialogAtom,
// projectScope
// );
// const [templateData, setTemplateData] = useState<TemplateSettings | null>(
// null
// );
// const { templateSettings } = tableSettings;
// const { draftId, templateId } = templateSettings || {};
// useEffect(() => {
// if (!templateId) {
// throw Error("Template not found");
// }
// getTemplateById(templateId).then((template) => setTemplateData(template));
// }, [templateId]);
// const dialogStateInitializer = () => {
// const matchingTables =
// tables.filter((table) => table.templateSettings?.draftId === draftId) ||
// [];
// const templateTables = templateData!.tables.map((templateTable) => ({
// ...templateTable,
// ...matchingTables.find(
// (matchingTable) =>
// matchingTable.templateSettings?.tableId === templateTable.id
// ),
// }));
// const steps = templateData?.steps.map((step) =>
// step.type === "create_table" ? { ...step, completed: true } : step
// );
// return {
// ...templateData,
// tables: templateTables,
// steps,
// } as TemplateSettings;
// };
// const handleOpenTemplate = () => {
// setTemplateSettingsDialog({
// type: "set_open",
// data: dialogStateInitializer(),
// });
// };
// if (!templateData) {
// return null;
// }
return <DetailsComponent handleOpenTemplate={() => {}} />;
}
// export const DetailsWithTemplate = withTemplate(Details);

2
src/components/TableSettingsDialog/form.tsx
View File

@@ -255,7 +255,7 @@ export const tableSettings = (
step: "display",
type: "tableThumbnail",
name: "thumbnailFile",
label: "Thumbnail Image (optional)",
label: "Thumbnail image (optional)",
},
{
step: "display",

10
src/components/TableToolbar/TableInformation.tsx
View File

@@ -1,23 +1,23 @@
import { useAtom } from "jotai";
import { RESET } from "jotai/utils";
import TableToolbarButton from "@src/components/TableToolbar/TableToolbarButton";
import InfoIcon from "@mui/icons-material/InfoOutlined";
import {
sideDrawerAtom,
tableScope,
tableSettingsAtom,
} from "@src/atoms/tableScope";
import TableToolbarButton from "@src/components/TableToolbar/TableToolbarButton";
import { TableInformation as TableInformationIcon } from "@src/assets/icons";
export default function TableInformation() {
const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
const [sideDrawer, setSideDrawer] = useAtom(sideDrawerAtom, tableScope);
return (
<TableToolbarButton
title="Table Information"
icon={<TableInformationIcon />}
title="Table information"
icon={<InfoIcon />}
onClick={() => setSideDrawer(sideDrawer ? RESET : "table-information")}
disabled={!setSideDrawer || tableSettings.id.includes("/")}
/>

7
src/components/TableToolbar/TableToolbar.tsx
View File

@@ -16,6 +16,7 @@ import LoadedRowsStatus from "./LoadedRowsStatus";
import TableSettings from "./TableSettings";
import HiddenFields from "./HiddenFields";
import RowHeight from "./RowHeight";
import TableInformation from "./TableInformation";
import {
projectScope,
@@ -36,8 +37,6 @@ import { FieldType } from "@src/constants/fields";
const Filters = lazy(() => import("./Filters" /* webpackChunkName: "Filters" */));
// prettier-ignore
const ImportData = lazy(() => import("./ImportData/ImportData" /* webpackChunkName: "ImportData" */));
// prettier-ignore
const TableInformation = lazy(() => import("./TableInformation" /* webpackChunkName: "TableInformation" */));
// prettier-ignore
const ReExecute = lazy(() => import("./ReExecute" /* webpackChunkName: "ReExecute" */));
@@ -150,9 +149,7 @@ export default function TableToolbar() {
<TableSettings />
</>
)}
<Suspense fallback={<ButtonSkeleton />}>
<TableInformation />
</Suspense>
<TableInformation />
<div className="end-spacer" />
</Stack>
);

14
src/components/Tables/TableGrid/TableCard.tsx
View File

@@ -37,8 +37,8 @@ export default function TableCard({
</Typography>
</CardContent>
</CardActionArea>
{thumbnailURL && (
<CardContent style={{ flexGrow: 1, paddingTop: 0 }}>
<CardContent style={{ flexGrow: 1, paddingTop: 0 }}>
{thumbnailURL && (
<Box
sx={{
paddingBottom: "56.25%",
@@ -60,10 +60,8 @@ export default function TableCard({
}}
/>
</Box>
</CardContent>
)}
{description && (
<CardContent style={{ flexGrow: 1, paddingTop: 0, paddingBottom: 0 }}>
)}
{description && (
<Typography
color="textSecondary"
sx={{
@@ -75,8 +73,8 @@ export default function TableCard({
>
{description}
</Typography>
</CardContent>
)}
)}
</CardContent>
<CardActions>
<Button

2
src/pages/Table/TablePage.tsx
View File

@@ -8,7 +8,7 @@ import { Fade } from "@mui/material";
import ErrorFallback, {
InlineErrorFallback,
} from "@src/components/ErrorFallback";
import TableInformationDrawer from "@src/components/TableInformationDrawer/SideDrawer";
import TableInformationDrawer from "@src/components/TableInformationDrawer/TableInformationDrawer";
import TableToolbarSkeleton from "@src/components/TableToolbar/TableToolbarSkeleton";
import TableSkeleton from "@src/components/Table/TableSkeleton";
import EmptyTable from "@src/components/Table/EmptyTable";

14
src/pages/TablesPage.tsx
View File

@@ -1,6 +1,6 @@
import { useAtom, useSetAtom } from "jotai";
import { find, groupBy, sortBy } from "lodash-es";
import { useNavigate } from "react-router-dom";
import { Link } from "react-router-dom";
import {
Container,
@@ -21,7 +21,7 @@ import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
import FavoriteIcon from "@mui/icons-material/Favorite";
import EditIcon from "@mui/icons-material/EditOutlined";
import AddIcon from "@mui/icons-material/Add";
import { TableInformation as TableInformationIcon } from "@src/assets/icons";
import InfoIcon from "@mui/icons-material/InfoOutlined";
import FloatingSearch from "@src/components/FloatingSearch";
import SlideTransition from "@src/components/Modal/SlideTransition";
@@ -57,7 +57,6 @@ export default function TablesPage() {
tableSettingsDialogAtom,
projectScope
);
const navigate = useNavigate();
useScrollToHash();
const [results, query, handleQuery] = useBasicSearch(
@@ -163,14 +162,13 @@ export default function TablesPage() {
color="secondary"
/>
<IconButton
aria-label="Table Information"
aria-label="Table information"
size={view === "list" ? "large" : undefined}
onClick={() => {
navigate(`${getLink(table)}#sideDrawer="table-information"`);
}}
component={Link}
to={`${getLink(table)}#sideDrawer="table-information"`}
style={{ marginLeft: 0 }}
>
<TableInformationIcon />
<InfoIcon />
</IconButton>
</>
);