Move magic-search bar out of the table structure
This patch moves the magic-search bar to out of the table structure. Also this patch allows much flexibility in layout. Change-Id: I0312d79143515b0a82a2b17776fbb502a36b6b03 Closes-Bug: #1558772
This commit is contained in:
shu-mutou
parent
5b8f93deb3
commit
3bd93a817a
|
|
@ -1,144 +1,134 @@
|
|||
<table ng-controller="containersBaymodelsTableController as table"
|
||||
hz-table ng-cloak
|
||||
st-table="table.baymodels"
|
||||
st-safe-src="table.baymodelsSrc"
|
||||
default-sort="name"
|
||||
default-sort-reverse="false"
|
||||
class="table table-striped table-rsp table-detail">
|
||||
<div>
|
||||
<hz-magic-search-context ng-controller="containersBaymodelsTableController as table"
|
||||
filter-facets="table.baymodelFacets">
|
||||
<hz-magic-search-bar></hz-magic-search-bar>
|
||||
<actions class="batch-action" allowed="table.baymodelResource.batchActions" type="batch"></actions>
|
||||
<table hz-table ng-cloak st-magic-search
|
||||
st-table="table.baymodels"
|
||||
st-safe-src="table.baymodelsSrc"
|
||||
default-sort="name"
|
||||
default-sort-reverse="false"
|
||||
class="table table-striped table-rsp table-detail">
|
||||
|
||||
<thead>
|
||||
<!--
|
||||
Table-batch-actions:
|
||||
This is where batch actions like searching, creating, and deleting.
|
||||
-->
|
||||
<tr>
|
||||
<th colspan="100" class="search-header">
|
||||
<hz-magic-search-bar group-classes="input-group-sm" icon-classes="fa-search"
|
||||
filter-facets="table.baymodelFacets">
|
||||
</hz-magic-search-bar>
|
||||
</th>
|
||||
</tr>
|
||||
<tr class="action-row">
|
||||
<th colspan="100">
|
||||
<actions allowed="table.baymodelResource.batchActions" type="batch"></actions>
|
||||
</th>
|
||||
</tr>
|
||||
<!--
|
||||
Table-column-headers:
|
||||
The headers for the table columns
|
||||
-->
|
||||
<tr>
|
||||
<th class="multi_select_column">
|
||||
<input type="checkbox" hz-select-all="table.baymodels">
|
||||
</th>
|
||||
|
||||
<th class="expander"></th>
|
||||
|
||||
<th class="rsp-p1" st-sort="name" st-sort-default translate>
|
||||
Name
|
||||
</th>
|
||||
|
||||
<th class="rsp-p2" st-sort="id" translate>
|
||||
ID
|
||||
</th>
|
||||
|
||||
<th class="rsp-p1" st-sort="coe" translate>
|
||||
COE
|
||||
</th>
|
||||
|
||||
<th class="rsp-p2" st-sort="network-driver" translate>
|
||||
Network Driver
|
||||
</th>
|
||||
|
||||
<th class="actions_column" translate>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!--
|
||||
Table-rows:
|
||||
This is where we declaratively define the table columns.
|
||||
Include multi_select_column if you want to select all.
|
||||
Include expander if you want to inline details.
|
||||
Include actions_column if you want to perform actions.
|
||||
rsp-p1 rsp-p2 are responsive priority as user resizes window.
|
||||
-->
|
||||
|
||||
<tr ng-repeat-start="bm in table.baymodels track by bm.id">
|
||||
|
||||
<td class="multi_select_column">
|
||||
<input type="checkbox"
|
||||
ng-model="tCtrl.selections[bm.id].checked"
|
||||
hz-select="bm">
|
||||
</td>
|
||||
|
||||
<td class="expander">
|
||||
<i class="fa fa-chevron-right"
|
||||
hz-expand-detail
|
||||
duration="200">
|
||||
</i>
|
||||
</td>
|
||||
|
||||
<td class="rsp-p1"><a ng-href="project/baymodels/{$ bm.id $}">{$ bm.name|noName $}</a></td>
|
||||
<td class="rsp-p2">{$ bm.id $}</td>
|
||||
<td class="rsp-p1">{$ bm.coe $}</td>
|
||||
<td class="rsp-p2">{$ bm.network_driver $}</td>
|
||||
|
||||
<td class="actions_column">
|
||||
<thead>
|
||||
<!--
|
||||
Table-row-action-column:
|
||||
Actions taken here applies to a single item/row.
|
||||
Table-column-headers:
|
||||
The headers for the table columns
|
||||
-->
|
||||
<actions allowed="table.baymodelResource.itemActions" type="row" item="bm"></actions>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-repeat-end class="detail-row">
|
||||
<tr>
|
||||
<th class="multi_select_column">
|
||||
<input type="checkbox" hz-select-all="table.baymodels">
|
||||
</th>
|
||||
|
||||
<th class="expander"></th>
|
||||
|
||||
<th class="rsp-p1" st-sort="name" st-sort-default translate>
|
||||
Name
|
||||
</th>
|
||||
|
||||
<th class="rsp-p2" st-sort="id" translate>
|
||||
ID
|
||||
</th>
|
||||
|
||||
<th class="rsp-p1" st-sort="coe" translate>
|
||||
COE
|
||||
</th>
|
||||
|
||||
<th class="rsp-p2" st-sort="network-driver" translate>
|
||||
Network Driver
|
||||
</th>
|
||||
|
||||
<th class="actions_column" translate>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!--
|
||||
Table-rows:
|
||||
This is where we declaratively define the table columns.
|
||||
Include multi_select_column if you want to select all.
|
||||
Include expander if you want to inline details.
|
||||
Include actions_column if you want to perform actions.
|
||||
rsp-p1 rsp-p2 are responsive priority as user resizes window.
|
||||
-->
|
||||
|
||||
<tr ng-repeat-start="bm in table.baymodels track by bm.id">
|
||||
|
||||
<td class="multi_select_column">
|
||||
<input type="checkbox"
|
||||
ng-model="tCtrl.selections[bm.id].checked"
|
||||
hz-select="bm">
|
||||
</td>
|
||||
|
||||
<td class="expander">
|
||||
<i class="fa fa-chevron-right"
|
||||
hz-expand-detail
|
||||
duration="200">
|
||||
</i>
|
||||
</td>
|
||||
|
||||
<td class="rsp-p1"><a ng-href="project/baymodels/{$ bm.id $}">{$ bm.name|noName $}</a></td>
|
||||
<td class="rsp-p2">{$ bm.id $}</td>
|
||||
<td class="rsp-p1">{$ bm.coe $}</td>
|
||||
<td class="rsp-p2">{$ bm.network_driver $}</td>
|
||||
|
||||
<td class="actions_column">
|
||||
<!--
|
||||
Table-row-action-column:
|
||||
Actions taken here applies to a single item/row.
|
||||
-->
|
||||
<actions allowed="table.baymodelResource.itemActions" type="row" item="bm"></actions>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-repeat-end class="detail-row">
|
||||
<!--
|
||||
Detail-row:
|
||||
Contains detailed information on this item.
|
||||
Can be toggled using the chevron button.
|
||||
Ensure colspan is greater or equal to number of column-headers.
|
||||
-->
|
||||
<td class="detail" colspan="100">
|
||||
<!--
|
||||
The responsive columns that disappear typically should reappear here
|
||||
with the same responsive priority that they disappear.
|
||||
E.g. table header with rsp-p2 should be here with rsp-alt-p2
|
||||
-->
|
||||
<div class="row">
|
||||
<span class="rsp-alt-p2">
|
||||
<dl class="col-xs-5">
|
||||
<dt translate>ID</dt>
|
||||
<dd>{$ bm.id $}</dd>
|
||||
</dl>
|
||||
<dl class="col-xs-3">
|
||||
<dt translate>Network Driver</dt>
|
||||
<dd>{$ bm.network_driver $}</dd>
|
||||
</dl>
|
||||
</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<dl class="col-xs-5">
|
||||
<dt translate>Image ID</dt>
|
||||
<dd>{$ bm.image_id $}</dd>
|
||||
</dl>
|
||||
<dl class="col-xs-3">
|
||||
<dt translate>Registry Enabled</dt>
|
||||
<dd>{$ bm.registry_enabled $}</dd>
|
||||
</dl>
|
||||
<dl class="col-xs-4">
|
||||
<dt translate>Labels</dt>
|
||||
<dd ng-repeat="lbl in b.labels">{$ lbl $}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr hz-no-items items="table.baymodels"></tr>
|
||||
</tbody>
|
||||
<!--
|
||||
Detail-row:
|
||||
Contains detailed information on this item.
|
||||
Can be toggled using the chevron button.
|
||||
Ensure colspan is greater or equal to number of column-headers.
|
||||
Table-footer:
|
||||
This is where we display number of items and pagination controls.
|
||||
-->
|
||||
<td class="detail" colspan="100">
|
||||
<!--
|
||||
The responsive columns that disappear typically should reappear here
|
||||
with the same responsive priority that they disappear.
|
||||
E.g. table header with rsp-p2 should be here with rsp-alt-p2
|
||||
-->
|
||||
<div class="row">
|
||||
<span class="rsp-alt-p2">
|
||||
<dl class="col-xs-5">
|
||||
<dt translate>ID</dt>
|
||||
<dd>{$ bm.id $}</dd>
|
||||
</dl>
|
||||
<dl class="col-xs-3">
|
||||
<dt translate>Network Driver</dt>
|
||||
<dd>{$ bm.network_driver $}</dd>
|
||||
</dl>
|
||||
</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<dl class="col-xs-5">
|
||||
<dt translate>Image ID</dt>
|
||||
<dd>{$ bm.image_id $}</dd>
|
||||
</dl>
|
||||
<dl class="col-xs-3">
|
||||
<dt translate>Registry Enabled</dt>
|
||||
<dd>{$ bm.registry_enabled $}</dd>
|
||||
</dl>
|
||||
<dl class="col-xs-4">
|
||||
<dt translate>Labels</dt>
|
||||
<dd ng-repeat="lbl in b.labels">{$ lbl $}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr hz-no-items items="table.baymodels"></tr>
|
||||
</tbody>
|
||||
<!--
|
||||
Table-footer:
|
||||
This is where we display number of items and pagination controls.
|
||||
-->
|
||||
<tfoot hz-table-footer items="table.baymodels"></tfoot>
|
||||
</table>
|
||||
<tfoot hz-table-footer items="table.baymodels"></tfoot>
|
||||
</table>
|
||||
</hz-magic-search-context>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,149 +1,139 @@
|
|||
<table ng-controller="containersBaysTableController as table"
|
||||
hz-table ng-cloak
|
||||
st-table="table.bays"
|
||||
st-safe-src="table.baysSrc"
|
||||
default-sort="name"
|
||||
default-sort-reverse="false"
|
||||
class="table table-striped table-rsp table-detail">
|
||||
|
||||
<thead>
|
||||
<!--
|
||||
Table-batch-actions:
|
||||
This is where batch actions like searching, creating, and deleting.
|
||||
-->
|
||||
<tr>
|
||||
<th colspan="100" class="search-header">
|
||||
<hz-magic-search-bar group-classes="input-group-sm" icon-classes="fa-search"
|
||||
filter-facets="table.bayFacets">
|
||||
</hz-magic-search-bar>
|
||||
</th>
|
||||
</tr>
|
||||
<tr class="action-row">
|
||||
<th colspan="100">
|
||||
<actions allowed="table.bayResource.batchActions" type="batch"></actions>
|
||||
</th>
|
||||
</tr>
|
||||
<!--
|
||||
Table-column-headers:
|
||||
The headers for the table columns
|
||||
-->
|
||||
<tr>
|
||||
<th class="multi_select_column">
|
||||
<input type="checkbox" hz-select-all="table.bays">
|
||||
</th>
|
||||
|
||||
<th class="expander"></th>
|
||||
|
||||
<th class="rsp-p1" st-sort="name" st-sort-default translate>
|
||||
Name
|
||||
</th>
|
||||
|
||||
<th class="rsp-p2" st-sort="id" translate>
|
||||
ID
|
||||
</th>
|
||||
|
||||
<th class="rsp-p1" st-sort="status" translate>
|
||||
Status
|
||||
</th>
|
||||
|
||||
<th class="rsp-p2" st-sort="master_count" translate>
|
||||
Master Count
|
||||
</th>
|
||||
|
||||
<th class="rsp-p2" st-sort="node_count" translate>
|
||||
Node Count
|
||||
</th>
|
||||
|
||||
<th class="actions_column" translate>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!--
|
||||
Table-rows:
|
||||
This is where we declaratively define the table columns.
|
||||
Include multi_select_column if you want to select all.
|
||||
Include expander if you want to inline details.
|
||||
Include actions_column if you want to perform actions.
|
||||
rsp-p1 rsp-p2 are responsive priority as user resizes window.
|
||||
-->
|
||||
|
||||
<tr ng-repeat-start="b in table.bays track by b.id">
|
||||
|
||||
<td class="multi_select_column">
|
||||
<input type="checkbox"
|
||||
ng-model="tCtrl.selections[b.id].checked"
|
||||
hz-select="b">
|
||||
</td>
|
||||
|
||||
<td class="expander">
|
||||
<span class="fa fa-chevron-right"
|
||||
hz-expand-detail
|
||||
duration="200">
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="rsp-p1"><a ng-href="project/bays/{$ b.id $}">{$ b.name|noName $}</a></td>
|
||||
<td class="rsp-p2">{$ b.id $}</td>
|
||||
<td class="rsp-p1">{$ b.status $}</td>
|
||||
<td class="rsp-p2">{$ b.master_count $}</td>
|
||||
<td class="rsp-p2">{$ b.node_count $}</td>
|
||||
|
||||
<td class="actions_column">
|
||||
<div>
|
||||
<hz-magic-search-context ng-controller="containersBaysTableController as table"
|
||||
filter-facets="table.bayFacets">
|
||||
<hz-magic-search-bar></hz-magic-search-bar>
|
||||
<actions class="batch-action" allowed="table.bayResource.batchActions" type="batch"></actions>
|
||||
<table hz-table ng-cloak st-magic-search
|
||||
st-table="table.bays"
|
||||
st-safe-src="table.baysSrc"
|
||||
default-sort="name"
|
||||
default-sort-reverse="false"
|
||||
class="table table-striped table-rsp table-detail">
|
||||
|
||||
<thead>
|
||||
<!--
|
||||
Table-row-action-column:
|
||||
Actions taken here applies to a single item/row.
|
||||
Table-column-headers:
|
||||
The headers for the table columns
|
||||
-->
|
||||
<actions allowed="table.bayResource.itemActions" type="row" item="b"></actions>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-repeat-end class="detail-row">
|
||||
<tr>
|
||||
<th class="multi_select_column">
|
||||
<input type="checkbox" hz-select-all="table.bays">
|
||||
</th>
|
||||
|
||||
<th class="expander"></th>
|
||||
|
||||
<th class="rsp-p1" st-sort="name" st-sort-default translate>
|
||||
Name
|
||||
</th>
|
||||
|
||||
<th class="rsp-p2" st-sort="id" translate>
|
||||
ID
|
||||
</th>
|
||||
|
||||
<th class="rsp-p1" st-sort="status" translate>
|
||||
Status
|
||||
</th>
|
||||
|
||||
<th class="rsp-p2" st-sort="master_count" translate>
|
||||
Master Count
|
||||
</th>
|
||||
|
||||
<th class="rsp-p2" st-sort="node_count" translate>
|
||||
Node Count
|
||||
</th>
|
||||
|
||||
<th class="actions_column" translate>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!--
|
||||
Table-rows:
|
||||
This is where we declaratively define the table columns.
|
||||
Include multi_select_column if you want to select all.
|
||||
Include expander if you want to inline details.
|
||||
Include actions_column if you want to perform actions.
|
||||
rsp-p1 rsp-p2 are responsive priority as user resizes window.
|
||||
-->
|
||||
|
||||
<tr ng-repeat-start="b in table.bays track by b.id">
|
||||
|
||||
<td class="multi_select_column">
|
||||
<input type="checkbox"
|
||||
ng-model="tCtrl.selections[b.id].checked"
|
||||
hz-select="b">
|
||||
</td>
|
||||
|
||||
<td class="expander">
|
||||
<span class="fa fa-chevron-right"
|
||||
hz-expand-detail
|
||||
duration="200">
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="rsp-p1"><a ng-href="project/bays/{$ b.id $}">{$ b.name|noName $}</a></td>
|
||||
<td class="rsp-p2">{$ b.id $}</td>
|
||||
<td class="rsp-p1">{$ b.status $}</td>
|
||||
<td class="rsp-p2">{$ b.master_count $}</td>
|
||||
<td class="rsp-p2">{$ b.node_count $}</td>
|
||||
|
||||
<td class="actions_column">
|
||||
<!--
|
||||
Table-row-action-column:
|
||||
Actions taken here applies to a single item/row.
|
||||
-->
|
||||
<actions allowed="table.bayResource.itemActions" type="row" item="b"></actions>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-repeat-end class="detail-row">
|
||||
<!--
|
||||
Detail-row:
|
||||
Contains detailed information on this item.
|
||||
Can be toggled using the chevron button.
|
||||
Ensure colspan is greater or equal to number of column-headers.
|
||||
-->
|
||||
<td class="detail" colspan="100">
|
||||
<!--
|
||||
The responsive columns that disappear typically should reappear here
|
||||
with the same responsive priority that they disappear.
|
||||
E.g. table header with rsp-p2 should be here with rsp-alt-p2
|
||||
-->
|
||||
<div class="row">
|
||||
<span class="rsp-alt-p2">
|
||||
<dl class="col-xs-5">
|
||||
<dt translate>ID</dt>
|
||||
<dd>{$ b.id $}</dd>
|
||||
</dl>
|
||||
<dl class="col-xs-3">
|
||||
<dt translate>Master Count</dt>
|
||||
<dd>{$ b.master_count $}</dd>
|
||||
</dl>
|
||||
<dl class="col-xs-3">
|
||||
<dt translate>Node Count</dt>
|
||||
<dd>{$ b.node_count $}</dd>
|
||||
</dl>
|
||||
</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<dl class="col-xs-5">
|
||||
<dt translate>Baymodel</dt>
|
||||
<dd><a ng-href="project/baymodels/{$ b.baymodel_id $}">{$ b.baymodel_id $}</a></dd>
|
||||
</dl>
|
||||
<dl class="col-xs-3">
|
||||
<dt translate>Node Addresses</dt>
|
||||
<dd ng-repeat="addr in b.node_addresses">{$ addr $}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr hz-no-items items="table.bays"></tr>
|
||||
</tbody>
|
||||
<!--
|
||||
Detail-row:
|
||||
Contains detailed information on this item.
|
||||
Can be toggled using the chevron button.
|
||||
Ensure colspan is greater or equal to number of column-headers.
|
||||
Table-footer:
|
||||
This is where we display number of items and pagination controls.
|
||||
-->
|
||||
<td class="detail" colspan="100">
|
||||
<!--
|
||||
The responsive columns that disappear typically should reappear here
|
||||
with the same responsive priority that they disappear.
|
||||
E.g. table header with rsp-p2 should be here with rsp-alt-p2
|
||||
-->
|
||||
<div class="row">
|
||||
<span class="rsp-alt-p2">
|
||||
<dl class="col-xs-5">
|
||||
<dt translate>ID</dt>
|
||||
<dd>{$ b.id $}</dd>
|
||||
</dl>
|
||||
<dl class="col-xs-3">
|
||||
<dt translate>Master Count</dt>
|
||||
<dd>{$ b.master_count $}</dd>
|
||||
</dl>
|
||||
<dl class="col-xs-3">
|
||||
<dt translate>Node Count</dt>
|
||||
<dd>{$ b.node_count $}</dd>
|
||||
</dl>
|
||||
</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<dl class="col-xs-5">
|
||||
<dt translate>Baymodel</dt>
|
||||
<dd><a ng-href="project/baymodels/{$ b.baymodel_id $}">{$ b.baymodel_id $}</a></dd>
|
||||
</dl>
|
||||
<dl class="col-xs-3">
|
||||
<dt translate>Node Addresses</dt>
|
||||
<dd ng-repeat="addr in b.node_addresses">{$ addr $}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr hz-no-items items="table.bays"></tr>
|
||||
</tbody>
|
||||
<!--
|
||||
Table-footer:
|
||||
This is where we display number of items and pagination controls.
|
||||
-->
|
||||
<tfoot hz-table-footer items="table.bays"></tfoot>
|
||||
</table>
|
||||
<tfoot hz-table-footer items="table.bays"></tfoot>
|
||||
</table>
|
||||
</hz-magic-search-context>
|
||||
</div>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
@import "baymodels/baymodels";
|
||||
@import "bays/bays";
|
||||
|
||||
.table > thead > .action-row > th > actions {
|
||||
.batch-action {
|
||||
float: right;
|
||||
action-list {
|
||||
padding-left: 0.3em;
|
||||
|
|
|
|||
Loading…
Reference in New Issue