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).