X-Git-Url: https://osm.etsi.org/gitweb/?p=osm%2FUI.git;a=blobdiff_plain;f=skyquake%2Fplugins%2Fcomposer%2Fsrc%2Fsrc%2Fcomponents%2FDetailsPanel.js;fp=skyquake%2Fplugins%2Fcomposer%2Fsrc%2Fsrc%2Fcomponents%2FDetailsPanel.js;h=f87f726e1783e419ec95ae59602502b6adbae496;hp=2e1205295202eca1f57f7640279513c08de600ab;hb=03156e335275de1dafbc2a816e98006afdf249bf;hpb=f2dc2462571800e62cba969964de621dca09299c

diff --git a/skyquake/plugins/composer/src/src/components/DetailsPanel.js b/skyquake/plugins/composer/src/src/components/DetailsPanel.js
index 2e1205295..f87f726e1 100644
--- a/skyquake/plugins/composer/src/src/components/DetailsPanel.js
+++ b/skyquake/plugins/composer/src/src/components/DetailsPanel.js
@@ -1,6 +1,6 @@
 
 /*
- * 
+ *
  *   Copyright 2016 RIFT.IO Inc
  *
  *   Licensed under the Apache License, Version 2.0 (the "License");
@@ -19,17 +19,48 @@
 'use strict';
 
 import _cloneDeep from 'lodash/cloneDeep'
+import _isArray from 'lodash/isArray'
+import _isObject from 'lodash/isObject'
+import _keys from 'lodash/keys'
 import React from 'react';
 import PureRenderMixin from 'react-addons-pure-render-mixin'
 import messages from './messages'
 import serializers from '../libraries/model/DescriptorModelSerializer'
 import JSONViewer from 'widgets/JSONViewer/JSONViewer';
 import PopupWindow from './PopupWindow'
+import DetailsPanelToolbar from './DetailsPanelToolbar'
+import NavigateDescriptorModel from './NavigateDescriptorModel'
+import NavigateDescriptorErrors from './NavigateDescriptorErrors'
 import CatalogItemDetailsEditor from './CatalogItemDetailsEditor'
 import SelectionManager from '../libraries/SelectionManager'
 
 import '../styles/DetailsPanel.scss'
 
+function checkForErrors(errors) {
+	return _keys(errors).reduce((inError, k) => {
+		function traverseObject(obj, key) {
+			const node = obj[key];
+			if (_isArray(node)) {
+				return node.reduce((inError, v, i) => {
+					if (!inError && v) {
+						return _keys(v).reduce((inError, k) => {
+							return inError || traverseObject(v, k);
+						}, false);
+					}
+					return inError;
+				}, false);
+			} else if (_isObject(node)) {
+				return _keys(node).reduce((inError, k) => {
+					return inError || traverseObject(node, k);
+				}, false);
+			} else {
+				return !! node;
+			}
+		}
+		return inError || traverseObject(errors, k);
+	}, false);
+}
+
 const DetailsPanel = React.createClass({
 	mixins: [PureRenderMixin, SelectionManager.reactPauseResumeMixin],
 	getInitialState() {
@@ -42,6 +73,10 @@ const DetailsPanel = React.createClass({
 		};
 	},
 	componentWillMount() {
+		setTimeout(() => {
+			const height = this.panel && this.panel.offsetHeight;
+			this.setState({ height });
+		}, 100);
 	},
 	componentDidMount() {
 	},
@@ -50,24 +85,76 @@ const DetailsPanel = React.createClass({
 	},
 	componentWillUnmount() {
 	},
+	contextTypes: {
+	    router: React.PropTypes.object,
+	    userProfile: React.PropTypes.object
+	},
+	componentWillUpdate(nextProps) {
+		if ((nextProps.layout != this.props.layout)
+			&& (nextProps.layout.height != this.props.layout.height)) {
+			this.componentWillMount();
+		}
+	},
+
 	render() {
 		let json = '{}';
-		let bodyComponent =  messages.detailsWelcome();
+		let bodyContent = this.props.hasNoCatalogs ? null : messages.detailsWelcome();
 		const selected = this.props.containers.filter(d => SelectionManager.isSelected(d));
 		const selectedContainer = selected[0];
+		let workingHeight = this.state.height || 1;
+
+		function makeId(container, path) {
+			let idParts = [_isArray(path) ? path.join(':') : path];
+			idParts.push(container.uid);
+			while (container.parent) {
+				container = container.parent;
+				idParts.push(container.uid);
+			}
+			return idParts.reverse().join(':');
+		}
+
 		if (selectedContainer) {
-			bodyComponent = <CatalogItemDetailsEditor container={selectedContainer} width={this.props.layout.right} />;
+			bodyContent = [];
+			bodyContent.push(
+				<DetailsPanelToolbar
+					key='toolbar'
+					container={selectedContainer}
+					showHelp={this.props.showHelp.forAll}
+					width={this.props.layout.right} />
+			);
+			workingHeight -= 32 + 35;
+			bodyContent.push(
+				<NavigateDescriptorModel key='navigate' container={selectedContainer} idMaker={makeId}
+					style={{ margin: '8px 8px 15px' }} />
+			)
+			workingHeight -= 8 + 15 + 37;
+			if (checkForErrors(selectedContainer.uiState.error)) {
+				bodyContent.push(
+					<NavigateDescriptorErrors key='errors' container={selectedContainer} idMaker={makeId}
+						style={{ margin: '8px 8px 15px' }} />
+				)
+				workingHeight -= 8 + 15 + 37;
+			}
+			bodyContent.push(
+				<div key='editor' className="DetailsPanelBody">
+					<CatalogItemDetailsEditor
+						container={selectedContainer}
+						idMaker={makeId}
+						showHelp={this.props.showHelp}
+						collapsePanelsByDefault={this.props.collapsePanelsByDefault}
+						openPanelsWithData={this.props.openPanelsWithData}
+						width={this.props.layout.right}
+						height={workingHeight} />
+				</div>
+			);
 			const edit = _cloneDeep(selectedContainer.model);
 			json = serializers.serialize(edit) || edit;
 		}
 		const jsonViewerTitle = selectedContainer ? selectedContainer.model.name : 'nothing selected';
-		const hasNoCatalogs = this.props.hasNoCatalogs;
 		return (
-			<div className="DetailsPanel" data-resizable="left" data-resizable-handle-offset="0 5" style={{width: this.props.layout.right}} onClick={event => event.preventDefault()}>
-				<div className="DetailsPanelBody">
-					{hasNoCatalogs ? null : bodyComponent}
-				</div>
-				<PopupWindow show={this.props.showJSONViewer} title={jsonViewerTitle}><JSONViewer json={json}/></PopupWindow>
+			<div ref={el => this.panel = el} className="DetailsPanel" data-resizable="left" data-resizable-handle-offset="0 5" style={{ width: this.props.layout.right }} onClick={event => event.preventDefault()}>
+				{bodyContent}
+				<PopupWindow show={this.props.showJSONViewer} title={jsonViewerTitle}><JSONViewer json={json} /></PopupWindow>
 			</div>
 		);
 	}