edit id in JSON and layer edit modifications - closes #6 closes #40

Author: justenPalmer

src/App.css

@@ -62,6 +62,9 @@ label .badge{position:relative;top:2px;}
 .exp-line-end{position:absolute;bottom:0;top:16px;left:-12px;
 	background-color:#FFFFFF;width:4px;z-index:1;}
 
+.edit-name{cursor:text;opacity:0.9;}
+.edit-name:hover{opacity:1;}
+
 .field-border-bottom{border-bottom:1px solid #BDBDBD;}
 .focus .field-border-bottom{border-bottom:1px solid #0687D1;}
 

src/view/Vlayer/VlayerEdit.jsx

@@ -31,12 +31,17 @@ export default class VlayerEdit extends React.Component {
 		};
 
 		this.handle = {
+			...handle,
 			changeId:(newId)=>{
 				// route to new id
 				Mlayer.setIn(this.id,['id'],newId).then(()=>{
+					this.setState({editId:false});
 					handle.routeReplace('layer/'+newId);
 				});
 			},
+			blurId:()=>{
+				this.setState({editId:false});
+			},
 			jsonChange:(json)=>{
 				Mlayer.set(this.id,json);
 			},
@@ -48,6 +53,9 @@ export default class VlayerEdit extends React.Component {
 			},
 			clickOperation:()=>{
 				this.setState({mode:'operation'});
+			},
+			editIdShow:()=>{
+				this.setState({editId:true});
 			}
 		};
 
@@ -63,6 +71,8 @@ export default class VlayerEdit extends React.Component {
 
 		const layer = Mlayer.get(this.id);
 
+		if (!layer) return <div/>
+
 		const layerError = error.getIn(['layers',Mlayer.getInd(this.id)]);
 
 		//console.log('layer err:',error);
@@ -76,7 +86,7 @@ export default class VlayerEdit extends React.Component {
 		let section;
 		switch (this.state.mode){
 			case 'json':
-				section = <VlayerEditJSON handle={{change:this.handle.jsonChange}} error={layerError} layer={layer}/>;
+				section = <VlayerEditJSON handle={{...handle,change:this.handle.jsonChange}} error={layerError} layer={layer}/>;
 				break;
 			case 'edit':
 				section = <VlayerEditor key={this.id} handle={handle} error={layerError} layer={layer}/>;
@@ -87,24 +97,24 @@ export default class VlayerEdit extends React.Component {
 		}
 
 		return <div className="">
-			{this.state.editId?
-				<VlayerEditId handle={{change:this.handle.changeId}} style={style} error={layerError} layer={layer}/>
-			:
-				<h2 className="px-2 py-1 m-0 text-nav bg-light row">
-					<div className="text-overflow-ellipsis flex-2">
-						{layer.get('id')}
+			<h2 className="px-2 py-1 m-0 text-nav bg-light row">
+				<div className="text-overflow-ellipsis flex-2 edit-name mr-2" onClick={this.handle.editIdShow}>
+					{this.state.editId ? 
+						<VlayerEditId handle={{change:this.handle.changeId,blur:this.handle.blurId}} style={style} error={layerError} layer={layer}/>
+						:
+						layer.get('id')
+					}
+				</div>
+				<div className="text-right">
+					<div onClick={this.handle.clickEdit} className={'d-inline-block layer-nav-link px-1 '+(this.state.mode === 'edit' ? 'active': '')}>
+						<i className="material-icons md-18 icon-btn gray">mode_edit</i>
 					</div>
-					<div className="text-right">
-						<div onClick={this.handle.clickEdit} className={'d-inline-block layer-nav-link px-1 '+(this.state.mode === 'edit' ? 'active': '')}>
-							<i className="material-icons md-18 icon-btn gray">mode_edit</i>
-						</div>
-						<div onClick={this.handle.clickJson} className={'d-inline-block layer-nav-link px-1 '+(this.state.mode === 'json' ? 'active': '')}>
-							<i className="material-icons md-18 icon-btn gray">code</i>
-						</div>
-						
+					<div onClick={this.handle.clickJson} className={'d-inline-block layer-nav-link px-1 '+(this.state.mode === 'json' ? 'active': '')}>
+						<i className="material-icons md-18 icon-btn gray">code</i>
 					</div>
-				</h2>
-			}
+					
+				</div>
+			</h2>
 			<div>
 			{section}
 			</div>

src/view/Vlayer/VlayerEditId.jsx

@@ -6,15 +6,23 @@ export default class Vsource extends React.Component {
 	constructor(props) {
 		super(props);
 
-		const {handle} = this.props;
+		const {handle,layer} = this.props;
 
-		this.state = {};
+		this.state = {
+			value:layer.get('id')
+		};
 
 		this.handle = {
-			change:(val)=>{
+			change:(f)=>{
 				//this.setState({value:e.target.value});
 				//handle.change(e.target.value);
-				if (handle.change) handle.change(val);
+				this.setState({value:f.value})
+			},
+			enter:(f)=>{
+				if (handle.change) handle.change(this.state.value);
+			},
+			blur:()=>{
+				if (handle.blur) handle.blur();
 			}
 		};
 
@@ -29,10 +37,12 @@ export default class Vsource extends React.Component {
 		//console.log('active layer:',layer);
 
 		const idField = {
-			label:'ID',
+			type:'string',
 			name:'id',
-			value:layer.get('id'),
-			placeholder:'Unique ID for layer'
+			value:this.state.value,
+			placeholder:'Unique ID for layer',
+			controlled:false,
+			autoFocus:true
 		};
 		return <div>
 			<Vfield type="string" handle={this.handle} field={idField} />

src/view/Vlayer/VlayerEditJSON.jsx

@@ -7,6 +7,7 @@ import MapboxError from '../../utility/MapboxError';
 import Vfield from '../Vfield';
 import Valert from '../Valert';
 
+import Mlayer from '../../model/Mlayer';
 
 export default class VlayerEditJSON extends React.Component {
 	static propTypes = {
@@ -17,10 +18,21 @@ export default class VlayerEditJSON extends React.Component {
 	constructor(props) {
 		super(props);
 
-		const {handle} = this.props;
+		const {layer, handle} = this.props;
+
+		this.layerId = layer.get('id');
 
 		this.handle = {
 			change(code){
+				//check if id was changed, if so navigate to page that matches id
+				console.log('change code:',code,this.layerId);
+				if (this.layerId !== code.id){
+					Mlayer.set(this.layerId,code).then(()=>{
+						this.layerId = code.id;
+						handle.routeReplace('layer/'+code.id);
+					});
+					return;
+				}
 				handle.change(code);
 			}
 		};
@@ -33,6 +45,8 @@ export default class VlayerEditJSON extends React.Component {
 	render (){
 		const {layer, error} = this.props;
 
+		this.layerId = layer.get('id');
+
 		// convert error to JSON position
 		//console.log('json error:',error);
 

src/view/Vproperty/index.jsx

@@ -282,35 +282,5 @@ export default class Vproperty extends React.Component {
 
 		</div>;
 
-
-
-		
-
-		
-
-		
-
-
-		/*
-		if (List.isList(property.value)){
-			// render an expression field
-			return <Vfield field={{
-				type:'expression',
-				name:'type',	
-				label:'Type',
-				value:property.value,
-				placeholder:spec.doc,
-				controlled:false
-			}} key="type" handle={handle}/>
-		}
-
-		// if value is an ary, use the expression field
-
-		// else use the spec type
-
-
-		return <div className="">
-		</div>;
-		*/
 	}
 };