Insert classification for a request by a AJAX request

Project classifications are inserted through ajax request and the classification for a give project is being retrived and displayed on settings page for further operations

site/src/Librecores/ProjectRepoBundle/Controller/ProjectController.php

@@ -2,10 +2,12 @@
 
 namespace Librecores\ProjectRepoBundle\Controller;
 
+use Librecores\ProjectRepoBundle\Entity\ClassificationHierarchy;
 use Librecores\ProjectRepoBundle\Entity\GitSourceRepo;
 use Librecores\ProjectRepoBundle\Entity\LanguageStat;
 use Librecores\ProjectRepoBundle\Entity\OrganizationMember;
 use Librecores\ProjectRepoBundle\Entity\Project;
+use Librecores\ProjectRepoBundle\Entity\ProjectClassification;
 use Librecores\ProjectRepoBundle\Form\Type\ProjectType;
 use Librecores\ProjectRepoBundle\RepoCrawler\GithubRepoCrawler;
 use Librecores\ProjectRepoBundle\Util\Dates;
@@ -16,6 +18,7 @@
 use Symfony\Component\Form\Extension\Core\Type\SubmitType;
 use Symfony\Component\Form\Extension\Core\Type\UrlType;
 use Symfony\Component\Form\FormInterface;
+use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
@@ -255,9 +258,25 @@ public function settingsAction(Request $request, $parentName, $projectName)
             $em->flush();
         }
 
+        //retrive classification hierarchy and send it to settings page
+        $classificationCategories = $this->getDoctrine()->getManager()
+            ->getRepository(ClassificationHierarchy::class)
+            ->findAll();
+
+        $classificationHierarchy = array();
+        $id = 0;
+        foreach ($classificationCategories as $category) {
+            $temp = array(
+                1 => $category->getId(),
+                2 => $category->getParent() == null ? $category->getParent(): $category->getParent()->getId(),
+                3 => $category->getName()
+            );
+            $classificationHierarchy[$id++] = $temp;
+        }
+
         return $this->render(
             'LibrecoresProjectRepoBundle:Project:settings.html.twig',
-            array('project' => $p, 'form' => $form->createView())
+            array('project' => $p, 'form' => $form->createView(), 'classificationHierarchy' => $classificationHierarchy )
         );
     }
 
@@ -561,4 +580,58 @@ private function makeGraph($languages, $multiDim = true)
 
         return $graph;
     }
+
+    /**
+     * Set The Classifications for a project
+     *
+     * This method helps to specify classification for a project
+     *
+     * @param Request $request
+     *
+     * @return Response
+     */
+    public function insertClassificationAction(Request $request) {
+        $p = $this->getProject($request->get('parentName'), $request->get('projectName'));
+        $em = $this->getDoctrine()->getManager();
+        $projectClassification = new ProjectClassification();
+        $projectClassification->setProject($p);
+        $projectClassification->setClassification($request->get('classification'));
+        $projectClassification->setCreatedBy($p->getParentUser());
+        $em->persist($projectClassification);
+        $em->flush();
+
+        $response = new Response("success",Response::HTTP_OK);
+        return $response;
+    }
+
+    /**
+     * Get The Classifications for a project
+     *
+     * This method retrives the classifications that are specified
+     * for a given project.
+     *
+     * @param string  $parentName  URL component: name of the parent
+     *                             (user or organization)
+     * @param string  $projectName URL component: name of the project
+     * @return JsonResponse
+     */
+    public function getClassificationAction($projectName, $parentName) {
+        $p = $this->getProject($parentName, $projectName);
+
+        $classifications = $this->getDoctrine()->getManager()
+            ->getRepository(ProjectClassification::class)
+            ->findBy(['project' => $p->getId()]);
+        $response = array();
+        $id = 0;
+        foreach ($classifications as $classification) {
+            $temp = array(
+                'id' => $classification->getId(),
+                'classification' => $classification->getClassification(),
+                'project' => $p->getId()
+            );
+            $response[$id++] = $temp;
+        }
+
+        return new JsonResponse($response);
+    }
 }

