Blade with Angular Integration

skills.index.blade.php

@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