grid directive

grid.js

var grid = angular.module("grid", ['xeditable','angularUtils.directives.dirPagination']);

grid.directive("grid", function($http, $q, GridDataService, $filter) {
    return {
        restrict: "E",
    	templateUrl: "grid/grid.tpl.html",
        transclude: true,
        replace:true,
        scope: {
            title: "@",
            ItemsPerPage: "@",
            query: "=",
            headings: "=",
            options: "=",
            type: "@"

        },
        link: function(scope) {

            scope.columns = scope.headings;

            scope.showID = true; 

            scope.status = "";

            scope.loading = true;

            scope.sortType = 1;

            // scope.sort = function (id) {
            //     scope.sortType = id;
            //     console.log(scope.sortType);
            // }


            scope.getData = function(type){

                GridDataService.getData(type).then(function(response) {
                            scope.status = response.status;
                            scope.data = response.data;

                            forEach


                            scope.loading = false;
                        }, function(response) {
                            scope.data = response.data || 'Request failed';
                            scope.status = response.status;
                            scope.loading = false;
                      });

            };

            scope.getSchema = function(type){

                GridDataService.getSchema(type).then(function(response) {

                            scope.columns = response.data[0];

                        }, function(response) {
                            scope.columns = response.data || 'Request failed';
                            scope.status = response.status;
                      });

            };

            // Allows for query & heading data to be loaded on directive, or otherwise try to pull from service
            // not sure if the headings should be returned together with data

            if (scope.headings == null) {
                scope.getSchema(scope.type);
            }else{
                scope.columns = scope.headings;
            }

            if (scope.query == null) {
                scope.getData(scope.type);
            }else{
                scope.data = scope.query;
            }

            // filter users to show
             scope.filterData = function(row) {
               return row.isDeleted !== true;
             };

                

            // save edits
            scope.saveTable = function() {
              var results = [];
              var errors = [];




              for (var i = scope.data.length - 1; i >= 0; i--) {

                //delete (doesn't delete from server)
                if (scope.data.isDeleted) {
                  scope.data.splice(i, 1);
                }

                //TODO: just saves everything for now, should really diff it so that we only save changes
                if (!scope.data[i].isNew) {
                  GridDataService.updateRow(scope.type, scope.data[i].id, scope.data[i] ).then(function(response) {
                            // console.log(response);
                          }, function(response) {
                            console.log(response);
                        });
                }else{
                    scope.data[i].isNew = false;
                    GridDataService.addRow(scope.type, scope.data[i] ).then(function(response) {
                              // console.log(response);
                            }, function(response) {
                              console.log(response);
                          });
                }
              }       

            }


            scope.addRow = function() {
                //this is tricky as we dont know what should be in the fields. I'm just going to copy the last row, you can edit it anyway i guess
                console.log(scope.data[scope.data.length - 1].fields);

                scope.data.push({
                  id: scope.data.length+1,
                  fields: angular.copy(scope.data[scope.data.length - 1].fields),
                  isNew: true
                });
            };

            scope.delete = function(id) {
                
                var filtered = $filter('filter')(scope.data, {id: id});

                if (filtered.length) {
                  filtered[0].isDeleted = true;
                }



              };

     
        }
    };
  
});

grid.factory('GridDataService', function($http){
  
  var base = 'http://localhost:3000/';
  
 
  return {
    getData: function(type){
        var url =   base + type;
    
        return $http({
                    url: url,
                    method: 'GET'
                })

    },
    getDataById: function(type, id){
        var url =   base + type;
        
        return $http({
                    url: url,
                    method: 'GET'
                })

    },
    saveGrid: function (type) {  

    },
    updateRow: function (type, id, data) {

        var url = base + type + "/" + id + "/";
        
        return $http.put(url, data);

    },
    addRow: function (type, data) {

        var url = base + type;
        
        return $http.post(url, data);

    },
    getSchema: function (type){
        var url =  base + "schema/?type_like=" + type;
        
        return $http({
                    url: url,
                    method: 'GET'
                })

    }


  }


});

grid.less

.editable-click, a.editable-click {
    text-decoration: none;
    color: #428bca;
    border-bottom: dashed 1px #428bca;
}
.editable-wrap{
	width: 100%;
}

