From b6bb2bb57627d131a80c2e3beec1fb989c6545b7 Mon Sep 17 00:00:00 2001
From: iglocska <andras.iklody@gmail.com>
Date: Wed, 11 Dec 2019 10:03:43 +0100
Subject: [PATCH] new: [UI] first implementation of the modal forms

---
 app/Controller/EventsController.php           |   1 -
 app/Model/User.php                            |   2 +-
 app/View/Attributes/add.ctp                   |   2 +-
 app/View/Elements/eventattributetoolbar.ctp   |   7 +-
 .../genericElements/Form/genericForm.ctp      |  50 ++++--
 .../genericElements/Form/submitButton.ctp     |   8 +-
 app/webroot/css/main.css                      |   4 +
 app/webroot/js/misp.js                        | 159 +++++++++++-------
 8 files changed, 147 insertions(+), 86 deletions(-)

diff --git a/app/Controller/EventsController.php b/app/Controller/EventsController.php
index a144e8ae5..765aa2bd1 100644
--- a/app/Controller/EventsController.php
+++ b/app/Controller/EventsController.php
@@ -2420,7 +2420,6 @@ class EventsController extends AppController
             $fieldDesc['analysis'][$key] = $this->Event->analysisDescriptions[$key]['formdesc'];
         }
         $this->set('analysisLevels', $analysisLevels);
-
         $this->set('fieldDesc', $fieldDesc);
         $this->set('eventDescriptions', $this->Event->fieldDescriptions);
         $this->set('event', $this->Event->data);
diff --git a/app/Model/User.php b/app/Model/User.php
index 48a633ce3..273fa3cb8 100644
--- a/app/Model/User.php
+++ b/app/Model/User.php
@@ -1500,7 +1500,7 @@ class User extends AppModel
             $endDate = time();
         }
         $dates = array();
