Add a row to a qweb odoo report - report

I have a qweb report in which I want to add a line that contain the total of every cols of the report:
this is my qweb code; its about creating a payroll report, its contain 11 cols, I want to add a row of totals by cols
<data>
<t t-call="report.html_container">
<t t-foreach="docs" t-as="o">
<t t-call="report.external_layout">
<div class="page" >
<br></br><br></br>
<div class="row" style="border: 1px solid black">
<div class="col-md-12 text-center"><h2>JOURNAL DE PAIE</h2></div>
<div class="col-md-12 text-center"><p>Période du <span t-esc="data['form']['date_start']"/> au <span t-esc="data['form']['date_end']"/></p></div>
</div>
<br></br><br></br>
<div class="row">
<table class="table table-striped table-bordered table-condensed table-hover" >
<thead><!-- table head-->
<tr style="background-color: #BEC5C0;">
<th>Periode</th>
<th>Matricule</th>
<th>Employé</th>
<th>BASE</th>
<th>Primes</th>
<th>BRUT</th>
<th>CNSS</th>
<th>SAL IMPO</th>
<th>IRPP</th>
<th>Avance/pret</th>
<th>NET A PAYER</th>
</tr>
</thead>
<tbody>
<tr t-foreach="get_all_payslip_per_period(data['form']['date_start'],data['form']['date_end'])" t-as="p" >
<td style="text-align:center;" t-esc="get_month_name(p.date_from)"></td>
<td t-esc="p.employee_id.id"></td>
<td t-esc="p.employee_id.name"></td>
<t t-foreach="get_payslip_lines(p.line_ids)" t-as="l">
<t t-if="l.code=='BASE'">
<t t-set="base" t-value="l.total"/>
<td t-esc="base"></td>
</t>
</t>
<!-- primes -->
<td>
<div t-foreach="get_primes_values(p)" t-as="pr" >
<div style="text-align:left;background-color: #BEC5C0;" t-esc="pr['code']"></div>
<div style="text-align:right;background-color:#CDD8D0;" t-esc="pr['val']"></div>
</div>
</td>
<t t-foreach="get_payslip_lines(p.line_ids)" t-as="l">
<t t-if="l.code=='BRUT' ">
<t t-set="brut" t-value="l.total"/>
<td t-esc="brut"></td>
</t>
<t t-if="l.code=='CNSS' ">
<t t-set="cnss" t-value="l.total"/>
<td t-esc="cnss"></td>
</t>
<t t-if="l.code=='NET' ">
<t t-set="net" t-value="l.total"/>
<td t-esc="net"></td>
</t>
<t t-if="l.code=='IRPP' ">
<t t-set="irpp" t-value="l.total"/>
<td t-esc="irpp"></td>
</t>
</t>
<td t-esc="p.avance_amount"></td>
<td t-esc="get_total_by_rule_category(p, 'AUTRE')-get_total_by_rule_category(p, 'RCC')-(p.avance_amount)"></td>
</tr>
</tbody>
</table>
</div>
</div>
</t>
</t>
</t>
</data>

Try this:
<t t-set="brut" t-value="0"/> <!-- initialize the variable-->
<t t-foreach="get_payslip_lines(p.line_ids)" t-as="l">
<t t-if="l.code=='BRUT' ">
<t t-set="brut" t-value="brut + l.total"/>
</t>
</t>
<td t-esc="brut"></td> <!-- To show it on the report-->
Initialize you variables before:
<tr t-foreach="get_all_payslip_per_period(data['form']['date_start'],data['form']['date_end'])" t-as="p" >
And sum before adding the new tr containing the totals:
</tr>
<tr>
<td><t t-esc='Total1'/></td>
...
</tr>
</tbody>

Related

Input group addon not aligning well on the mozilla browser

