item deletion improvements

pandora_console/include/javascript/pandora_visual_console.js

@@ -375,57 +375,6 @@ function createVisualConsole(
         .init();
     });
 
-    // VC Item remove.
-    visualConsole.onItemRemove(function(e) {
-      var id = e.item.props.id;
-      var data = {
-        type: e.item.props.type
-      };
-      var taskId = "visual-console-item-update-" + id;
-
-      // Persist the new position.
-      asyncTaskManager
-        .add(taskId, function(done) {
-          var abortable = removeVisualConsoleItem(
-            baseUrl,
-            visualConsole.props.id,
-            id,
-            data,
-            function(error, data) {
-              if (error || !data) {
-                console.log(
-                  "[ERROR]",
-                  "[VISUAL-CONSOLE-CLIENT]",
-                  "[API]",
-                  error ? error.message : "Invalid response"
-                );
-
-                // Add the item to the list.
-                visualConsole.elementsById[e.item.props.id] = e.item;
-                visualConsole.elementIds.push(e.item.props.id);
-                // Item event handlers.
-                e.item.onClick(visualConsole.handleElementClick);
-                e.item.onDblClick(visualConsole.handleElementDblClick);
-                e.item.onMoved(visualConsole.handleElementMovement);
-                e.item.onResized(visualConsole.handleElementResizement);
-                e.item.onRemove(visualConsole.handleElementRemove);
-                // Add the item to the DOM.
-                visualConsole.containerRef.append(e.item.elementRef);
-              }
-
-              done();
-            }
-          );
-
-          return {
-            cancel: function() {
-              abortable.abort();
-            }
-          };
-        })
-        .init();
-    });
-
     if (updateInterval != null && updateInterval > 0) {
       // Start an interval to update the Visual Console.
       updateVisualConsole(props.id, updateInterval, updateInterval);
@@ -448,6 +397,48 @@ function createVisualConsole(
         asyncTaskManager.cancel("visual-console");
         asyncTaskManager.cancel("visual-console-start");
       }
+    },
+    deleteItem: function(item) {
+      var aux = item;
+      var id = item.props.id;
+
+      item.remove();
+
+      var taskId = "visual-console-item-update-" + id;
+
+      // Persist the new position.
+      asyncTaskManager
+        .add(taskId, function(done) {
+          var abortable = removeVisualConsoleItem(
+            baseUrl,
+            visualConsole.props.id,
+            id,
+            function(error, data) {
+              if (error || !data) {
+                console.log(
+                  "[ERROR]",
+                  "[VISUAL-CONSOLE-CLIENT]",
+                  "[API]",
+                  error ? error.message : "Invalid response"
+                );
+
+                // Add the item to the list.
+                var itemRetrieved = aux.props;
+                itemRetrieved["receivedAt"] = new Date();
+                visualConsole.addElement(itemRetrieved);
+              }
+
+              done();
+            }
+          );
+
+          return {
+            cancel: function() {
+              abortable.abort();
+            }
+          };
+        })
+        .init();
     }
   };
 }