-        for ($d=$startDate; $d < $endDate; $d=$d+3600*24) { 
+        for ($d=$startDate; $d < $endDate; $d=$d+3600*24) {
             $dates[] = date('Y-m-d', $d);
         }
         $csv = 'Date,Close\n';
diff --git a/app/View/Attributes/add.ctp b/app/View/Attributes/add.ctp
index 91216f37a..aa526294f 100644
--- a/app/View/Attributes/add.ctp
+++ b/app/View/Attributes/add.ctp
@@ -70,7 +70,7 @@
             'submit' => array(
                 'action' => $action,
                 'ajaxSubmit' => sprintf(
-                    'submitPopoverForm(%s, %s)',
+                    'submitPopoverForm(%s, %s, 0, 1)',
                     "'" . ($action == 'add' ? h($event_id) : h($attribute['Attribute']['id'])) . "'",
                     "'" . h($action) . "'"
                 )
diff --git a/app/View/Elements/eventattributetoolbar.ctp b/app/View/Elements/eventattributetoolbar.ctp
index 14c977a9a..a3ff26e83 100644
--- a/app/View/Elements/eventattributetoolbar.ctp
+++ b/app/View/Elements/eventattributetoolbar.ctp
@@ -49,10 +49,11 @@
                 'children' => array(
                     array(
                         'id' => 'create-button',
-                        'title' => __('Add attribute'),
+                        'title' => $possibleAction === 'attribute' ? __('Add attribute') : __('Add proposal'),
                         'fa-icon' => 'plus',
-                        'onClick' => 'clickCreateButton',
-                        'onClickParams' => array($event['Event']['id'], $possibleAction)
+                        //'onClick' => 'clickCreateButton',
+                        'onClick' => 'openGenericModal',
+                        'onClickParams' => array('/' . $possibleAction . 's/add/' . h($event['Event']['id']))
                     ),
                     array(
                         'id' => 'multi-edit-button',
diff --git a/app/View/Elements/genericElements/Form/genericForm.ctp b/app/View/Elements/genericElements/Form/genericForm.ctp
index c2be2ec4f..bab2eb85e 100644
--- a/app/View/Elements/genericElements/Form/genericForm.ctp
+++ b/app/View/Elements/genericElements/Form/genericForm.ctp
@@ -81,24 +81,46 @@
     $ajaxFlashMessage = '';
     if ($ajax) {
         $ajaxFlashMessage = sprintf(
-            '<div id="flashContainer"><div id="main-view-container" class="container-fluid ">%s</div></div>',
+            '<div id="flashContainer"><div id="main-view-container">%s</div></div>',
             $this->Flash->render()
         );
     }
     $formEnd = $this->Form->end();
-    echo sprintf(
-        '<div class="%s">%s<fieldset><legend>%s</legend>%s<div class="%s">%s</div></fieldset><div class="%s">%s%s%s</div></div>',
-        $ajax ? 'ajax' : 'form',
-        $formCreate,
-        empty($data['title']) ? h(Inflector::humanize($this->request->params['action'])) . ' ' . $modelForForm : h($data['title']),
-        $ajaxFlashMessage,
-        empty($ajax) ? '' : 'ajax_fieldset',
-        $fieldsString,
-        empty($ajax) ? '' : 'ajax_fieldset',
-        $formEnd,
-        $metaFieldString,
-        $this->element('genericElements/Form/submitButton', $submitButtonData)
-    );
+    if (!empty($ajax)) {
+        echo sprintf(
+            '<div id="genericModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="genericModalLabel" aria-hidden="true">%s%s%s</div>',
+            sprintf(
+                '<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="genericModalLabel">%s</h3></div>',
+                empty($data['title']) ? h(Inflector::humanize($this->request->params['action'])) . ' ' . $modelForForm : h($data['title'])
+            ),
+            sprintf(
+                '<div class="modal-body modal-body-long">%s</div>',
+                sprintf(
+                    '%s<fieldset>%s%s</fieldset>%s%s',
+                    $formCreate,
+                    $ajaxFlashMessage,
+                    $fieldsString,
+                    $formEnd,
+                    $metaFieldString
+                )
+            ),
+            sprintf(
+                '<div class="modal-footer">%s</div>',
+                $this->element('genericElements/Form/submitButton', $submitButtonData)
+            )
+        );
+    } else {
+        echo sprintf(
+            '<div class="form">%s<fieldset><legend>%s</legend>%s%s</fieldset>%s%s%s</div>',
+            $formCreate,
+            empty($data['title']) ? h(Inflector::humanize($this->request->params['action'])) . ' ' . $modelForForm : h($data['title']),
+            $ajaxFlashMessage,
+            $fieldsString,
+            $formEnd,
+            $metaFieldString,
+            $this->element('genericElements/Form/submitButton', $submitButtonData)
+        );
+    }
 ?>
 <script type="text/javascript">
     var fieldsArray = <?php echo json_encode($fieldsArrayForPersistence); ?>;
diff --git a/app/View/Elements/genericElements/Form/submitButton.ctp b/app/View/Elements/genericElements/Form/submitButton.ctp
index c6f6f5e1c..820ee83b6 100644
--- a/app/View/Elements/genericElements/Form/submitButton.ctp
+++ b/app/View/Elements/genericElements/Form/submitButton.ctp
@@ -3,16 +3,12 @@
         echo sprintf(
             '%s%s',
             sprintf(
-                '<span id="submitButton" class="btn btn-primary" style="margin-bottom:5px;float:left;" title="%s" role="button" tabindex="0" aria-label="%s" onClick="%s">%s</span>',
-                __('Submit'),
-                __('Submit'),
+                '<button id="submitButton" class="btn btn-primary" onClick="%s">%s</button>',
                 $ajaxSubmit,
                 __('Submit')
             ),
             sprintf(
-                '<span class="btn btn-inverse" style="margin-bottom:5px;float:right;" title="%s" role="button" tabindex="0" aria-label="%s" id="cancel_attribute_add" onClick="%s">%s</span>',
-                __('Cancel'),
-                __('Cancel'),
+                '<button class="btn" data-dismiss="modal" aria-hidden="true" onClick="%s">%s</button>',
                 'cancelPopoverForm();',
                 __('Cancel')
             )
diff --git a/app/webroot/css/main.css b/app/webroot/css/main.css
index b725263cc..513dd3405 100644
--- a/app/webroot/css/main.css
+++ b/app/webroot/css/main.css
@@ -880,6 +880,10 @@ a.proposal_link_red:hover {
     border: 0;
 }
 
+.modal-body-long {
+    max-height: 600px;
+}
+
 .ajax_popover_form {
     display:none;
     width: 700px;
diff --git a/app/webroot/js/misp.js b/app/webroot/js/misp.js
index 8f6e72c5a..f98f5699c 100644
--- a/app/webroot/js/misp.js
+++ b/app/webroot/js/misp.js
@@ -1124,110 +1124,150 @@ function clickCreateButton(event, type) {
     simplePopup("/" + destination + "/add/" + event);
 }
 
-function submitPopoverForm(context_id, referer, update_context_id) {
+function openGenericModal(url) {
+    $.ajax({
+        type: "get",
+        url: url,
+        success: function (data) {
+            $('#genericModal').remove();
+            $('body').append(data);
+            $('#genericModal').modal();
+        },
+        error: function (data, textStatus, errorThrown) {
+            showMessage('fail', textStatus + ": " + errorThrown);
+        }
+    });
+}
+
+function submitPopoverForm(context_id, referer, update_context_id, modal) {
     var url = null;
     var context = 'event';
     var contextNamingConvention = 'Attribute';
     var closePopover = true;
     switch (referer) {
-        case 'add':
-            url = "/attributes/add/" + context_id;
-            break;
-        case 'edit':
-            url = "/attributes/edit/" + context_id;
-            break;
-        case 'propose':
-            url = "/shadow_attributes/add/" + context_id;
-            break;
-        case 'massEdit':
-            url = "/attributes/editSelected/" + context_id;
-            break;
         case 'addTextElement':
-            url = "/templateElements/add/text/" + context_id;
             context = 'template';
             contextNamingConvention = 'TemplateElementText';
             break;
         case 'editTextElement':
-            url = "/templateElements/edit/text/" + context_id;
             context = 'template';
             context_id = update_context_id;
             contextNamingConvention = 'TemplateElementText';
             break;
         case 'addAttributeElement':
-            url = "/templateElements/add/attribute/" + context_id;
             context = 'template';
             contextNamingConvention = 'TemplateElementAttribute';
             break;
         case 'editAttributeElement':
-            url = "/templateElements/edit/attribute/" + context_id;
             context = 'template';
             context_id = update_context_id;
             contextNamingConvention = 'TemplateElementAttribute';
             break;
         case 'addFileElement':
-            url = "/templateElements/add/file/" + context_id;
             context = 'template';
             contextNamingConvention = 'TemplateElementFile';
             break;
         case 'editFileElement':
-            url = "/templateElements/edit/file/" + context_id;
             context = 'template';
             context_id = update_context_id;
             contextNamingConvention = 'TemplateElementFile';
             break;
-        case 'replaceAttributes':
-            url = "/attributes/attributeReplace/" + context_id;
-            break;
         case 'addSighting':
-            url = "/sightings/add/" + context_id;
             closePopover = false;
             break;
-        case 'addObjectReference':
-            url = "/objectReferences/add/" + context_id;
-            break;
     }
-    if (url !== null) {
-        url = baseurl + $("#submitButton").closest("form").attr('action');
-        $.ajax({
-            beforeSend: function (XMLHttpRequest) {
-                $(".loading").show();
+    if ($("#submitButton").parent().hasClass('modal-footer')) {
+        var $form = $("#submitButton").parent().parent().find('.modal-body form');
+        url = baseurl + $form.attr('action');
+    } else {
+        var $form = $("#submitButton").closest("form");
+        url = baseurl + $form.attr('action');
+    }
+    $.ajax({
+        beforeSend: function (XMLHttpRequest) {
+            if (modal) {
+                if (closePopover) {
+                    $('#genericModal').modal('hide');
+                }
+            } else {
                 if (closePopover) {
                     $("#gray_out").fadeOut();
                     $("#popover_form").fadeOut();
+                    $(".loading").show();
                 }
-            },
-            data: $("#submitButton").closest("form").serialize(),
-            success:function (data, textStatus) {
-                var result;
-                if (closePopover) {
+            }
+        },
+        data: $form.serialize(),
+        success:function (data, textStatus) {
+            var result;
+            if (closePopover) {
+                if (modal) {
+                    result = handleAjaxModalResponse(data, context_id, url, referer, context, contextNamingConvention);
+                } else {
                     result = handleAjaxPopoverResponse(data, context_id, url, referer, context, contextNamingConvention);
                 }
-                if (referer == 'addSighting') {
-                    updateIndex(update_context_id, 'event');
-                    $.get( "/sightings/listSightings/" + id + "/attribute", function(data) {
-                        $("#sightingsData").html(data);
-                    });
-                    $('.sightingsToggle').removeClass('btn-primary');
-                    $('.sightingsToggle').addClass('btn-inverse');
-                    $('#sightingsListAllToggle').removeClass('btn-inverse');
-                    $('#sightingsListAllToggle').addClass('btn-primary');
-                }
-                if (context == 'event' && (referer == 'add' || referer == 'massEdit' || referer == 'replaceAttributes' || referer == 'addObjectReference')) eventUnpublish();
-            },
-            error: function (jqXHR, textStatus, errorThrown) {
-                showMessage('fail', textStatus + ": " + errorThrown);
-            },
-            complete: function () {
-                $(".loading").hide();
-            },
-            type: "post",
-            url: url,
-        });
-    }
-
+            }
+            if (referer == 'addSighting') {
+                updateIndex(update_context_id, 'event');
+                $.get( "/sightings/listSightings/" + id + "/attribute", function(data) {
+                    $("#sightingsData").html(data);
+                });
+                $('.sightingsToggle').removeClass('btn-primary');
+                $('.sightingsToggle').addClass('btn-inverse');
+                $('#sightingsListAllToggle').removeClass('btn-inverse');
+                $('#sightingsListAllToggle').addClass('btn-primary');
+            }
+            if (context == 'event' && (referer == 'add' || referer == 'massEdit' || referer == 'replaceAttributes' || referer == 'addObjectReference')) eventUnpublish();
+        },
+        error: function (jqXHR, textStatus, errorThrown) {
+            showMessage('fail', textStatus + ": " + errorThrown);
+        },
+        complete: function () {
+            $(".loading").hide();
+        },
+        type: "post",
+        url: url,
+    });
     return false;
 };
 
+function handleAjaxModalResponse(response, context_id, url, referer, context, contextNamingConvention) {
+    responseArray = response;
+    var message = null;
+    var result = "fail";
+    if (responseArray.saved) {
+        updateIndex(context_id, context);
+        if (responseArray.success) {
+            showMessage("success", responseArray.success);
+            result = "success";
+        }
+        if (responseArray.errors) {
+            showMessage("fail", responseArray.errors);
+        }
+    } else {
+        var savedArray = saveValuesForPersistance();
+        $.ajax({
+            async:true,
+            dataType:"html",
+            success:function (data, textStatus) {
+                $('#genericModal').remove();
+                $('body').append(data);
+                $('#genericModal').modal();
+                var error_context = context.charAt(0).toUpperCase() + context.slice(1);
+                handleValidationErrors(responseArray.errors, context, contextNamingConvention);
+                result = "success";
+                if (!$.isEmptyObject(responseArray)) {
+                    result = "fail";
+                }
+                recoverValuesFromPersistance(savedArray);
+                $(".loading").hide();
+            },
+            url:url
+        });
+    }
+    return result;
+}
+
 function handleAjaxPopoverResponse(response, context_id, url, referer, context, contextNamingConvention) {
     responseArray = response;
     var message = null;
@@ -1268,7 +1308,6 @@ function handleAjaxPopoverResponse(response, context_id, url, referer, context,
 
 //before we update the form (in case the action failed), we want to retrieve the data from every field, so that we can set the fields in the new form that we fetch
 function saveValuesForPersistance() {
-    console.log(fieldsArray);
     var formPersistanceArray = new Array();
     for (i = 0; i < fieldsArray.length; i++) {
         formPersistanceArray[fieldsArray[i]] = $('#' + fieldsArray[i]).val();