From d37ada4d0635de0b4cee4410d363d92a85a44b97 Mon Sep 17 00:00:00 2001
From: Mike Ng <mike.esokia@gmail.com>
Date: Fri, 18 Aug 2017 16:13:22 +0400
Subject: [PATCH] refactored order_box and order_item

---
 templates/web/prod/orders/order_box.html.twig |    3 +-
 .../web/prod/orders/order_item.html.twig      | 1347 +++++++++--------
 2 files changed, 691 insertions(+), 659 deletions(-)

diff --git a/templates/web/prod/orders/order_box.html.twig b/templates/web/prod/orders/order_box.html.twig
index f10a755750..dcf1b69afc 100644
--- a/templates/web/prod/orders/order_box.html.twig
+++ b/templates/web/prod/orders/order_box.html.twig
@@ -214,6 +214,7 @@
         dateSelection: '{{ start }}',
         dateSelectionText: '',
         date: '{{ date }}',
-        tabSelection: '{{ todo }}'
+        tabSelection: '{{ todo }}',
+        noFilterText: '{{ 'order-manager::order-list: no-filter' | trans }}'
 }
 </script>
diff --git a/templates/web/prod/orders/order_item.html.twig b/templates/web/prod/orders/order_item.html.twig
index f68e054cf5..1aa2eac7c0 100644
--- a/templates/web/prod/orders/order_item.html.twig
+++ b/templates/web/prod/orders/order_item.html.twig
@@ -63,10 +63,6 @@
             <span class="userdetail"><strong>{{ 'order-manager::order-item: tel' | trans }}</strong> {{ order.getUser().getPhone() }}</span>
             <span class="userdetail"><strong>{{ 'order-manager::order-item: address' | trans }}</strong> {{ order.getUser().getAddress() }}</span>
             <span class="userdetail"><strong>{{ 'order-manager::order-item: country' | trans }}</strong> {{ order.getUser().getCountry() }}</span>
