Skip to content

Commit 065250a

Browse files
amitamrutiyaamitamrutiya
committed
fix: some catalog bugs
Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
1 parent dd6270e commit 065250a

5 files changed

Lines changed: 61 additions & 57 deletions

File tree

‎src/custom/CatalogDesignTable/CatalogDesignTable.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -144,10 +144,9 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
144144
page,
145145
elevation: 0,
146146
sortOrder: {
147-
name: 'updated_at',
148-
direction: 'desc'
147+
name: sortOrder.split(' ')[0],
148+
direction: sortOrder.split(' ')[1]
149149
},
150-
151150
onTableChange: handleTableChange,
152151
customToolbarSelect: _.isNil(filter)
153152
? (selected: any) => (
@@ -175,6 +174,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
175174
filter,
176175
totalCount,
177176
pageSize,
177+
sortOrder,
178178
page,
179179
handleTableChange,
180180
patterns,
@@ -194,6 +194,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
194194
columns={processedColumns}
195195
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
196196
//@ts-ignore
197+
rowsPerPageOptions={[15, 30, 45, 60, 75]}
197198
data={patterns || []}
198199
options={options}
199200
colViews={colViews}

‎src/custom/CatalogDetail/RelatedDesigns.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,13 @@ const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
3636
);
3737

3838
if (!filteredPatternsPerUser?.length) return null;
39-
39+
const organizationName = fetchingOrgError || !orgName ? 'Unknown Organization' : orgName;
4040
return (
4141
<AdditionalContainer>
4242
<ContentHeading>
4343
<h2 style={{ margin: '0', textTransform: 'uppercase' }}>
4444
Other published design by {formatToTitleCase(userProfile?.first_name ?? '')}{' '}
45-
{fetchingOrgError ? '' : `under ${orgName}`}
45+
{fetchingOrgError ? '' : `under ${organizationName}`}
4646
</h2>
4747
</ContentHeading>
4848
<DesignCardContainer>

‎src/custom/CatalogDetail/SocialSharePopper.tsx‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Lock, Public } from '@mui/icons-material';
12
import { Box, IconButton, Menu, MenuItem } from '@mui/material';
23
import React, { useState } from 'react';
34
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
@@ -7,13 +8,9 @@ import { useTheme } from '../../theme';
78
import { Pattern } from '../CustomCatalog/CustomCard';
89
import { CustomTooltip } from '../CustomTooltip';
910
import { ErrorBoundary } from '../ErrorBoundary';
10-
import {
11-
CopyShareIconWrapper,
12-
ShareButton,
13-
ShareButtonGroup,
14-
ShareSideButton,
15-
VisibilityChip
16-
} from './style';
11+
import { VisibilityChipMenu } from '../VisibilityChipMenu';
12+
import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
13+
import { CopyShareIconWrapper, ShareButton, ShareButtonGroup, ShareSideButton } from './style';
1714

