Assalamualaikum teman teman, pada kesempatan ini kita akan melanjutkan dari apa yang kita kerjakan pada part 2, kali ini kita akan membuat form, mungkin formnya akan saya buat semirip mungkin agar kalian tidak bingung, kalau begitu langsung saja kita ke pokok pembahasan.
teman teman mungkin sadar kalau pada tampilan depan terdapat button berwarna biru(primary), nah button tersebutkan saya buatkan href yaaa
yang memiliki kontroller untuk merender seperti berikut ini
@http.route(['/my/tes_product/new_tes_product'], type='http', auth="user", website=True)
def new_tes_product(self, **kw):
prod = request.env['product.product'].sudo().search([])
vendor = request.env['res.partner'].sudo().search([])
vals = {'products': prod, 'vendor': vendor, 'page_name':'view_create_form_tes_product'}
return request.render('rm_web_test.view_create_form_tes_product', vals)
nah dengan button inilah yang akan mengalihkan kita ke form yang lainn, berikut formnya
nah pertanyaannya, bagaimana form yang kosong ini bisa berfungsi untuk menyimpan data ke database odoo dan muncul di backendnya ? jawabannya sederhana, saya lempar menggunakan button yang dimana saya berikan method jsonrpc, kita kesampingkan soal table yang ada dibawah, kita fokus yang di header dulu karena table nanti akan saya jelaskan di part selanjutnya, sekarang kita fokus pada tampilan xml nya karena baik id dan class itu penting disini
<template id="view_create_form_tes_product" name="Create Product">
<t t-call="website.layout">
<div class="alert alert-success" role="alert" t-if="success_message">
<t t-esc="success_message"/>
</div>
<t t-foreach="error_list" t-as="error">
<div class="alert alert-danger" role="alert">
<t t-esc="error"/>
</div>
</t>
<div>
<a t-attf-href="/my/tes_product/">
<button type="button" class="btn btn-success">Back</button>
</a>
</div>
<div class="class-create-product">
<section style="background-color: #eee;">
<div class="row">
<div class="col-lg-4">
<div class="card mb-4">
<div class="card-body text-center">
<div class="picture-container">
<div class="picture">
<img class="picture-src" id="wizardPicturePreview" title="" style="max-height: 400px;"/>
<input type="file" id="wizard-picture" class="" accept="image/*" />
<input style="display: none;" type="char" name="base64_picture" id="base64_picture" />
</div>
<span>Change Profile Picture</span>
</div>
<div class="d-flex justify-content-center mb-2">
<button type="submit" id="submit-button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="card mb-4">
<div class="card-body">
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Product</p>
</div>
<div class="col-sm-9">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<input type="char" class="form-control" name="name" id="product_name" />
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Barcode</p>
</div>
<div class="col-sm-9">
<input type="char" class="form-control" name="barcode" id="barcode"/>
</div>
</div>
</hr>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Internal Reference</p>
</div>
<div class="col-sm-9">
<input type="char" class="form-control" name="default_code" id="default_code"/>
</div>
</div>
</hr>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Price</p>
</div>
<div class="col-sm-9">
<input type="char" class="form-control" name="lst_price" id="lst_price"/>
</div>
</div>
</hr>
</div>
</div>
<!-- O2M -->
<body>
<div class="container pt-4">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr class="table-primary">
<th class="text-center">Vendor</th>
<th class="text-center">Price</th>
<th class="text-center">Delivery Lead Time</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</div>
</body>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Add Row
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Open Add Row</h4>
</div>
<!-- Modal body -->
<div class="modal-body">
<body>
<div class="container pt-4">
<div class="table-responsive">
<div class="form-outline mb-4">
<label class="form-label">Name</label>
<select id="vendor" class="form-control" style="width: 580px; height: 38px;">
<t t-foreach="vendor" t-as="vendor_name">
<option t-att-value="vendor_name.id" t-esc="vendor_name.name"/>
</t>
</select>
</div>
<div class="form-outline mb-4">
<label class="form-label">Price</label>
<input style="width: 580px; height: 38px;" type="char" class="form-control" name="price" id="price"/>
</div>
<div class="form-outline mb-4">
<label class="form-label">Delivery Lead Time</label>
<input style="width: 580px; height: 38px;" type="char" class="form-control" name="dlt" id="dlt"/>
</div>
</div>
</div>
</body>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button id="close-modal" type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button id="save-modal" type="button" class="btn btn-primary" title="Save">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</t>
</template>
kita kesampingkan soal tabel dan modal, jadi kita fokus pada button "Save" saja, saya akan memberikan js
publicWidget.registry.OnClickSaveRecord = publicWidget.Widget.extend({
selector: '.class-create-product',
events: {
'click #submit-button': '_onClickSave',
},
_onClickSave() {
var lines = []
var product_name = $('#product_name').val()
var barcode = $('#barcode').val()
var default_code = $('#default_code').val()
var lst_price = $('#lst_price').val()
var base64_picture = $('#base64_picture').val()
$('#tbody > tr').each(function () {
lines.push({
'vendor': $(this).find("span[col_name='vendor']").text(),
'price': $(this).find("span[col_name='price']").text(),
'delay': $(this).find("span[col_name='dlt']").text(),
})
});
ajax.jsonRpc('/my/tes_product/new_tes_product/add_product', 'call', {
'name': product_name,
'barcode': barcode,
'default_code': default_code,
'list_price': lst_price,
'base64_picture': base64_picture,
'seller_ids': lines
}).then(function (result) {
window.location.href = "/my/tes_product/new_tes_product";
// logic setelah post data, bisa diganti sama redirect ke halaman lain atau muncul modal kalo data berhasil ditambahkan
})
},
});
penjelasan : pertama ada selector, selector kita bisa memilih pada form mana, karena ini berpengaruh pada struktur yang ada di turunannya, dalam konteks ini saya menggunakan .class-create-product karena dia class, kalau id tinggal menggunakan #.
untuk event nya saya menggunakan klik, karena saya ingin ini tertrigger ketika di klik, dan tinggal di definisikan saja buttonnya, kebetulan saya menggunakan id jadinya #submit-button dan kita berikan method yang kita definisikan di js nya.
nah dalam js ini, perlu disesuaikan id input dari tiap tiap field, misal id="product_name" maka kita akan menggunakannya di js menjadi #product_name
kita kesampingkan soal lines dan base64_picture, inti dari ini adalah kita buat variabel yang kemudian kita isi dari frontend kita (website), dan kemudian kita lempar itu semua dengan menggunakan jsonrpc, namun stepnya tidak berhenti disini saja kita harus mengkordinasikan lemparan ini dengan kontrollernya
untuk masing masing field kita ambil dari fied yang sesuai, dan tinggal di create aja, ohiya sedikit penjelasan, kontroller ini digunakan untuk ngehit jsonrpc yang ada di js nya. sekarang mari kita demokan
saya rasa sekian untuk step ini, kita sudah bisa mengcreate data product, mungkin selanjutnya saya akan melanjutkannya untuk side part bagian bagaimana cara membuat table nya agar dinamis, dan bagaimana cara mengconvert image, serta bagaimana cara mengedit dan mendelete.
terimakasih Assalamualaikum