Completed Manage tag component

feature/appm-store/pbac
Jayasanka 6 years ago
parent 129ff7944e
commit b41e0f38d3

@ -30,8 +30,11 @@ class DetailedRating extends React.Component{
getData = (uuid)=>{ getData = (uuid)=>{
const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/reviews/"+uuid+"/rating"; const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/reviews/"+uuid+"/rating";
return axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request return axios.get(
).then(res => { config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri+"/reviews/"+uuid+"/rating",
{
headers: { 'X-Platform': config.serverConfig.platform }
}).then(res => {
if (res.status === 200) { if (res.status === 200) {
let detailedRating = res.data.data; let detailedRating = res.data.data;
this.setState({ this.setState({

@ -21,7 +21,7 @@ class ManageCategories extends React.Component {
componentDidMount() { componentDidMount() {
axios.get( axios.get(
config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri+"/admin/applications/categories/", config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri+"/applications/categories",
{ {
headers: { 'X-Platform': config.serverConfig.platform } headers: { 'X-Platform': config.serverConfig.platform }
}).then(res => { }).then(res => {
@ -197,7 +197,7 @@ class ManageCategories extends React.Component {
loading: true loading: true
}); });
const data = JSON.stringify(tempElements.map(category => category.categoryName)); const data = tempElements.map(category => category.categoryName);
axios.post( axios.post(
config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri+"/admin/applications/categories", config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri+"/admin/applications/categories",
@ -264,8 +264,13 @@ class ManageCategories extends React.Component {
loading: true, loading: true,
isEditModalVisible: false, isEditModalVisible: false,
}); });
const request = "method=put&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/admin/applications/categories/rename?from="+currentlyEditingId+"%26to="+editingValue;
axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request axios.put(
config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri+"/admin/applications/categories/rename?from="+currentlyEditingId+"&to="+editingValue,
{},
{
headers: { 'X-Platform': config.serverConfig.platform }
}
).then(res => { ).then(res => {
if (res.status === 200) { if (res.status === 200) {
notification["success"]({ notification["success"]({

@ -9,7 +9,7 @@ class ManageTags extends React.Component {
state = { state = {
loading: false, loading: false,
searchText: '', searchText: '',
categories: [], tags: [],
tempElements: [], tempElements: [],
inputVisible: false, inputVisible: false,
inputValue: '', inputValue: '',
@ -20,13 +20,15 @@ class ManageTags extends React.Component {
}; };
componentDidMount() { componentDidMount() {
const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications/tags"; axios.get(
axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri+"/applications/tags",
).then(res => { {
headers: { 'X-Platform': config.serverConfig.platform }
}).then(res => {
if (res.status === 200) { if (res.status === 200) {
let categories = JSON.parse(res.data.data); let tags = JSON.parse(res.data.data);
this.setState({ this.setState({
categories: categories, tags: tags,
loading: false loading: false
}); });
} }
@ -51,31 +53,34 @@ class ManageTags extends React.Component {
}); });
}; };
deleteCategory = (id) => { deleteTag = (id) => {
this.setState({ this.setState({
loading: true loading: true
}); });
const request = "method=delete&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/admin/applications/categories/" + id;
axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request axios.delete(
).then(res => { config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri+"/admin/applications/tags/"+id,
{
headers: {'X-Platform': config.serverConfig.platform}
}).then(res => {
if (res.status === 200) { if (res.status === 200) {
notification["success"]({ notification["success"]({
message: "Done!", message: "Done!",
description: description:
"Category Removed Successfully!", "Tag Removed Successfully!",
});
const {tags} = this.state;
const remainingElements = tags.filter(function (value) {
return value.tagName !== id;
}); });
this.setState({ this.setState({
loading: false loading: false,
tags: remainingElements
}); });
// this.setState({
// categories: [...categories, ...tempElements],
// tempElements: [],
// inputVisible: false,
// inputValue: '',
// loading: false,
// isAddNewVisible: false
// });
} }
}).catch((error) => { }).catch((error) => {
@ -91,31 +96,31 @@ class ManageTags extends React.Component {
}); });
}; };
renderElement = (category) => { renderElement = (tag) => {
const categoryName = category.tagName; const tagName = tag.tagName;
const tagElem = ( const tagElem = (
<Tag <Tag
color="gold" color="gold"
> >
{categoryName} {tagName}
<Divider type="vertical"/> <Divider type="vertical"/>
<Tooltip title="edit"> <Tooltip title="edit">
<Icon onClick={() => { <Icon onClick={() => {
this.openEditModal(categoryName) this.openEditModal(tagName)
}} style={{color: 'rgba(0,0,0,0.45)'}} type="edit"/> }} style={{color: 'rgba(0,0,0,0.45)'}} type="edit"/>
</Tooltip> </Tooltip>
<Divider type="vertical"/> <Divider type="vertical"/>
<Tooltip title="delete"> <Tooltip title="delete">
<Popconfirm <Popconfirm
title="Are you sure delete this category?" title="Are you sure delete this tag?"
onConfirm={() => { onConfirm={() => {
if (category.isTagDeletable) { if (tag.isTagDeletable) {
this.deleteCategory(categoryName); this.deleteTag(tagName);
} else { } else {
notification["error"]({ notification["error"]({
message: 'Cannot delete "' + categoryName + '"', message: 'Cannot delete "' + tagName + '"',
description: description:
"This category is currently used. Please unassign the category from apps.", "This tag is currently used. Please unassign the tag from apps.",
}); });
} }
}} }}
@ -128,13 +133,13 @@ class ManageTags extends React.Component {
</Tag> </Tag>
); );
return ( return (
<span key={category.tagName} style={{display: 'inline-block'}}> <span key={tag.tagName} style={{display: 'inline-block'}}>
{tagElem} {tagElem}
</span> </span>
); );
}; };
renderTempElement = (category) => { renderTempElement = (tag) => {
const {tempElements} = this.state; const {tempElements} = this.state;
const tagElem = ( const tagElem = (
<Tag <Tag
@ -143,7 +148,7 @@ class ManageTags extends React.Component {
e.preventDefault(); e.preventDefault();
const remainingElements = tempElements.filter(function (value) { const remainingElements = tempElements.filter(function (value) {
return value.categoryName !== category.categoryName; return value.tagName !== tag.tagName;
}); });
this.setState({ this.setState({
@ -151,11 +156,11 @@ class ManageTags extends React.Component {
}); });
}} }}
> >
{category.categoryName} {tag.tagName}
</Tag> </Tag>
); );
return ( return (
<span key={category.categoryName} style={{display: 'inline-block'}}> <span key={tag.tagName} style={{display: 'inline-block'}}>
{tagElem} {tagElem}
</span> </span>
); );
@ -170,13 +175,13 @@ class ManageTags extends React.Component {
}; };
handleInputConfirm = () => { handleInputConfirm = () => {
const {inputValue, categories} = this.state; const {inputValue, tags} = this.state;
let {tempElements} = this.state; let {tempElements} = this.state;
if (inputValue) { if (inputValue) {
if ((categories.findIndex(i => i.categoryName === inputValue) === -1) && (tempElements.findIndex(i => i.categoryName === inputValue) === -1)) { if ((tags.findIndex(i => i.tagName === inputValue) === -1) && (tempElements.findIndex(i => i.tagName === inputValue) === -1)) {
tempElements = [...tempElements, {categoryName: inputValue, isTagDeletable: true}]; tempElements = [...tempElements, {tagName: inputValue, isTagDeletable: true}];
} else { } else {
message.warning('Category already exists'); message.warning('Tag already exists');
} }
} }
@ -188,25 +193,27 @@ class ManageTags extends React.Component {
}; };
handleSave = () => { handleSave = () => {
const {tempElements, categories} = this.state; const {tempElements, tags} = this.state;
this.setState({ this.setState({
loading: true loading: true
}); });
const dataArray = JSON.stringify(tempElements.map(category => category.categoryName)); const data = tempElements.map(tag => tag.tagName);
const request = "method=post&content-type=application/json&payload=" + dataArray + "&api-endpoint=/application-mgt-publisher/v1.0/admin/applications/categories"; axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri+"/applications/tags",
axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request data,
).then(res => { {
headers: { 'X-Platform': config.serverConfig.platform }
}).then(res => {
if (res.status === 200) { if (res.status === 200) {
notification["success"]({ notification["success"]({
message: "Done!", message: "Done!",
description: description:
"New Categories were added successfully", "New tags were added successfully",
}); });
this.setState({ this.setState({
categories: [...categories, ...tempElements], tags: [...tags, ...tempElements],
tempElements: [], tempElements: [],
inputVisible: false, inputVisible: false,
inputValue: '', inputValue: '',
@ -250,26 +257,31 @@ class ManageTags extends React.Component {
editItem = () => { editItem = () => {
const {editingValue, currentlyEditingId, categories} = this.state; const {editingValue, currentlyEditingId, tags} = this.state;
this.setState({ this.setState({
loading: true, loading: true,
isEditModalVisible: false, isEditModalVisible: false,
}); });
const request = "method=put&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/admin/applications/categories?from="+currentlyEditingId+"%26to="+editingValue;
axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request axios.put(
config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri+"/applications/tags/rename?from="+currentlyEditingId+"&to="+editingValue,
{},
{
headers: { 'X-Platform': config.serverConfig.platform }
}
).then(res => { ).then(res => {
if (res.status === 200) { if (res.status === 200) {
notification["success"]({ notification["success"]({
message: "Done!", message: "Done!",
description: description:
"Category was edited successfully", "Tag was edited successfully",
}); });
categories[categories.findIndex(i => i.categoryName === currentlyEditingId)].categoryName = editingValue; tags[tags.findIndex(i => i.tagName === currentlyEditingId)].tagName = editingValue;
this.setState({ this.setState({
categories: categories, tags: tags,
loading: false, loading: false,
editingValue: null editingValue: null
}); });
@ -298,8 +310,8 @@ class ManageTags extends React.Component {
}; };
render() { render() {
const {categories, inputVisible, inputValue, tempElements, isAddNewVisible} = this.state; const {tags, inputVisible, inputValue, tempElements, isAddNewVisible} = this.state;
const categoriesElements = categories.map(this.renderElement); const tagsElements = tags.map(this.renderElement);
const temporaryElements = tempElements.map(this.renderTempElement); const temporaryElements = tempElements.map(this.renderTempElement);
return ( return (
<div> <div>
@ -349,7 +361,7 @@ class ManageTags extends React.Component {
{!inputVisible && ( {!inputVisible && (
<Tag onClick={this.showInput} <Tag onClick={this.showInput}
style={{background: '#fff', borderStyle: 'dashed'}}> style={{background: '#fff', borderStyle: 'dashed'}}>
<Icon type="plus"/> New Category <Icon type="plus"/> New Tag
</Tag> </Tag>
)} )}
</TweenOneGroup> </TweenOneGroup>
@ -386,7 +398,7 @@ class ManageTags extends React.Component {
leave={{opacity: 0, width: 0, scale: 0, duration: 200}} leave={{opacity: 0, width: 0, scale: 0, duration: 200}}
appear={false} appear={false}
> >
{categoriesElements} {tagsElements}
</TweenOneGroup> </TweenOneGroup>
</div> </div>
</Spin> </Spin>

@ -14,9 +14,7 @@ class AppList extends React.Component {
} }
componentDidMount() { componentDidMount() {
console.log("mounted");
const {deviceType} = this.props; const {deviceType} = this.props;
console.log(this.props);
this.props.changeSelectedMenuItem(deviceType); this.props.changeSelectedMenuItem(deviceType);
this.fetchData(deviceType); this.fetchData(deviceType);
} }

Loading…
Cancel
Save