Merge pull request #1134 from GauthLin/custom-form-action

Add form for resources actions

Library/Installation/Plugin/Configuration.php

@@ -197,6 +197,7 @@ function ($v) use ($listResourceActions, $updateMode) {
                                 ->thenInvalid($pluginFqcn . ' : the resource action name already exists')
                             ->end()
                         ->end()
+                        ->booleanNode('is_form')->defaultFalse()->end()
                     ->end()
                 ->end()
             ->end()

Library/Installation/Plugin/DatabaseWriter.php

@@ -395,36 +395,35 @@ private function updateIcons(array $resource, ResourceType $resourceType, Plugin
     }
 
     /**
-     * @param array $actions
+     * @param array $action
      */
-    public function persistResourceAction(array $actions)
+    public function persistResourceAction(array $action)
     {
-        foreach ($actions as $action) {
-            $resourceAction = new MenuAction();
+        $resourceAction = new MenuAction();
 
-            $resourceAction->setName($action);
-            $resourceAction->setAsync(1);
-            $resourceAction->setIsCustom(1);
-            $resourceAction->setValue(1);
+        $resourceAction->setName($action['name']);
+        $resourceAction->setAsync(1);
+        $resourceAction->setIsForm($action['is_form']);
+        $resourceAction->setIsCustom(1);
+        $resourceAction->setValue(1);
 
-            $this->em->persist($resourceAction);
-        }
+        $this->em->persist($resourceAction);
 
         $this->em->flush();
     }
 
     /**
-     * @param array $actions
+     * @param array $action
      */
-    public function updateResourceAction(array $actions)
+    public function updateResourceAction(array $action)
     {
-        foreach ($actions as $action) {
-            $resourceAction = $this->em->getRepository('ClarolineCoreBundle:Resource\MenuAction')
-                ->findOneBy(array('name' => $action, 'resourceType' => null, 'isCustom' => true));
+        $resourceAction = $this->em->getRepository('ClarolineCoreBundle:Resource\MenuAction')
+            ->findOneBy(array('name' => $action['name'], 'resourceType' => null, 'isCustom' => true));
 
-            if ($resourceAction === null) {
-                $this->persistResourceAction(array($action));
-            }
+        if ($resourceAction === null) {
+            $this->persistResourceAction($action);
+        } else {
+            $resourceAction->setIsForm($action['is_form']);
         }
     }
 

Resources/doc/sections/plugins/resource-actions.md

@@ -14,30 +14,81 @@ plugin:
     resource_actions:
         # You can define as many resource actions as you want in this file
       - name: actionname1
+        is_form: true (optional)
       - name: actionname2
+        is_form: false
 ```
 
-## Listener implementation class 
+First, define the *name* of the action you'll want to add to your resource.
+Then define the *is_form* parameter. If it's set to true, a popup form will show when you click an the action. If not, you'll be redirect to a new page you define in your Listener.
 
-Define your listener class in the *Listener* folder of your plugin.
+## Listener implementation class
+Define your listener class in the *Listener* folder of your plugin. 
+As describe above, there are two possibles types of action when you click on the resource action, be redirected to a new page or create a form popup.
 
+### Be redirected to a new page
+Here is an exemple, if you want to be redirected to a new page.
 ```php
 /**
- * @DI\Observe("resource_action_[actionName]")
+ * @DI\Observe("resource_action_actionName")
  *
  * @param CustomActionResourceEvent $event
  */
-public function on[actionName]Action(CustomActionResourceEvent $event)
+public function onActionNameAction(CustomActionResourceEvent $event)
 {
-    $activity = $event->getResource();
-    $content = ...
-    $response = new Response($content);
-    $event->setResponse($response);
+    $content = $this->templatingEngine->render('SomeBundle:SomeDirectory:someTwig');
+    $event->setResponse(new Response($content));
     $event->stopPropagation();
 }
 ```
+Replace actionName by the name of the action you define in your *Resource/config/config.yml*.
 
-Replace \[actionName\] by the name of the action you define in your *Resource/config/config.yml*.
+### Form set up
+#### Create
+If you want to create a form popup, you must render a modal form.
+
+```php
+/**
+ * @DI\Observe("resource_action_actionName")
+ *
+ * @param CustomActionResourceEvent $event
+ */
+public function onActionNameAction(CustomActionResourceEvent $event)
+{
+    $content = $this->templatingEngine->render('SomeBundle:SomeDirectory:form.html.twig', array('form' => $form);
+    $event->setResponse(new Response($content));
+    $event->stopPropagation();
+}
+```
+
+```html
+<-- Resources/views/SomeDirectory/form.html.twig ->
+<div class="modal-dialog">
+    <form role="form" novalidate="novalidate"
+        action="{{ path('someRoute') }}"
+        method="post" class="modal-content" {{ form_enctype(form) }}>
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+            <h4 class="modal-title">Your title</h4>
+        </div>
+        <div class="modal-body">
+            {{ form_errors(form) }}
+            {{ form_widget(form) }}
+            {{ form_rest(form) }}
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'cancel'|trans({}, 'platform') }}</button>
+            <input type="submit" class="btn btn-primary" value="{{ 'ok'|trans({}, 'platform') }}">
+        </div>
+    </form>
+</div>
+```
+
+If you want to hide the form, you have to use the *cancel* button as shown above.
+Same for the submit button.
+
+#### Submit
+If the form is valid, you have to return a JsonResponse.
 
 ## Translation
 
@@ -47,10 +98,10 @@ We use lower case for every translation keys.
 You must translate your resource actions names in this file.
 
 ```yml
-[actionName]: 'My first action'
+actionName: 'My first action'
 ```
 
-Replace \[actionName\] by the name of the action. 
+Replace actionName by the name of the action. 
 
 [[Documentation index]][1]
 

Resources/public/js/resource/manager/views/resource/form.js

@@ -32,6 +32,10 @@
             'edit-properties': {
                 route: 'claro_resource_form_properties',
                 onSuccess: 'edited-node'
+            },
+            'custom-action-form': {
+                route: 'claro_resource_action',
+                onSuccess: 'custom-action-done'
             }
         },
         initialize: function (dispatcher) {
@@ -64,14 +68,23 @@
         },
         render: function (event) {
             this.targetNodeId = event.nodeId || this.targetNodeId;
-            this.eventOnSuccess = event.eventOnSuccess
+
+            if (event.isCustomAction) {
+                this.eventOnSuccess = 'custom-action-done';
+            } else {
+                this.eventOnSuccess = event.eventOnSuccess
                 || this.knownActions[event.action].onSuccess + '-' + event.view;
+            }
 
             if (!event.errorForm) {
-                var route = this.knownActions[event.action].route;
-                var parameters = event.action === 'create-form' ?
-                    { resourceType: event.resourceType } :
-                    { node: event.nodeId };
+                var route = event.isCustomAction ? 'claro_resource_action' : this.knownActions[event.action].route;
+                if (event.action === 'create-form') {
+                    var parameters = { resourceType: event.resourceType };
+                } else if (event.isCustomAction) {
+                    var parameters = { action: event.action, node: event.nodeId };
+                } else {
+                    var parameters = { node: event.nodeId };
+                }
                 Claroline.Modal.fromRoute(route, parameters, _.bind(function (element) {
                     this.setElement(element);
                     this.replaceId(event.nodeId);

Resources/public/js/resource/manager/views/resource/thumbnail.js

@@ -32,12 +32,16 @@
             event.preventDefault();
             var action = event.currentTarget.getAttribute('data-action');
             var nodeId = event.currentTarget.getAttribute('data-id');
-            var isCustom = event.currentTarget.getAttribute('data-is-custom');
-            var eventName = isCustom === 'no' ? action : 'custom-action';
+            var isCustom = event.currentTarget.getAttribute('data-is-custom') === 'yes';
+            var eventName = isCustom ? 'custom-action' : action;
+            var isForm = event.currentTarget.getAttribute('data-action-type') === 'display-form';
+            eventName = isCustom && isForm ? 'custom-action-form' : eventName;
+
             this.dispatcher.trigger(eventName, {
                 action: action,
                 nodeId: nodeId,
-                view: this.parameters.viewName
+                view: this.parameters.viewName,
+                isCustomAction: isCustom
             });
         },
         render: function (node, isSelectionAllowed) {