bunlongheng
3/20/2017 - 8:35 PM
Blade with Angular Integration
Blade with Angular Integration
@extends('layouts.be.master')
@section('content')
<script type="text/javascript">
myApp.directive('myEnter', function () {
return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) {
if(event.which === 13) {
scope.$apply(function (){
scope.$eval(attrs.myEnter);
});
event.preventDefault();
}
});
};
});
myApp.controller('skillController', function skillController($scope,$log,$http) {
$scope.skillTypes = ['Build System','Development Environment','Server Management','Operating System','IDE','Creative Suite','Video Editing','Package Management','Git Repository','Web Scaffolding','CSS Precompiler','Scripting','Framework','Database','Unit Test','Automation Testing','Cloud Platform','Hosting Provider','Content Management' ];
// ---------------------------------------------------------
$scope.refresh = function(){
$http.get('/skills')
.success(function(data){
$scope.skills = data;
});
$http.get('/skill/types')
.success(function(data){
$scope.types = data;
$('#skill-count').text($scope.skills.length);
});
};
$scope.refresh();
// ---------------------------------------------------------
$scope.create = function() {
$scope.showModal = true;
$scope.type = 'IDE';
};
// ---------------------------------------------------------
$scope.store = function() {
$scope.data = {
name: $scope.name,
type: $scope.type,
value: $scope.value
};
$http({
method: 'PUT',
url: '/skill/store',
data: angular.toJson($scope.data)
})
.then(function successCallback(response) {
console.log("%cSuccess!", "color: green;");
console.log(response);
$scope.refresh();
$scope.showModal = false;
}, function errorCallback(response) {
console.log("%cError", "color: red;");
console.log(response);
});
};
// ---------------------------------------------------------
$scope.destroy = function(id) {
$http({
method: 'DELETE',
url: '/skill/'+id+'/destroy',
data: angular.toJson(id)
})
.then(function successCallback(response) {
console.log("%cSuccess!", "color: green;");
console.log(response);
$scope.refresh();
}, function errorCallback(response) {
console.log("%cError", "color: red;");
console.log(response);
});
};
// ---------------------------------------------------------
$scope.edit = function(id) {
$scope.editSkill = {};
$scope.row = id;
$http.get('/skill/'+id)
.success(function(data){
console.log(data);
// return false;
$scope.editSkill.type = data.type;
$scope.editSkill.name = data.name;
$scope.editSkill.value = data.value;
$scope.editSkill.id = data.id;
});
};
// ---------------------------------------------------------
$scope.quickEdit = function(id) {
// console.log(id);
$scope.editSkill = {};
$scope.row = id;
$http.get('/skill/'+id)
.success(function(data){
console.log(data);
$scope.editSkill.type = data.type;
$scope.editSkill.name = data.name;
$scope.editSkill.value = data.value;
$scope.editSkill.id = data.id;
});
};
// ---------------------------------------------------------
$scope.cancel = function(id) {
$scope.row = 0;
};
// ---------------------------------------------------------
$scope.update = function(id) {
$scope.data = {
name: $scope.editSkill.name,
type: $scope.editSkill.type,
value: $scope.editSkill.value
};
$http({
method: 'PUT',
url: '/skill/'+id+'/update',
data: angular.toJson($scope.data)
})
.then(function successCallback(response) {
console.log("%cSuccess!", "color: green;");
console.log(response);
$scope.row = 0;
$scope.refresh();
}, function errorCallback(response) {
console.log("%cError", "color: red;");
console.log(response);
});
};
// ---------------------------------------------------------
$scope.quickHeaderEdit = function(index) {
$scope.currentHeaderType = index;
$scope.headerType = index;
};
// ---------------------------------------------------------
$scope.quickHeaderUpdate = function(newType, oldType) {
// console.log(newType, oldType);
$scope.data = {
type: oldType,
new_type: newType,
};
$http({
method: 'PUT',
url: '/skill/type/'+oldType+'/update',
data: angular.toJson($scope.data)
})
.then(function successCallback(response) {
console.log("%cSuccess!", "color: green;");
console.log(response);
$scope.currentHeaderType = 0;
$scope.refresh();
}, function errorCallback(response) {
console.log("%cError", "color: red;");
console.log(response);
});
};
// ---------------------------------------------------------
});
</script>
<div class="row" ng-app="myApp" ng-controller="skillController" >
<div class="col-sm-12">
{{-- Header --}}
<div class="card-header bgm-lightblue ch-alt m-b-20">
<h2 >Skills ([[ skills.length]])<small> </small></h2>
<a ng-click="create()" data-toggle="modal" href="#create-modal" id="create" class="btn bgm-amber btn-float waves-effect waves-button waves-float"><i class="md md-add"></i></a>
</div>
{{-- /Header --}}
<div class="card-body card-padding" ng-repeat="(index,type) in types">
{{-- Skill Type Header --}}
<h5 ng-click="quickHeaderEdit([[ index ]])" ng-hide="currentHeaderType == '[[ index ]]'" >[[ index ]]</h5>
<span ng-show="currentHeaderType == '[[ index ]]'" >
<input ng-model="headerType" type="text" my-enter="quickHeaderUpdate(headerType, index)" >
</span>
{{-- /Skill Type Header --}}
{{-- Table --}}
<table class="table table-hover">
{{--Table Header--}}
<thead class="thin-border-bottom">
<th width="10%" >#</th>
<th width="25%" >Type</th>
<th width="25%" >Name</th>
<th width="25%" >Value</th>
<th width="15%" >Action</th>
</thead>
{{--Table Body--}}
<tbody>
<!--===========================
= Index =
============================-->
<tr ng-repeat="skill in type ">
<td>[[ $index+1 ]]</td>
<td ng-hide="row == [[ skill.id ]]" ng-click="quickEdit([[ skill.id]])"><span class="badge">[[ skill.type ]]</span></td>
<td ng-hide="row == [[ skill.id ]]" ng-click="quickEdit([[ skill.id]])">[[ skill.name ]]</td>
<td ng-hide="row == [[ skill.id ]]" ng-click="quickEdit([[ skill.id]])">[[ skill.value ]]</td>
<td ng-hide="row == [[ skill.id ]]" >
{{-- Edit --}}
<a ng-click="edit([[ skill.id]])" class="btn btn-success btn-xs ">
<i class="fa fa-edit "></i>
</a>
{{-- Delete --}}
<a ng-click="destroy([[ skill.id]])" class="btn btn-danger btn-xs">
<i class="fa fa-trash-o "></i>
</a>
</td>
<!--==========================
= Edit =
===========================-->
<td ng-dblClick="cancel()" my-enter="update([[ skill.id ]])" ng-show="row == [[ skill.id ]]">
<select ng-model="editSkill.type">
<option ng-repeat="skillType in skillTypes" value="[[ skillType ]]">[[ skillType ]]</option>
</select>
</td>
<td ng-dblClick="cancel()" my-enter="update([[ skill.id ]])" ng-show="row == [[ skill.id ]]">
<input ng-model="editSkill.name" type="text">
</td>
<td ng-dblClick="cancel()" my-enter="update([[ skill.id ]])" ng-show="row == [[ skill.id ]]">
<input ng-model="editSkill.value" type="text">
</td>
<td ng-dblClick="cancel()" my-enter="update([[ skill.id ]])" ng-show="row == [[ skill.id ]]">
{{-- Cancel --}}
<a ng-click="cancel([[ skill.id ]])" class="btn btn-danger btn-xs ">
<i class="fa fa-times "></i>
</a>
{{-- Save --}}
<a ng-click="update([[ skill.id ]])" class="btn btn-info btn-xs">
<i class="fa fa-check "></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{{-- Create Modal --}}
<div ng-show="showModal == true" class="modal fade" id="create-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">Type</span>
<div class="fg-line">
<select ng-model="type">
<option ng-repeat="skillType in skillTypes" value="[[ skillType ]]">[[ skillType ]]</option>
</select>
</div>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">Name</span>
<div class="fg-line">
<input type="text" class="text-primary" ng-model="name">
</div>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">Value</span>
<div class="fg-line">
<input type="text" class="text-primary" ng-model="value" my-enter="store()">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-link" ng-click="store()" >Create</button>
</div>
</div>
</div>
</div>
{{-- End of Modal --}}
</div>
@stop
@section('custom-scripts')
@stop