.eg-grid-header-row { font-weight: bold; }
.eg-grid div.row {border-bottom: 2px solid #ddd}
.eg-grid-content-row:nth-child(even) {background-color: rgb(248, 248, 248);}
- .col-md-1 { overflow: hidden }
+ .eg-grid-content-column { overflow: hidden }
</style>
<div class="container-fluid eg-grid" ng-class="{'eg-grid-scroll' : isScroll}">
+
+ <!-- import embedded eg-grid-field defs via no-op transclude -->
+ <div ng-transclude></div>
+
+ <!-- row of actions (column picker, etc.) -->
<div class="row eg-grid-action-row">
<div class="col-md-1 col-md-offset-11 text-right">
<div class="btn-group text-left">
</div>
</div>
</div>
- <!-- import any embedded eg-grid-field defs via no-op transclude -->
- <div ng-transclude></div>
+
+ <!-- column header -->
<div class="row eg-grid-header-row">
- <div class="col-md-1 eg-grid-header-cell"
- ng-repeat="column in dataList.allColumns"
- ng-show="dataList.displayColumns[column.name]">
- <a href="javascript:;"
- ng-click="sortOn(column.name)">{{column.label}}</a>
+ <div class="col-md-1 eg-grid-header-cell">
+ <div class="col-md-6">
+ <input type='checkbox'/>
+ </div>
+ <div class="col-md-6">#</div>
+ </div>
+ <div ng-repeat="columnGroup in dataList.groupedColumns">
+ <div class="col-md-1 eg-grid-header-cell">
+ <div ng-repeat="column in columnGroup">
+ <div class="eg-grid-content-column"
+ ng-class="{'col-md-6' : columnGroup.length > 1}">
+ <a href="javascript:;"
+ ng-click="sortOn(column.name)">{{column.label}}</a>
+ </div>
+ </div>
+ </div>
</div>
</div>
+
+ <!-- data rows -->
<div class="row eg-grid-content-row"
ng-repeat="item in dataList.items">
+ <div class="col-md-1 eg-grid-content-cell">
+ <div class="col-md-6">
+ <input type='checkbox'/>
+ </div>
+ <div class="col-md-6">{{$index + 1}}</div>
+ </div>
+ <div ng-repeat="columnGroup in dataList.groupedColumns">
+ <div class="col-md-1 eg-grid-header-cell">
+ <div ng-repeat="column in columnGroup">
+ <div class="eg-grid-content-column"
+ ng-class="{'col-md-6' : columnGroup.length > 1}">
+ {{dataList.fieldValue(item, column.name) | egGridvalueFilter:column}}
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!--
<div class="col-md-1 eg-grid-content-cell"
ng-repeat="column in dataList.allColumns"
ng-show="dataList.displayColumns[column.name]">
- {{dataList.fieldValue(item, column.name) | egGridvalueFilter:column}}
+ <div ng-class="{'col-md-6' : column.shared}">
+ {{dataList.fieldValue(item, column.name) | egGridvalueFilter:column}}
+ </div>
</div>
+ -->
</div>
</div>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- TODO: remote hosted CSS should be hosted locally instead -->
- <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" />
+ <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
+ <!--
+ <link rel="stylesheet" href="/bootstrap-custom/css/bootstrap.min.css" />
+ -->
<link rel="stylesheet" href="[% ctx.base_path %]/staff/css/style.css" />
</head>
<body>
<eg-grid-field name="shortname" label="[% l('Shortname Manual Label') %]"></eg-grid-field>
<eg-grid-field name="name"></eg-grid-field>
<eg-grid-field name="id"></eg-grid-field>
- <eg-grid-field name="depth" path="ou_type.depth"></eg-grid-field>
- <eg-grid-field name="parent_ou_id" path="parent_ou.id"></eg-grid-field>
+ <eg-grid-field name="depth" path="ou_type.depth"></eg-grid-field>
+ <eg-grid-field name="billing_addr" path="billing_address.street1"></eg-grid-field>
+ <eg-grid-field name="opac_visible"></eg-grid-field>
+ <eg-grid-field name="phone"></eg-grid-field>
+ <eg-grid-field name="email"></eg-grid-field>
+ <eg-grid-field name="type" path="ou_type.name"></eg-grid-field>
+ <eg-grid-field name="can_have_vols" path="ou_type.can_have_vols"></eg-grid-field>
+ <eg-grid-field name="can_have_users" path="ou_type.can_have_users"></eg-grid-field>
+ <eg-grid-field name="parent_ou_id" path="parent_ou.id"></eg-grid-field>
<eg-grid-field name="parent_ou_name" path="parent_ou.name" label="[% l('Parent Org') %]"></eg-grid-field>
+ <eg-grid-field name="parent_ou_depth" path="parent_ou.ou_type.depth" label="[% l('Parent Depth') %]"></eg-grid-field>
+ <eg-grid-field name="parent_ou_shortname" path="parent_ou.shortname" label="[% l('Parent SN') %]"></eg-grid-field>
</eg-grid>
+<!--
+
<h1>AutoGrid w/ Auto Fields</h1>
<eg-grid
query="testGridQuery"
auto-fields="true"/>
+-->
// if we stick w/ Bootstrap grids for display, we're
// limited to 12 visible columns at a time.
- this.maxFieldCount = 12;
+ //this.maxFieldCount = 12;
+ this.maxFieldCount = 11;
$scope.dataList = egList.create();
* an IDL field via compileAutoFields.
*/
this.addColumn = function(fieldSpec) {
+
+ /*
+ if (Object.keys($scope.dataList.displayColumns).length
+ >= self.maxFieldCount) {
+ fieldSpec.display = false;
+ }
+ */
+
var field = {
name : fieldSpec.name,
label : fieldSpec.label,
path : fieldSpec.path,
datatype : fieldSpec.datatype,
- display : (fieldSpec.display === false) ? false : true
+ display : (fieldSpec.display !== false)
};
if (!field.path) field.path = field.name;
field = self.absorbField(field);
}
}
}
-
- // once we exceeed the number of display fields,
- // the others are added as hidden fields, accessible
- // via the column picker.
- if ($scope.dataList.allColumns.length >= self.maxFieldCount) {
- console.log('setting to false ' + field.name);
- field.display = false;
- }
self.addColumn(field);
}
);
return new_field;
}
+ // EXPERIMENT
+ this.applyColumnLayout = function() {
+ var cols = $scope.dataList.allColumns;
+ var overflow = 2 * (cols.length - this.maxFieldCount);
+ var groupedColumns = [];
+
+ current_bunch = [];
+ angular.forEach(cols, function(col, idx) {
+ current_bunch.push(col);
+ if (idx < overflow - 1 || current_bunch.length > 1) {
+ groupedColumns.push(current_bunch);
+ current_bunch = [];
+ }
+ });
+
+ $scope.dataList.groupedColumns = groupedColumns;
+ }
+
/**
* For stock grids, makes a flattened_search call to retrieve
* the requested values.
*/
$scope.fetchData = function() {
$scope.dataList.resetPageData();
+ self.applyColumnLayout();
if (self.dataFetcher)
return self.dataFetcher();
projects / working / Evergreen.git / commitdiff