Support per user track changes (proof of concept)

services/web/app/coffee/Features/Project/ProjectController.coffee

@@ -278,7 +278,7 @@ module.exports = ProjectController =
 						pdfViewer : user.ace.pdfViewer
 						syntaxValidation: user.ace.syntaxValidation
 					}
-					trackChangesEnabled: !!project.track_changes
+					trackChangesState: project.track_changes
 					showTrackChangesOnboarding: !!showTrackChangesOnboarding
 					privilegeLevel: privilegeLevel
 					chatUrl: Settings.apis.chat.url

services/web/app/coffee/models/Project.coffee

@@ -32,7 +32,7 @@ ProjectSchema = new Schema
 	archived          : { type: Boolean }
 	deletedDocs       : [DeletedDocSchema]
 	imageName         : { type: String }
-	track_changes     : { type: Boolean }
+	track_changes     : { type: Object }
 
 ProjectSchema.statics.getProject = (project_or_id, fields, callback)->
 	if project_or_id._id?

services/web/app/views/project/editor.pug

@@ -106,7 +106,7 @@ block requirejs
 	//- We need to do .replace(/\//g, '\\/') do that '</script>' -> '<\/script>'
 	//- and doesn't prematurely end the script tag.
 	script#data(type="application/json").
-		!{JSON.stringify({userSettings: userSettings, user: user}).replace(/\//g, '\\/')}
+		!{JSON.stringify({userSettings: userSettings, user: user, trackChangesState: trackChangesState}).replace(/\//g, '\\/')}
 
 	script(type="text/javascript").
 		window.data = JSON.parse($("#data").text());
@@ -118,7 +118,7 @@ block requirejs
 		window.csrfToken = "!{csrfToken}";
 		window.anonymous = #{anonymous};
 		window.maxDocLength = #{maxDocLength};
-		window.trackChangesEnabled = #{trackChangesEnabled};
+		window.trackChangesState = data.trackChangesState;
 		window.showTrackChangesOnboarding = #{!!showTrackChangesOnboarding};
 		window.wikiEnabled = #{!!(settings.apis.wiki && settings.apis.wiki.url)};
 		window.requirejs = {

services/web/app/views/project/editor/review-panel.pug

@@ -46,21 +46,46 @@
 			is-loading="reviewPanel.dropdown.loading"
 			permissions="permissions"
 		)
-		span.review-panel-toolbar-label(ng-if="permissions.write")
+		div
-			span(ng-click="toggleTrackChanges(true)", ng-if="editor.wantTrackChanges === false") !{translate("track_changes_is_off")}
+			span On for everyone
-			span(ng-click="toggleTrackChanges(false)", ng-if="editor.wantTrackChanges === true") !{translate("track_changes_is_on")}
 			review-panel-toggle(
-				ng-if="editor.wantTrackChanges == editor.trackChanges"
+				ng-model="reviewPanel.trackChangesOnForEveryone"
-				ng-model="editor.wantTrackChanges"
+				on-toggle="toggleTrackChangesForEveryone"
-				on-toggle="toggleTrackChanges"
 				disabled="!project.features.trackChanges"
 				on-disabled-click="openTrackChangesUpgradeModal"
 			)
-		span.review-panel-toolbar-label.review-panel-toolbar-label-disabled(ng-if="!permissions.write")
+		div
-			span(ng-if="editor.wantTrackChanges === false") !{translate("track_changes_is_off")}
+			span You {{user.id}}
-			span(ng-if="editor.wantTrackChanges === true") !{translate("track_changes_is_on")}
+			//- Missing on-toggle attribute because we also need to pass user_id to the toggleTrackChangesForUser
-		span.review-panel-toolbar-spinner(ng-if="editor.wantTrackChanges != editor.trackChanges")
+			//- method, and it's not clear how.
-			i.fa.fa-spin.fa-spinner
+			review-panel-toggle(
+				ng-model="reviewPanel.trackChangesState[user.id]"
+				disabled="!project.features.trackChanges"
+				on-disabled-click="openTrackChangesUpgradeModal"
+			)
+		div(ng-repeat="member in project.members")
+			span {{member.email}} {{member._id}}
+			review-panel-toggle(
+				ng-model="reviewPanel.trackChangesState[member._id]"
+				disabled="!project.features.trackChanges"
+				on-disabled-click="openTrackChangesUpgradeModal"
+			)
+		
+		//- span.review-panel-toolbar-label(ng-if="permissions.write")
+		//- 	span(ng-click="toggleTrackChanges(true)", ng-if="editor.wantTrackChanges === false") !{translate("track_changes_is_off")}
+		//- 	span(ng-click="toggleTrackChanges(false)", ng-if="editor.wantTrackChanges === true") !{translate("track_changes_is_on")}
+		//- 	review-panel-toggle(
+		//- 		ng-if="editor.wantTrackChanges == editor.trackChanges"
+		//- 		ng-model="editor.wantTrackChanges"
+		//- 		on-toggle="toggleTrackChanges"
+		//- 		disabled="!project.features.trackChanges"
+		//- 		on-disabled-click="openTrackChangesUpgradeModal"
+		//- 	)
+		//- span.review-panel-toolbar-label.review-panel-toolbar-label-disabled(ng-if="!permissions.write")
+		//- 	span(ng-if="editor.wantTrackChanges === false") !{translate("track_changes_is_off")}
+		//- 	span(ng-if="editor.wantTrackChanges === true") !{translate("track_changes_is_on")}
+		//- span.review-panel-toolbar-spinner(ng-if="editor.wantTrackChanges != editor.trackChanges")
+		//- 	i.fa.fa-spin.fa-spinner
 
 	.rp-entry-list(
 		review-panel-sorted

services/web/public/coffee/ide/editor/EditorManager.coffee

@@ -37,10 +37,6 @@ define [
 			@$scope.$watch "editor.wantTrackChanges", (value) =>
 				return if !value?
 				@_syncTrackChangesState(@$scope.editor.sharejs_doc)
-			
-			@$scope.$watch "project.features.trackChanges", (trackChangesFeature) =>
-				return if !trackChangesFeature?
-				@$scope.editor.wantTrackChanges = window.trackChangesEnabled and trackChangesFeature
 
 		autoOpenDoc: () ->
 			open_doc_id = 

services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee

@@ -11,7 +11,10 @@ define [
 			CUR_FILE : "cur_file"
 			OVERVIEW : "overview"
 
+		window.reviewPanel = # DEBUG LINE
 		$scope.reviewPanel =
+			trackChangesState: {}
+			trackChangesOnForEveryone: false
 			entries: {}
 			resolvedComments: {}
 			hasEntries: false
@@ -565,24 +568,90 @@ define [
 						
 		$scope.gotoEntry = (doc_id, entry) ->
 			ide.editorManager.openDocId(doc_id, { gotoOffset: entry.offset })
+			
+		applyTrackChangesStateToClient = (state) ->
+			console.log "[applyTrackChangesStateToClient]", state
+			if typeof state is "boolean"
+				console.log "[applyTrackChangesStateToClient]", "BOOLEAN"
+				$scope.reviewPanel.trackChangesOnForEveryone = state
+				$scope.reviewPanel.trackChangesState = {}
+				$scope.editor.wantTrackChanges = state
+			else
+				$scope.reviewPanel.trackChangesOnForEveryone = false
+				$scope.reviewPanel.trackChangesState = state
+				# State is an object with user_ids as keys
+				if state[ide.$scope.user.id]
+					$scope.editor.wantTrackChanges = true
+				else
+					$scope.editor.wantTrackChanges = false
 		
-		$scope.toggleTrackChanges = (value) ->
+		applyClientTrackChangesStateToServer = () ->
+			if $scope.reviewPanel.trackChangesOnForEveryone
+				data = {on : true}
+			else
+				data = {on_for: $scope.reviewPanel.trackChangesState}
+			console.log "[applyClientTrackChangesStateToServer]", data
+			data._csrf = window.csrfToken
+			$http.post "/project/#{$scope.project_id}/track_changes", data
+		
+		setTrackChangesState = (state) ->
+			console.log "[setTrackChangesState]", state
 			if $scope.project.features.trackChanges
-				$scope.editor.wantTrackChanges = value
+				applyTrackChangesStateToClient(state)
-				$http.post "/project/#{$scope.project_id}/track_changes", {_csrf: window.csrfToken, on: value}
+				applyClientTrackChangesStateToServer()
-				event_tracking.sendMB "rp-trackchanges-toggle", { value }
+				event_tracking.sendMB "rp-trackchanges-toggle", { state }
 			else
 				$scope.openTrackChangesUpgradeModal()
-
-		$scope.toggleTrackChangesFromKbdShortcut = () ->
-			if $scope.editor.wantTrackChanges
-				$scope.toggleTrackChanges false
-			else 
-				$scope.toggleTrackChanges true
 		
-		ide.socket.on "toggle-track-changes", (value) ->
+		$scope.toggleTrackChangesForEveryone = (onForEveryone) ->
+			console.log "[toggleTrackChangesForEveryone]", onForEveryone
+			setTrackChangesState(onForEveryone)
+		
+		window.toggleTrackChangesForUser = # DEBUG LINE
+		$scope.toggleTrackChangesForUser = (user_id) ->
+			state = $scope.reviewPanel.trackChangesState
+			if state[user_id]?
+				delete state[user_id]
+			else
+				state[user_id] = true
+			setTrackChangesState(state)				
+
+		ide.socket.on "toggle-track-changes", (state) ->
+			console.log "[ide toggle-track-changes]", state
 			$scope.$apply () ->
-				$scope.editor.wantTrackChanges = value
+				applyTrackChangesStateToClient(state)
+
+		# window.toggleTrackChangesForUser = # DEBUG LINE, remove after dev
+		# $scope.toggleTrackChangesForUser = (user_id) ->
+		# 	state = $scope.reviewPanel.trackChangesState
+		# 	if state == true
+		# 		return # On for everyone, nothing to do
+		# 	else if state == false or !state?
+		# 		state = {}
+		# 
+		# 	if state[user_id]
+		# 		delete state[user_id]
+		# 	else
+		# 		state[user_id] = true
+		# 	setTrackChangesState(state)
+
+		# Not sure what the kbd shortcut should do now?
+		# $scope.toggleTrackChangesFromKbdShortcut = () ->
+		# 	if $scope.editor.wantTrackChanges
+		# 		$scope.toggleTrackChanges false
+		# 	else 
+		# 		$scope.toggleTrackChanges true
+
+		_inited = false
+		ide.$scope.$on "project:joined", () ->
+			console.log "project joined, setting track changes state from window"
+			return if _inited
+			project = ide.$scope.project
+			if project.features.trackChanges
+				applyTrackChangesStateToClient(window.trackChangesState)
+			else
+				applyTrackChangesStateToClient(false)
+			_inited = true
 
 		_refreshingRangeUsers = false
 		_refreshedForUserIds = {}

services/web/public/stylesheets/app/editor/review-panel.less

@@ -124,14 +124,15 @@
 .review-panel-toolbar {
 	display: none;
 	.rp-size-expanded & {
-		display: flex;
+		display: block;
+		// display: flex; TODO
 		align-items: center;
 		justify-content: space-between;
 		padding: 0 5px;
 	}
 
 	position: relative;
-	height: @rp-toolbar-height;
+	// height: @rp-toolbar-height; TODO
 	border-bottom: 1px solid @rp-border-grey;
 	background-color: @rp-bg-dim-blue;
 	text-align: center;