This sits above the grid and contains the column picker, etc.
-->
<div class="eg-grid-row eg-grid-action-row">
+ <div style="flex:1">
+ <div class="eg-grid-primary-label">{{gridLabel}}</div>
+ </div>
<!-- column picker -->
<div class="btn-group column-picker">
</div>
</div>
-<!--
-<br/>
--->
+<style>
+ /* MOVE ME */
+ .eg-grid-drag-handle {
+ width:2px;
+ user-select: none;
+ cursor: move;
+ }
+ .eg-grid-drag-handle:hover {
+ /*border:1px dashed #888;*/
+ color: red;
+ }
+
+</style>
<div ng-show="list.items.length == 0"
class="alert alert-info">[% l('No Items To Display') %]</div>
<!-- ================== -->
<!-- Column headers row -->
<div class="eg-grid-row eg-grid-header-row">
- <div class="eg-grid-cell eg-grid-cell-stock">[% l('#') %]</div>
- <div class="eg-grid-cell eg-grid-cell-stock">
- <div><input type='checkbox' ng-click="list.toggleSelectAll()"/></div>
+ <div class="eg-grid-cell eg-grid-cell-stock" style="flex:{{indexFlex}}">
+ <div eg-drag-source eg-drag-dest column="+index">[% l('#') %]</div>
+ </div>
+ <div class="eg-grid-cell eg-grid-cell-stock" style="flex:{{selectorFlex}}">
+ <div eg-drag-source eg-drag-dest column="+selector">
+ <input type='checkbox' ng-click="list.toggleSelectAll()"/>
+ </div>
</div>
<div class="eg-grid-cell"
+ eg-drag-dest column="{{column.name}}"
ng-repeat="column in list.allColumns"
style="flex:{{column.flex}}"
ng-show="list.displayColumns[column.name]">
- <a href="javascript:;" ng-click="sortOn(column.name)">{{column.label}}</a>
- <div style="height:100%;color:black">
- foo
-
- </div>
+ <a eg-drag-source column="{{column.name}}"
+ href='' ng-click="sortOn(column.name)">{{column.label}}</a>
</div>
</div>
<!-- ============================= -->
<!-- Inline grid configuration row -->
<div class="eg-grid-row eg-grid-conf-row" ng-show="showGridConf">
- <div class="eg-grid-cell eg-grid-cell-conf-header">
+ <div class="eg-grid-cell eg-grid-cell-conf-header"
+ style="flex:{{indexFlex + selectorFlex}}">
<div class="eg-grid-conf-cell-entry">[% l('Expand') %]</div>
<div class="eg-grid-conf-cell-entry">[% l('Shrink') %]</div>
<div class="eg-grid-conf-cell-entry">[% l('Sort') %]</div>
<div class="eg-grid-row"
ng-repeat="item in list.items"
ng-class="{'eg-grid-row-selected' : itemIsSelected(item)}">
- <div class="eg-grid-cell eg-grid-cell-stock"
+ <div class="eg-grid-cell eg-grid-cell-stock" style="flex:{{indexFlex}}"
ng-click="handleRowClick($event, item)">
{{$index + 1 + list.pageOffset}}
</div>
- <div class="eg-grid-cell eg-grid-cell-stock">
+ <div class="eg-grid-cell eg-grid-cell-stock" style="flex:{{selectorFlex}}">
<!-- ng-click=handleRowClick here has unintended
consequences and is unnecessary, avoid it -->
<div>
// grid configuration UI. This is primarily used by
// UIs where the data is ephemeral and can only be
// single-display-column sorted.
- disableSortPriority : '@'
+ disableSortPriority : '@',
+
+ // optional primary grid label
+ mainLabel : '@'
},
link : function(scope, element, attrs) {
templateUrl : '/eg/staff/parts/t_autogrid', // TODO: avoid abs url
controller : // TODO: reqs list
- function($scope, $timeout, $modal, egIDL, egAuth, egNet, egList) {
+ function($scope, $timeout, $modal, $document, $window, egIDL, egAuth, egNet, egList) {
var self = this;
- // setup function, called at the end of the controller
+ // setup function. called at the end of the controller
this.init = function() {
self.limit = 25;
self.ofset = 0;
+ $scope.indexFlex = 1;
+ $scope.selectorFlex = 1;
+ $scope.gridLabel = $scope.mainLabel;
+
if (!$scope.query) {
console.error("egGrid requires a query");
return;
*/
this.compileAutoFields = function() {
if ($scope.list.allColumns.length) return;
+ var idlClass = egIDL.classes[$scope.idlClass];
- $scope.idField = $scope.idField ||
- egIDL.classes[$scope.idlClass].pkey;
+ $scope.idField = $scope.idField || idlClass.pkey;
+
+ if (!$scope.gridLabel) {
+ $scope.gridLabel = idlClass.label;
+ }
angular.forEach(
- egIDL.classes[$scope.idlClass].fields.sort(
+ idlClass.fields.sort(
function(a, b) { return a.name < b.name ? -1 : 1 }),
function(field) {
if (field.virtual) return;
];
}
+ this.onColumnDrag = function(col) {
+ // track which column we're dragging
+ self.dragColumn = col;
+ }
+
+ // if the target column does not match the source column,
+ // increase the size of the source column.
+ this.onColumnDragOver = function(target) {
+ if (angular.isUndefined(target)) return;
+ if (target == self.dragColumn) return;
+ if (self.dragColumn == '+index') {
+ $scope.indexFlex += 1;
+ } else if (self.dragColumn == '+selector') {
+ $scope.selectorFlex += 1;
+ } else {
+ var column = $scope.list.findColumn(self.dragColumn);
+ $scope.modifyColumnFlex(column, 1);
+ }
+ $scope.$apply(); // needed
+ }
+
this.init();
}
};
};
})
+/** Simplified dnd directives for grid column controls.
+ * Extract these out if the can be made generic enough
+ */
+
+.directive('egDragSource', function() {
+ return {
+ restrict : 'A',
+ require : '^egGrid',
+ link : function(scope, element, attrs, egGridCtrl) {
+ angular.element(element).attr('draggable', 'true');
+ element.bind('dragstart', function(e) {
+ var col = angular.element(e.target).attr('column');
+ egGridCtrl.onColumnDrag(col);
+ });
+ }
+ };
+})
+
+.directive('egDragDest', function() {
+ return {
+ restrict : 'A',
+ require : '^egGrid',
+ link : function(scope, element, attrs, egGridCtrl) {
+ element.bind('dragover', function(e) {
+ console.log('dragover');
+ e.stopPropagation();
+ e.preventDefault();
+ //e.dataTransfer.dropEffect = 'copy';
+ var col = angular.element(e.target).attr('column');
+ egGridCtrl.onColumnDragOver(col);
+ });
+ }
+ };
+})
+
/**
* Translates bare IDL object values into display values.
* 1. Passes dates through the angular date filter
projects / working / Evergreen.git / commitdiff