delete composition ajax link is working !

sites/all/modules/figli/edlp_studio/assets/js/edlp_studio.js

@@ -77,11 +77,36 @@
   function initAjaxCompoLinks(){
     console.log('studio initAjaxCompoLinks');
     $('.new-composition-link:not(.ajax-enabled)')
+      .addClass('ajax-enabled')
+      .on('click', onClickNewCompoLink);
+    $('.composition-link:not(.ajax-enabled)')
       .addClass('ajax-enabled')
       .on('click', onClickCompoLink);
+    $('.delete-composition-link:not(.ajax-enabled)')
+      .addClass('ajax-enabled')
+      .on('click', onClickDeleteCompoLink);
   };
 
+
+
+  //   ___                    ___
+  //  / _ \ _ __  ___ _ _    / __|___ _ __  _ __  ___
+  // | (_) | '_ \/ -_) ' \  | (__/ _ \ '  \| '_ \/ _ \
+  //  \___/| .__/\___|_||_|  \___\___/_|_|_| .__/\___/
+  //       |_|                             |_|
   function onClickCompoLink(e){
+    e.preventDefault();
+    console.log('onClickCompoLink');
+
+    return false;
+  };
+
+  //  _ _  _____ __ __  __ ___ _ __  _ __  ___
+  // | ' \/ -_) V  V / / _/ _ \ '  \| '_ \/ _ \
+  // |_||_\___|\_/\_/  \__\___/_|_|_| .__/\___/
+  //                                |_|
+
+  function onClickNewCompoLink(e){
     e.preventDefault();
     setInputForNewCompoName($(this));
     return false;
@@ -141,6 +166,43 @@
   };
 
 
+  // ___      _     _
+  // |   \ ___| |___| |_ ___   __ ___ _ __  _ __  ___
+  // | |) / -_) / -_)  _/ -_) / _/ _ \ '  \| '_ \/ _ \
+  // |___/\___|_\___|\__\___| \__\___/_|_|_| .__/\___/
+  //                                       |_|
+  function onClickDeleteCompoLink(e){
+    e.preventDefault();
+    // TODO: confirm
+    deleteCompo($(this));
+    return false;
+  };
+  function deleteCompo($link){
+    var ajax_path = $link.attr('data-drupal-link-system-path');
+    var path = window.location.origin + Drupal.url(ajax_path);
+    $link.parents('li').addClass('ajax-loading');
+    $.getJSON(path, {})
+      .done(function(data){
+        onDeleteCompoDone(data, $link);
+      })
+      .fail(function(jqxhr, textStatus, error){
+        onErrorDeleteCompo(jqxhr, textStatus, error, $link);
+      });
+  };
+  function onDeleteCompoDone(data, $link, $form){
+    console.log('onDeleteCompoDone',data);
+    if(data.status == "ok"){
+      $link.parents('li').remove();
+    }else{
+      console.warn(data.message);
+    }
+  };
+  function onErrorDeleteCompo(jqxhr, textStatus, error, $link){
+    $link.parents('li').removeClass('ajax-loading');
+    console.warn('delete compo load failed : '+error, jqxhr.responseText);
+  };
+
+
   //  ___ _           _ _              _
   // / __| |_ _  _ __| (_)___ ___ _  _(_)
   // \__ \  _| || / _` | / _ \___| || | |

sites/all/modules/figli/edlp_studio/includes/edlp_compositions_list.inc

