"Delete" action better with browser history (i.e. back button now works correctly with the Delete dialog).
This commit is contained in:
parent
ed5b81b6e6
commit
1d1355df34
4 changed files with 41 additions and 22 deletions
|
@ -68,10 +68,19 @@ class Breadcrumb extends Component {
|
|||
renderElement(breadcrumbElem) {
|
||||
if (breadcrumbElem.isActive) {
|
||||
return <li key={breadcrumbElem.idx} className="active">{breadcrumbElem.title}</li>;
|
||||
|
||||
} else if (breadcrumbElem.externalLink) {
|
||||
return <li key={breadcrumbElem.idx}><a href={breadcrumbElem.externalLink}>{breadcrumbElem.title}</a></li>;
|
||||
|
||||
} else if (breadcrumbElem.link) {
|
||||
return <li key={breadcrumbElem.idx}><Link to={breadcrumbElem.link}>{breadcrumbElem.title}</Link></li>;
|
||||
let link;
|
||||
if (typeof breadcrumbElem.link === 'function') {
|
||||
link = breadcrumbElem.link(this.props.match);
|
||||
} else {
|
||||
link = breadcrumbElem.link;
|
||||
}
|
||||
return <li key={breadcrumbElem.idx}><Link to={link}>{breadcrumbElem.title}</Link></li>;
|
||||
|
||||
} else {
|
||||
return <li key={breadcrumbElem.idx}>{breadcrumbElem.title}</li>;
|
||||
}
|
||||
|
@ -182,6 +191,10 @@ class SectionContent extends Component {
|
|||
this.props.history.push(path);
|
||||
}
|
||||
|
||||
navigateBack() {
|
||||
this.props.history.goBack();
|
||||
}
|
||||
|
||||
navigateToWithFlashMessage(path, severity, text) {
|
||||
this.props.history.push(path);
|
||||
this.setFlashMessage(severity, text);
|
||||
|
@ -309,6 +322,10 @@ function withPageHelpers(target) {
|
|||
return this.context.sectionContent.navigateTo(path);
|
||||
}
|
||||
|
||||
inst.navigateBack = function() {
|
||||
return this.context.sectionContent.navigateBack();
|
||||
}
|
||||
|
||||
inst.navigateToWithFlashMessage = function(path, severity, text) {
|
||||
return this.context.sectionContent.navigateToWithFlashMessage(path, severity, text);
|
||||
}
|
||||
|
|
|
@ -109,9 +109,9 @@ class TreeTable extends Component {
|
|||
|
||||
const linksContainer = jQuery('<span class="mt-action-links"/>');
|
||||
const links = actionLinks.map(({label, link}) => {
|
||||
const lnkHtml = ReactDOMServer.renderToStaticMarkup(<a href="#">{label}</a>);
|
||||
const lnkHtml = ReactDOMServer.renderToStaticMarkup(<a href="">{label}</a>);
|
||||
const lnk = jQuery(lnkHtml);
|
||||
lnk.click(() => this.navigateTo(link(node.key)));
|
||||
lnk.click((evt) => { evt.preventDefault(); this.navigateTo(link(node.key)) });
|
||||
linksContainer.append(lnk);
|
||||
});
|
||||
|
||||
|
|
|
@ -17,19 +17,30 @@ export default class CUD extends Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {};
|
||||
|
||||
if (props.edit) {
|
||||
this.state.nsId = parseInt(props.match.params.nsId);
|
||||
}
|
||||
|
||||
this.initFormState();
|
||||
this.hasChildren = false;
|
||||
|
||||
}
|
||||
|
||||
isEditGlobal() {
|
||||
return this.nsId === 1;
|
||||
return this.state.nsId === 1;
|
||||
}
|
||||
|
||||
isDelete() {
|
||||
return this.props.match.params.action === 'delete';
|
||||
}
|
||||
|
||||
removeNsIdSubtree(data) {
|
||||
for (let idx = 0; idx < data.length; idx++) {
|
||||
const entry = data[idx];
|
||||
|
||||
if (entry.key === this.nsId) {
|
||||
if (entry.key === this.state.nsId) {
|
||||
if (entry.children.length > 0) {
|
||||
this.hasChildren = true;
|
||||
}
|
||||
|
@ -64,16 +75,13 @@ export default class CUD extends Component {
|
|||
|
||||
@withAsyncErrorHandler
|
||||
async loadFormValues() {
|
||||
await this.getFormValuesFromURL(`/namespaces/rest/namespaces/${this.nsId}`, data => {
|
||||
await this.getFormValuesFromURL(`/namespaces/rest/namespaces/${this.state.nsId}`, data => {
|
||||
if (data.parent) data.parent = data.parent.toString();
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const edit = this.props.edit;
|
||||
|
||||
if (edit) {
|
||||
this.nsId = parseInt(this.props.match.params.nsId);
|
||||
if (this.props.edit) {
|
||||
this.loadFormValues();
|
||||
} else {
|
||||
this.populateFormValues({
|
||||
|
@ -113,7 +121,7 @@ export default class CUD extends Component {
|
|||
let sendMethod, url;
|
||||
if (edit) {
|
||||
sendMethod = FormSendMethod.PUT;
|
||||
url = `/namespaces/rest/namespaces/${this.nsId}`
|
||||
url = `/namespaces/rest/namespaces/${this.state.nsId}`
|
||||
} else {
|
||||
sendMethod = FormSendMethod.POST;
|
||||
url = '/namespaces/rest/namespaces'
|
||||
|
@ -151,15 +159,11 @@ export default class CUD extends Component {
|
|||
}
|
||||
|
||||
async showDeleteModal() {
|
||||
this.setState({
|
||||
deleteConfirmationShown: true
|
||||
});
|
||||
this.navigateTo(`/namespaces/edit/${this.state.nsId}/delete`);
|
||||
}
|
||||
|
||||
async hideDeleteModal() {
|
||||
this.setState({
|
||||
deleteConfirmationShown: false
|
||||
});
|
||||
this.navigateTo(`/namespaces/edit/${this.state.nsId}`);
|
||||
}
|
||||
|
||||
async performDelete() {
|
||||
|
@ -171,7 +175,7 @@ export default class CUD extends Component {
|
|||
this.disableForm();
|
||||
this.setFormStatusMessage('info', t('Deleting namespace...'));
|
||||
|
||||
await axios.delete(`/namespaces/rest/namespaces/${this.nsId}`);
|
||||
await axios.delete(`/namespaces/rest/namespaces/${this.state.nsId}`);
|
||||
|
||||
this.navigateToWithFlashMessage('/namespaces', 'success', t('Namespace deleted'));
|
||||
|
||||
|
@ -194,12 +198,11 @@ export default class CUD extends Component {
|
|||
render() {
|
||||
const t = this.props.t;
|
||||
const edit = this.props.edit;
|
||||
const deleteConfirmationShown = this.state.deleteConfirmationShown;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{!this.isEditGlobal() && !this.hasChildren && edit &&
|
||||
<ModalDialog hidden={!deleteConfirmationShown} title={t('Confirm deletion')} onCloseAsync={::this.hideDeleteModal} buttons={[
|
||||
<ModalDialog hidden={!this.isDelete()} title={t('Confirm deletion')} onCloseAsync={::this.hideDeleteModal} buttons={[
|
||||
{ label: t('No'), className: 'btn-primary', onClickAsync: ::this.hideDeleteModal },
|
||||
{ label: t('Yes'), className: 'btn-danger', onClickAsync: ::this.performDelete }
|
||||
]}>
|
||||
|
|
|
@ -21,12 +21,11 @@ const getStructure = t => ({
|
|||
children: {
|
||||
'edit' : {
|
||||
title: t('Edit Namespace'),
|
||||
params: [':nsId'],
|
||||
params: [':nsId', ':action?'],
|
||||
render: props => (<CUD edit {...props} />)
|
||||
},
|
||||
'create' : {
|
||||
title: t('Create Namespace'),
|
||||
link: '/namespaces/create',
|
||||
render: props => (<CUD {...props} />)
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue