|
|
|
@ -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>
|
|
|
|
|
Dharmakeerthi Lasantha
5 years ago