Pada materi kali ini saya akan membagikan bagaimana cara membuat pop up di portal pada odoo 17 lalu mengupdate/mengisi data field pada suatu model melalui pop up tersebut. Untuk contoh disini saya menggunakan model purchase order. Disini saya tambahkan button untuk mentrigger pop up nya di dalam template portal purchase order dengan meng-inherit templatenya.
Pertama kita membuat pop up di portal menggunakan modal bootstrap. Lalu pada parameter action kita isi dengan url yang akan kita masukan di @http.route decorator pada controller. Selanjutnya kita akan buat controllernya.
<template id="button_acknowledgement" inherit_id="purchase.portal_my_purchase_order">
<xpath expr="//div[contains(@class, 'o_download_pdf')]" position="before">
<t t-if="order.state in ['draft', 'sent']">
<div class="d-flex flex-column gap-2" id="purchase_order_sidebar_button">
<div class="mb-2">
<a role="button" class="btn btn-primary d-block" href="#" data-bs-toggle="modal" data-bs-target="#acknowledgeModal">Fill
Acknowledgement Form </a>
</div>
</div>
</t>
</xpath>
<xpath expr="//div[@id='quote_content']" position="inside">
<div role="dialog" class="modal fade" id="acknowledgeModal">
<form id="acknowledge" action="/acknowledge" method="POST" t-att-data-order-id="order.id" t-att-data-token="order.access_token">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
<input type="hidden" name="order_id" t-att-value="order.id" />
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="customModalLabel">Acknowledgement
Form</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<b t-field="order.partner_id" />
</div>
<div class="form-group">
<b t-field="order.name" />
</div>
<p>
<strong>To: PT. Vale Eksplorasi Indonesia / PT. Sumbawa
Timur Mining</strong>
</p>
<br />
<div class="form-group">
<label>We Acknowledge receipt of the above Purchase
Order
and
confirm out acceptance with the order details by
tick/choose the appropriate
options, or advise any changes. </label>
</div>
<div class="form-group">
<label></label>
<input type="text" id="vendor_representative_name" name="vendor_representative_name" class="form-control" placeholder="Vendor Representative Name *" required="" />
</div>
<div class="form-group">
<label for="email"></label>
<input type="text" id="email" name="email" class="form-control" placeholder="Email *" required="" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">
Confirm</button>
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#modalreject" data-bs-dismiss="modal">
Reject
</button>
</div>
</div>
</div>
</form>
</div>
<div role="dialog" class="modal fade" id="modalreject">
<div class="modal-dialog">
<form id="decline" action="/reject" method="POST" class="modal-content">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
<input type="hidden" name="order_id" t-att-value="order.id" />
<input type="hidden" id="reject_vendor_representative_name"
name="vendor_representative_name" />
<input type="hidden" id="reject_email" name="email" />
<script>
document.addEventListener('DOMContentLoaded', function () {
const rejectButton = document.querySelector('#acknowledgeModal .btn-danger');
rejectButton.addEventListener('click', function () {
const vendorName = document.getElementById('vendor_representative_name').value;
const email = document.getElementById('email').value;
document.getElementById('reject_vendor_representative_name').value = vendorName;
document.getElementById('reject_email').value = email;
});
});
</script>
<header class="modal-header">
<h4 class="modal-title">Reject Reason</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</header>
<main class="modal-body">
<p>
Tell us why you are refusing this order.
</p>
<textarea rows="4" name="reject_reason" required="" placeholder="Your feedback..." class="form-control" id="reject_reason" />
</main>
<footer class="modal-footer">
<button type="submit" t-att-id="order.id" class="btn btn-danger">
<i class="fa fa-times"></i> Reject </button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">
Cancel
</button>
</footer>
</form>
</div>
</div>
</xpath>
Disini saya menginherit controller dari CustomerPortal. Untuk contoh disini saya menggunakan model purchase order. Di controller saat user menekan button confirm akan mengisi/udpate field name_vendor dan email. Setelah itu menjalankan method acknowledge_confirm(). Disini kita juga membuat controller untuk reject apabila user menekan button reject.
class CustomerPortal(CustomerPortal):
@http.route(['/acknowledge'], type='http', auth="public", methods=['POST'], website=True)
def acknowledge_confirm(self, order_id, access_token=None, email=None, vendor_representative_name=None, **kwargs):
order = request.env['purchase.order'].sudo().browse(int(order_id))
if order:
order.sudo().write({
'name_vendor': vendor_representative_name,
'email_vendor': email,
})
order.sudo().acknowledge_confirm()
return request.redirect('/my/home')
@http.route(['/reject'], type='http', auth="public", methods=['POST'], website=True)
def acknowledge_reject(self, order_id, access_token=None, email=None, vendor_representative_name=None, reject_reason=None, **kwargs):
order = request.env['purchase.order'].sudo().browse(int(order_id))
if order:
order.sudo().write({
'name_vendor': vendor_representative_name,
'email_vendor': email,
'reject_reason': reject_reason,
})
order.sudo().acknowledge_reject()
return request.redirect('/my/home')