site/src/Librecores/ProjectRepoBundle/Resources/config/routing.yml

@@ -84,6 +84,13 @@ librecores_project_repo_project_update:
     defaults:
         _controller: 'LibrecoresProjectRepoBundle:Project:update'
 
+librecores_project_repo_project_insert_classification:
+    path: /project/insert/classifications
+    defaults: { _controller: LibrecoresProjectRepoBundle:Project:insertClassification }
+
+librecores_project_repo_project_get_classification:
+    path: /{parentName}/{projectName}/classification
+    defaults: { _controller: LibrecoresProjectRepoBundle:Project:getClassification }
 
 # Organization routes
 

site/src/Librecores/ProjectRepoBundle/Resources/views/Project/settings.html.twig

@@ -108,15 +108,24 @@
         <div class="panel-heading">
           <h3 class="panel-title">Project Classification</h3>
         </div>
-        <div class="panel-body classification-hierarchy row">
-          <div class="classification-system">
-            <select id="category-1" class="classification-category">
-              <option value="NULL" data-parentId="NULL">select a category</option>
-            </select>
-          </div>
+        <div class="">
 
-          <a href="" class="close-category" data-toggle="tooltip" data-placement="bottom" title="Remove the last child category"><i class="fa fa-close"></i></a>
-          <a href="" class="add-category" data-toggle="tooltip" data-placement="bottom" title="Add child category" ><i class="fa fa-plus"></i></a>
+        </div>
+        <div class="panel-body">
+          <div class="classification-hierarchy">
+            <label class="control-label">Specify Classifications for your project</label>
+            <div class="classification-system">
+              <select id="category-1" class="classification-category">
+                <option value="NULL" data-parentId="NULL">select a category</option>
+              </select>
+            </div>
+            <a href="" class="insert-classification btn btn-primary"><i class="fa fa-plus"></i> Add Classification</a>
+            <div class="classifications">
+              <h4>Classifications</h4>
+            </div>
+            <a href="" class="close-category" data-toggle="tooltip" data-placement="bottom" title="Remove the last child category"><i class="fa fa-close"></i></a>
+            <a href="" class="add-category" data-toggle="tooltip" data-placement="bottom" title="Add child category" ><i class="fa fa-plus"></i></a>
+          </div>
         </div>
       </div>
 
@@ -182,6 +191,6 @@ $(document).ready(function(){
   //insert classification
   // classification hierarchy data
   var classificationDetails = {{ classificationHierarchy|json_encode|raw }}
-  insertClassification(classificationDetails);
+  insertClassification(classificationDetails, "{{ project.getParentName() }}", "{{ project.getName() }}");
 });
 {% endblock %}

site/web/assets/css/librecores.css

@@ -519,3 +519,63 @@ h1 a:hover, h1 a:active {
 .bootstrap-select.btn-group .dropdown-menu {
   z-index: 1050; /* to over-ride navbar z-index*/
 }
+
+.classification-category {
+  height: 40px;
+  margin:0 10px 5px 0px;
+}
+
+.classification-hierarchy {
+  position: relative;
+}
+
+.close-category,
+.add-category {
+  position: absolute;
+  top: -5px;
+  padding: 5px;
+}
+
+.close-category {
+  right: 15px;
+}
+
+ .add-category {
+   right: 40px;
+ }
+
+ .insert-classification{
+   float: right;
+ }
+
+ .classifications {
+  margin-top: 10px;
+  margin-bottom: 15px;
+  display: table;
+}
+
+.categories {
+  font-weight: 500;
+  font-size: 14px;
+  border-radius: 2px;
+  background-color: #3fb0ac;
+  color: #fff;
+  display: inline-block;
+  margin: 0 5px 5px 0;
+}
+
+.categories span {
+  display: table-cell;
+  padding: 6px;
+  vertical-align: middle;
+}
+
+.classifications a {
+  text-align: center;
+  display: table-cell;
+  color: #fff;
+  background: transparent;
+  border: 0;
+  border-left: 1px solid hsla(0,0%,100%,.2);
+  padding: 6px;
+}

site/web/assets/js/classification.js

@@ -1,9 +1,9 @@
 
-  var insertClassification = function(classificationDetails) {
+  var insertClassification = function(classificationDetails, parentName, projectName) {
     var count = 1;
     for(var i = 0; i < classificationDetails.length; i++) {
       if(classificationDetails[i][2] == null) {
-        $('#category-'+count+'').append('<option value="'+classificationDetails[i][3]+'" data-id='+classificationDetails[i][1]+'>'+classificationDetails[i][3]+'</option>');
+        $('#category-'+count+'').append('<option value="'+classificationDetails[i][3]+'">'+classificationDetails[i][3]+'</option>');
       }
     }
     //adding tooltip to the button
@@ -20,6 +20,7 @@
         $(this).nextAll().remove();
       })
     }
