Skip to content

Grid form #657

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Grid form #657

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
321bb6e
Honor label css class
manuelnaranjo Aug 20, 2015
98c1879
Adding support for fieldsets and rows in create, edit and show
manuelnaranjo Aug 20, 2015
77a1cb5
[sass] Adding necessary css classes for grid layout
manuelnaranjo Aug 25, 2015
c3ce08d
[grid] Adding necessary stuff for grid forms
manuelnaranjo Aug 25, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/javascripts/ng-admin/Crud/field/maField.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ define(function (require) {
}).join('');
var template =
'<div id="row-{{ field.name() }}" class="has-feedback" ng-class="getFieldValidationClass(field)">' +
'<label for="{{ field.name() }}" class="col-sm-2 control-label">' +
'<label for="{{ field.name() }}" ng-class="field.labelCssClasses()">' +
'{{ field.label() }}<span ng-if="field.validation().required">&nbsp;*</span>&nbsp;' +
'</label>' +
'<div ng-if="field.editable()" ng-class="getClassesForField(field, entry)" ng-switch="field.type()">' +
Expand Down
19 changes: 17 additions & 2 deletions src/javascripts/ng-admin/Crud/form/create.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,23 @@ <h1 compile="::formController.title">

<div class="row" id="create-view" ng-class="::'ng-admin-entity-' + formController.entity.name()">
<form class="col-lg-12 form-horizontal" name="formController.form" ng-submit="formController.submitCreation($event)">
<div class="form-field form-group" ng-repeat="field in ::formController.fields track by $index">
<ma-field field="::field" entry="entry" entity="::entity" form="formController.form" datastore="::formController.dataStore"></ma-field>
<div ng-repeat="field in ::formController.fields track by $index">

<div class="form-field form-group" ng-if="!field.isFieldset()">
<ma-field field="::field" entry="entry" entity="::entity" form="formController.form" datastore="::formController.dataStore"></ma-field>
</div>

<fieldset ng-if="field.isFieldset()">
<legend>{{::field.label()}}</legend>
<div ng-repeat="row in ::field.rows()"
class="row-fluid" ng-class="::row.getClasses()">
<div ng-repeat="rowField in ::row.fields()"
class="form-group"
ng-class="::row.editCssSpanClass(rowField)">
<ma-field field="::rowField" entry="entry" entity="::entity" form="formController.form" datastore="::formController.dataStore"></ma-field>
</div>
</div>
</fieldset>
</div>

<div class="form-group">
Expand Down
20 changes: 17 additions & 3 deletions src/javascripts/ng-admin/Crud/form/edit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,24 @@ <h1 compile="::formController.title">

<div class="row" id="edit-view" ng-class="::'ng-admin-entity-' + formController.entity.name()">
<form class="col-lg-12 form-horizontal" name="formController.form" ng-submit="formController.submitEdition($event)">
<div class="form-field form-group" ng-repeat="field in ::formController.fields track by $index">
<ma-field field="::field" entry="entry" entity="::entity" form="formController.form" datastore="::formController.dataStore"></ma-field>
</div>
<div ng-repeat="field in ::formController.fields track by $index">

<div class="form-field form-group" ng-if="!field.isFieldset()">
<ma-field field="::field" entry="entry" entity="::entity" form="formController.form" datastore="::formController.dataStore"></ma-field>
</div>

<fieldset ng-if="field.isFieldset()">
<legend>{{::field.label()}}</legend>
<div ng-repeat="row in ::field.rows()"
class="row-fluid" ng-class="::row.getClasses()">
<div ng-repeat="rowField in ::row.fields()"
class="form-group"
ng-class="::row.editCssSpanClass(rowField)">
<ma-field field="::rowField" entry="entry" entity="::entity" form="formController.form" datastore="::formController.dataStore"></ma-field>
</div>
</div>
</fieldset>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-ok"></span> Save Changes</button>
Expand Down
29 changes: 25 additions & 4 deletions src/javascripts/ng-admin/Crud/show/show.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,37 @@ <h1 compile="::showController.title">


<div class="row form-horizontal" id="show-view">
<div ng-repeat="field in ::showController.fields track by $index"
class="col-lg-12 form-group">

<div class="col-lg-12 form-group" ng-repeat="field in ::showController.fields track by $index">
<!-- non fieldset -->
<label class="col-sm-2 control-label" ng-if="!field.isFieldset()">{{ field.label() }}</label>

<label class="col-sm-2 control-label">{{ field.label() }}</label>

<div class="show-value" ng-class="::'ng-admin-field-' + field.name() + ' ' + (field.getCssClasses(entry) || 'col-sm-10 col-md-8 col-lg-7')">
<div ng-if="!field.isFieldset()" class="show-value" ng-class="::'ng-admin-field-' + field.name() + ' ' + (field.getCssClasses(entry) || 'col-sm-10 col-md-8 col-lg-7')">

<ma-column field="::field" entry="::entry" entity="::entity" datastore="::showController.dataStore"></ma-column>

</div>

<fieldset ng-if="field.isFieldset()">
<legend>{{::field.label()}}</legend>
<div ng-repeat="row in ::field.rows()"
class="row-fluid"
ng-class="row.getClasses()">
<div ng-repeat="rowField in ::row.fields()"
class="form-group"
ng-class="::row.cssSpanClass(rowField)">
<label for="::{{ rowField.name() }}">{{ rowField.label() }}</label>
<div class="form-control">
<ma-column field="::rowField" entry="::entry"
entity="::entity"
datastore="::showController.dataStore">
</ma-column>
</div>
</div>
</div>

</fieldset>
</div>

</div>
77 changes: 70 additions & 7 deletions src/sass/ng-admin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ ul.collapsible {
}

/**
* Dashboard
*/
* Dashboard
*/
.dashboard-starter {
margin-bottom: 30px;
}
Expand Down Expand Up @@ -93,8 +93,8 @@ ul.collapsible {
}

/**
* Grid
*/
* Grid
*/

#page-wrapper .page-header {
margin: 10px 0 15px;
Expand Down Expand Up @@ -125,7 +125,7 @@ ma-view-actions {
}

.btn-default {
height: 34px;
height: 34px;
}
}

Expand Down Expand Up @@ -198,8 +198,8 @@ div.bottom-loader {
}

/**
* Edition form
*/
* Edition form
*/
.form-horizontal {

.has-feedback .form-control.ui-select-toggle {
Expand Down Expand Up @@ -268,3 +268,66 @@ div.bottom-loader {
border-radius: 4px;
}
}

&#show-view, {
fieldset {
.row-fluid {
.form-group {
.form-control {
border: initial;
border-radius: initial;
box-shadow: initial;
padding: initial;
}
}
}
}
}
&#show-view, &#create-view, &#edit-view {
fieldset {
padding-bottom: 5px;

legend {
border: none;
border-bottom: 4px solid #404040;
color: #404040;
font-size: 18px;
font-weight: bold;
padding-bottom: 5px;
position: static;
width: 100%;
margin-bottom: 0px;
}

.row-fluid {
.form-group {
margin-left: initial;
margin-right: initial;
margin-bottom: initial;

padding: 8px;
}

ma-date-field.col-sm-4 {
width: 100%; // force width;
button {
padding-bottom: 7px; // fix alignment
}
}
}

@media only screen and (min-width: 700px) {
.row-fluid {
.form-group {
border: initial;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
}

.form-group:last-child {
border-right: initial;
}
}
}
}
}