Skip to content

Commit

Permalink
Merge pull request #2326 from MahtabBukhari/source_table_header_shoul…
Browse files Browse the repository at this point in the history 
…d_be_persist

Source table header should be persist
  • Loading branch information
@Rassl
Rassl authored Oct 27, 2024
2 parents 2d7e176 + 16e0160 commit d32d4d3
Show file tree
Hide file tree
Showing 3 changed files with 159 additions and 151 deletions.
274 changes: 143 additions & 131 deletions src/components/SourcesTableModal/SourcesView/Topics/Table/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,14 @@ interface CheckboxIconProps {
export const Table: React.FC<TopicTableProps> = ({
setShowMuteUnmute,
showMuted,
loading,
onTopicEdit,
onChangeFilter,
checkedStates,
setCheckedStates,
}) => {
const { close } = useModal('sourcesTable')
const [loading, setLoading] = useState(false)
const [muteLoading, setMuteLoading] = useState(false)
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
const [selectedRefId, setSelectedRefId] = React.useState<string>('')

Expand Down Expand Up @@ -74,7 +75,7 @@ export const Table: React.FC<TopicTableProps> = ({
const id = open ? 'simple-popover' : undefined

const handleSelectedMuteUnmute = async () => {
setLoading(true)
setMuteLoading(true)

try {
const promises = Object.keys(checkedStates).map(async (checkedId) => {
Expand Down Expand Up @@ -105,153 +106,153 @@ export const Table: React.FC<TopicTableProps> = ({

setCheckedStates({})

setLoading(false)
setMuteLoading(false)
} catch (error) {
console.error('Error:', error)
setLoading(false)
setMuteLoading(false)
}
}

return !data ? (
return !loading && !data ? (
<Flex>
<Text>There is not any results for selected filters</Text>
<FilterOffIcon />
</Flex>
) : (
<>
{!Object.keys(data).length ? (
{data && !Object.keys(data).length ? (
<Flex>
<Text>There is not any results for selected filters</Text>
<FilterOffIcon />
</Flex>
) : (
<TableInnerWrapper align="center" justify={loading ? 'center' : 'flex-start'}>
{loading ? (
<ClipLoader color={colors.white} />
) : (
<>
<MaterialTable component="table">
{checkedCount > 0 ? (
<ActionStyledTableHead>
<TableRow component="tr">
<StyledTableCell>
<IconButton onClick={() => setCheckedStates({})}>
<ClearIcon />
</IconButton>
</StyledTableCell>
<StyledTableCell colSpan={12}>
<StatusBarSection>
<CheckCountBoxSection>
<CheckedCount>{checkedCount}</CheckedCount>
selected
</CheckCountBoxSection>
<StyledTableCell className="empty" />

<MuteStatusSection onClick={handleSelectedMuteUnmute} role="button">
{showMuted ? (
<>
<VisibilityOn /> Unmute ALL
</>
) : (
<>
<VisibilityOff /> Mute ALL
</>
)}
</MuteStatusSection>
<StyledTableCell className="empty" />
<MuteStatusSection onClick={() => handlePopoverAction('mergeTopic')}>
<MergeIcon /> Merge
</MuteStatusSection>
</StatusBarSection>
</StyledTableCell>
<TableInnerWrapper align="center" justify={muteLoading ? 'center' : 'flex-start'}>
<MaterialTable component="table">
{checkedCount > 0 ? (
<ActionStyledTableHead>
<TableRow component="tr">
<StyledTableCell>
<IconButton onClick={() => setCheckedStates({})}>
<ClearIcon />
</IconButton>
</StyledTableCell>
<StyledTableCell colSpan={12}>
<StatusBarSection>
<CheckCountBoxSection>
<CheckedCount>{checkedCount}</CheckedCount>
selected
</CheckCountBoxSection>
<StyledTableCell className="empty" />
</TableRow>
</ActionStyledTableHead>
) : (
<StyledTableHead>
<TableRow component="tr">

<MuteStatusSection onClick={handleSelectedMuteUnmute} role="button">
{showMuted ? (
<>
<VisibilityOn /> Unmute ALL
</>
) : (
<>
<VisibilityOff /> Mute ALL
</>
)}
</MuteStatusSection>
<StyledTableCell className="empty" />
<StyledTableCell>
<SortedIcon onClick={() => handleChange(ALPHABETICALLY)}>
Name <SortFilterIcon />
</SortedIcon>
</StyledTableCell>
<StyledTableCell>Type</StyledTableCell>
<StyledTableCell>
<SortedIcon onClick={() => handleChange(EDGE_COUNT)}>
Count <SortFilterIcon />
</SortedIcon>
</StyledTableCell>
<StyledTableCell>Edge list</StyledTableCell>
<StyledTableCell>
<SortedIcon onClick={() => handleChange(DATE)}>
Date <SortFilterIcon />
</SortedIcon>
</StyledTableCell>
<StyledTableCell>
<Flex px={8}>
<CheckboxSection onClick={setShowMuteUnmute}>
<CheckboxIcon checked={showMuted}>
<Checkmark>{showMuted && <CheckIcon />}</Checkmark>
</CheckboxIcon>
Muted
</CheckboxSection>
</Flex>
</StyledTableCell>
</TableRow>
</StyledTableHead>
)}

{data && (
<tbody>
{ids?.map((i: string) => (
<TopicRow
key={i}
checkedStates={checkedStates}
isMuteDisabled={Object.values(checkedStates).filter((isChecked) => isChecked).length > 1}
onClick={handleClick}
onSearch={handleSearch}
setCheckedStates={setCheckedStates}
topic={data[i]}
/>
))}
</tbody>
)}
</MaterialTable>
{selectedRefId ? (
<PopoverWrapper
anchorEl={anchorEl}
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
id={id}
onClose={handleClose}
open={open}
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
>
{showMuted ? (
<PopoverOption data-testid="unmute" onClick={() => handlePopoverAction('unMute')}>
{' '}
<VisibilityOn data-testid="" /> Unmute
</PopoverOption>
) : (
<PopoverOption data-testid="mute" onClick={() => handlePopoverAction('mute')}>
{' '}
<VisibilityOff data-testid="VisibilityOff" /> Mute
</PopoverOption>
)}
<PopoverOption data-testid="rename" onClick={() => handlePopoverAction('editTopic')}>
<EditTopicIcon data-testid="EditTopicIcon" /> Rename
</PopoverOption>

<PopoverOption data-testid="merge" onClick={() => handlePopoverAction('mergeTopic')}>
<MergeIcon data-testid="MergeIcon" /> Merge
</PopoverOption>
<PopoverOption data-testid="add_edge" onClick={() => handlePopoverAction('addEdge')}>
<AddCircleIcon data-testid="AddCircleIcon" /> Add edge
</PopoverOption>
</PopoverWrapper>
) : null}
</>
)}
<MuteStatusSection onClick={() => handlePopoverAction('mergeTopic')}>
<MergeIcon /> Merge
</MuteStatusSection>
</StatusBarSection>
</StyledTableCell>
<StyledTableCell className="empty" />
</TableRow>
</ActionStyledTableHead>
) : (
<StyledTableHead>
<TableRow component="tr">
<StyledTableCell className="empty" />
<StyledTableCell>
<SortedIcon onClick={() => handleChange(ALPHABETICALLY)}>
Name <SortFilterIcon />
</SortedIcon>
</StyledTableCell>
<StyledTableCell>Type</StyledTableCell>
<StyledTableCell>
<SortedIcon onClick={() => handleChange(EDGE_COUNT)}>
Count <SortFilterIcon />
</SortedIcon>
</StyledTableCell>
<StyledTableCell>Edge list</StyledTableCell>
<StyledTableCell>
<SortedIcon onClick={() => handleChange(DATE)}>
Date <SortFilterIcon />
</SortedIcon>
</StyledTableCell>
<StyledTableCell>
<Flex px={8}>
<CheckboxSection onClick={setShowMuteUnmute}>
<CheckboxIcon checked={showMuted}>
<Checkmark>{showMuted && <CheckIcon />}</Checkmark>
</CheckboxIcon>
Muted
</CheckboxSection>
</Flex>
</StyledTableCell>
</TableRow>
</StyledTableHead>
)}

{(loading || muteLoading) && !data && (
<ClipLoaderWrapper>
<ClipLoader color={colors.white} />
</ClipLoaderWrapper>
)}

{data && (
<tbody>
{ids?.map((i: string) => (
<TopicRow
key={i}
checkedStates={checkedStates}
isMuteDisabled={Object.values(checkedStates).filter((isChecked) => isChecked).length > 1}
onClick={handleClick}
onSearch={handleSearch}
setCheckedStates={setCheckedStates}
topic={data[i]}
/>
))}
</tbody>
)}
</MaterialTable>
{selectedRefId ? (
<PopoverWrapper
anchorEl={anchorEl}
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
id={id}
onClose={handleClose}
open={open}
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
>
{showMuted ? (
<PopoverOption data-testid="unmute" onClick={() => handlePopoverAction('unMute')}>
{' '}
<VisibilityOn data-testid="" /> Unmute
</PopoverOption>
) : (
<PopoverOption data-testid="mute" onClick={() => handlePopoverAction('mute')}>
{' '}
<VisibilityOff data-testid="VisibilityOff" /> Mute
</PopoverOption>
)}
<PopoverOption data-testid="rename" onClick={() => handlePopoverAction('editTopic')}>
<EditTopicIcon data-testid="EditTopicIcon" /> Rename
</PopoverOption>

<PopoverOption data-testid="merge" onClick={() => handlePopoverAction('mergeTopic')}>
<MergeIcon data-testid="MergeIcon" /> Merge
</PopoverOption>
<PopoverOption data-testid="add_edge" onClick={() => handlePopoverAction('addEdge')}>
<AddCircleIcon data-testid="AddCircleIcon" /> Add edge
</PopoverOption>
</PopoverWrapper>
) : null}
</TableInnerWrapper>
)}
</>
Expand Down Expand Up @@ -368,3 +369,14 @@ const TableInnerWrapper = styled(Flex)`
width: 100%;
position: relative;
`

const ClipLoaderWrapper = styled.div`
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
`
35 changes: 15 additions & 20 deletions src/components/SourcesTableModal/SourcesView/Topics/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,26 +146,21 @@ export const TopicSources = () => {
</InputWrapper>

<TableWrapper align="center" justify={loading && !data ? 'center' : 'flex-start'}>
{loading && !data ? (
<ClipLoader color={colors.white} />
) : (
<>
<Table
checkedStates={checkedStates}
onChangeFilter={handleFilterChange}
onTopicEdit={onTopicEdit}
setCheckedStates={setCheckedStates}
setShowMuteUnmute={() => setFilters({ is_muted: !filters.is_muted })}
showMuted={filters.is_muted}
/>
{total > ids.length ? (
<Button className="load-more" disabled={loading} onClick={handleLoadMore}>
Load more
{loading && <ClipLoader color={colors.lightGray} size={10} />}
</Button>
) : null}
</>
)}
<Table
checkedStates={checkedStates}
loading={loading}
onChangeFilter={handleFilterChange}
onTopicEdit={onTopicEdit}
setCheckedStates={setCheckedStates}
setShowMuteUnmute={() => setFilters({ is_muted: !filters.is_muted })}
showMuted={filters.is_muted}
/>
{total > ids.length ? (
<Button className="load-more" disabled={loading} onClick={handleLoadMore}>
Load more
{loading && <ClipLoader color={colors.lightGray} size={10} />}
</Button>
) : null}
</TableWrapper>
</Wrapper>

Expand Down
1 change: 1 addition & 0 deletions src/components/SourcesTableModal/SourcesView/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export type Props = {

export type TopicTableProps = {
showMuted?: boolean
loading: boolean
onTopicEdit: (id: string, action: string) => void
onChangeFilter: (val: string) => void
setShowMuteUnmute: () => void
Expand Down

0 comments on commit d32d4d3

Please sign in to comment.