From 2609236dad9f89502b6d234cc492a6ac3b0afafc Mon Sep 17 00:00:00 2001
From: rlacko <rlacko@sch.bme.hu>
Date: Thu, 6 Feb 2020 21:18:40 +0100
Subject: [PATCH] migrated news page from master
---
src/components/forms/EditNewsForm.js | 7 +-
src/components/pages/News.js | 137 ++++++++++++++++++---------
2 files changed, 98 insertions(+), 46 deletions(-)
diff --git a/src/components/forms/EditNewsForm.js b/src/components/forms/EditNewsForm.js
index 1dad443..816ce71 100644
--- a/src/components/forms/EditNewsForm.js
+++ b/src/components/forms/EditNewsForm.js
@@ -1,6 +1,7 @@
import React, { Component } from 'react';
import { Modal, Button, Form, Input, TextArea, Icon } from 'semantic-ui-react';
import { connect } from 'react-redux';
+import moment from 'moment';
import { writeNews, editNews, clearWrite } from '../../actions/news';
@@ -13,7 +14,7 @@ class EditNewsForm extends Component {
}
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;
return (
<Modal
@@ -31,6 +32,10 @@ class EditNewsForm extends Component {
>
<Modal.Header>SzerkesztĂŠs:</Modal.Header>
<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.Field
control={Input}
diff --git a/src/components/pages/News.js b/src/components/pages/News.js
index 02e1f56..03f69f4 100644
--- a/src/components/pages/News.js
+++ b/src/components/pages/News.js
@@ -3,8 +3,10 @@ import { Container, Segment, Item, Button, Grid } from 'semantic-ui-react';
import { connect } from 'react-redux';
import moment from 'moment';
-import AddNewsForm from '../forms/AddNewsForm';
-import EditNewsForm from '../forms/EditNewsForm';
+import AddNewsForm from '../forms/AddNewsForm'
+import EditNewsForm from '../forms/EditNewsForm'
+
+import ConfirmModal from '../forms/ConfirmModal'
import { getNews, deleteNews, setSelectedNews } from '../../actions/news';
@@ -14,58 +16,103 @@ class News extends Component {
UNSAFE_componentWillMount() {
this.props.getNews();
}
-
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)}
+ <Container text textAlign='left'>
+ <Item.Header
+ style={{ fontSize: '2em', width: '100%' }}
+ >
+ <Grid>
+ <Grid.Column
+ floated='left'
+ width={this.props.user.role === 'Staff' ? 12 : 16}
>
- 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>
+ {item.title}
</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>
+ { this.props.user.role === 'Staff' ?
+ <Grid.Column floated='right' width={4}>
+ <EditNewsForm
+ onClick={() => this.props.setSelectedNews(item)}
+ />
+ <ConfirmModal
+ text={`tĂśrĂślni akarod a kĂśvetkezĹ hĂrt: ${item.title}`}
+ 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>
));
+
+ // 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) {
--
GitLab