Okno modalne

Okno modalne możemy otwierać także na stronie (frontend), choć jest to nieco bardziej skomplikowane niż w przypadku zaplecza (backend). Pokażdemy to na przykładzie okna wydarzeń.

Korzystamy z json (przycisk - akcja w Javascript -> json -> otwarcie okna w Pythonie)

# -*- coding: utf-8 -*-


from odoo import http, _
# zob. addons/website_event/controllers/main.py
from odoo.addons.website_event.controllers.main import WebsiteEventController
from odoo.http import request


class WebsiteEventFront4Controller(WebsiteEventController):

    @http.route(['/front4',], type='http', auth="public", website=True)
    def front4(self, **param):
        Event = request.env['event.event']
        events = Event.search([])
        values = {
            'events': events,
        }
        return request.render("front4.front0", values)



    @http.route(['/front4_modal'], type='json', auth="public", methods=['POST'], website=True)
    def front4_modal(self, **post):
        return request.env['ir.ui.view'].render_template("front4.modal_form", {})

Skrypt w Json:

odoo.define('website_event.website_event', function (require) {

var ajax = require('web.ajax');
var Widget = require('web.Widget');
var web_editor_base = require('web_editor.base')
// https://www.odoo.com/documentation/11.0/reference/javascript.html#web_editor.base

// Catch registration form event, because of JS for attendee details
var EventRegistrationForm = Widget.extend({
    start: function() {
        var self = this;
        var res = this._super.apply(this.arguments).then(function() {
            $('#front4_form .front4-submit')
                .off('click')
                .removeClass('front4-submit')
                .click(function (ev) {
                    self.on_click(ev);
                });
        });
        return res
    },
    on_click: function(ev) {
        alert('otworz modal');
        ev.preventDefault();
        ev.stopPropagation();
        var $form = $(ev.currentTarget).closest('form'); // formularz z ktorego wywolanie
        var post = {};
        return ajax.jsonRpc($form.attr('action'), // akcja z formularza - wywolywana przez jsonRpc
                            'call', post).then(function (modal) {
                            alert('otwiera!');
            var $modal = $(modal); // dodanie ukrycia
            $modal.appendTo($form).modal();
            $modal.on('click', '.js_goto_event', function () {
                $modal.modal('hide');
            });
        });
    },
});

web_editor_base.ready().then(function(){
    var event_registration_form = new EventRegistrationForm().appendTo($('#front4_form'));
});

return { EventRegistrationForm: EventRegistrationForm };

});

Szablony:

<?xml version="1.0" encoding="utf-8"?>
<odoo>

<template id="event_script" inherit_id="website.assets_frontend" name="Events Script">
    <xpath expr="/t" position="inside">
        <script type="text/javascript" src="/front4/static/src/js/front4.js"></script>
    </xpath>
</template>


    <template id="front4_tmpl" inherit_id="website_event.registration_template">
        <xpath expr="//form" position="after">
           <h2>front4</h2>
           position="inside"?
           <form id="front4_form" t-attf-action="/front4_modal" method="post">
                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>

                <button type="submit"
                   class="btn front4-submit">Front 4 Test</button>
            </form>
        </xpath>
    </template>

    <template id="modal_form" name="Okienko modalne">
        <div id="modal_attendees_registration" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg">
                <form id="attendee_registration" t-attf-action="/front4" method="post">
                    <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                            <h4 class="modal-title" id="myModalLabel">
                                <strong>Front 4 test</strong>
                            </h4>
                        </div>
                        <div class="modal-body">
                            <div class="container">
                               dane
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div class="pull-left">
                                <button type="submit" class="btn btn-primary">Kontynuuj</button> lub
                                <a class="js_goto_event" style="cursor: pointer;"> Anuluj (JS)</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </template>

</odoo>

Zauważ, że okno modalne jest renderowane normalnie - na serwerze. Inicjowanie tego pochodzi jednak od modułu na stronie (Javascript/Json).