forked from community/device-mgt-core
Complete edit release functionality See merge request entgra/carbon-device-mgt!169feature/appm-store/pbac
Dharmakeerthi Lasantha
5 years ago
commit
72fbd7d3ad
@ -0,0 +1,95 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {List, message, Typography, Empty, Button, Row, Col} from "antd";
|
||||||
|
import SingleReview from "./singleReview/SingleReview";
|
||||||
|
import axios from "axios";
|
||||||
|
import config from "../../../../../public/conf/config.json";
|
||||||
|
import AddReview from "./AddReview";
|
||||||
|
|
||||||
|
const {Text, Paragraph} = Typography;
|
||||||
|
|
||||||
|
class CurrentUsersReview extends React.Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
data: []
|
||||||
|
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.fetchData();
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchData = () => {
|
||||||
|
const {uuid} = this.props;
|
||||||
|
|
||||||
|
axios.get(
|
||||||
|
config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/app/user/" + uuid,
|
||||||
|
).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
const data = res.data.data.data;
|
||||||
|
this.setState({data});
|
||||||
|
}
|
||||||
|
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error.response.hasOwnProperty(status) && error.response.status === 401) {
|
||||||
|
message.error('You are not logged in');
|
||||||
|
window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
|
||||||
|
} else {
|
||||||
|
message.error('Something went wrong when trying to get your review... :(');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {data} = this.state;
|
||||||
|
const {uuid} = this.props;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Text>MY REVIEW</Text>
|
||||||
|
<div style={{
|
||||||
|
overflow: "auto",
|
||||||
|
paddingTop: 8,
|
||||||
|
paddingLeft: 24
|
||||||
|
}}>
|
||||||
|
{data.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<List
|
||||||
|
dataSource={data}
|
||||||
|
renderItem={item => (
|
||||||
|
<List.Item key={item.id}>
|
||||||
|
<SingleReview uuid={uuid} review={item} isDeletable={true} isEditable={true}/>
|
||||||
|
</List.Item>
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
</List>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{data.length === 0 && (
|
||||||
|
<div>
|
||||||
|
<Empty
|
||||||
|
image={Empty.PRESENTED_IMAGE_DEFAULT}
|
||||||
|
imagestyle={{
|
||||||
|
height: 60,
|
||||||
|
}}
|
||||||
|
description={
|
||||||
|
<span>Share your experience with your community by adding a review.</span>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{/*<Button type="primary">Add review</Button>*/}
|
||||||
|
<AddReview uuid={uuid}/>
|
||||||
|
</Empty>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CurrentUsersReview;
|
||||||
@ -1,23 +1,16 @@
|
|||||||
.demo-infinite-container {
|
.infinite-container {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: 8px 24px;
|
padding: 8px 24px;
|
||||||
}
|
}
|
||||||
.demo-loading-container {
|
.loading-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 40px;
|
bottom: 40px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.demo-loading {
|
.loading {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -40px;
|
bottom: -40px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
img.twemoji {
|
|
||||||
height: 1em;
|
|
||||||
width: 1em;
|
|
||||||
margin: 0 .05em 0 .1em;
|
|
||||||
vertical-align: -0.1em;
|
|
||||||
}
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import {Avatar} from "antd";
|
|
||||||
import {List, Typography} from "antd";
|
|
||||||
import StarRatings from "react-star-ratings";
|
|
||||||
import Twemoji from "react-twemoji";
|
|
||||||
import "./Reviews.css";
|
|
||||||
|
|
||||||
const {Text, Paragraph} = Typography;
|
|
||||||
const colorList = ['#f0932b', '#badc58', '#6ab04c', '#eb4d4b', '#0abde3', '#9b59b6', '#3498db', '#22a6b3'];
|
|
||||||
|
|
||||||
class SingleReview extends React.Component {
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const review = this.props.review;
|
|
||||||
const randomColor = colorList[Math.floor(Math.random() * (colorList.length))];
|
|
||||||
const avatarLetter = review.username.charAt(0).toUpperCase();
|
|
||||||
const content = (
|
|
||||||
<div style={{marginTop: -5}}>
|
|
||||||
<StarRatings
|
|
||||||
rating={review.rating}
|
|
||||||
starRatedColor="#777"
|
|
||||||
starDimension="12px"
|
|
||||||
starSpacing="2px"
|
|
||||||
numberOfStars={5}
|
|
||||||
name='rating'
|
|
||||||
/>
|
|
||||||
<Text style={{fontSize: 12, color: "#aaa"}} type="secondary"> {review.createdAt}</Text><br/>
|
|
||||||
<Twemoji options={{className: 'twemoji'}}>
|
|
||||||
<Paragraph ellipsis={{rows: 3, expandable: true}} style={{color: "#777"}}>
|
|
||||||
{review.content}
|
|
||||||
</Paragraph>
|
|
||||||
</Twemoji>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<List.Item.Meta
|
|
||||||
avatar={
|
|
||||||
<Avatar style={{backgroundColor: randomColor, verticalAlign: 'middle'}} size="large">
|
|
||||||
{avatarLetter}
|
|
||||||
</Avatar>
|
|
||||||
}
|
|
||||||
title={review.username}
|
|
||||||
description={content}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SingleReview;
|
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
img.twemoji {
|
||||||
|
height: 1em;
|
||||||
|
width: 1em;
|
||||||
|
margin: 0 .05em 0 .1em;
|
||||||
|
vertical-align: -0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-button {
|
||||||
|
color: #1890ff;
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 0.8em;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-button {
|
||||||
|
color: #e74c3c;
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 0.8em;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {Avatar} from "antd";
|
||||||
|
import {List, Typography} from "antd";
|
||||||
|
import StarRatings from "react-star-ratings";
|
||||||
|
import Twemoji from "react-twemoji";
|
||||||
|
import "./SingleReview.css";
|
||||||
|
import EditReview from "./editReview/EditReview";
|
||||||
|
|
||||||
|
const {Text, Paragraph} = Typography;
|
||||||
|
const colorList = ['#f0932b', '#badc58', '#6ab04c', '#eb4d4b', '#0abde3', '#9b59b6', '#3498db', '#22a6b3','#e84393','#f9ca24'];
|
||||||
|
|
||||||
|
class SingleReview extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
content: '',
|
||||||
|
rating: 0,
|
||||||
|
color: '#f0932b'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const {content, rating, username} = this.props.review;
|
||||||
|
const color = colorList[username.length%10];
|
||||||
|
this.setState({
|
||||||
|
content,
|
||||||
|
rating,
|
||||||
|
color
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
updateCallback = (response) =>{
|
||||||
|
console.log(response);
|
||||||
|
const {rating, content} = response;
|
||||||
|
this.setState({
|
||||||
|
rating,
|
||||||
|
content
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {review, isEditable, isDeletable, uuid} = this.props;
|
||||||
|
const {content, rating, color} = this.state;
|
||||||
|
const {username} = review;
|
||||||
|
const avatarLetter = username.charAt(0).toUpperCase();
|
||||||
|
const body = (
|
||||||
|
<div style={{marginTop: -5}}>
|
||||||
|
<StarRatings
|
||||||
|
rating={rating}
|
||||||
|
starRatedColor="#777"
|
||||||
|
starDimension="12px"
|
||||||
|
starSpacing="2px"
|
||||||
|
numberOfStars={5}
|
||||||
|
name='rating'
|
||||||
|
/>
|
||||||
|
<Text style={{fontSize: 12, color: "#aaa"}} type="secondary"> {review.createdAt}</Text><br/>
|
||||||
|
<Paragraph style={{color: "#777"}}>
|
||||||
|
<Twemoji options={{className: 'twemoji'}}>
|
||||||
|
{content}
|
||||||
|
</Twemoji>
|
||||||
|
</Paragraph>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const title = (
|
||||||
|
<div>
|
||||||
|
{review.username}
|
||||||
|
{isEditable && (<EditReview uuid={uuid} review={review} updateCallback={this.updateCallback}/>)}
|
||||||
|
{isDeletable && (<span className="delete-button">delete</span>)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<List.Item.Meta
|
||||||
|
avatar={
|
||||||
|
<Avatar style={{backgroundColor: color, verticalAlign: 'middle'}} size="large">
|
||||||
|
{avatarLetter}
|
||||||
|
</Avatar>
|
||||||
|
}
|
||||||
|
title={title}
|
||||||
|
description={body}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SingleReview;
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
.edit-button {
|
||||||
|
color: #1890ff;
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 0.8em;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
@ -0,0 +1,170 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {Drawer, Button, Icon, Row, Col, Typography, Divider, Input, Spin, notification} from 'antd';
|
||||||
|
import StarRatings from "react-star-ratings";
|
||||||
|
import axios from "axios";
|
||||||
|
import config from "../../../../../../../public/conf/config.json";
|
||||||
|
import "./EditReview.css";
|
||||||
|
|
||||||
|
const {Title} = Typography;
|
||||||
|
const {TextArea} = Input;
|
||||||
|
|
||||||
|
class EditReview extends React.Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
visible: false,
|
||||||
|
content: '',
|
||||||
|
rating: 0,
|
||||||
|
loading: false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const {content,rating,id} = this.props.review;
|
||||||
|
console.log(this.props.review);
|
||||||
|
this.setState({
|
||||||
|
content,
|
||||||
|
rating
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
showDrawer = () => {
|
||||||
|
this.setState({
|
||||||
|
visible: true,
|
||||||
|
loading: false
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onClose = () => {
|
||||||
|
this.setState({
|
||||||
|
visible: false,
|
||||||
|
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
changeRating = (newRating, name) => {
|
||||||
|
this.setState({
|
||||||
|
rating: newRating
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onChange = (e) => {
|
||||||
|
this.setState({content: e.target.value})
|
||||||
|
};
|
||||||
|
|
||||||
|
onSubmit = () => {
|
||||||
|
const {content, rating} = this.state;
|
||||||
|
const {id} = this.props.review;
|
||||||
|
const {uuid} = this.props;
|
||||||
|
this.setState({
|
||||||
|
loading: true
|
||||||
|
});
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
content: content,
|
||||||
|
rating: rating
|
||||||
|
};
|
||||||
|
|
||||||
|
axios.put(
|
||||||
|
config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/" + uuid+"/"+id,
|
||||||
|
payload,
|
||||||
|
).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.setState({
|
||||||
|
loading: false,
|
||||||
|
visible: false
|
||||||
|
});
|
||||||
|
notification["success"]({
|
||||||
|
message: 'Done!',
|
||||||
|
description:
|
||||||
|
'Your review has been update successfully.',
|
||||||
|
});
|
||||||
|
|
||||||
|
this.props.updateCallback(res.data.data);
|
||||||
|
} else {
|
||||||
|
this.setState({
|
||||||
|
loading: false,
|
||||||
|
visible: false
|
||||||
|
});
|
||||||
|
notification["error"]({
|
||||||
|
message: 'Something went wrong',
|
||||||
|
description:
|
||||||
|
"We are unable to update your review right now.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}).catch((error) => {
|
||||||
|
console.log(error);
|
||||||
|
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||||
|
window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
|
||||||
|
} else {
|
||||||
|
this.setState({
|
||||||
|
loading: false,
|
||||||
|
visible: false
|
||||||
|
});
|
||||||
|
notification["error"]({
|
||||||
|
message: 'Something went wrong',
|
||||||
|
description:
|
||||||
|
"We are unable to add your review right now.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<span>
|
||||||
|
<span className="edit-button" onClick={this.showDrawer}>edit</span>
|
||||||
|
<Drawer
|
||||||
|
// title="Basic Drawer"
|
||||||
|
placement="bottom"
|
||||||
|
closable={false}
|
||||||
|
onClose={this.onClose}
|
||||||
|
visible={this.state.visible}
|
||||||
|
height={400}
|
||||||
|
>
|
||||||
|
<Spin spinning={this.state.loading} tip="Posting your review...">
|
||||||
|
<Row>
|
||||||
|
<Col lg={8}/>
|
||||||
|
<Col lg={8}>
|
||||||
|
<Title level={4}>Edit review</Title>
|
||||||
|
<Divider/>
|
||||||
|
<TextArea
|
||||||
|
placeholder="Tell others what you think about this app. Would you recommend it, and why?"
|
||||||
|
onChange={this.onChange}
|
||||||
|
rows={6}
|
||||||
|
value={this.state.content || ''}
|
||||||
|
style={{marginBottom: 20}}
|
||||||
|
/>
|
||||||
|
<StarRatings
|
||||||
|
rating={this.state.rating}
|
||||||
|
changeRating={this.changeRating}
|
||||||
|
starRatedColor="#777"
|
||||||
|
starHoverColor="#444"
|
||||||
|
starDimension="20px"
|
||||||
|
starSpacing="2px"
|
||||||
|
numberOfStars={5}
|
||||||
|
name='rating'
|
||||||
|
/>
|
||||||
|
<br/><br/>
|
||||||
|
<Button onClick={this.onClose} style={{marginRight: 8}}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button disabled={this.state.rating === 0} onClick={this.onSubmit} type="primary">
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Spin>
|
||||||
|
</Drawer>
|
||||||
|
|
||||||
|
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EditReview;
|
||||||
Loading…
Reference in new issue