Skip to content
Snippets Groups Projects
Commit 2609236d authored by Rafael László's avatar Rafael László :speech_balloon:
Browse files

migrated news page from master

parent eb52cc0d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/forms/EditNewsForm.js
+ 6
− 1
View file @ 2609236d
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Modal, Button, Form, Input, TextArea, Icon } from 'semantic-ui-react'; import { Modal, Button, Form, Input, TextArea, Icon } from 'semantic-ui-react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import moment from 'moment';
import { writeNews, editNews, clearWrite } from '../../actions/news'; import { writeNews, editNews, clearWrite } from '../../actions/news';
...@@ -13,7 +14,7 @@ class EditNewsForm extends Component { ...@@ -13,7 +14,7 @@ class EditNewsForm extends Component {
} }
render() { render() {
const { id, title, text } = this.props.selectedNews; const { id, title, text, author, last_update_by, created_at, updated_at } = this.props.selectedNews;
const updated_by = this.props.user.id; const updated_by = this.props.user.id;
return ( return (
<Modal <Modal
...@@ -31,6 +32,10 @@ class EditNewsForm extends Component { ...@@ -31,6 +32,10 @@ class EditNewsForm extends Component {
> >
<Modal.Header>Szerkesztés:</Modal.Header> <Modal.Header>Szerkesztés:</Modal.Header>
<Modal.Content> <Modal.Content>
<p style={{fontStyle: 'italic' }}><b>Közzétéve:</b> {moment(created_at).format('LLLL')} <br />
<b>Írta:</b> {author} <br />
<b>Szerkesztve:</b> {moment(updated_at).format('LLLL')} <br />
<b>Szerkesztette:</b> {last_update_by}</p>
<Form> <Form>
<Form.Field <Form.Field
control={Input} control={Input}
......
src/components/pages/News.js
+ 92
− 45
View file @ 2609236d
...@@ -3,8 +3,10 @@ import { Container, Segment, Item, Button, Grid } from 'semantic-ui-react'; ...@@ -3,8 +3,10 @@ import { Container, Segment, Item, Button, Grid } from 'semantic-ui-react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import moment from 'moment'; import moment from 'moment';
import AddNewsForm from '../forms/AddNewsForm'; import AddNewsForm from '../forms/AddNewsForm'
import EditNewsForm from '../forms/EditNewsForm'; import EditNewsForm from '../forms/EditNewsForm'
import ConfirmModal from '../forms/ConfirmModal'
import { getNews, deleteNews, setSelectedNews } from '../../actions/news'; import { getNews, deleteNews, setSelectedNews } from '../../actions/news';
...@@ -14,58 +16,103 @@ class News extends Component { ...@@ -14,58 +16,103 @@ class News extends Component {
UNSAFE_componentWillMount() { UNSAFE_componentWillMount() {
this.props.getNews(); this.props.getNews();
} }
renderNews() { renderNews() {
return this.props.news.map(item => ( return this.props.news.map(item => (
<Item key={item.id}> <Item key={item.id}>
<Item.Content> <Item.Content>
<Item.Header <Container text textAlign='left'>
style={{ fontSize: '2em', width: '100%' }} <Item.Header
> style={{ fontSize: '2em', width: '100%' }}
<Grid> >
<Grid.Column width={12}> <Grid>
{item.title} <Grid.Column
</Grid.Column> floated='left'
{ this.props.user.role === 'Staff' ? width={this.props.user.role === 'Staff' ? 12 : 16}
<Grid.Column floated='right' width={4}>
<EditNewsForm
onClick={() => {
this.props.setSelectedNews(item)
}}
/>
<Button
compact
color='red'
size='mini'
onClick={() => this.props.deleteNews(item)}
> >
Delete {item.title}
</Button>
</Grid.Column>
: null }
</Grid>
</Item.Header>
<Item.Description className='news-text' style={{ fontSize: '1.33em' }}>
{this.renderMultiLine(item.text)}
</Item.Description>
<Item.Extra>
<Grid>
<Grid.Row className='news-extra'>
<Grid.Column floated='left' width={10}>
<p> Készült: {moment(item.created_at).format('LLLL')} </p>
<p> Szerkesztve: {moment(item.updated_at).format('LLLL')}</p>
</Grid.Column> </Grid.Column>
<Grid.Column floated='right' width={5}> { this.props.user.role === 'Staff' ?
<p> Írta: <strong>{item.author}</strong></p> <Grid.Column floated='right' width={4}>
{/* TODO get the edited by name */} <EditNewsForm
<p> Szerkesztette: {item.last_update_by}</p> onClick={() => this.props.setSelectedNews(item)}
</Grid.Column> />
</Grid.Row> <ConfirmModal
</Grid> text={`törölni akarod a következő hírt: ${item.title}`}
</Item.Extra> button={
<Button
compact
color='red'
size='mini'
>
Törlés
</Button>
}
onAccept={() => this.props.deleteNews(item)}
/>
</Grid.Column>
: null }
</Grid>
</Item.Header>
<Item.Meta style={{ fontSize: '0.75em', fontStyle: 'italic' }}>Közzétéve: {moment(item.created_at).format('LLLL')}</Item.Meta>
<Item.Description className='news-text' style={{ fontSize: '1em' }}>
{this.renderMultiLine(item.text)}
</Item.Description>
</Container>
</Item.Content> </Item.Content>
</Item> </Item>
)); ));
// renderNews() {
// return this.props.news.map(item => (
// <Item key={item.id}>
// <Item.Content>
// <Item.Header
// style={{ fontSize: '2em', width: '100%' }}
// >
// <Grid>
// <Grid.Column width={12}>
// {item.title}
// </Grid.Column>
// { this.props.user.role === 'Staff' ?
// <Grid.Column floated='right' width={4}>
// <EditNewsForm
// onClick={() => {
// this.props.setSelectedNews(item)
// }}
// />
// <Button
// compact
// color='red'
// size='mini'
// onClick={() => this.props.deleteNews(item)}
// >
// Delete
// </Button>
// </Grid.Column>
// : null }
// </Grid>
// </Item.Header>
// <Item.Description className='news-text' style={{ fontSize: '1.33em' }}>
// {this.renderMultiLine(item.text)}
// </Item.Description>
// <Item.Extra>
// <Grid>
// <Grid.Row className='news-extra'>
// <Grid.Column floated='left' width={10}>
// <p> Készült: {moment(item.created_at).format('LLLL')} </p>
// <p> Szerkesztve: {moment(item.updated_at).format('LLLL')}</p>
// </Grid.Column>
// <Grid.Column floated='right' width={5}>
// <p> Írta: <strong>{item.author}</strong></p>
// {/* TODO get the edited by name */}
// <p> Szerkesztette: {item.last_update_by}</p>
// </Grid.Column>
// </Grid.Row>
// </Grid>
// </Item.Extra>
// </Item.Content>
// </Item>
// ));
} }
renderMultiLine(text) { renderMultiLine(text) {
......
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

Hosted with :heart: by KSZK