From 12678957985759a8b048a832ce89da5e6b778716 Mon Sep 17 00:00:00 2001 From: Kartik Gupta Date: Tue, 25 Jul 2023 14:28:04 +0530 Subject: [PATCH] sort UI fixed and build working --- src/components/ErrorBoundary/index.tsx | 1 + src/components/Navbar/index.tsx | 2 - src/pages/Logs/Column.tsx | 76 ++++++++++++++------------ src/pages/Logs/styles.tsx | 45 +++++++++++++-- src/pages/Stats/styles.tsx | 23 +++----- 5 files changed, 91 insertions(+), 56 deletions(-) diff --git a/src/components/ErrorBoundary/index.tsx b/src/components/ErrorBoundary/index.tsx index bf591e13..beee0a7e 100644 --- a/src/components/ErrorBoundary/index.tsx +++ b/src/components/ErrorBoundary/index.tsx @@ -15,6 +15,7 @@ type ErrorHandlerFn = (error: Error, info: { componentStack: string }) => void; const ErrorBoundary: FC = ({ children }) => { const errorHandler: ErrorHandlerFn = (error, info) => { // TODO: Send Errors to parseable maybe ? + console.error(error, info); }; return ( diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 158eb8e2..b0b192ee 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -1,7 +1,6 @@ import type { NavbarProps as MantineNavbarProps } from '@mantine/core'; import { Navbar as MantineNavbar, NavLink, Select, Anchor, Card, Box, Modal, Text, Image } from '@mantine/core'; import { - IconColumns, IconZoomCode, IconReportAnalytics, IconCheck, @@ -10,7 +9,6 @@ import { IconHelpCircle, IconLogout, IconUser, - IconTransferIn, IconBinaryTree2, IconTableShortcut, IconSettings, diff --git a/src/pages/Logs/Column.tsx b/src/pages/Logs/Column.tsx index 6f4bc033..e440abbb 100644 --- a/src/pages/Logs/Column.tsx +++ b/src/pages/Logs/Column.tsx @@ -1,7 +1,7 @@ import { Log, SortOrder } from '@/@types/parseable/api/query'; -import { Box, Checkbox, Popover, Text, TextInput, Tooltip, UnstyledButton, px } from '@mantine/core'; +import { Box, Checkbox, Popover, TextInput, Tooltip, UnstyledButton, px } from '@mantine/core'; import { type ChangeEvent, type FC, Fragment, useTransition, useRef, useCallback, useMemo } from 'react'; -import { IconFilter, IconSearch, IconSortAscending, IconSortDescending } from '@tabler/icons-react'; +import { IconDotsVertical, IconFilter, IconSearch, IconSortAscending, IconSortDescending } from '@tabler/icons-react'; import useMountedState from '@/hooks/useMountedState'; import { useTableColumnStyle } from './styles'; import EmptyBox from '@/components/Empty'; @@ -15,7 +15,7 @@ import { useDisclosure } from '@mantine/hooks'; type SortWidgetProps = { setSortOrder: (order: SortOrder | null) => void; fieldSortOrder: SortOrder | null; -} +}; /** * Component that allows selecting sorting by a given field @@ -23,35 +23,40 @@ type SortWidgetProps = { const SortWidget: FC = (props) => { const { setSortOrder, fieldSortOrder } = props; const toggleAscending = () => { - setSortOrder( - fieldSortOrder === SortOrder.ASCENDING ? - null - : - SortOrder.ASCENDING - ) - } + setSortOrder(fieldSortOrder === SortOrder.ASCENDING ? null : SortOrder.ASCENDING); + }; const toggleDescending = () => { - setSortOrder( - fieldSortOrder === SortOrder.DESCENDING ? - null - : - SortOrder.DESCENDING - ) - } + setSortOrder(fieldSortOrder === SortOrder.DESCENDING ? null : SortOrder.DESCENDING); + }; + const { classes } = useTableColumnStyle(); + const { sortBtn ,sortBtnActive} = classes; - return <> - - - -} + return ( + + + + + ); +}; type Column = { columnName: string; @@ -59,7 +64,7 @@ type Column = { appliedFilter: (columnName: string) => string[]; applyFilter: (columnName: string, value: string[]) => void; setSorting: (order: SortOrder | null) => void; - fieldSortOrder: SortOrder | null + fieldSortOrder: SortOrder | null; }; const Column: FC = (props) => { @@ -111,7 +116,7 @@ const Column: FC = (props) => { return word.charAt(0).toUpperCase() + word.slice(1); } const { classes, cx } = useTableColumnStyle(); - const { labelBtn, applyBtn, labelIcon, labelIconActive, searchInputStyle } = classes; + const { labelBtn, applyBtn, labelIcon, labelIconActive, searchInputStyle,filterText } = classes; return ( @@ -119,7 +124,7 @@ const Column: FC = (props) => { {capitalizeFirstLetter(columnName)} - = (props) => { - - Filter by values: + + + { }); export const useTableColumnStyle = createStyles((theme) => { - const { spacing, colors, fontSizes, other, primaryColor } = theme; + const { spacing, colors, fontSizes, other } = theme; const { fontWeights, widths } = other; - const pColor = colors[primaryColor]; + const pColor = colors.brandPrimary[0]; + const sColor = colors.brandSecondary[0]; return { labelBtn: { @@ -263,12 +264,21 @@ export const useTableColumnStyle = createStyles((theme) => { searchInputStyle: { marginBottom: spacing.xs, }, + filterText:{ + display: 'flex', + alignItems: 'center', + color: colors.gray[6], + padding: 0, + fontSize: fontSizes.sm, + fontWeight: fontWeights.normal, + cursor: 'default', + }, checkBoxStyle: { height: 35, paddingTop: spacing.xs, paddingBottom: spacing.xxs, - fontWeight: fontWeights.medium, + fontWeight: fontWeights.normal, overflow: 'hidden', whiteSpace: 'nowrap', @@ -277,18 +287,43 @@ export const useTableColumnStyle = createStyles((theme) => { }, '&:hover': { - background: colors.gray[1], + background: colors.gray[0], + color: sColor, }, }, applyBtn: { marginTop: spacing.xs, width: widths.full, - background: pColor[0], + background: pColor, '&:hover': { background: pColor[1], }, }, + sortBtn: { + display: 'flex', + alignItems: 'center', + color: colors.gray[6], + padding: 0, + fontSize: fontSizes.sm, + fontWeight: fontWeights.normal, + '&:hover': { + color: sColor, + }, + + }, + sortBtnActive: { + display: 'flex', + alignItems: 'center', + color: pColor, + padding: 0, + fontSize: fontSizes.sm, + fontWeight: fontWeights.semibold, + '&:hover': { + color: sColor, + }, + + } }; }); diff --git a/src/pages/Stats/styles.tsx b/src/pages/Stats/styles.tsx index 64c3d222..d5015f33 100644 --- a/src/pages/Stats/styles.tsx +++ b/src/pages/Stats/styles.tsx @@ -1,23 +1,22 @@ -import { HEADER_HEIGHT, NAVBAR_WIDTH } from '@/constants/theme'; +import { NAVBAR_WIDTH } from '@/constants/theme'; import { createStyles } from '@mantine/core'; export const useStatsStyles = createStyles((theme) => { - const { widths ,heights} = theme.other; + const { widths } = theme.other; return { container: { + flex: 1, width: `calc(${widths.full} - ${NAVBAR_WIDTH}px)`, + // display: 'flex', + position: 'relative', }, }; }); export const useStatusStyles = createStyles((theme) => { - const { colors, other, spacing, radius, shadows, primaryColor, fontSizes } = theme; + const { colors, other, spacing,fontSizes } = theme; const { fontWeights, widths } = other; - const pColor = colors[primaryColor][2]; - - const defaultRadius = radius[theme.defaultRadius as string]; - return { container: { }, @@ -61,7 +60,7 @@ export const useStatusStyles = createStyles((theme) => { }; }); export const useStatCardStyles = createStyles((theme) => { - const { colors, other, spacing, radius, shadows, primaryColor, fontSizes } = theme; + const { colors, other, spacing, radius, primaryColor, fontSizes } = theme; const { fontWeights, widths } = other; @@ -107,13 +106,9 @@ export const useStatCardStyles = createStyles((theme) => { }); export const useAlertsStyles = createStyles((theme) => { - const { colors, other, spacing, radius, shadows, primaryColor, fontSizes } = theme; + const { colors, other, spacing, fontSizes } = theme; - const { fontWeights, widths, heights ,sizing} = other; - - const pColor = colors[primaryColor][2]; - - const defaultRadius = radius[theme.defaultRadius as string]; + const { fontWeights, widths ,sizing} = other; return { container: {