@@ -697,7 +688,7 @@ function getVisualConsoleItem(baseUrl, vcId, vcItemId, callback) {
  * @return {Object} Cancellable. Object which include and .abort([statusText]) function.
  */
 // eslint-disable-next-line no-unused-vars
-function removeVisualConsoleItem(baseUrl, vcId, vcItemId, data, callback) {
+function removeVisualConsoleItem(baseUrl, vcId, vcItemId, callback) {
   // var apiPath = baseUrl + "/include/rest-api";
   var apiPath = baseUrl + "/ajax.php";
   var jqXHR = null;
@@ -742,8 +733,7 @@ function removeVisualConsoleItem(baseUrl, vcId, vcItemId, data, callback) {
         page: "include/rest-api/index",
         removeVisualConsoleItem: 1,
         visualConsoleId: vcId,
-        visualConsoleItemId: vcItemId,
+        visualConsoleItemId: vcItemId
-        data: data
       },
       "json"
     )

pandora_console/include/rest-api/index.php

@@ -121,9 +121,24 @@ if ($getVisualConsole === true) {
         return;
     }
 
+    $itemData = $item->toArray();
+    $itemAclGroupId = $itemData['aclGroupId'];
+
+    $aclWrite = check_acl($config['id_user'], $itemAclGroupId, 'VW');
+    $aclManage = check_acl($config['id_user'], $itemAclGroupId, 'VM');
+
+    // ACL.
+    if (!$aclWrite && !$aclManage) {
+        db_pandora_audit(
+            'ACL Violation',
+            'Trying to delete visual console item without group access'
+        );
+        http_response_code(403);
+        return;
+    }
+
     $data = get_parameter('data');
-    $class = VisualConsole::getItemClass((int) $data['type']);
+    $result = $item::delete($itemId);
-    $result = $class::delete($itemId);
     echo $result;
     return;
 }

pandora_console/operation/visual_console/view.php

@@ -167,7 +167,7 @@ if ($pure === false) {
     echo '<div id ="edit-controls" class="visual-console-edit-controls" style="visibility:hidden">';
     html_print_button(
         'delete_item',
-        'button_toolbox2',
+        'button_delete',
         true,
         '',
         'class="sub visual_editor_button_toolbox delete_item delete_min"',
@@ -176,9 +176,9 @@ if ($pure === false) {
     );
     html_print_button(
         'copy_item',
-        'button_toolbox2',
+        'button_copy',
         true,
-        "click_button_toolbox('copy_item');",
+        '',
         'class="sub visual_editor_button_toolbox copy_item delete_min"',
         false,
         true
@@ -386,12 +386,26 @@ $visualConsoleItems = VisualConsole::getItemsFromDB(
         }
     });
 
-    $(".visual-console-item, .is-editing").bind("click", function(event) {
+    visualConsoleManager.visualConsole.onItemSelectionChanged(function (e) {
-        var prueba = event.currentTarget;
+        if (e.selected === true) {
-        console.log(prueba);
+            $('#button-button_delete').prop('disabled', false);
+            $('#button-button_copy').prop('disabled', false);
+        } else {
+            $('#button-button_delete').prop('disabled', true);
+            $('#button-button_copy').prop('disabled', true);
+        }
     });
 
-    $('#button-button_toolbox2').click(function (event){
+    $('#button-button_delete').click(function (event){
-        visualConsoleManager.visualConsole.deleteItem();
+        // visualConsoleManager.visualConsole.deleteItem();
+        visualConsoleManager.visualConsole.elements.forEach(item => {
+            if (item.meta.isSelected === true) {
+                visualConsoleManager.deleteItem(item);
+            }
+        });
+    });
+
+    $('#button-button_copy').click(function (event){
+        
     });
 </script>

visual_console_client/src/Item.ts

@@ -84,6 +84,10 @@ export interface ItemResizedEvent {
   newSize: Size;
 }
 
+export interface ItemSelectionChangedEvent {
+  selected: boolean;
+}
+
 // TODO: Document
 class LinkInputGroup extends InputGroup<Partial<ItemProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
@@ -307,6 +311,10 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
   private readonly resizedEventManager = new TypedEvent<ItemResizedEvent>();
   // Event manager for remove events.
   private readonly removeEventManager = new TypedEvent<ItemRemoveEvent>();
+  // Event manager for selection change events.
+  private readonly selectionChangedEventManager = new TypedEvent<
+    ItemSelectionChangedEvent
+  >();
   // List of references to clean the event listeners.
   private readonly disposables: Disposable[] = [];
 
@@ -730,6 +738,15 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
       ...newMetadata
     };
 
+    if (
+      typeof newMetadata.isSelected !== "undefined" &&
+      prevMetadata.isSelected !== newMetadata.isSelected
+    ) {
+      this.selectionChangedEventManager.emit({
+        selected: newMetadata.isSelected
+      });
+    }
+
     // From this point, things which rely on this.props can access to the changes.
 
     // Check if we should re-render.
@@ -1094,6 +1111,24 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
     return disposable;
   }
 
+  /**
+   * To add an event handler to item selection.
+   * @param listener Function which is going to be executed when a item is removed.
+   */
+  public onSeletionChanged(
+    listener: Listener<ItemSelectionChangedEvent>
+  ): Disposable {
+    /*
+     * The '.on' function returns a function which will clean the event
+     * listener when executed. We store all the 'dispose' functions to
+     * call them when the item should be cleared.
+     */
+    const disposable = this.selectionChangedEventManager.on(listener);
+    this.disposables.push(disposable);
+
+    return disposable;
+  }
+
   // TODO: Document
   public getFormContainer(): FormContainer {
     return new FormContainer(

visual_console_client/src/VisualConsole.ts

@@ -12,7 +12,8 @@ import Item, {
   ItemClickEvent,
   ItemRemoveEvent,
   ItemMovedEvent,
-  ItemResizedEvent
+  ItemResizedEvent,
+  ItemSelectionChangedEvent
 } from "./Item";
 import StaticGraph, { staticGraphPropsDecoder } from "./items/StaticGraph";
 import Icon, { iconPropsDecoder } from "./items/Icon";
@@ -211,7 +212,9 @@ export default class VisualConsole {
   // Event manager for resize events.
   private readonly resizedEventManager = new TypedEvent<ItemResizedEvent>();
   // Event manager for remove events.
-  private readonly removeEventManager = new TypedEvent<ItemRemoveEvent>();
+  private readonly selectionChangedEventManager = new TypedEvent<
+    ItemSelectionChangedEvent
+  >();
   // List of references to clean the event listeners.
   private readonly disposables: Disposable[] = [];
 
@@ -280,7 +283,21 @@ export default class VisualConsole {
     this.elementIds = this.elementIds.filter(id => id !== e.item.props.id);
     delete this.elementsById[e.item.props.id];
     this.clearRelations(e.item.props.id);
-    this.removeEventManager.emit(e);
+  };
+
+  /**
+   * React to element selection change
+   * @param e Event object.
+   */
+  private handleElementSelectionChanged: (
+    e: ItemSelectionChangedEvent
+  ) => void = e => {
+    if (this.elements.filter(item => item.meta.isSelected == true).length > 0) {
+      e.selected = true;
+    } else {
+      e.selected = false;
+    }
+    this.selectionChangedEventManager.emit(e);
   };
 
   // TODO: Document
@@ -352,6 +369,8 @@ export default class VisualConsole {
       itemInstance.onMoved(context.handleElementMovement);
       itemInstance.onResized(context.handleElementResizement);
       itemInstance.onRemove(context.handleElementRemove);
+      itemInstance.onSeletionChanged(context.handleElementSelectionChanged);
+
       // Add the item to the DOM.
       context.containerRef.append(itemInstance.elementRef);
     } catch (error) {
@@ -763,16 +782,18 @@ export default class VisualConsole {
   }
 
   /**
-   * Add an event handler to the resizement of the visual console elements.
+   * Add an event handler to the elements selection change of the visual console .
    * @param listener Function which is going to be executed when a linked console is moved.
    */
-  public onItemRemove(listener: Listener<ItemRemoveEvent>): Disposable {
+  public onItemSelectionChanged(
+    listener: Listener<ItemSelectionChangedEvent>
+  ): Disposable {
     /*
      * The '.on' function returns a function which will clean the event
      * listener when executed. We store all the 'dispose' functions to
      * call them when the item should be cleared.
      */
-    const disposable = this.removeEventManager.on(listener);
+    const disposable = this.selectionChangedEventManager.on(listener);
     this.disposables.push(disposable);
 
     return disposable;
@@ -798,17 +819,6 @@ export default class VisualConsole {
     this.containerRef.classList.remove("is-editing");
   }
 
-  /**
-   * delete item.
-   */
-  public deleteItem(): void {
-    this.elements.forEach(item => {
-      if (item.meta.isSelected === true) {
-        item.remove();
-      }
-    });
-  }
-
   /**
    * Select an item.
    * @param itemId Item Id.