fix(Canvas): Canvas directive to component implementation

Author: Amineta Lo

src/canvas-view/canvas-editor/toolbox-items.component.js

@@ -0,0 +1,27 @@
+(function () {
+  'use strict';
+
+  angular.module('patternfly.canvas')
+    .component('toolboxItems', {
+      templateUrl: 'canvas-view/canvas-editor/toolbox-items.html',
+      bindings: {
+        items: '=',
+        startDragCallback: '=',
+        clickCallback: '=',
+        searchText: '='
+      },
+      controller: function toolboxItemsController () {
+        var ctrl = this;
+
+        ctrl.clickCallbackfmDir = function (item) {
+          if (!item.disableInToolbox) {
+            ctrl.clickCallback(item);
+          }
+        };
+
+        ctrl.startDragCallbackfmDir = function (event, ui, item) {
+          ctrl.startDragCallback(event, ui, item);
+        };
+      }
+    });
+})();

src/canvas-view/canvas-editor/toolbox-items.directive.js

@@ -1,12 +1,12 @@
 <ul class="toolbox-items-list">
-    <li class="toolbox-item" ng-repeat="item in vm.items | filter:vm.searchText"
-        data-drag="{{!item.disableInToolbox}}" jqyoui-draggable="{onStart:'vm.startDragCallbackfmDir(item)'}"
-        ng-class="{'not-draggable': item.disableInToolbox}"
-        data-jqyoui-options="{revert: 'invalid', helper: 'clone'}"
-        ng-click="vm.clickCallbackfmDir(item)"
-        uib-tooltip="{{(item.disableInToolbox ? 'Items cannot be added to the canvas more than once.' : '')}}">
-        <img ng-if="item.image" src="{{item.image}}" alt="{{item.name}}"/>
-        <i ng-if="item.icon && !item.image" class="draggable-item-icon {{item.icon}}"></i>
-        <span>{{ item.name }}</span>
-    </li>
+  <li class="toolbox-item" ng-repeat="item in $ctrl.items | filter:$ctrl.searchText"
+      data-drag="{{!item.disableInToolbox}}" jqyoui-draggable="{onStart:'$ctrl.startDragCallbackfmDir(item)'}"
+      ng-class="{'not-draggable': item.disableInToolbox}"
+      data-jqyoui-options="{revert: 'invalid', helper: 'clone'}"
+      ng-click="$ctrl.clickCallbackfmDir(item)"
+      uib-tooltip="{{(item.disableInToolbox ? 'Items cannot be added to the canvas more than once.' : '')}}">
+    <img ng-if="item.image" src="{{item.image}}" alt="{{item.name}}"/>
+    <i ng-if="item.icon && !item.image" class="draggable-item-icon {{item.icon}}"></i>
+    <span>{{ item.name }}</span>
+  </li>
 </ul>