-            {#<div>#}
-            {#<button id="email-button" onclick="sendMail('{{ order.getUser().getEmail() }}')">#}
-            {#{{ 'order-manager::order-item: send-mail' | trans }}</button>#}
-            {#</div>#}
         </div>
 
         <table class="table no-border">
@@ -91,8 +87,7 @@
             <tr>
                 <td colspan="2">
                     <span class="text_block">{{ displayName }} (<a
-                                style="font-size: 12px;color: #4990E2;" href="#"
-                                onclick="sendMail()">{{ order.getUser().getEmail() }}</a>)
+                                style="font-size: 12px;color: #4990E2;" href="#" id="email-btn">{{ order.getUser().getEmail() }}</a>)
                         <span class="icon-stack infoTips" id="userInfo">
                             <i class="icon-circle icon-stack-base" style="color:#737373"></i>
                             <i class="icon-info" style="color:#FFF"></i>
@@ -112,7 +107,7 @@
             <div class="order_list" style="width:40%;float:left">
                 <div class="top-bar">
                     <form action="">
-                        <input type="checkbox" onclick="checkAll(this)" name="select-all" value="all"/><span>{{ 'order-manager::order-item: select-all' |trans }}</span>
+                        <input type="checkbox" name="select-all" value="all"/><span>{{ 'order-manager::order-item: select-all' |trans }}</span>
                     </form>
                     <div class="btn-group">
                         <button class="btn dropdown-toggle" data-toggle="dropdown">{{ 'order-manager::order-item: create-basket' |trans }}<span class="caret"></span></button>
@@ -221,683 +216,719 @@
 </div>
 
 <script type="text/javascript">
+    var defaultTitle = '{{ 'order-manager::order-list: order-id' | trans }} '
+        + {{ order.getId() }} + ' {{ 'order-manager::order-item: of' |trans }} '
+        + '{{ order.getCreatedOn()|date('d/m/Y') }}'
+        + ' {{ 'order-manager::order-item: by' |trans }} '
+        + '{{ order.getUser().getDisplayName() }}';
 
-    var userInfoIsVisible = false;
-    var itemCount = 0;
-    var elementsForValidation = [];
-    var readyForValidation = false;
-
-    const ELEMENT_TYPE = {
-        VALIDATED: 'validated',
-        DENIED: 'denied',
-        SELECTABLE: 'selectable',
-        SELECTED: 'selected',
-        WAITINGFORVALIDATION: 'waitingForValidation'
-    }
-
-    $(document).ready(function(){
-
-        if ($('#notification_box').is(':visible')) {
-            $('#notification_trigger').trigger('mousedown');
-        }
-
-        var dialog = p4.Dialog.get(1);
-        //var order_id = $('input[name=order_id]').val();
-        var trs = $('.order_list .order_row', dialog.getDomElement());
-        var lastSelectedRow;
-        ;
-        $('.order_launcher', dialog.getDomElement()).bind('click',function(){
-            if(readyForValidation) {
-                if(confirm("{{ 'order-manager::order-item: warning-message-close' |trans }}")) {
-                    dialog.load('{{ path('prod_orders') }}');
-                }
-            }else {
-                dialog.load('{{ path('prod_orders') }}');
-            }
-
-        });
-
-        $('.order_list .order_row', dialog.getDomElement()).bind('click',function(event){
-
-            var $this = $(this);
-
-            //disable select all checkbox if selected
-            if($('input[name="select-all"]').is(':checked')){
-                $('input[name="select-all"]').prop('checked', false);
-            }
-
-            if(is_ctrl_key(event))
-            {
-                if(!$this.hasClass(ELEMENT_TYPE.SELECTABLE)) {
-                    return;
-                }
-                if($this.hasClass(ELEMENT_TYPE.SELECTED)) {
-                    $this.removeClass(ELEMENT_TYPE.SELECTED);
-                    itemCount--;
-                } else {
-                    $this.addClass(ELEMENT_TYPE.SELECTED);
-                    itemCount++;
-                }
-
-            }
-            else if(is_shift_key(event))
-            {
-                if(!$this.hasClass(ELEMENT_TYPE.SELECTABLE)) {
-                    return;
-                }
-                var currentIndex = $this.index('.order_list .order_row');
-                var prevIndex = lastSelectedRow.index('.order_list .order_row');
-                $('.order_list .selectable.selected', dialog.getDomElement()).removeClass(ELEMENT_TYPE.SELECTED);
-                itemCount = 0;
-                selectRowsBetweenIndexes([prevIndex, currentIndex])
-            }
-            else
-            {
-                $('.order_list .selectable.selected', dialog.getDomElement()).removeClass(ELEMENT_TYPE.SELECTED);
-                if($this.hasClass(ELEMENT_TYPE.SELECTABLE)) {
-                    $this.addClass(ELEMENT_TYPE.SELECTED);
-                    lastSelectedRow = $this;
-                }
-                itemCount = 1;
-            }
-
-            if(itemCount == 1) {
-                var selected = $('.order_list .selected', dialog.getDomElement());
-                loadPreviewAndCaption(selected);
-            }
-            renderOrderDetailView(itemCount);
-        });
-
-        function selectRowsBetweenIndexes(indexes) {
-            indexes.sort(function(a, b) {
-                return a - b;
-            });
-            for (var i = indexes[0]; i <= indexes[1]; i++) {
-                if ($(trs[i]).hasClass(ELEMENT_TYPE.SELECTABLE)) {
-                    $(trs[i]).addClass(ELEMENT_TYPE.SELECTED);
-                    itemCount++;
-                }
-            }
-        }
-
-        $('.captionTips, .captionRolloverTips, .infoTips', dialog.getDomElement()).tooltip({
-            delay:0
-        });
-        $('.previewTips', dialog.getDomElement()).tooltip({
-            fixable:true
-        });
-
-        $('button.send', dialog.getDomElement()).bind('click',function(){
-            updateValidation(ELEMENT_TYPE.VALIDATED);
-            //send_documents(order_id);
-        });
-
-        $('button.deny', dialog.getDomElement()).bind('click',function(){
-            updateValidation(ELEMENT_TYPE.DENIED);
-            //deny_documents(order_id);
-        });
-
-        $('.force_sender', dialog.getDomElement()).bind('click',function(){
-            if(confirm(language.forceSendDocument))
-            {
-                //updateValidation('validated');
-                var element_id = [];
-                element_id.push($(this).closest('.order_row').find('input[name=order_element_id]').val());
-                var order_id = $('input[name=order_id]').val();
-                do_send_documents(order_id, element_id, true);
-            }
-        });
-
-        $('#userInfo').hover(function() {
-            var offset = $('#userInfo').position();
-            $('#userInfoPreview').css({
-                'left': (offset.left - $('#userInfoPreview').width()) + 48,
-                'top': (offset.top+$('#userInfo').height()) + 8
-            });
-            $('#userInfoPreview').show();
-        }, function() {
-            if(!userInfoIsVisible) {
-                $('#userInfoPreview').hide();
-            }
-        });
-
-        $('#userInfo').click(function() {
-            var offset = $('#userInfo').position();
-            if(!userInfoIsVisible) {
-                userInfoIsVisible = true;
-                $('#userInfoPreview').css({
-                    'left': (offset.left - $('#userInfoPreview').width()) + 48,
-                    'top': (offset.top+$('#userInfo').height()) + 8
-                });
-                $('#userInfoPreview').show();
-            }else {
-                userInfoIsVisible = false;
-                $('#userInfoPreview').hide();
-            }
-        });
-
-        var minimized_elements = $('.minimize');
-
-        $('.minimize').each(function() {
-            var t = $(this).text();
-            if (t.length < 60) return;
-
-            $(this).html(
-                t.slice(0, 60) + '<span>... </span><a href="#" class="more">{{ 'order-manager::order-item: more' | trans }}</a>' +
-                '<span style="display:none;">' + t.slice(60, t.length) + ' <a href="#" class="less">{{ 'order-manager::order-item: less' | trans }}</a></span>'
-            );
-
-        });
-
-
-        $('a.more', minimized_elements).click(function(event){
-            event.preventDefault();
-            $(this).hide().prev().hide();
-            $(this).next().show();
-        });
-
-        $('a.less', minimized_elements).click(function(event) {
-            event.preventDefault();
-            $(this).parent().hide().prev().show().prev().show();
-        });
-
-        $('button.validate', dialog.getDomElement()).bind('click',function(event){
-            openValidationDialog(this,event);
-            return false;
-        });
-
-        $('.basket-btn').click(function(event) {
-            var type = $(this).attr('type');
-            var $dialog = $("#basket-window").dialog({
-                open: function (event, ui) {
-                    $('.ui-dialog').css('z-index', 100000);
-                    $(".ui-widget-overlay").css('z-index', 100000);
-                },
-                closeOnEscape: true,
-                width: 450,
-                height: 300,
-                modal: true,
-                draggable: false,
-                stack: false,
-                title: '{{ 'order-manager::order-item:Create-Basket' | trans }}',
-                overlay: {
-                    backgroundColor: '#000',
-                    opacity: 0.7
-                },
-                buttons: {
-                    "{{ 'order-manager::order-item: create' |trans }}": function () {
-                        //create basket
-                        createBasket($dialog);
-                        $(this).dialog('close');
-                    }
-                }
-            }).dialog('open');
-            populateBasketDialog($dialog, type);
-            return false;
-        });
-
-    });
-
-    function createBasket($dialog) {
-        var $form = $('form', $dialog);
-        var dialog = $dialog.closest('.ui-dialog');
-        var buttonPanel = dialog.find('.ui-dialog-buttonpane');
-
-        $.ajax({
-            type: $form.attr('method'),
-            url: $form.attr('action'),
-            data: $form.serializeArray(),
-            dataType: 'json',
-            beforeSend:function(){
-                $(":button:contains('" + language.create + "')", buttonPanel)
-                    .attr("disabled", true).addClass("ui-state-disabled");
-            },
-            success: function(data){
-                var order_id = $('input[name=order_id]').val();
-                var success = '0';
-                if(data.success)
-                {
-                    success = '1';
-                }
-                var dialog = p4.Dialog.get(1);
-                dialog.load('../prod/order/' + order_id + '/?success=' + success + '&action=basket' + '&message='
-                    + encodeURIComponent(data.message));
-                p4.WorkZone.refresh(data.basket.id);
-            },
-            error: function(){
-                $(":button:contains('" + language.create + "')", buttonPanel)
-                    .attr("disabled", false).removeClass("ui-state-disabled");
-            },
-            timeout: function(){
-
-            }
-        });
-    }
-
-    function populateBasketDialog($dialog, type) {
-        var lst = [];
-        var orderDialog = p4.Dialog.get(1);
-        //set checkbox to true and disable it
-        $('input[name="lst"]', $dialog).prop('checked', true);
-        $('.checkbox', $dialog).css("visibility","hidden");
-        //set default name
-        var name = '{{ 'order-manager::order-list: order-id' | trans }} '
+    var orderItemData =  {
+        path: '{{ path('prod_orders') }}',
+        userEmail: '{{ order.getUser().getEmail() }}',
+        subject: '{{ 'order-manager::mail: your-order-of' | trans }} {{ 'order-manager::order-item: number' |trans }} '
             + {{ order.getId() }} + ' {{ 'order-manager::order-item: of' |trans }} '
-            + '{{ order.getCreatedOn()|date('d/m/Y') }}'
-            + ' {{ 'order-manager::order-item: by' |trans }} '
-            + '{{ order.getUser().getDisplayName() }}';
-        $('input[name="name"]', $dialog).val(name);
-        var description = '';
-        var elements_ids = [];
-        switch (type){
-            case 'denied':
-                description = '{{ 'order-manager::order-item: rejected-item' |trans }}';
-                $('.order_list .order_row.' + type, orderDialog.getDomElement()).each(function(i,n) {
-                    elements_ids.push($(n).attr('elementids'));
-                });
-                break;
-            case 'validated':
-                description = '{{ 'order-manager::order-item: accepted-item' |trans }}';
-                $('.order_list .order_row.' + type, orderDialog.getDomElement()).each(function(i,n) {
-                    elements_ids.push($(n).attr('elementids'));
-                });
-                break;
-            default :
-                //selected elements;
-                description = '{{ 'order-manager::order-item: selected-item' |trans }}';
-                $('.order_list .order_row.' + type, orderDialog.getDomElement()).each(function(i,n) {
-                    elements_ids.push($(n).attr('elementids'));
-                });
-        }
-        $('textarea[name="description"]', $dialog).val(description);
-        $('input[name="lst"]', $dialog).val(elements_ids.join('; '));
-    }
-
-    function openValidationDialog(el, event) {
-        $("#validation-window").dialog({
-            open: function (event, ui) {
-                $('.ui-dialog').css('z-index', 100000);
-                $(".ui-widget-overlay").css('z-index', 100000);
-            },
-            closeOnEscape: true,
-            resizable: false,
-            width: 450,
-            height: 500,
-            modal: true,
-            draggable: false,
-            stack: false,
-            title: '{{ 'order-manager::order-item:Validation' | trans }}',
-            buttons: {
-                "{{ 'order-manager::order-item: submit' |trans }}": function() {
-                    //submit documents
-                    submitDocuments($(this));
-                },
-                "{{ 'order-manager::order-item: reset' |trans }}": function() {
-                    if(confirm("{{ 'order-manager::order-item: warning-message-close' |trans }}")) {
-                        resetValidation();
-                        toggleValidationButton();
-                        $(this).dialog("close");
-                    }
-                }
-            },
-            overlay: {
-                backgroundColor: '#000',
-                opacity: 0.7
-            }
-        }).dialog('open');
-        createValidationTable();
-    }
-
-    function submitDocuments(dialogElem) {
-        var order_id = $('input[name=order_id]').val();
-        var validatedArrayNoForceIds = _.filter(elementsForValidation, function(elem) {
-            return elem.newState === ELEMENT_TYPE.VALIDATED && elem.oldState !== ELEMENT_TYPE.DENIED;
-        }).map(function(elem) {
-            return elem.elementId;
-        });
-
-        var validatedArrayWithForceIds = _.filter(elementsForValidation, function(elem) {
-            return elem.newState === ELEMENT_TYPE.VALIDATED && elem.oldState === ELEMENT_TYPE.DENIED;
-        }).map(function(elem) {
-            return elem.elementId;
-        });
-
-        var deniedArrayIds = _.filter(elementsForValidation, function(elem) {
-            return elem.newState === ELEMENT_TYPE.DENIED;
-        }).map(function(elem) {
-            return elem.elementId;
-        });
-
-        if(validatedArrayNoForceIds.length > 0) {
-            do_send_documents(order_id, validatedArrayNoForceIds, false);
-        }
-        if(validatedArrayWithForceIds.length > 0) {
-            do_send_documents(order_id, validatedArrayWithForceIds, true);
-        }
-        if(deniedArrayIds.length > 0) {
-            do_deny_documents(order_id, deniedArrayIds);
-        }
-        dialogElem.dialog("close");
-    }
-
-    function createValidationTable() {
-        $('.validation-content').empty();
-        var validatedArray = _.filter(elementsForValidation, function(elem) {
-            return elem.newState === ELEMENT_TYPE.VALIDATED;
-        });
-        var deniedArray = _.filter(elementsForValidation, function(elem) {
-            return elem.newState === ELEMENT_TYPE.DENIED;
-        });
-
-        if(validatedArray.length > 0) {
-            var html = '';
-            html += '<h5>' + '{{ 'order-manager::order-item: you-have-validated' |trans }}' + " " + (validatedArray.length == 1 ? validatedArray.length + " " + '{{ 'order-manager::order-item: item' |trans }}' :  validatedArray.length + " " + '{{ 'order-manager::order-item: items' |trans }}') + '</h5>';
-            html += '<table class="validation-table">';
-            _.each(validatedArray, function(elem) {
-                html += '<tr>';
-                html += '<td width="25%" align="center">' + elem.elementPreview[0].outerHTML + '</td>';
-                html += '<td width="75%">' + elem.elementTitle[0].outerHTML + '</td>';
-                html += '</tr>';
-            });
-            html += '</table>';
-            $('.validation-content').append(html);
-        }
-
-        if(deniedArray.length > 0) {
-            var html = '';
-            html += '<h5>' + '{{ 'order-manager::order-item: you-have-denied' |trans }}' + " " + (deniedArray.length == 1 ? deniedArray.length + " " + '{{ 'order-manager::order-item: item' |trans }}' :  deniedArray.length + " " + '{{ 'order-manager::order-item: items' |trans }}') + '</h5>';
-            html += '<table class="validation-table">';
-            _.each(deniedArray, function(elem) {
-                html += '<tr>';
-                html += '<td width="25%" align="center">' + elem.elementPreview[0].outerHTML + '</td>';
-                html += '<td width="75%">' + elem.elementTitle[0].outerHTML + '</td>';
-                html += '</tr>';
-            });
-            html += '</table>';
-            $('.validation-content').append(html);
-        }
-
-    }
-
-    function resetValidation() {
-        var dialog = p4.Dialog.get(1);
-        $('.order_list .order_row', dialog.getDomElement()).each(function(i,n){
-            var elementId = $(n).find('input[name=order_element_id]').val();
-            var found = _.where(elementsForValidation, {elementId: elementId});
-            if(found.length > 0) {
-                $(n).removeClass(ELEMENT_TYPE.WAITINGFORVALIDATION);
-                //replace content or row with original content
-                $(n)[0].innerHTML = found[0].element[0].innerHTML;
-            }
-            updateButtonStatus($(n).attr('class').split(/\s+/));
-        });
-        readyForValidation = false;
-        elementsForValidation = [];
-        renderOrderDetailView(0);
-    }
-
-    function updateValidation(newState) {
-        var count = 0;
-        var dialog = p4.Dialog.get(1);
-        $('.order_list .order_row', dialog.getDomElement()).each(function(i,n){
-            if($(n).hasClass(ELEMENT_TYPE.SELECTED) && !$(n).hasClass(ELEMENT_TYPE.VALIDATED) && !$(n).hasClass(ELEMENT_TYPE.DENIED)
-                && !$(n).hasClass(ELEMENT_TYPE.WAITINGFORVALIDATION)){
-                createItemForValidation($(n), ELEMENT_TYPE.SELECTABLE, newState);
-                count++;
-            }
-            else if($(n).hasClass(ELEMENT_TYPE.SELECTED) && !$(n).hasClass(ELEMENT_TYPE.VALIDATED)
-                && !$(n).hasClass(ELEMENT_TYPE.WAITINGFORVALIDATION)){
-                createItemForValidation($(n), ELEMENT_TYPE.DENIED, newState);
-                count++;
-            }
-            $(n).removeClass(ELEMENT_TYPE.SELECTED);
-        });
-
-        readyForValidation = true;
-        toggleValidationButton();
-        //disable select all checkbox if selected
-        if($('input[name="select-all"]').is(':checked')){
-            $('input[name="select-all"]').prop('checked', false);
-        }
-
-        //multiple items selected
-        if(count > 1) {
-            $('#wrapper-padding').hide();
-            $('.external-order-action').hide();
-            $('#wrapper-multiple').hide();
+            + '{{ order.getCreatedOn()|date('d/m/Y')|e('js')|raw }}',
+        body: '{{ 'Utilisation prevue:' | trans }} {{ order.getOrderUsage()|e('js')|raw }}',
+        translatedText: {
+            rejected: '{{ 'order-manager::order-item: rejected-item' |trans }}',
+            accepted: '{{ 'order-manager::order-item: accepted-item' |trans }}',
+            selected: '{{ 'order-manager::order-item: selected-item' |trans }}',
+            moreText: '{{ 'order-manager::order-item: more' | trans }}',
+            lessText: '{{ 'order-manager::order-item: less' | trans }}',
+            dialogTitle: '{{ 'order-manager::order-item:Create-Basket' | trans }}',
+            createTitle: '{{ 'order-manager::order-item: create' |trans }}',
+            defaultBasketTitle: defaultTitle,
+            message: '{{ 'order-manager::order-item: warning-message-close' |trans }}',
+            validation: '{{ 'order-manager::order-item:Validation' | trans }}',
+            submit: '{{ 'order-manager::order-item: submit' |trans }}',
+            reset: '{{ 'order-manager::order-item: reset' |trans }}',
+            alreadyValidated: '{{ 'order-manager::order-item: already-validated' | trans }}',
+            refusedPreviously: '{{ 'order-manager::order-item: refused-previously' | trans }}',
+            youHaveValidated: '{{ 'order-manager::order-item: you-have-validated' |trans }}',
+            youHaveDenied: '{{ 'order-manager::order-item: you-have-denied' |trans }}',
+            item: '{{ 'order-manager::order-item: item' |trans }}',
+            itemsAlreadySent: '{{ 'order-manager::order-item: items-already-sent' | trans }}',
+            itemsWaitingValidation: '{{ 'order-manager::order-item: items-waiting-validation' | trans }}',
+            nonSentItems: '{{ 'order-manager::order-item: for-non-sent-items' | trans }}'
         }
     }
 
-    function createItemForValidation(element, oldState, newState) {
-        var order = {};
-        order.elementTitle = element.find('span');
-        order.elementPreview = element.find('.order_wrapper');
-        order.elementId = element.find('input[name=order_element_id]').val();
-        order.element = element.clone( true );
-        order.oldState = oldState;
-        order.newState = newState;
-        elementsForValidation.push(order);
-        element.toggleClass(ELEMENT_TYPE.WAITINGFORVALIDATION);
-        element.find('td:first-child').empty();
-        element.find('td:first-child').append('<i style="font-size: 20px;" class="icon-ok-circle">');
-        updateButtonStatus(element.attr('class').split(/\s+/));
-    }
+    {#var userInfoIsVisible = false;#}
+    {#var itemCount = 0;#}
+    {#var elementsForValidation = [];#}
+    {#var readyForValidation = false;#}
 
-    function toggleValidationButton() {
-        if(readyForValidation) {
-            $('button.validate').show();
-        }else {
-            $('button.validate').hide();
-        }
-    }
+    {#const ELEMENT_TYPE = {#}
+        {#VALIDATED: 'validated',#}
+        {#DENIED: 'denied',#}
+        {#SELECTABLE: 'selectable',#}
+        {#SELECTED: 'selected',#}
+        {#WAITINGFORVALIDATION: 'waitingForValidation'#}
+    {#}#}
 
-    function checkAll(element) {
-        itemCount = 0;
-        var selectable =[];
-        $('.table-order .order_row').each(function(){
-            var el = $(this);
-            if(element.checked && el.hasClass(ELEMENT_TYPE.SELECTABLE)){
-                el.addClass(ELEMENT_TYPE.SELECTED);
-                itemCount++;
-                selectable.push(el);
-            }else {
-                el.removeClass(ELEMENT_TYPE.SELECTED);
-            }
-        });
-        //load preview for single item selected
-        if(selectable.length == 1) {
-            loadPreviewAndCaption(selectable[0]);
-        }
-        renderOrderDetailView(itemCount);
-    }
+    {#$(document).ready(function(){#}
 
-    function do_send_documents(order_id, elements_ids, force)
-    {
-        var dialog = p4.Dialog.get(1);
-        var cont = dialog.getDomElement();
+        {#if ($('#notification_box').is(':visible')) {#}
+            {#$('#notification_trigger').trigger('mousedown');#}
+        {#}#}
 
-        $('button.deny, button.send', cont).prop('disabled', true);
-        $('.activity_indicator', cont).show();
+        {#var dialog = p4.Dialog.get(1);#}
+        {#//var order_id = $('input[name=order_id]').val();#}
+        {#var trs = $('.order_list .order_row', dialog.getDomElement());#}
+        {#var lastSelectedRow;#}
+        {#;#}
+        {#$('.order_launcher', dialog.getDomElement()).bind('click',function(){#}
+            {#if(readyForValidation) {#}
+                {#if(confirm("{{ 'order-manager::order-item: warning-message-close' |trans }}")) {#}
+                    {#dialog.load('{{ path('prod_orders') }}');#}
+                {#}#}
+            {#}else {#}
+                {#dialog.load('{{ path('prod_orders') }}');#}
+            {#}#}
 
-        $.ajax({
-            type: "POST",
-            url: "../prod/order/"+order_id+"/send/",
-            dataType:'json',
-            data: {
-                'elements[]':elements_ids,
-                force:(force?1:0)
-            },
-            success: function(data){
-                var success = '0';
+        {#});#}
 
-                if(data.success)
-                {
-                    success = '1';
-                }
+        {#$('.order_list .order_row', dialog.getDomElement()).bind('click',function(event){#}
 
-                dialog.load('../prod/order/' + order_id + '/?success=' + success + '&action=send');
-            },
-            error: function(){
-                $('button.deny, button.send', cont).prop('disabled', false);
-                $('.activity_indicator', cont).hide();
-            },
-            timeout: function(){
-                $('button.deny, button.send', cont).prop('disabled', false);
-                $('.activity_indicator', cont).hide();
-            }
-        });
-    }
+            {#var $this = $(this);#}
 
-    function do_deny_documents(order_id, elements_ids) {
-        var dialog = p4.Dialog.get(1);
-        var cont = dialog.getDomElement();
-        $('button.deny, button.send', cont).prop('disabled', true);
-        $('.activity_indicator', cont).show();
+            {#//disable select all checkbox if selected#}
+            {#if($('input[name="select-all"]').is(':checked')){#}
+                {#$('input[name="select-all"]').prop('checked', false);#}
+            {#}#}
 
-        $.ajax({
-            type: "POST",
-            url: "../prod/order/"+ order_id +"/deny/",
-            dataType:'json',
-            data: {
-                'elements[]':elements_ids
-            },
-            success: function(data){
-                var success = '0';
+            {#if(is_ctrl_key(event))#}
+            {#{#}
+                {#if(!$this.hasClass(ELEMENT_TYPE.SELECTABLE)) {#}
+                    {#return;#}
+                {#}#}
+                {#if($this.hasClass(ELEMENT_TYPE.SELECTED)) {#}
+                    {#$this.removeClass(ELEMENT_TYPE.SELECTED);#}
+                    {#itemCount--;#}
+                {#} else {#}
+                    {#$this.addClass(ELEMENT_TYPE.SELECTED);#}
+                    {#itemCount++;#}
+                {#}#}
 
-                if(data.success)
-                {
-                    success = '1';
-                }
+            {#}#}
+            {#else if(is_shift_key(event))#}
+            {#{#}
+                {#if(!$this.hasClass(ELEMENT_TYPE.SELECTABLE)) {#}
+                    {#return;#}
+                {#}#}
+                {#var currentIndex = $this.index('.order_list .order_row');#}
+                {#var prevIndex = lastSelectedRow.index('.order_list .order_row');#}
+                {#$('.order_list .selectable.selected', dialog.getDomElement()).removeClass(ELEMENT_TYPE.SELECTED);#}
+                {#itemCount = 0;#}
+                {#selectRowsBetweenIndexes([prevIndex, currentIndex])#}
+            {#}#}
+            {#else#}
+            {#{#}
+                {#$('.order_list .selectable.selected', dialog.getDomElement()).removeClass(ELEMENT_TYPE.SELECTED);#}
+                {#if($this.hasClass(ELEMENT_TYPE.SELECTABLE)) {#}
+                    {#$this.addClass(ELEMENT_TYPE.SELECTED);#}
+                    {#lastSelectedRow = $this;#}
+                {#}#}
+                {#itemCount = 1;#}
+            {#}#}
 
-                dialog.load('/prod/order/' + order_id + '/?success=' + success + '&action=deny');
-            },
-            error: function(){
-                $('button.deny, button.send', cont).prop('disabled', false);
-                $('.activity_indicator', cont).hide();
-            },
-            timeout: function(){
-                $('button.deny, button.send', cont).prop('disabled', false);
-                $('.activity_indicator', cont).hide();
-            }
-        });
-    }
+            {#if(itemCount == 1) {#}
+                {#var selected = $('.order_list .selected', dialog.getDomElement());#}
+                {#loadPreviewAndCaption(selected);#}
+            {#}#}
+            {#renderOrderDetailView(itemCount);#}
+        {#});#}
 
-    function sendMail() {
-        var email = '{{ order.getUser().getEmail() }}';
-        var subject = '{{ 'order-manager::mail: your-order-of' | trans }} {{ 'order-manager::order-item: number' |trans }} '
-            + {{ order.getId() }} + ' {{ 'order-manager::order-item: of' |trans }} '
-            + '{{ order.getCreatedOn()|date('d/m/Y')|e('js')|raw }}';
-        var body = '{{ 'Utilisation prevue:' | trans }} {{ order.getOrderUsage()|e('js')|raw }}';
-        if(email != null) {
-            var link = "mailto:" + email + "?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(body);
-            window.location.href = link;
+        {#function selectRowsBetweenIndexes(indexes) {#}
+            {#indexes.sort(function(a, b) {#}
+                {#return a - b;#}
+            {#});#}
+            {#for (var i = indexes[0]; i <= indexes[1]; i++) {#}
+                {#if ($(trs[i]).hasClass(ELEMENT_TYPE.SELECTABLE)) {#}
+                    {#$(trs[i]).addClass(ELEMENT_TYPE.SELECTED);#}
+                    {#itemCount++;#}
+                {#}#}
+            {#}#}
+        {#}#}
 
-        }
-    }
+        {#$('.captionTips, .captionRolloverTips, .infoTips', dialog.getDomElement()).tooltip({#}
+            {#delay:0#}
+        {#});#}
+        {#$('.previewTips', dialog.getDomElement()).tooltip({#}
+            {#fixable:true#}
+        {#});#}
 
-    function renderOrderDetailView(countSelected) {
-        if(countSelected > 1) {
-            $('#wrapper-padding').hide();
-            $('.external-order-action').hide();
-            $('#wrapper-multiple').show();
-            var dialog = p4.Dialog.get(1);
-            var elementArrayType = [];
-            $('.order_list .selectable.selected', dialog.getDomElement()).each(function(i,n){
-                //elementArrayType = _.union(elementArrayType, $(n).attr('class').split(/\s+/));
-                elementArrayType.push($(n).attr('class').split(/\s+/));
-            });
-            updateButtonStatusMultiple(elementArrayType);
-            //updateButtonStatus(elementArrayType);
-        }else if(countSelected == 1) {
-            $('#wrapper-padding').show();
-            $('.external-order-action').show();
-            $('#wrapper-multiple').hide();
-        }else {
-            $('#wrapper-padding').hide();
-            $('.external-order-action').hide();
-            $('#wrapper-multiple').hide();
-        }
-        $('#preview-layout-multiple .title').html(countSelected);
-    }
+        {#$('button.send', dialog.getDomElement()).bind('click',function(){#}
+            {#updateValidation(ELEMENT_TYPE.VALIDATED);#}
+            {#//send_documents(order_id);#}
+        {#});#}
 
-    function updateButtonStatusMultiple(elementArrayType) {
-        $('#order-action button.deny, #order-action button.send').hide();
-        var countObj = elementArrayType.reduce(function(m,v){
-            for (var k in m) {
-                if (~v.indexOf(k)) m[k]++;
-            }
-            return m;
-        },{validated:0, selectable: 0, waitingForValidation: 0});
+        {#$('button.deny', dialog.getDomElement()).bind('click',function(){#}
+            {#updateValidation(ELEMENT_TYPE.DENIED);#}
+            {#//deny_documents(order_id);#}
+        {#});#}
 
-        var html = "";
-        if(countObj.validated > 0) {
-            html += '<p>{{ 'order-manager::order-item: items-already-sent' | trans }}: '
-                + countObj.validated + '</p>';
-        }
+        {#$('.force_sender', dialog.getDomElement()).bind('click',function(){#}
+            {#if(confirm(language.forceSendDocument))#}
+            {#{#}
+                {#//updateValidation('validated');#}
+                {#var element_id = [];#}
+                {#element_id.push($(this).closest('.order_row').find('input[name=order_element_id]').val());#}
+                {#var order_id = $('input[name=order_id]').val();#}
+                {#do_send_documents(order_id, element_id, true);#}
+            {#}#}
+        {#});#}
 
-        if(countObj.waitingForValidation > 0) {
-            html += '<p>{{ 'order-manager::order-item: items-waiting-validation' | trans }}: '
-                + countObj.waitingForValidation + '</p>';
-        }
+        {#$('#userInfo').hover(function() {#}
+            {#var offset = $('#userInfo').position();#}
+            {#$('#userInfoPreview').css({#}
+                {#'left': (offset.left - $('#userInfoPreview').width()) + 48,#}
+                {#'top': (offset.top+$('#userInfo').height()) + 8#}
+            {#});#}
+            {#$('#userInfoPreview').show();#}
+        {#}, function() {#}
+            {#if(!userInfoIsVisible) {#}
+                {#$('#userInfoPreview').hide();#}
+            {#}#}
+        {#});#}
 
-        //for the remaining items
-        var remaining = countObj.selectable - (countObj.validated + countObj.waitingForValidation);
-        if(remaining > 0) {
-            html += '<p> {{ 'order-manager::order-item: for-non-sent-items' | trans }}: '
-                + remaining + '</p>';
-            $('#order-action button.deny, #order-action button.send').prop('disabled', false);
-            $('#order-action button.deny, #order-action button.send').show();
-        }
+        {#$('#userInfo').click(function() {#}
+            {#var offset = $('#userInfo').position();#}
+            {#if(!userInfoIsVisible) {#}
+                {#userInfoIsVisible = true;#}
+                {#$('#userInfoPreview').css({#}
+                    {#'left': (offset.left - $('#userInfoPreview').width()) + 48,#}
+                    {#'top': (offset.top+$('#userInfo').height()) + 8#}
+                {#});#}
+                {#$('#userInfoPreview').show();#}
+            {#}else {#}
+                {#userInfoIsVisible = false;#}
+                {#$('#userInfoPreview').hide();#}
+            {#}#}
+        {#});#}
 
-        $('#wrapper-multiple #text-content').empty();
-        $('#wrapper-multiple #text-content').append(html);
-    }
+        {#var minimized_elements = $('.minimize');#}
 
-    /* *
-     * function to update status of send and deny button
-     * params - array of type for each button selected
-     */
-    function updateButtonStatus(elementArrayType) {
-        if(_.contains(elementArrayType, ELEMENT_TYPE.VALIDATED)) {
-            $('#order-action button.deny, #order-action button.send').hide();
-            $('#order-action span.action-text').html('{{ 'order-manager::order-item: already-validated' | trans }}' + '<i class="icon-ok"></i>');
-            $('#order-action span.action-text').show();
-        }else if (_.contains(elementArrayType, ELEMENT_TYPE.WAITINGFORVALIDATION)) {
-            $('#order-action button.deny, #order-action span.action-text').hide();
-            $('#order-action button.send').show();
-            $('#order-action button.send').prop('disabled', true);
-        }else if (_.contains(elementArrayType, ELEMENT_TYPE.DENIED)) {
-            $('#order-action button.deny').hide();
-            $('#order-action span.action-text').html('{{ 'order-manager::order-item: refused-previously' | trans }}');
-            $('#order-action button.send').prop('disabled', false);
-            $('#order-action button.send, #order-action span.action-text').show();
-        }else {
-            $('#order-action button.send, #order-action button.deny').prop('disabled', false);
-            $('#order-action button.send, #order-action button.deny').show();
-            $('#order-action span.action-text').hide();
-        }
-    }
+        {#$('.minimize').each(function() {#}
+            {#var t = $(this).text();#}
+            {#if (t.length < 60) return;#}
+
+            {#$(this).html(#}
+                {#t.slice(0, 60) + '<span>... </span><a href="#" class="more">{{ 'order-manager::order-item: more' | trans }}</a>' +#}
+                {#'<span style="display:none;">' + t.slice(60, t.length) + ' <a href="#" class="less">{{ 'order-manager::order-item: less' | trans }}</a></span>'#}
+            {#);#}
+
+        {#});#}
 
 
-    function loadPreviewAndCaption(elem) {
-        $('#preview-layout').empty();
-        $('#caption-layout').empty();
-        updateButtonStatus(elem.attr('class').split(/\s+/));
-        var elementids = elem.attr('elementids').split('_');
-        var sbasId = elementids[0];
-        var recordId = elementids[1];
-        prevAjax = $.ajax({
-            type: "GET",
-            url: "../prod/records/record/"+sbasId+'/'+recordId+'/',
-            dataType: 'json',
-            success: function (data) {
-                if (data.error) {
-                    return;
-                }
-                $('#preview-layout').append(data.html_preview);
-                $('#caption-layout').append(data.desc);
-            }
-        });
-    }
+        {#$('a.more', minimized_elements).click(function(event){#}
+            {#event.preventDefault();#}
+            {#$(this).hide().prev().hide();#}
+            {#$(this).next().show();#}
+        {#});#}
+
+        {#$('a.less', minimized_elements).click(function(event) {#}
+            {#event.preventDefault();#}
+            {#$(this).parent().hide().prev().show().prev().show();#}
+        {#});#}
+
+        {#$('button.validate', dialog.getDomElement()).bind('click',function(event){#}
+            {#openValidationDialog(this,event);#}
+            {#return false;#}
+        {#});#}
+
+        {#$('.basket-btn').click(function(event) {#}
+            {#var type = $(this).attr('type');#}
+            {#var $dialog = $("#basket-window").dialog({#}
+                {#open: function (event, ui) {#}
+                    {#$('.ui-dialog').css('z-index', 100000);#}
+                    {#$(".ui-widget-overlay").css('z-index', 100000);#}
+                {#},#}
+                {#closeOnEscape: true,#}
+                {#width: 450,#}
+                {#height: 300,#}
+                {#modal: true,#}
+                {#draggable: false,#}
+                {#stack: false,#}
+                {#title: '{{ 'order-manager::order-item:Create-Basket' | trans }}',#}
+                {#overlay: {#}
+                    {#backgroundColor: '#000',#}
+                    {#opacity: 0.7#}
+                {#},#}
+                {#buttons: {#}
+                    {#"{{ 'order-manager::order-item: create' |trans }}": function () {#}
+                        {#//create basket#}
+                        {#createBasket($dialog);#}
+                        {#$(this).dialog('close');#}
+                    {#}#}
+                {#}#}
+            {#}).dialog('open');#}
+            {#populateBasketDialog($dialog, type);#}
+            {#return false;#}
+        {#});#}
+
+    {#});#}
+
+    {#function createBasket($dialog) {#}
+        {#var $form = $('form', $dialog);#}
+        {#var dialog = $dialog.closest('.ui-dialog');#}
+        {#var buttonPanel = dialog.find('.ui-dialog-buttonpane');#}
+
+        {#$.ajax({#}
+            {#type: $form.attr('method'),#}
+            {#url: $form.attr('action'),#}
+            {#data: $form.serializeArray(),#}
+            {#dataType: 'json',#}
+            {#beforeSend:function(){#}
+                {#$(":button:contains('" + language.create + "')", buttonPanel)#}
+                    {#.attr("disabled", true).addClass("ui-state-disabled");#}
+            {#},#}
+            {#success: function(data){#}
+                {#var order_id = $('input[name=order_id]').val();#}
+                {#var success = '0';#}
+                {#if(data.success)#}
+                {#{#}
+                    {#success = '1';#}
+                {#}#}
+                {#var dialog = p4.Dialog.get(1);#}
+                {#dialog.load('../prod/order/' + order_id + '/?success=' + success + '&action=basket' + '&message='#}
+                    {#+ encodeURIComponent(data.message));#}
+                {#p4.WorkZone.refresh(data.basket.id);#}
+            {#},#}
+            {#error: function(){#}
+                {#$(":button:contains('" + language.create + "')", buttonPanel)#}
+                    {#.attr("disabled", false).removeClass("ui-state-disabled");#}
+            {#},#}
+            {#timeout: function(){#}
+
+            {#}#}
+        {#});#}
+    {#}#}
+
+    {#function populateBasketDialog($dialog, type) {#}
+        {#var lst = [];#}
+        {#var orderDialog = p4.Dialog.get(1);#}
+        {#//set checkbox to true and disable it#}
+        {#$('input[name="lst"]', $dialog).prop('checked', true);#}
+        {#$('.checkbox', $dialog).css("visibility","hidden");#}
+        {#//set default name#}
+        {#var name = '{{ 'order-manager::order-list: order-id' | trans }} '#}
+            {#+ {{ order.getId() }} + ' {{ 'order-manager::order-item: of' |trans }} '#}
+            {#+ '{{ order.getCreatedOn()|date('d/m/Y') }}'#}
+            {#+ ' {{ 'order-manager::order-item: by' |trans }} '#}
+            {#+ '{{ order.getUser().getDisplayName() }}';#}
+        {#$('input[name="name"]', $dialog).val(name);#}
+        {#var description = '';#}
+        {#var elements_ids = [];#}
+        {#switch (type){#}
+            {#case 'denied':#}
+                {#description = '{{ 'order-manager::order-item: rejected-item' |trans }}';#}
+                {#$('.order_list .order_row.' + type, orderDialog.getDomElement()).each(function(i,n) {#}
+                    {#elements_ids.push($(n).attr('elementids'));#}
+                {#});#}
+                {#break;#}
+            {#case 'validated':#}
+                {#description = '{{ 'order-manager::order-item: accepted-item' |trans }}';#}
+                {#$('.order_list .order_row.' + type, orderDialog.getDomElement()).each(function(i,n) {#}
+                    {#elements_ids.push($(n).attr('elementids'));#}
+                {#});#}
+                {#break;#}
+            {#default :#}
+                {#//selected elements;#}
+                {#description = '{{ 'order-manager::order-item: selected-item' |trans }}';#}
+                {#$('.order_list .order_row.' + type, orderDialog.getDomElement()).each(function(i,n) {#}
+                    {#elements_ids.push($(n).attr('elementids'));#}
+                {#});#}
+        {#}#}
+        {#$('textarea[name="description"]', $dialog).val(description);#}
+        {#$('input[name="lst"]', $dialog).val(elements_ids.join('; '));#}
+    {#}#}
+
+    {#function openValidationDialog(el, event) {#}
+        {#$("#validation-window").dialog({#}
+            {#open: function (event, ui) {#}
+                {#$('.ui-dialog').css('z-index', 100000);#}
+                {#$(".ui-widget-overlay").css('z-index', 100000);#}
+            {#},#}
+            {#closeOnEscape: true,#}
+            {#resizable: false,#}
+            {#width: 450,#}
+            {#height: 500,#}
+            {#modal: true,#}
+            {#draggable: false,#}
+            {#stack: false,#}
+            {#title: '{{ 'order-manager::order-item:Validation' | trans }}',#}
+            {#buttons: {#}
+                {#"{{ 'order-manager::order-item: submit' |trans }}": function() {#}
+                    {#//submit documents#}
+                    {#submitDocuments($(this));#}
+                {#},#}
+                {#"{{ 'order-manager::order-item: reset' |trans }}": function() {#}
+                    {#if(confirm("{{ 'order-manager::order-item: warning-message-close' |trans }}")) {#}
+                        {#resetValidation();#}
+                        {#toggleValidationButton();#}
+                        {#$(this).dialog("close");#}
+                    {#}#}
+                {#}#}
+            {#},#}
+            {#overlay: {#}
+                {#backgroundColor: '#000',#}
+                {#opacity: 0.7#}
+            {#}#}
+        {#}).dialog('open');#}
+        {#createValidationTable();#}
+    {#}#}
+
+    {#function submitDocuments(dialogElem) {#}
+        {#var order_id = $('input[name=order_id]').val();#}
+        {#var validatedArrayNoForceIds = _.filter(elementsForValidation, function(elem) {#}
+            {#return elem.newState === ELEMENT_TYPE.VALIDATED && elem.oldState !== ELEMENT_TYPE.DENIED;#}
+        {#}).map(function(elem) {#}
+            {#return elem.elementId;#}
+        {#});#}
+
+        {#var validatedArrayWithForceIds = _.filter(elementsForValidation, function(elem) {#}
+            {#return elem.newState === ELEMENT_TYPE.VALIDATED && elem.oldState === ELEMENT_TYPE.DENIED;#}
+        {#}).map(function(elem) {#}
+            {#return elem.elementId;#}
+        {#});#}
+
+        {#var deniedArrayIds = _.filter(elementsForValidation, function(elem) {#}
+            {#return elem.newState === ELEMENT_TYPE.DENIED;#}
+        {#}).map(function(elem) {#}
+            {#return elem.elementId;#}
+        {#});#}
+
+        {#if(validatedArrayNoForceIds.length > 0) {#}
+            {#do_send_documents(order_id, validatedArrayNoForceIds, false);#}
+        {#}#}
+        {#if(validatedArrayWithForceIds.length > 0) {#}
+            {#do_send_documents(order_id, validatedArrayWithForceIds, true);#}
+        {#}#}
+        {#if(deniedArrayIds.length > 0) {#}
+            {#do_deny_documents(order_id, deniedArrayIds);#}
+        {#}#}
+        {#dialogElem.dialog("close");#}
+    {#}#}
+
+    {#function createValidationTable() {#}
+        {#$('.validation-content').empty();#}
+        {#var validatedArray = _.filter(elementsForValidation, function(elem) {#}
+            {#return elem.newState === ELEMENT_TYPE.VALIDATED;#}
+        {#});#}
+        {#var deniedArray = _.filter(elementsForValidation, function(elem) {#}
+            {#return elem.newState === ELEMENT_TYPE.DENIED;#}
+        {#});#}
+
+        {#if(validatedArray.length > 0) {#}
+            {#var html = '';#}
+            {#html += '<h5>' + '{{ 'order-manager::order-item: you-have-validated' |trans }}' + " " + (validatedArray.length == 1 ? validatedArray.length + " " + '{{ 'order-manager::order-item: item' |trans }}' :  validatedArray.length + " " + '{{ 'order-manager::order-item: items' |trans }}') + '</h5>';#}
+            {#html += '<table class="validation-table">';#}
+            {#_.each(validatedArray, function(elem) {#}
+                {#html += '<tr>';#}
+                {#html += '<td width="25%" align="center">' + elem.elementPreview[0].outerHTML + '</td>';#}
+                {#html += '<td width="75%">' + elem.elementTitle[0].outerHTML + '</td>';#}
+                {#html += '</tr>';#}
+            {#});#}
+            {#html += '</table>';#}
+            {#$('.validation-content').append(html);#}
+        {#}#}
+
+        {#if(deniedArray.length > 0) {#}
+            {#var html = '';#}
+            {#html += '<h5>' + '{{ 'order-manager::order-item: you-have-denied' |trans }}' + " " + (deniedArray.length == 1 ? deniedArray.length + " " + '{{ 'order-manager::order-item: item' |trans }}' :  deniedArray.length + " " + '{{ 'order-manager::order-item: items' |trans }}') + '</h5>';#}
+            {#html += '<table class="validation-table">';#}
+            {#_.each(deniedArray, function(elem) {#}
+                {#html += '<tr>';#}
+                {#html += '<td width="25%" align="center">' + elem.elementPreview[0].outerHTML + '</td>';#}
+                {#html += '<td width="75%">' + elem.elementTitle[0].outerHTML + '</td>';#}
+                {#html += '</tr>';#}
+            {#});#}
+            {#html += '</table>';#}
+            {#$('.validation-content').append(html);#}
+        {#}#}
+
+    {#}#}
+
+    {#function resetValidation() {#}
+        {#var dialog = p4.Dialog.get(1);#}
+        {#$('.order_list .order_row', dialog.getDomElement()).each(function(i,n){#}
+            {#var elementId = $(n).find('input[name=order_element_id]').val();#}
+            {#var found = _.where(elementsForValidation, {elementId: elementId});#}
+            {#if(found.length > 0) {#}
+                {#$(n).removeClass(ELEMENT_TYPE.WAITINGFORVALIDATION);#}
+                {#//replace content or row with original content#}
+                {#$(n)[0].innerHTML = found[0].element[0].innerHTML;#}
+            {#}#}
+            {#updateButtonStatus($(n).attr('class').split(/\s+/));#}
+        {#});#}
+        {#readyForValidation = false;#}
+        {#elementsForValidation = [];#}
+        {#renderOrderDetailView(0);#}
+    {#}#}
+
+    {#function updateValidation(newState) {#}
+        {#var count = 0;#}
+        {#var dialog = p4.Dialog.get(1);#}
+        {#$('.order_list .order_row', dialog.getDomElement()).each(function(i,n){#}
+            {#if($(n).hasClass(ELEMENT_TYPE.SELECTED) && !$(n).hasClass(ELEMENT_TYPE.VALIDATED) && !$(n).hasClass(ELEMENT_TYPE.DENIED)#}
+                {#&& !$(n).hasClass(ELEMENT_TYPE.WAITINGFORVALIDATION)){#}
+                {#createItemForValidation($(n), ELEMENT_TYPE.SELECTABLE, newState);#}
+                {#count++;#}
+            {#}#}
+            {#else if($(n).hasClass(ELEMENT_TYPE.SELECTED) && !$(n).hasClass(ELEMENT_TYPE.VALIDATED)#}
+                {#&& !$(n).hasClass(ELEMENT_TYPE.WAITINGFORVALIDATION)){#}
+                {#createItemForValidation($(n), ELEMENT_TYPE.DENIED, newState);#}
+                {#count++;#}
+            {#}#}
+            {#$(n).removeClass(ELEMENT_TYPE.SELECTED);#}
+        {#});#}
+
+        {#readyForValidation = true;#}
+        {#toggleValidationButton();#}
+        {#//disable select all checkbox if selected#}
+        {#if($('input[name="select-all"]').is(':checked')){#}
+            {#$('input[name="select-all"]').prop('checked', false);#}
+        {#}#}
+
+        {#//multiple items selected#}
+        {#if(count > 1) {#}
+            {#$('#wrapper-padding').hide();#}
+            {#$('.external-order-action').hide();#}
+            {#$('#wrapper-multiple').hide();#}
+        {#}#}
+    {#}#}
+
+    {#function createItemForValidation(element, oldState, newState) {#}
+        {#var order = {};#}
+        {#order.elementTitle = element.find('span');#}
+        {#order.elementPreview = element.find('.order_wrapper');#}
+        {#order.elementId = element.find('input[name=order_element_id]').val();#}
+        {#order.element = element.clone( true );#}
+        {#order.oldState = oldState;#}
+        {#order.newState = newState;#}
+        {#elementsForValidation.push(order);#}
+        {#element.toggleClass(ELEMENT_TYPE.WAITINGFORVALIDATION);#}
+        {#element.find('td:first-child').empty();#}
+        {#element.find('td:first-child').append('<i style="font-size: 20px;" class="icon-ok-circle">');#}
+        {#updateButtonStatus(element.attr('class').split(/\s+/));#}
+    {#}#}
+
+    {#function toggleValidationButton() {#}
+        {#if(readyForValidation) {#}
+            {#$('button.validate').show();#}
+        {#}else {#}
+            {#$('button.validate').hide();#}
+        {#}#}
+    {#}#}
+
+    {#function checkAll(element) {#}
+        {#itemCount = 0;#}
+        {#var selectable =[];#}
+        {#$('.table-order .order_row').each(function(){#}
+            {#var el = $(this);#}
+            {#if(element.checked && el.hasClass(ELEMENT_TYPE.SELECTABLE)){#}
+                {#el.addClass(ELEMENT_TYPE.SELECTED);#}
+                {#itemCount++;#}
+                {#selectable.push(el);#}
+            {#}else {#}
+                {#el.removeClass(ELEMENT_TYPE.SELECTED);#}
+            {#}#}
+        {#});#}
+        {#//load preview for single item selected#}
+        {#if(selectable.length == 1) {#}
+            {#loadPreviewAndCaption(selectable[0]);#}
+        {#}#}
+        {#renderOrderDetailView(itemCount);#}
+    {#}#}
+
+    {#function do_send_documents(order_id, elements_ids, force)#}
+    {#{#}
+        {#var dialog = p4.Dialog.get(1);#}
+        {#var cont = dialog.getDomElement();#}
+
+        {#$('button.deny, button.send', cont).prop('disabled', true);#}
+        {#$('.activity_indicator', cont).show();#}
+
+        {#$.ajax({#}
+            {#type: "POST",#}
+            {#url: "../prod/order/"+order_id+"/send/",#}
+            {#dataType:'json',#}
+            {#data: {#}
+                {#'elements[]':elements_ids,#}
+                {#force:(force?1:0)#}
+            {#},#}
+            {#success: function(data){#}
+                {#var success = '0';#}
+
+                {#if(data.success)#}
+                {#{#}
+                    {#success = '1';#}
+                {#}#}
+
+                {#dialog.load('../prod/order/' + order_id + '/?success=' + success + '&action=send');#}
+            {#},#}
+            {#error: function(){#}
+                {#$('button.deny, button.send', cont).prop('disabled', false);#}
+                {#$('.activity_indicator', cont).hide();#}
+            {#},#}
+            {#timeout: function(){#}
+                {#$('button.deny, button.send', cont).prop('disabled', false);#}
+                {#$('.activity_indicator', cont).hide();#}
+            {#}#}
+        {#});#}
+    {#}#}
+
+    {#function do_deny_documents(order_id, elements_ids) {#}
+        {#var dialog = p4.Dialog.get(1);#}
+        {#var cont = dialog.getDomElement();#}
+        {#$('button.deny, button.send', cont).prop('disabled', true);#}
+        {#$('.activity_indicator', cont).show();#}
+
+        {#$.ajax({#}
+            {#type: "POST",#}
+            {#url: "../prod/order/"+ order_id +"/deny/",#}
+            {#dataType:'json',#}
+            {#data: {#}
+                {#'elements[]':elements_ids#}
+            {#},#}
+            {#success: function(data){#}
+                {#var success = '0';#}
+
+                {#if(data.success)#}
+                {#{#}
+                    {#success = '1';#}
+                {#}#}
+
+                {#dialog.load('/prod/order/' + order_id + '/?success=' + success + '&action=deny');#}
+            {#},#}
+            {#error: function(){#}
+                {#$('button.deny, button.send', cont).prop('disabled', false);#}
+                {#$('.activity_indicator', cont).hide();#}
+            {#},#}
+            {#timeout: function(){#}
+                {#$('button.deny, button.send', cont).prop('disabled', false);#}
+                {#$('.activity_indicator', cont).hide();#}
+            {#}#}
+        {#});#}
+    {#}#}
+
+    {#function sendMail() {#}
+        {#var email = '{{ order.getUser().getEmail() }}';#}
+        {#var subject = '{{ 'order-manager::mail: your-order-of' | trans }} {{ 'order-manager::order-item: number' |trans }} '#}
+            {#+ {{ order.getId() }} + ' {{ 'order-manager::order-item: of' |trans }} '#}
+            {#+ '{{ order.getCreatedOn()|date('d/m/Y')|e('js')|raw }}';#}
+        {#var body = '{{ 'Utilisation prevue:' | trans }} {{ order.getOrderUsage()|e('js')|raw }}';#}
+        {#if(email != null) {#}
+            {#var link = "mailto:" + email + "?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(body);#}
+            {#window.location.href = link;#}
+
+        {#}#}
+    {#}#}
+
+    {#function renderOrderDetailView(countSelected) {#}
+        {#if(countSelected > 1) {#}
+            {#$('#wrapper-padding').hide();#}
+            {#$('.external-order-action').hide();#}
+            {#$('#wrapper-multiple').show();#}
+            {#var dialog = p4.Dialog.get(1);#}
+            {#var elementArrayType = [];#}
+            {#$('.order_list .selectable.selected', dialog.getDomElement()).each(function(i,n){#}
+                {#//elementArrayType = _.union(elementArrayType, $(n).attr('class').split(/\s+/));#}
+                {#elementArrayType.push($(n).attr('class').split(/\s+/));#}
+            {#});#}
+            {#updateButtonStatusMultiple(elementArrayType);#}
+            {#//updateButtonStatus(elementArrayType);#}
+        {#}else if(countSelected == 1) {#}
+            {#$('#wrapper-padding').show();#}
+            {#$('.external-order-action').show();#}
+            {#$('#wrapper-multiple').hide();#}
+        {#}else {#}
+            {#$('#wrapper-padding').hide();#}
+            {#$('.external-order-action').hide();#}
+            {#$('#wrapper-multiple').hide();#}
+        {#}#}
+        {#$('#preview-layout-multiple .title').html(countSelected);#}
+    {#}#}
+
+    {#function updateButtonStatusMultiple(elementArrayType) {#}
+        {#$('#order-action button.deny, #order-action button.send').hide();#}
+        {#var countObj = elementArrayType.reduce(function(m,v){#}
+            {#for (var k in m) {#}
+                {#if (~v.indexOf(k)) m[k]++;#}
+            {#}#}
+            {#return m;#}
+        {#},{validated:0, selectable: 0, waitingForValidation: 0});#}
+
+        {#var html = "";#}
+        {#if(countObj.validated > 0) {#}
+            {#html += '<p>{{ 'order-manager::order-item: items-already-sent' | trans }}: '#}
+                {#+ countObj.validated + '</p>';#}
+        {#}#}
+
+        {#if(countObj.waitingForValidation > 0) {#}
+            {#html += '<p>{{ 'order-manager::order-item: items-waiting-validation' | trans }}: '#}
+                {#+ countObj.waitingForValidation + '</p>';#}
+        {#}#}
+
+        {#//for the remaining items#}
+        {#var remaining = countObj.selectable - (countObj.validated + countObj.waitingForValidation);#}
+        {#if(remaining > 0) {#}
+            {#html += '<p> {{ 'order-manager::order-item: for-non-sent-items' | trans }}: '#}
+                {#+ remaining + '</p>';#}
+            {#$('#order-action button.deny, #order-action button.send').prop('disabled', false);#}
+            {#$('#order-action button.deny, #order-action button.send').show();#}
+        {#}#}
+
+        {#$('#wrapper-multiple #text-content').empty();#}
+        {#$('#wrapper-multiple #text-content').append(html);#}
+    {#}#}
+
+    {#/* *#}
+     {#* function to update status of send and deny button#}
+     {#* params - array of type for each button selected#}
+     {#*/#}
+    {#function updateButtonStatus(elementArrayType) {#}
+        {#if(_.contains(elementArrayType, ELEMENT_TYPE.VALIDATED)) {#}
+            {#$('#order-action button.deny, #order-action button.send').hide();#}
+            {#$('#order-action span.action-text').html('{{ 'order-manager::order-item: already-validated' | trans }}' + '<i class="icon-ok"></i>');#}
+            {#$('#order-action span.action-text').show();#}
+        {#}else if (_.contains(elementArrayType, ELEMENT_TYPE.WAITINGFORVALIDATION)) {#}
+            {#$('#order-action button.deny, #order-action span.action-text').hide();#}
+            {#$('#order-action button.send').show();#}
+            {#$('#order-action button.send').prop('disabled', true);#}
+        {#}else if (_.contains(elementArrayType, ELEMENT_TYPE.DENIED)) {#}
+            {#$('#order-action button.deny').hide();#}
+            {#$('#order-action span.action-text').html('{{ 'order-manager::order-item: refused-previously' | trans }}');#}
+            {#$('#order-action button.send').prop('disabled', false);#}
+            {#$('#order-action button.send, #order-action span.action-text').show();#}
+        {#}else {#}
+            {#$('#order-action button.send, #order-action button.deny').prop('disabled', false);#}
+            {#$('#order-action button.send, #order-action button.deny').show();#}
+            {#$('#order-action span.action-text').hide();#}
+        {#}#}
+    {#}#}
+
+
+    {#function loadPreviewAndCaption(elem) {#}
+        {#$('#preview-layout').empty();#}
+        {#$('#caption-layout').empty();#}
+        {#updateButtonStatus(elem.attr('class').split(/\s+/));#}
+        {#var elementids = elem.attr('elementids').split('_');#}
+        {#var sbasId = elementids[0];#}
+        {#var recordId = elementids[1];#}
+        {#prevAjax = $.ajax({#}
+            {#type: "GET",#}
+            {#url: "../prod/records/record/"+sbasId+'/'+recordId+'/',#}
+            {#dataType: 'json',#}
+            {#success: function (data) {#}
+                {#if (data.error) {#}
+                    {#return;#}
+                {#}#}
+                {#$('#preview-layout').append(data.html_preview);#}
+                {#$('#caption-layout').append(data.desc);#}
+            {#}#}
+        {#});#}
+//    }
 
 </script>
\ No newline at end of file