Commit 13354bad authored by Carina Antunes's avatar Carina Antunes
Browse files

[64] Limit column size

parent 4c619af3
Pipeline #2320055 passed with stages
in 5 minutes and 36 seconds
......@@ -17,7 +17,7 @@ const ChannelsFilterMenu = ({
manageFilter,
}) => {
return (
<Menu vertical color="blue">
<Menu vertical color="blue" size="small">
<Menu.Item
as={Link}
name={ALL_CHANNELS}
......
......@@ -12,14 +12,24 @@ import * as getPublicChannelsActionCreators from '../../actions/GetPublicChannel
import './ChannelsList.scss';
const columns = [
{id: 'name', label: 'Name'},
{id: 'name', label: 'Name', width: 4, public: true},
{
id: 'description',
label: 'Description',
width: 7,
public: true,
},
{
id: 'visibility',
label: 'Visibility',
width: 3,
public: true,
},
{
id: 'options',
label: 'Options',
width: 2,
public: false,
},
];
......@@ -89,6 +99,57 @@ const ChannelsList = ({
);
}
if (column.id === 'options' && isAuthenticated) {
return (
<>
{!channel.subscribed && (
<Popup
trigger={
<Button
disabled={channel.id === subscribeId && loadingSubscribe}
loading={channel.id === subscribeId && loadingSubscribe}
icon="bell slash"
size="mini"
onClick={() => handleSubscribe(channel)}
/>
}
position="top center"
content="Subscribe"
/>
)}
{channel.subscribed && (
<Popup
trigger={
<Button
disabled={channel.id === unsubscribeId && loadingUnsubscribe}
loading={channel.id === unsubscribeId && loadingUnsubscribe}
primary
icon="bell"
size="mini"
onClick={() => handleUnsubscribe(channel)}
/>
}
content="Unsubscribe"
/>
)}
{channel.manage && (
<Popup
trigger={
<Button
size="mini"
icon="settings"
onClick={() => {
history.push(`/main/channels/${channel.id}`);
}}
/>
}
content="Manage"
/>
)}
</>
);
}
if (channel[column.id]) return channel[column.id].toString();
return '';
......@@ -96,69 +157,28 @@ const ChannelsList = ({
return (
<Segment className="channel-list" basic loading={loading}>
<Table striped>
<Table striped fixed>
<Table.Header>
<Table.Row>
{columns.map(column => (
<Table.HeaderCell key={column.id}>{column.label}</Table.HeaderCell>
))}
{isAuthenticated && <Table.HeaderCell>Options</Table.HeaderCell>}
{columns.map(
column =>
(isAuthenticated || column.public) && (
<Table.HeaderCell width={column.width} key={column.id}>
{column.label}
</Table.HeaderCell>
)
)}
</Table.Row>
</Table.Header>
<Table.Body>
{channels.map(channel => {
return (
<Table.Row key={channel.id}>
{columns.map(column => (
<Table.Cell key={column.id}>{renderCellValue(channel, column)}</Table.Cell>
))}
{isAuthenticated && (
<Table.Cell singleLine>
{!channel.subscribed && (
<Popup
trigger={
<Button
disabled={channel.id === subscribeId && loadingSubscribe}
loading={channel.id === subscribeId && loadingSubscribe}
icon="bell slash"
size="mini"
onClick={() => handleSubscribe(channel)}
/>
}
position="top center"
content="Subscribe"
/>
)}
{channel.subscribed && (
<Popup
trigger={
<Button
disabled={channel.id === unsubscribeId && loadingUnsubscribe}
loading={channel.id === unsubscribeId && loadingUnsubscribe}
primary
icon="bell"
size="mini"
onClick={() => handleUnsubscribe(channel)}
/>
}
content="Unsubscribe"
/>
)}
{channel.manage && (
<Popup
trigger={
<Button
size="mini"
icon="settings"
onClick={() => {
history.push(`/main/channels/${channel.id}`);
}}
/>
}
content="Manage"
/>
)}
</Table.Cell>
{columns.map(
column =>
(isAuthenticated || column.public) && (
<Table.Cell key={column.id}>{renderCellValue(channel, column)}</Table.Cell>
)
)}
</Table.Row>
);
......@@ -166,7 +186,7 @@ const ChannelsList = ({
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.HeaderCell colSpan="5">
<Table.HeaderCell colSpan={isAuthenticated ? 4 : 3}>
<Dropdown
fluid
value={getChannelsQuery.take}
......
import React from 'react';
import ChannelsList from 'channels/components/ChannelsList/ChannelsList';
import {connect} from 'react-redux';
import {Container, Grid, Segment} from 'semantic-ui-react';
import ChannelsFilterMenu from '../../components/ChannelsFilterMenu/ChannelsFilterMenu';
import SearchChannelComponent from '../../components/SearchChannelComponent/SearchChannelComponent';
import AddChannel from '../../../components/channels/AddChannel';
const AllChannelsPage = props => {
const {isAuthenticated, history} = props;
const {history} = props;
return (
<div style={{margin: '100px', marginTop: '50px'}}>
<h2>CERN Notifications Service</h2>
<SearchChannelComponent />
<div style={{display: 'flex', flexDirection: 'row', marginTop: 25}}>
{isAuthenticated && (
<div style={{marginRight: 25}}>
<ChannelsFilterMenu />
<AddChannel />
</div>
)}
<div style={{width: '100%'}}>
<ChannelsList history={history} />
</div>
</div>
</div>
<Container>
<Segment basic>
<Grid>
<Grid.Row>
<Grid.Column>
<h2>CERN Notifications Service</h2>
<SearchChannelComponent />
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column width={3}>
<ChannelsFilterMenu />
<AddChannel />
</Grid.Column>
<Grid.Column width={13}>
<ChannelsList history={history} />
</Grid.Column>
</Grid.Row>
</Grid>
</Segment>
</Container>
);
};
const mapStateToProps = state => {
return {
isAuthenticated: state.auth.loggedIn,
};
};
const mapDispatchToProps = () => {
return {};
};
export default connect(mapStateToProps, mapDispatchToProps)(AllChannelsPage);
export default connect(null, mapDispatchToProps)(AllChannelsPage);
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment