Atomic Design in Odoo with QWeb templates - atomic

Question

I am designing a website in odoo 11.0 and would like to create a file for some elements that will be used in several views, for example, the calendar, I need to create a file that contains all the html elements for the calendar and then in each view in which I need to show the calendar simply imported the file that contains it, that is, apply Atomic Design, but I searched and could not find it.

Answer 1

To create a file for each element that you need to reuse at another time, you have to create a file with the <odoo>, <data> and <template> tags as if it were a common view, then to import it you use <t t-call = "module.template_id"> </ t>, for example, in my case I need to create a calendar with all the html elements and then import it into other views, for that:
I create the calendar.xml file in my_module/views/share folder with the following code:
<?xml version="1.0" encoding="UTF-8"?>
<odoo>
<data>
<template id="calendar">
<!--HTML code-->
</template>
</data>
</odoo>
I import this file into the module __manifest__.py file
to import it in another view use t-call, suppose that my module is called my_module, to import it we write:
<odoo>
<data>
<template id="index_template">
<t t-call="website.layout">
<div id="wrap">
<div class="container">
<!--=============importing calendar============-->
<t t-call="my_module.calendar">
</t>
<!--=============other HTML code============-->
</div>
</div>
</t>
</template>
</data>
</odoo>
In case the view that I am importing shows dynamic data, for example, I need to show a poster like: choose the date for the: 'event_type' where the possible values ​​are: event, party, reservation, etc. and that it will take value at the moment of showing the calendar, in the calendar file we use a variable that will be set from the view that is importing it, the calendar.xml file would look like this:
<?xml version="1.0" encoding="UTF-8"?>
<odoo>
<data>
<template id="calendar">
<h1>Choose the date for the <t t-esc="event_type"/></h1>
<!--HTML code-->
</template>
</data>
</odoo>
In the file that I'm importing the calendar I have to set the value for the variable 'event_type', In this case, will show: 'Choose the date for the party', the file would look like this:
<odoo>
<data>
<template id="index_template">
<t t-call="website.layout">
<div id="wrap">
<div class="container">
<!--=============importing calendar============-->
<t t-call="my_module.calendar">
<t t-set="event_type">party</t>
</t>
<!--=============other HTML code============-->
</div>
</div>
</t>
</template>
</data>
</odoo>
In the same way we can call the nested views, to reuse everything we want, for example, we can create another template that is imported in calendar.xml so that to display the index page, we import calendar and in turn calendar import another template