span.editable-controls{
	input, select{
		width: 100%;
		border: 0 !important;
		margin: 0 !important;
		background: 0;
		box-shadow: none;
		padding: 0.5em 3.5em 0.5em 1em;
		line-height: 1.5em;
		font: inherit;
		background-color: fade(#aaa, 10%);
		display: inline-block;

	}

	input[type="text"]{
		background: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="#888" d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"/></svg>');
		background-position: 100%;
		background-size: 15px 15px;
		background-repeat: no-repeat;
		background-position: 99%;
		padding-right: 5%;
	}

	select {
	  /* reset */

	  margin: 0;      
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  width: 100%;
	  background: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="#888" d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"/></svg>');
	  background-position: 95%;
	  background-size: 20px 20px;
	  background-repeat: no-repeat;
	  background-position: 90%;
	}

}

form[name="tableform"]{
	table th{
		a{
			color: black;
		}
	}
}

grid.tpl.html

<div class="panel panel-default">
	<div class="panel-heading">
		<h3 ng-if="title" class="panel-title">{{title}}</h3>
	</div>
	<div class="panel-body">

		<div class="loader center-block" ng-if="loading == true">
			<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>
		</div>

		<div class="wrapper" ng-if="loading == false">
			<div class="input-group col-md-4">
				<input type="text" class="form-control" ng-model="searchval"  placeholder="Search">
				<div class="input-group-addon"><i class="fa fa-search"></i></div>
			</div>
			
			
			
			<form editable-form name="tableform" onaftersave="saveTable()" oncancel="cancel()">
				<table class="table table-responsive table-striped">
					<thead>
						<tr>
							<th ng-if="options.showid"></th>
							<th ng-if="options.editlink"></th>
							<th ng-repeat="th in columns"><a ng-click="sort(th.id)">{{th.name}}</a></th>
						</tr>
			
					</thead>
					<tbody>
						<tr dir-paginate="row in data | filter: searchval | itemsPerPage: 10">
							<td ng-if="options.showid">{{row.id}}</td>
							<td ng-if="options.editlink"> <a ui-sref="/{{type}}/{{row.id}}"><button class="btn btn-warning btn-xs"><i class="fa fa-pencil"></i>&nbsp;Edit</button></a> </td>

							<td ng-repeat="(key, col) in row" > 
								<div ng-repeat="(k, h) in columns | filter : {tag : key}">

									<div ng-if="key == h.tag">

										<div ng-if="h.editable">
											<span ng-if="h.type == 'text'" editable-text="col" buttons="right">{{col}}</span>
											<span ng-if="h.type == 'boolean'" editable-checkbox="col" buttons="right">{{col}}</span>
											<div ng-if="h.type == 'select'" editable-select="col" buttons="right" e-ng-options="s.value as s.text for s in h.options">
												<div ng-if="h.label" ng-repeat="o in h.options | filter: co"> 
													<span class="label" ng-class="o.class" >{{o.text}} </span> 
												</div>
												<span ng-if="!h.label" ng-if="" ng-repeat="o in h.options | filter: col">{{o.text}}</span>    
											</div>
											<span ng-if="h.type == 'date'" buttons="right" editable-date="col">{{ (col | date: "dd-MM-yyyy") || 'empty' }}</span>
										</div>
										<div ng-if="!h.editable">
											{{col}}
										</div>								
									</div>
								</div>
			
							 </td>
							 <td ng-if="options.allowdeletes" ng-show="tableform.$visible"> <button type="button" ng-click="delete(row.id)" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i>&nbsp; Delete</button> </td>
						</tr>
					</tbody>
				</table>
				
				<dir-pagination-controls class="pull-right"></dir-pagination-controls>
				
				<!-- buttons -->
		    	<div class="btn-edit">
		    	  <button type="button" class="btn btn-primary" ng-show="!tableform.$visible" ng-click="tableform.$show()">
		    	    edit &nbsp; <i style="font-size: 0.8em; vertical-align: text-top;" class="fa fa-pencil "></i>
		    	  </button>
		    	</div>

		    	<div class="clearfix"></div>

		    	<div class="btn-form" ng-show="tableform.$visible">
		    	  <button type="button" ng-disabled="tableform.$waiting" ng-click="addRow()" class="btn btn-default pull-right">Add row</button>
		    	  <button type="submit" ng-disabled="tableform.$waiting" class="btn btn-primary">Save</button>
		    	  <button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">Cancel</button>
		    	</div> 

			</form>
		</div>
	</div>
</div>