+    //add a new child category
     $('.add-category').on('click',function(event){
       event.preventDefault();
       var value = $('#category-'+count+'').val();
@@ -59,12 +60,11 @@
         count--;
       }
     })
-
-    //send the classification of the project to controller
-    $('form').on('submit',function() {
-      var $self = $(this);
+    //send ajax request for inserting classification for a project
+    $('.insert-classification').on('click',function(event){
+      event.preventDefault();
       var classification = '';
-      for(var j = 1; j <= count ;j++) {
+      for(var j = 1; j <= count;j++) {
         if($('#category-'+j+'').val() != 'NULL') {
           if(j == 1) {
             classification = $('#category-'+j+'').val();
@@ -77,17 +77,63 @@
           break;
         }
       }
-      if(classification == '') {
-        var input = $("<input>")
-          .attr("type", "hidden")
-          .attr("name", "classification").val("NULL");
-      }
-      else	{
-        var input = $("<input>")
-          .attr("type", "hidden")
-          .attr("name", "classification").val(classification);
+
+      if( classification != '') {
+        $.ajax({
+          url: "/project/insert/classifications",
+          type: "GET",
+          data: { "classification" : classification, "parentName" : parentName, "projectName" : projectName },
+          async: true,
+          success: function(data, status) {
+            count = 1;
+            $('#category-'+count+'').empty();
+            $('#category-'+count+'').append('<option value="NULL" selected="selected">select a category</option>')
+            for(var i = 0; i < classificationDetails.length; i++) {
+              if(classificationDetails[i][2] == null) {
+                $('#category-'+count+'').append('<option value="'+classificationDetails[i][3]+'">'+classificationDetails[i][3]+'</option>');
+              }
+            }
+            $('#category-'+count+'').nextAll().remove();
+            getClassification();
+
+          },
+          error : function(xhr, textStatus, errorThrown) {
+          }
+        })
       }
-      $self.append($(input));
-      $self.submit();
+
     })
+
+    //displaying classification details for a project
+    $('.classifications').hide();
+    getClassification();
+    function getClassification() {
+      $.ajax({
+        url: "/"+parentName+"/"+projectName+"/classification",
+        type: "GET",
+        async: true,
+        success: function(data,status) {
+          if(data.length >= 1) {
+            $('.classifications').show();
+            $('.classifications').empty();
+            $('.classifications').append('<h4>Classifications</h4>');
+            for(var i = 0; i < data.length; i++) {
+              $('.classifications').append('<div class="categories">\
+                        <span>'+data[i]['classification']+'</span>\
+                    <a class="update-classification" href="#">\
+                      <i class="fa fa-edit" aria-hidden="true"></i>\
+                    </a>\
+                    <a class="delete-classification" href="#">\
+                      <i class="fa fa-trash" aria-hidden="true"></i>\
+                    </a>\
+                  </div>')
+            }
+          }
+          else {
+            $('.classifications').hide();
+          }
+        }
+      })
+    }
+
   }