I have the following table:
<table class="neo-table">
<tr>
<td>Day of final discharge home</td>
<td>{{ form_widget(form.mHomeDischargeDay, {'id': 'M_Home_discharge_day', 'attr':{'style':'width:60px'}})}}</td>
<td><input type="button" value="enter date" onclick="convertDate('M_Home_discharge_day')"></td>
</tr>
<tr>
<td >Weight at final discharge</td>
<td colspan="2"><div class="input-group">{{ form_widget(form.mHomeWeight, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">g</div> </div></td>
</tr>
<tr>
<td >Head circumference at final discharge</td>
<td colspan="2"><div class="input-group">{{ form_widget(form.mHomeHeadCirc, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div> </div></td>
</tr>
<tr>
<td>Length at final discharge</td>
<td colspan="2"><div class="input-group">{{ form_widget(form.mHomeLength, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div></div></td>
</tr>
<tr>
<td>Enteral feeding at final discharge</td>
<td>{{ form_widget(form.mHomeFeeding)}}</td>
<td></td>
</tr>
</table>
On the chrome browser, it works fine and displays this:
But on the mozilla browser, the group addon is not correctly aligned:
I tried adding this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet"/>
Like mentioned on this post:
Input group addon alignment
But I have not been able to figure out so far where I can fix this issue.
Edit:
Here is a simplified version of the problem:
<table style="width: 100%";>
<tr>
<td>row1 col1</td>
<td>row1 col2</td>
<td>row1 col3</td>
</tr>
<tr>
<td >row2 col1</td>
<td colspan="2"><div class="input-group">row2 col2<div class="input-group-addon">row2 col2</div> </div></td>
</tr>
</table>
With the code above, I get the following result on mozilla:
I would like "row2 col2" to be in the immediate right vicinity of "row2col2"
What is the way to do this?
I solved the problem by wrapping input group addons with divs as shown below:
It works fine for Chrome and Mozilla.
<table class="neo-table">
<tr>
<td>Day of final discharge home</td>
<td>
<div class="row" style='margin-bottom: 5px'>
<div style='white-space: nowrap'>
<div class='col-xs-5'>
<div class='col-xs-2'>{{ form_widget(form.mHomeDischargeDay, {'id': 'M_Home_discharge_day', 'attr':{'style':'width:60px'}})}}</div>
</div>
</div>
</div>
</td>
<td><input type="button" value="enter date" onclick="convertDate('M_Home_discharge_day')"></td>
</tr>
<tr>
<td>Weight at final discharge</td>
<td>
<div class="row" style='margin-bottom: 5px'>
<div style='white-space: nowrap'>
<div class='col-xs-5'>
<div class='col-xs-2'><div class="input-group">{{ form_widget(form.mHomeWeight, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">g</div></div></div>
</div>
</div>
</div>
</td>
<td></td>
</tr>
<tr>
<td>Head circumference at final discharge</td>
<td>
<div class="row" style='margin-bottom: 5px'>
<div style='white-space: nowrap'>
<div class='col-xs-5'>
<div class='col-xs-2'><div class="input-group">{{ form_widget(form.mHomeHeadCirc, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div></div></div>
</div>
</div>
</div>
</td>
<td></td>
</tr>
<tr>
<td>Length at final discharge</td>
<td>
<div class="row" style='margin-bottom: 5px'>
<div style='white-space: nowrap'>
<div class='col-xs-5'>
<div class='col-xs-2'><div class="input-group">{{ form_widget(form.mHomeLength, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div></div></div>
</div>
</div>
</div>
</td>
<td></td>
</tr>
<tr>
<td>Congenital malformation</td>
<td>{{ form_widget(form.mBdefect)}}</td>
<td colspan="3">{{ form_widget(form.mBdefectSpecific, {'attr':{'style':'width:250px'}})}}</td>
</tr>
<tr>
<td>Enteral feeding at final discharge</td>
<td>{{ form_widget(form.mHomeFeeding)}}</td>
<td></td>
</tr>
</table>

How to make bootstrap grid overlap

I'm currently making a page that will display a list of customers, and will have a button to add new customers. I want the button to add new customers to be in line with the page-header, but keep the formatting (underline) that is currently already in place from the page-header.
This is what I want it to look like:
I tried this, but can't get them to overlap:
https://jsfiddle.net/2ys2zp8z/
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Customers</h1>
</div>
<div class="col-lg-2 col-lg-push-10 text-right">
<a class="btn btn-primary">New Customer</a>
</div>
</div>
You can either move the a tag to inside the h1 and give it the pull-right class like so
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Customers
<a class="btn btn-primary pull-right">New Customer</a>
</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
</tbody>
</table>
</div>
</div>
or you can wrap the text in the h1 with a span and add pull-left to it while also adding text-right class to the h1.
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);
<div class="row">
<div class="col-lg-12">
<h1 class="page-header text-right">
<span class="pull-left">Customers</span>
<a class="btn btn-primary">New Customer</a>
</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
</tbody>
</table>
</div>
</div>
just change the class .col-lg-12 to .col-lg-10 and .col-lg-12 to .col-lg-2
something like that.
SEE DEMO
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<h1 class="page-header">Customers</h1>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<a class="btn btn-primary">New Customer</a>
</div>
</div>
OR
<div class="row">
<div class="col-lg-12">
<h1 class="page-header pull-left">Customers</h1>
<a class="btn btn-primary pull-right" style="padding-top: 15px;">New Customer</a>
</div>
</div>
Updated Fiddle see the working fiddle
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" >Customers
<a class="btn btn-primary" style="float:right;margin-right:5px;">New Customer</a>
</h1>
</div>
</div>

Odoo 9 qweb report style modification

I am trying to modify my qweb report contents in Oddo 9 like table position, fonts, heights, shipping address position should come on top right side etc. by using css. But any of my changes are not reflecting in pdf report. Please suggest me the correct way to do it.
Here below is my code
<?xml version="1.0" encoding="utf-8"?>
<openerp>
<data>
<template id="report.style" name="style">
<style type="text/css">
body {
color: #000 !important;
}
.table table-condensed {
border-top: 1px solid black !important;
}
</style>
</template>
<template id="report_custom">
<t t-call="report.html_container">
<t t-foreach="docs" t-as="o">
<t t-call="report.internal_layout">
<div class="page">
<div class="oe_structure"/>
<table class="table table-condensed">
<thead>
<tr>
<th>Description</th>
<th class="text-right">Quantity</th>
<th class="text-right">Unit Price</th>
<th t-if="display_discount" class="text-right" groups="sale.group_discount_per_so_line">Disc.(%)</th>
<th class="text-right">Taxes</th>
<th class="text-right">Price</th>
</tr>
</thead>
<tbody class="sale_tbody">
<t t-foreach="doc.order_line" t-as="l">
<tr t-if="l.product_uom_qty">
<td>
<span t-field="l.name"/>
</td>
<td class="text-right">
<span t-field="l.product_uom_qty"/>
<span groups="product.group_uom" t-field="l.product_uom"/>
</td>
<td class="text-right">
<span t-field="l.price_unit"/>
</td>
<td t-if="display_discount" class="text-right" groups="sale.group_discount_per_so_line">
<span t-field="l.discount"/>
</td>
<td class="text-right">
<span t-esc="', '.join(map(lambda x: (x.description or x.name), l.tax_id))"/>
</td>
<td class="text-right">
<span t-field="l.price_subtotal"
t-field-options='{"widget": "monetary", "display_currency": "doc.pricelist_id.currency_id"}'/>
</td>
</tr>
</t>
</tbody>
</table>
</div>
</t>
</t>
</t>
</template>
<template id="report_custom">
<t t-call="report.html_container">
<t t-foreach="docs" t-as="doc">
<t t-call="sale.report_saleorder_document" t-lang="doc.partner_id.lang"/>
</t>
</t>
</template>
</data>
</openerp>

on bootstrap table column expand strangely

I have a table and ,in the note column , i should add long note that area. When i add very long note, the line expand but i just want to note settle new lines.
Example :
asyufgasdfhjdasfghfghasfhaahjfsghjahfjqjwjefqfeqwhkfwq
I want this :
jdsaaafjasasjs
ywewyuwqfyuyew
quyduquyqewfyy
And my table's code : (I want to fix td with 'thisone' id)
<div class="col-md-6">
<div class="content-box-large">
<div class="panel-heading">
<div class="panel-title">Notlar</div>
<div class="panel-options">
<i class="glyphicon glyphicon-refresh"></i>
<i class="glyphicon glyphicon-cog"></i>
</div>
</div>
<div class="panel-body">
<table class="table table-striped">
<?php if(mysqli_num_rows($listele)>0)
{ ?>
<thead>
<tr>
<th>Tarih</th>
<th>Saat</th>
<th>Dosya Notu</th>
<th>Notu Kaydeden Kişi</th>
</tr>
</thead>
<tbody>
<?php
$i=1;
while($not=mysqli_fetch_array($listele))
{
$tarih=$not["tarih"];
?>
<tr>
<td><?php echo date("d/m/Y",strtotime($tarih)); ?></td>
<td><?php echo date("H:i",strtotime($tarih)); ?></td>
<td id="thisone"><?php echo $not["dosya_not"]; ?></td>
<td><?php echo $not["calisan_adi"]; ?></td>
</tr>
<?php
$i++;
}
}?>
</tbody>
</table>
</div>
<div class="panel-body">
<table class="table table-striped">
<tr>
<td><input type="hidden" id="musteri_id" value="<?php echo $musteri_id; ?>"></td>
<td id="not"><textarea class="form-control" id="not_degeri" placeholder="Notu Giriniz" rows="3"></textarea></td>
<td id="buton"><button class="btn btn-primary" id="ekle">Yeni Not Ekle</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</di
v>
You can use word breaking option in CSS
td {
word-break: break-all;
}
<style>
td { word-break: break-all; }
</style>
<div class="col-md-6">
<div class="content-box-large">
<div class="panel-heading">
<div class="panel-title">Notlar</div>
<div class="panel-options">
<i class="glyphicon glyphicon-refresh"></i>
<i class="glyphicon glyphicon-cog"></i>
</div>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>Tarih</th>
<th>Saat</th>
<th>Dosya Notu</th>
<th>Notu Kaydeden Kişi</th>
</tr>
</thead>
<tbody>
<tr>
<td>sometext</td>
<td>some text</td>
<td id="thisone">lsdfjasdklfjasldajklsdfjkldfjklafsjklasdfjlkasdfjklafjklasdfjhklasdfjhklasdfjhklasdfajklasdfjklasdfjkl</td>
<td>some text</td>
</tr>
</tbody>
</table>
</div>
<div class="panel-body">
<table class="table table-striped">
<tr>
<td><input type="hidden" id="musteri_id" value=""></td>
<td id="not"><textarea class="form-control" id="not_degeri" placeholder="Notu Giriniz" rows="3"></textarea></td>
<td id="buton"><button class="btn btn-primary" id="ekle">Yeni Not Ekle</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Bootstrap table disappearing when less than 1200 pixels

I have a Bootstrap issue where my table disappears. When my page displays more than 1200 pixels wide my table shows perfectly. But when my page is shrunk to less than 1200 pixels wide my table disappears. I am not super advanced with bootstrap(not a design guy) so i am unsure what is causing the problem. I think it has something to do do with responsive tables. Also I have not edited my bootstrap.
<div class="row">
<div class="col-md-12">
<div class="panel panel-cascade">
<!-- heading-->
<div class="panel-heading text-primary">
<h3 class="panel-title">
Friends List
<span class="pull-right">
<i class="fa fa-chevron-up"></i>
<i class="fa fa-times"></i>
</span>
</h3>
</div>
<!-- body -->
<div class="panel-body">
<table class="table table-condensed table-hover">
<thead>
<tr>
<th class="visible-lg">First Name</th>
<th class="visible-lg">Last Name</th>
<th class="visible-lg">Phone Number</th>
<th class="visible-lg">Carrier</th>
<th class="visible-lg">Send Text</th>
</tr>
</thead>
<tbody>
#foreach (var row in Model)
{
<tr>
<td class="visible-lg">
#row.FirstName
</td>
<td class="visible-lg">
#row.LastName
</td>
<td class="visible-lg">
#row.PhoneNumber###row.Carriers[0].CarrierEmail
</td>
<td class="visible-lg">
#row.Carriers[0].CarrierName
</td>
<td class="visible-lg">
#using (Html.BeginForm("SendEmail", "Admin"))
{
#Html.Hidden("Id", row.Id)
<button type="submit" class="btn btn-success"><i class="fa fa-envelope"></i></button>
}
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
I think it is because of class you are using "visible-lg", wich means visible when large, bootstrap 3 uses 4 different sizes xs, sm, md, lg. take a read at this article http://getbootstrap.com/css/.
I use this classes in my tables and they work perfect.
<table id="proviers-table" class="table table-striped table-bordered">
<thead>
<tr>
<th>Nombre</th>
<th>Teléfono</th>
<th>Correo Electrónico</th>
<th>País</th>
<th>Entidad Federativa</th>
<th>Dirección</th>
<th></th>
</tr>
</thead>
<tr>
<td>coty</td>
<td>1234567890</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<div class="btn-group">
<button class="btn btn-default btn-xs edit-provider" id="1" >
<span class="glyphicon glyphicon-pencil"></span>
</button>
<button class="btn btn-default btn-xs edit-provider" id="1">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
</table>
here is my view:
when small:

Resources