@@ -11,20 +11,41 @@ function template_preprocess_edlp_compositions_list(&$vars){
   );
   foreach($vars['composition_entities'] as $entity){
     // get the url
-    $url = Url::fromRoute('entity.composition.canonical', ['composition' => $entity->id()], ['absolute' => TRUE]);
+    $url = Url::fromRoute('entity.composition.canonical',
+            ['composition' => $entity->id()], ['absolute' => TRUE]);
+    // get the delete url
+    $delete_url = Url::fromRoute('edlp_studio.composition_controller_action_ajax',
+                  ['action' => 'delete', 'cid'=>$entity->id()], ['absolute' => TRUE]);
+
     $title = $entity->getName();
+
     $vars['compositions']['#items'][] = array(
-      '#title' => $title,
-      '#type' => 'link',
-      '#url' => $url,
-      '#options'=>array(
-        'attributes' => array(
-          'data-drupal-link-system-path' => $url->getInternalPath(),
-          'nid' => $entity->id(),
-          'class' => ['composition-link'],
-          'title'=>$title,
+      'compo_link' => array(
+        '#title' => $title,
+        '#type' => 'link',
+        '#url' => $url,
+        '#options'=>array(
+          'attributes' => array(
+            'data-drupal-link-system-path' => $url->getInternalPath(),
+            'nid' => $entity->id(),
+            'class' => ['composition-link'],
+            'title'=>$title,
+          ),
         ),
       ),
+      'delete_link' => array(
+        '#title' => "delete",
+        '#type' => 'link',
+        '#url' => $delete_url,
+        '#options'=>array(
+          'attributes' => array(
+            'data-drupal-link-system-path' => $delete_url->getInternalPath(),
+            'nid' => $entity->id(),
+            'class' => ['delete-composition-link'],
+            'title'=> t('Delete @title', array('@title'=>$title)),
+          ),
+        ),
+      )
     );
   }
 

sites/all/modules/figli/edlp_studio/src/Controller/CompositionController.php

@@ -61,9 +61,13 @@ class CompositionController extends ControllerBase {
           $this->error_message = t("Composition creation needs a name as query paramater!");
         }
         break;
-      // case 'delete':
-      //
-      //   break;
+      case 'delete':
+        if($cid){
+          $this->deleteComposition($cid);
+        }else{
+          $this->error_message = t("Composition deletion needs a cid as url paramater!");
+        }
+        break;
       // case 'rename':
       //
       //   break;
@@ -71,39 +75,46 @@ class CompositionController extends ControllerBase {
 
     if($this->error_message){
       $status = 'error';
-    }
-
-    if($status == 'error'){
       $message = $this->error_message;
-    }else{
-      $url = Url::fromRoute('entity.composition.canonical', ['composition' => $this->compo->id()], ['absolute' => TRUE]);
-      $title = $this->compo->getName();
-      $new_link_build = array(
-        '#title' => $title,
-        '#type' => 'link',
-        '#url' => $url,
-        '#options'=>array(
-          'attributes' => array(
-            'data-drupal-link-system-path' => $url->getInternalPath(),
-            'nid' => $this->compo->id(),
-            'class' => ['composition-link'],
-            'title'=>$title,
-          ),
-        ),
-      );
-      $new_link = render($new_link_build);
     }
 
-
     // JSON
     $response = new JsonResponse();
     $data = array(
       'action' => $action,
       'status' => $status,
-      'message' => $this->error_message,
-      'new_name' => $request->query->get('new_name'),
-      'new_link' => $new_link,
+      'message' => $this->error_message
     );
+    if($status == 'ok'){
+      switch ($action) {
+        case 'create':
+          $url = Url::fromRoute('entity.composition.canonical', ['composition' => $this->compo->id()], ['absolute' => TRUE]);
+          $title = $this->compo->getName();
+          $new_link_build = array(
+            '#title' => $title,
+            '#type' => 'link',
+            '#url' => $url,
+            '#options'=>array(
+              'attributes' => array(
+                'data-drupal-link-system-path' => $url->getInternalPath(),
+                'nid' => $this->compo->id(),
+                'class' => ['composition-link'],
+                'title'=>$title,
+              ),
+            ),
+          );
+
+          $data += array(
+            'new_name' => $title,
+            'new_link' => render($new_link_build),
+          );
+          break;
+        // case 'delete':
+        //   # code...
+        //   break;
+      }
+    }
+
     $response->setData($data);
     return $response;
 
@@ -124,4 +135,8 @@ class CompositionController extends ControllerBase {
     $this->compo->save();
   }
 
+  private function deleteComposition($cid){
+    $this->compo = entity_load('composition', $cid);
+    $this->compo->delete();
+  }
 }

sites/all/themes/custom/edlptheme/assets/dist/img/delete.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 2.6458333 2.6458334"><g fill="none"><g stroke="#000" stroke-width=".726"><path d="M.182.182l2.282 2.282M.182 2.464L2.464.182" stroke-width=".41561322"/></g><path style="isolation:auto;mix-blend-mode:normal" d="M1.883 0H.763A.76.76 0 0 0 0 .762v1.121c0 .423.34.763.762.763h1.121a.76.76 0 0 0 .763-.763V.763A.76.76 0 0 0 1.883 0z" color="#000" overflow="visible"/></g></svg>

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -1659,8 +1659,33 @@ main[role="main"] span.close-col-btn {
         width: 30%;
         height: 100%;
         overflow-y: auto; }
+        #studio-ui .composition_ui > .wrapper .compositions-list li {
+          opacity: 1;
+          -webkit-transition: opacity 0.3s ease-in-out;
+          transition: opacity 0.3s ease-in-out; }
+          #studio-ui .composition_ui > .wrapper .compositions-list li:hover a.delete-composition-link {
+            opacity: 1; }
+          #studio-ui .composition_ui > .wrapper .compositions-list li.ajax-loading {
+            opacity: 0.4; }
         #studio-ui .composition_ui > .wrapper .compositions-list a {
           font-size: 0.756em; }
+          #studio-ui .composition_ui > .wrapper .compositions-list a.composition-link {
+            display: inline-block;
+            width: calc(100% - 14px); }
+          #studio-ui .composition_ui > .wrapper .compositions-list a.delete-composition-link {
+            display: inline-block;
+            vertical-align: middle;
+            width: 7px;
+            height: 7px;
+            margin-left: 5px;
+            text-indent: 300px;
+            overflow: hidden;
+            background-image: url("../img/delete.svg");
+            background-repeat: no-repeat;
+            background-size: contain;
+            opacity: 0;
+            -webkit-transition: opacity 0.3s ease-in-out;
+            transition: opacity 0.3s ease-in-out; }
           #studio-ui .composition_ui > .wrapper .compositions-list a.new-composition-link {
             display: inline-block;
             vertical-align: top;

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -549,8 +549,37 @@ main[role="main"]{
       .compositions-list{
         width:30%; height:100%;
         overflow-y: auto;
+        li{
+          opacity: 1;
+          transition: opacity 0.3s ease-in-out;
+          &:hover{
+            a.delete-composition-link{
+              opacity: 1;
+            }
+          }
+          &.ajax-loading{
+            opacity: 0.4;
+          }
+        }
         a{
           font-size: 0.756em;
+          $s:7px; $m:5px;
+          &.composition-link{
+            display: inline-block;
+            width: calc(100% - #{$s +$m +2});
+          }
+          &.delete-composition-link{
+            display: inline-block;
+            vertical-align: middle;
+            $s:7px; width:$s; height:$s;
+            margin-left: $m;
+            text-indent: 300px; overflow: hidden;
+            background-image: url('../img/delete.svg');
+            background-repeat: no-repeat;
+            background-size: contain;
+            opacity: 0;
+            transition: opacity 0.3s ease-in-out;
+          }
           &.new-composition-link{
             // padding-left: 1em;
             &:before{