1815
interface SocialSharePopperProps {
1916
details: Pattern;
@@ -53,14 +50,15 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
5350
return (
5451
<ErrorBoundary>
5552
<CopyShareIconWrapper style={{ marginBottom: '2rem' }}>
56-
<VisibilityChip
57-
style={{
58-
color: theme.palette.text.default
59-
}}
60-
>
61-
{details?.visibility}
62-
</VisibilityChip>
63-
53+
<VisibilityChipMenu
54+
value={details?.visibility as VIEW_VISIBILITY}
55+
onChange={() => {}}
56+
enabled={false}
57+
options={[
58+
[VIEW_VISIBILITY.PUBLIC, Public],
59+
[VIEW_VISIBILITY.PRIVATE, Lock]
60+
]}
61+
/>
6462
{showShareAction ? (
6563
<ShareButtonGroup variant="contained">
6664
<CustomTooltip title="Change access and visibility">

‎src/custom/CatalogDetail/style.tsx‎

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { Button, ButtonGroup, Link, ListItemButton, Paper, Typography } from '../../base';
1+
import { Button, ButtonGroup, Link, ListItemButton, Typography } from '../../base';
22
import { styled } from '../../theme';
33
import { Theme } from './types';
44

5-
export const StyledActionWrapper = styled(Paper)(() => ({
5+
export const StyledActionWrapper = styled('div')(({ theme }) => ({
66
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.2)',
77
justifyContent: 'center',
88
width: '100%',
@@ -12,7 +12,8 @@ export const StyledActionWrapper = styled(Paper)(() => ({
1212
flexDirection: 'column',
1313
gap: '1rem',
1414
padding: '0.6rem',
15-
alignItems: 'center'
15+
alignItems: 'center',
16+
backgroundColor: theme.palette.background.default
1617
}));
1718

1819
interface ActionButtonProps {
@@ -139,7 +140,8 @@ export const ContentDetailsPoints = styled(Typography)(() => ({
139140
fontFamily: 'inherit'
140141
}));
141142

142-
export const MetricsSection = styled('div')(() => ({
143+
export const MetricsSection = styled('div')(({ theme }) => ({
144+
backgroundColor: theme.palette.background.default,
143145
padding: '1.1rem',
144146
marginTop: '0.5rem',
145147
display: 'flex',
@@ -152,7 +154,8 @@ export const MetricsSection = styled('div')(() => ({
152154
}
153155
}));
154156

155-
export const MetricsContainer = styled('div')(() => ({
157+
export const MetricsContainer = styled('div')(({ theme }) => ({
158+
backgroundColor: theme.palette.background.default,
156159
display: 'flex',
157160
flexDirection: 'column',
158161
justifyContent: 'center',
@@ -236,13 +239,14 @@ export const AdditionalContainer = styled('div')(({ theme }) => ({
236239
borderRadius: '0.4rem'
237240
}));
238241

239-
export const DesignCardContainer = styled('div')(() => ({
242+
export const DesignCardContainer = styled('div')(({ theme }) => ({
240243
display: 'flex',
241244
flexWrap: 'wrap',
242245
flex: '0 0 75%',
243246
gap: '2rem',
244247
justifyContent: 'space-around',
245-
height: 'fit-content'
248+
height: 'fit-content',
249+
backgroundColor: theme.palette.background.default
246250
}));
247251

248252
export const CopyShareIconWrapper = styled(ContentHeading)(() => ({
@@ -251,15 +255,6 @@ export const CopyShareIconWrapper = styled(ContentHeading)(() => ({
251255
width: 'fit-content'
252256
}));
253257

254-
export const VisibilityChip = styled('div')(() => ({
255-
borderRadius: '0.5rem',
256-
border: '1px solid gray',
257-
padding: '0.2rem 0.5rem',
258-
textTransform: 'capitalize',
259-
color: '#1a1a1acc',
260-
width: 'fit-content'
261-
}));
262-
263258
export const RedirectLink = styled(Link)(({ theme }) => ({
264259
color: theme.palette.background.brand?.default,
265260
textDecoration: 'none',

‎src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx‎

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
2-
import { Theme } from '@mui/material';
2+
import { Theme, useTheme } from '@mui/material';
33
import { MouseEvent, useState } from 'react';
44
import { Button, Menu, MenuItem } from '../../base';
55
import { iconXSmall } from '../../constants/iconsSizes';
66
import { ALICE_BLUE, CHINESE_SILVER, NOT_FOUND, styled } from '../../theme';
77

8+
export const VIEW_VISIBILITY = {
9+
PUBLIC: 'public',
10+
PRIVATE: 'private',
11+
PUBLISHED: 'published'
12+
} as const;
13+
14+
export type VIEW_VISIBILITY = (typeof VIEW_VISIBILITY)[keyof typeof VIEW_VISIBILITY];
15+
816
interface VisibilityChipMenuProps {
9-
value: string;
17+
value: VIEW_VISIBILITY;
1018
onChange: (value: string) => void;
1119
options: [string, React.ElementType][];
1220
enabled: boolean;
@@ -42,24 +50,25 @@ const StyledButton = styled(Button)(() => ({
4250
width: '100%'
4351
}));
4452

45-
const StyledDiv = styled('div')(({ theme, enabled }: { theme?: Theme; enabled: boolean }) => ({
46-
paddingLeft: '0.3rem',
47-
height: '1.5rem',
48-
paddingRight: enabled ? '0' : '0.3rem',
49-
borderRadius: '0.25rem',
50-
border: `1px solid ${NOT_FOUND}`,
51-
background:
52-
theme?.palette.mode === 'light' ? ALICE_BLUE : theme?.palette.background.constant?.table,
53-
54-
textTransform: 'uppercase',
55-
color: theme?.palette.text.default,
56-
display: 'flex',
57-
justifyContent: 'center',
58-
alignItems: 'center',
59-
width: '3.8rem',
60-
fontSize: '0.75rem',
61-
fontFamily: theme?.typography.fontFamily
62-
}));
53+
const StyledDiv = styled('div')(
54+
({ theme, enabled, type }: { theme: Theme; enabled: boolean; type: VIEW_VISIBILITY }) => ({
55+
paddingLeft: '0.3rem',
56+
height: '1.5rem',
57+
paddingRight: enabled ? '0' : '0.3rem',
58+
borderRadius: '0.25rem',
59+
border: `1px solid ${NOT_FOUND}`,
60+
background:
61+
theme?.palette.mode === 'light' ? ALICE_BLUE : theme?.palette.background.constant?.table,
62+
textTransform: 'uppercase',
63+
color: theme?.palette.text.default,
64+
display: 'flex',
65+
justifyContent: 'center',
66+
alignItems: 'center',
67+
width: type !== 'published' ? '3.8rem' : 'auto',
68+
fontSize: '0.75rem',
69+
fontFamily: theme?.typography.fontFamily
70+
})
71+
);
6372

6473
const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
6574
textTransform: 'capitalize',
@@ -92,14 +101,15 @@ const VisibilityChipMenu: React.FC<VisibilityChipMenuProps> = ({
92101
onChange(value);
93102
close(e);
94103
};
104+
const theme = useTheme();
95105
return (
96106
<>
97107
<StyledButton
98108
disabled={!enabled}
99109
onClick={handleOpen}
100110
data-testid={`design-visibility-${value.toLowerCase()}`}
101111
>
102-
<StyledDiv enabled={enabled}>
112+
<StyledDiv theme={theme} enabled={enabled} type={value}>
103113
<span style={{ fontSize: '0.7rem' }}>{value}</span>
104114
{enabled && <ArrowDropDownIcon style={{ ...iconXSmall }} />}
105115
</StyledDiv>

0 commit comments

Comments
 (0)