add opt groups to table col selector

beat/web/reports/static/reports/app/directives/groupTableFieldSelector.js

@@ -75,6 +75,18 @@ angular.module('reportApp')
 				return !isRepeat;
 			};
 
+			scope.tableablesGroups = () => {
+				let groupNames = scope.tableables()
+				.filter(f => f.includes('.'))
+				.map(f => f.split('.')[0]);
+
+				console.log(groupNames);
+
+				return Array.from(new Set(groupNames)).sort();
+			};
+
+			scope.subfieldName = (field) => field.includes('.') ? field.split('.').slice(1).join('.') : field;
+
 			console.log(scope.buttonText);
 		},
 		template: `
@@ -85,7 +97,22 @@ angular.module('reportApp')
 <div class='dropdown-menu' ng-click="$event.stopPropagation();">
 	<h4>Select columns to show in Table</h4>
 	<select multiple ng-model='colsSelected'>
-		<option ng-repeat='fName in tableables()' ng-if='isUniqueTableable(fName)'>{{ fName }}</option>
+		<optgroup label='General'>
+			<option
+				ng-repeat='fName in tableables()'
+				ng-if="isUniqueTableable(fName) && !fName.includes('.')"
+				value='{{ fName }}'>
+				{{ fName }}
+			</option>
+		</optgroup>
+		<optgroup ng-repeat='gName in tableablesGroups()' label='{{ gName }}'>
+			<option
+				ng-repeat='fName in tableables()'
+				ng-if='isUniqueTableable(fName) && fName.startsWith(gName)'
+				value='{{ fName }}'>
+				{{ subfieldName(fName) }}
+			</option>
+		</optgroup>
 	</select>
 	<button class='btn btn-default' ng-click='clickButton($event)'>{{ buttonText }}</button>
 </div>