FEATURE: Rename a topic (Hypertopic#48).

Clic on name to change, Enter or quit the input to validate, Escape to
cancel.

src/backgroundScripts/background.js

@@ -105,6 +105,9 @@ browser.runtime.onMessage.addListener(async (msg) => {
 		case 'removeHighlight':
 			res=model.removeHighlight(msg.uri,msg.viewpoint,msg.topic,msg.fragId);
 			break;
+		case 'renameTopic':
+			res=model.renameTopic(msg.viewpoint,msg.topic,msg.newName);
+			break;
 		case 'setHLNumber':
 			if (msg.count && msg.tabId) {
 				res=setHLNumber(msg.count,msg.tabId);

src/backgroundScripts/model.js

@@ -81,11 +81,32 @@ const model = (function () {
 				if (fragId in item.highlights) {
 					delete item.highlights[fragId];
 					return db.post(item);
-				} else {
 				}
 			});
 	}
 
+	const renameTopic = (vpId,topicId,newName) => {
+		return db.get({_id:vpId})
+		.catch(x => {
+			return {_id:vpId,topics:{},viewpoint_name:"",users:[]};
+		})
+		.then(vp => {
+			if (vp.topics.constructor === Array) vp.topics={};
+			vp.viewpoint_name=vp.viewpoint_name || "Sans nom";
+			vp.users=vp.users || [];
+			let topic=vp.topics[topicId] || {};
+			if (!topic.name || topic.name != newName) {
+				topic.name=newName;
+				vp.topics[topicId]=topic;
+				return db.post(vp).then( x => {
+					return topic;
+				});
+			} else {
+				return topic;
+			}
+		});
+	}
+
 	/*
 	 * Fetch the item(s) for the given resource (URI)
 	 */
@@ -244,7 +265,8 @@ const model = (function () {
 		isWhitelisted,
 		getResource,
 		createHighlight,
-		removeHighlight
+		removeHighlight,
+		renameTopic
 	};
 }());
 

src/sidebar/jsx/Display.jsx

@@ -10,6 +10,7 @@ export default class Display extends React.Component {
 		browser.contextMenus.removeAll();
 		this._deleteFrag=this._deleteFrag.bind(this);
 		this._createFrag=this._createFrag.bind(this);
+		this._renameTopic=this._renameTopic.bind(this);
 		this._contextMenuListener=this._contextMenuListener.bind(this);
 	}
 
@@ -86,6 +87,18 @@ export default class Display extends React.Component {
 		}
 	}
 
+	_renameTopic(topic,newName) {
+		let viewpoint=this.state.vpId;
+		return browser.runtime.sendMessage({
+			aim:'renameTopic',viewpoint,topic,newName
+		}).then(x => {
+			this.setState(previousState => {
+				previousState.vp.topics[topic].name=newName;
+				return previousState;
+			});
+		});
+	}
+
 	async _highlight(labels, fragments) {
 		return this._loadScript().then(_ => browser.tabs.sendMessage(this.props.tabId, {
 			aim: 'highlight',
@@ -127,7 +140,7 @@ export default class Display extends React.Component {
       let vp = this.props.res.viewpoints[id];
       let vpDetails = this._vpDetails.bind(this, vp, id);
       return (
-        <Viewpoint key={id} details={vp} onClick={vpDetails}
+        <Viewpoint key={id} id={id} details={vp} onClick={vpDetails}
         color={labels[id].color} />
       );
     });
@@ -153,7 +166,8 @@ export default class Display extends React.Component {
 		return Object.keys(this.state.vp.topics).map((id,i) =>
 			<Topic details={this.state.vp.topics[id]} id={id} index={i} vpId={this.state.vpId}
 				color={labels[id].color} name={this.state.vp.topics[id].name}
-				createFrag={this._createFrag} deleteFrag={this._deleteFrag} />
+				createFrag={this._createFrag} deleteFrag={this._deleteFrag}
+				renameTopic={this._renameTopic} />
 		);
 	}
 

src/sidebar/jsx/Topic.jsx

@@ -45,9 +45,51 @@ class Topic extends React.Component {
 		let name = this.props.name || ("unknown "+(this.props.index+1));
 		let count = this.props.details.length;
 		let onClick = this._handleClick;
+
+		let nameControl;
+
+		let setEdit = (e) => {
+			e.stopPropagation();
+			this.setState({edit:true});
+		}
+
+		if (this.state.edit) {
+
+			let endEdit = () => {
+				this.setState({edit:false});
+			}
+
+			let changeName = (newName) => {
+				if (newName!=this.props.name) {
+					this.props.renameTopic(this.props.id,newName).finally(endEdit);
+				} else {
+					endEdit();
+				}
+			}
+
+			let onKeyPress = (e) => {
+				if (e.key === 'Enter') {
+					changeName(e.target.value);
+				}
+			}
+			let onKeyUp = (e) => {
+				if (e.key === 'Escape') {
+					endEdit();
+				}
+			}
+
+			let onBlur = (e) => {
+				e.stopPropagation();
+				return changeName(e.target.value);
+			}
+			let dontClose = (e) => e.stopPropagation();
+			nameControl=<input onBlur={onBlur} onKeyPress={onKeyPress} onKeyUp={onKeyUp} onClick={dontClose} defaultValue={name}/>;
+		} else {
+			nameControl=<span onClick={setEdit}>{name}</span>;
+		}
 		return (<div>
 			<h3 style={style} className="topic" onClick={onClick}>
-				{name} <small class="counter">{count}</small>
+				{nameControl} <small class="counter">{count}</small>
 			</h3>
 			{this.state.open && <div class="fragments">{fragments}</div>}
 		</div>);