[IMP] base_import: ControlPanelMixin and new design compatibility
- Use the ControlPanelMixin in the Import view; - Adapt the stylesheet to fit with both community and enterprise editions; - Convert the css into less, use mixins and variables defined in web; - Return the reload() deferred in the on_reverse_breadcrumb callback so that the previous action waits to be properly reloaded before being shown.
This commit is contained in:
Aaron Bohy
-193
@@ -1,193 +0,0 @@
|
||||
.oe_import {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.oe_import > p {
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
margin-top: 13px; /* Customize space according bootstrap3 */
|
||||
text-align: justify
|
||||
}
|
||||
|
||||
.oe_import h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 1.5em; /* Customize according bootstrap3 */
|
||||
}
|
||||
|
||||
.oe_padding {
|
||||
padding: 13px;
|
||||
}
|
||||
/* ----------- IMPORT BOX ----------- */
|
||||
|
||||
.oe_import .oe_import_box{
|
||||
margin: 16px;
|
||||
padding: 16px;
|
||||
background: #F0EEEE;
|
||||
border-radius: 3px;
|
||||
border: solid 1px #dddddd;
|
||||
width: 600px;
|
||||
}
|
||||
/* Customize according bootstrap3 */
|
||||
.oe_import .oe_import_box label{
|
||||
font-weight: normal;
|
||||
}
|
||||
.oe_import .oe_import_box .oe_import_file {
|
||||
display: inline-block;
|
||||
}
|
||||
/* End of Customize */
|
||||
.oe_import .oe_import_toggle{
|
||||
margin-top: 8px;
|
||||
}
|
||||
.oe_import .oe_import_options{
|
||||
margin-top: 8px;
|
||||
}
|
||||
.oe_import .oe_import_options input{
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.oe_import a.oe_import_toggle {
|
||||
display: block;
|
||||
}
|
||||
.oe_import a.oe_import_toggle:before {
|
||||
content: '+'
|
||||
}
|
||||
|
||||
.oe_import .oe_import_options p {
|
||||
margin: 0 0 -7px 0; /* Customize margin-bottom of <p> according bootstrap3 */
|
||||
padding: 0;
|
||||
}
|
||||
.oe_import .oe_import_options label {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height:32px;
|
||||
line-height:32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* ----------- INITIAL SETUP ------------ */
|
||||
|
||||
.openerp .oe_list_buttons.oe_editing .o_list_button_import {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.oe_import dd,
|
||||
.oe_import .oe_import_toggled,
|
||||
.oe_import .oe_import_grid,
|
||||
.oe_import .oe_import_error_report,
|
||||
.oe_import .oe_import_with_file,
|
||||
.oe_import .oe_import_noheaders,
|
||||
.oe_import .oe_import_report_more {
|
||||
display: none;
|
||||
}
|
||||
/* Customize dd and label according bootstrap3 */
|
||||
.oe_import dd {
|
||||
-webkit-margin-start: 40px;
|
||||
}
|
||||
.oe_import .oe_import_with_file label {
|
||||
font-weight: normal;
|
||||
}
|
||||
/* End of customize */
|
||||
|
||||
.oe_import.oe_import_preview .oe_import_grid {
|
||||
display: table;
|
||||
}
|
||||
.oe_import.oe_import_error .oe_import_error_report,
|
||||
.oe_import.oe_import_with_file .oe_import_with_file,
|
||||
.oe_import.oe_import_noheaders .oe_import_noheaders,
|
||||
.oe_import .oe_import_report_showmore .oe_import_report_more {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.oe_import .oe_import_noheaders {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
|
||||
.oe_import_selector ul,
|
||||
.oe_import_selector li {
|
||||
margin: 0; padding: 0;
|
||||
}
|
||||
|
||||
/* ------------- ERRORS AND WARNINGS REPORT ------------ */
|
||||
|
||||
.oe_import .oe_import_error_report ul{
|
||||
padding-left: 16px;
|
||||
}
|
||||
.oe_import .oe_import_report {
|
||||
margin-right: 16px;
|
||||
padding: 4px;
|
||||
list-style: none;
|
||||
border-bottom: solid 1px rgba(0,0,0,0.05);
|
||||
}
|
||||
.oe_import .oe_import_report:first-child{
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
.oe_import .oe_import_report:last-child{
|
||||
border-bottom-left-radius:3px;
|
||||
border-bottom-right-radius:3px;
|
||||
border-bottom: none;
|
||||
}
|
||||
.oe_import .oe_import_report_error {
|
||||
background-color: #FFD9DB;
|
||||
color: #AF5F5E;
|
||||
}
|
||||
.oe_import .oe_import_report_error:last-of-type{
|
||||
border-bottom:none;
|
||||
}
|
||||
.oe_import .oe_import_report_warning {
|
||||
background-color: #FEFFD9;
|
||||
color: #918743;
|
||||
}
|
||||
.oe_import .oe_import_report_warning:last-of-type{
|
||||
border-bottom:none;
|
||||
}
|
||||
.oe_import .oe_import_report_info {
|
||||
background-color: #d3ffd3;
|
||||
}
|
||||
.oe_import .oe_import_report_info:last-of-type{
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
/* ------------- THE CSV TABLE ------------ */
|
||||
|
||||
.oe_import .oe_import_grid{
|
||||
margin: 16px;
|
||||
border-radius:3px;
|
||||
border: solid 1px #909090;
|
||||
}
|
||||
.oe_import .oe_import_grid tr{
|
||||
height:16px;
|
||||
}
|
||||
.oe_import .oe_import_grid tr.oe_import_grid-header:first-child{
|
||||
height: 24px;
|
||||
background: #909090;
|
||||
color: white;
|
||||
}
|
||||
.oe_import .oe_import_grid tr:nth-child(odd){
|
||||
background: rgba(0,0,0,0.05);
|
||||
}
|
||||
.oe_import .oe_import_grid td{
|
||||
padding: 2px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
.oe_import .oe_import_grid tr.oe_import_grid-header td:not(:last-child){
|
||||
border-right: 1px solid #707070;
|
||||
}
|
||||
.oe_import .oe_import_grid td:not(:last-child){
|
||||
border-right: 1px solid #D0D0D0;
|
||||
}
|
||||
|
||||
.oe_import .oe_import_error_report > p {
|
||||
background: #efc9cb;
|
||||
}
|
||||
|
||||
/* Field dropdown */
|
||||
.oe_import_selector {
|
||||
font-size: 10px;
|
||||
/* copied from base.sass:~148 */
|
||||
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
odoo.define('base_import.import', function (require) {
|
||||
"use strict";
|
||||
|
||||
var ControlPanelMixin = require('web.ControlPanelMixin');
|
||||
var core = require('web.core');
|
||||
var ListView = require('web.ListView');
|
||||
var Model = require('web.DataModel');
|
||||
@@ -74,7 +75,7 @@ ListView.include({
|
||||
}
|
||||
}, {
|
||||
on_reverse_breadcrumb: function () {
|
||||
self.reload();
|
||||
return self.reload();
|
||||
},
|
||||
});
|
||||
return false;
|
||||
@@ -84,7 +85,7 @@ ListView.include({
|
||||
}
|
||||
});
|
||||
|
||||
var DataImport = Widget.extend({
|
||||
var DataImport = Widget.extend(ControlPanelMixin, {
|
||||
template: 'ImportView',
|
||||
opts: [
|
||||
{name: 'encoding', label: _lt("Encoding:"), value: 'utf-8'},
|
||||
@@ -133,22 +134,17 @@ var DataImport = Widget.extend({
|
||||
}
|
||||
}));
|
||||
},
|
||||
// buttons
|
||||
'click .oe_import_validate': 'validate',
|
||||
'click .oe_import_import': 'import',
|
||||
'click .oe_import_cancel': function (e) {
|
||||
e.preventDefault();
|
||||
this.exit();
|
||||
}
|
||||
},
|
||||
init: function (parent, action) {
|
||||
this._super.apply(this, arguments);
|
||||
this.action_manager = parent;
|
||||
this.res_model = action.params.model;
|
||||
this.parent_context = action.params.context || {};
|
||||
// import object id
|
||||
this.id = null;
|
||||
this.Import = new Model('base_import.import');
|
||||
this.session = session;
|
||||
action.display_name = _t('Import a CSV File'); // Displayed in the breadcrumbs
|
||||
},
|
||||
start: function () {
|
||||
var self = this;
|
||||
@@ -162,9 +158,26 @@ var DataImport = Widget.extend({
|
||||
}]).done(function (id) {
|
||||
self.id = id;
|
||||
self.$('input[name=import_id]').val(id);
|
||||
|
||||
self.render_buttons();
|
||||
var status = {
|
||||
breadcrumbs: self.action_manager.get_breadcrumbs(),
|
||||
cp_content: {$buttons: self.$buttons},
|
||||
};
|
||||
self.update_control_panel(status);
|
||||
})
|
||||
);
|
||||
},
|
||||
render_buttons: function() {
|
||||
var self = this;
|
||||
this.$buttons = $(QWeb.render("ImportView.buttons", this));
|
||||
this.$buttons.filter('.o_import_validate').on('click', this.validate.bind(this));
|
||||
this.$buttons.filter('.o_import_import').on('click', this.import.bind(this));
|
||||
this.$buttons.filter('.o_import_cancel').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
self.exit();
|
||||
});
|
||||
},
|
||||
setup_encoding_picker: function () {
|
||||
this.$('input.oe_import_encoding').select2({
|
||||
width: '160px',
|
||||
@@ -219,7 +232,7 @@ var DataImport = Widget.extend({
|
||||
|
||||
//- File & settings change section
|
||||
onfile_loaded: function () {
|
||||
this.$('.oe_import_button, .oe_import_file_reload')
|
||||
this.$buttons.filter('.o_import_button').add(this.$('.oe_import_file_reload'))
|
||||
.prop('disabled', true);
|
||||
if (!this.$('input.oe_import_file').val()) { return; }
|
||||
|
||||
@@ -230,7 +243,7 @@ var DataImport = Widget.extend({
|
||||
},
|
||||
onpreviewing: function () {
|
||||
var self = this;
|
||||
this.$('.oe_import_button, .oe_import_file_reload')
|
||||
this.$buttons.filter('.o_import_button').add(this.$('.oe_import_file_reload'))
|
||||
.prop('disabled', true);
|
||||
this.$el.addClass('oe_import_with_file');
|
||||
// TODO: test that write // succeeded?
|
||||
@@ -253,12 +266,12 @@ var DataImport = Widget.extend({
|
||||
QWeb.render('ImportView.preview.error', result));
|
||||
},
|
||||
onpreview_success: function (event, from, to, result) {
|
||||
this.$('.oe_import_import').removeClass('oe_highlight');
|
||||
this.$('.oe_import_validate').addClass('oe_highlight');
|
||||
this.$('.oe_import_button, .oe_import_file_reload')
|
||||
this.$buttons.filter('.o_import_import').removeClass('btn-primary');
|
||||
this.$buttons.filter('.o_import_validate').addClass('btn-primary');
|
||||
this.$buttons.filter('.o_import_button').add(this.$('.oe_import_file_reload'))
|
||||
.prop('disabled', false);
|
||||
this.$el.addClass('oe_import_preview');
|
||||
this.$('table').html(QWeb.render('ImportView.preview', result));
|
||||
this.$('.oe_import_grid').html(QWeb.render('ImportView.preview', result));
|
||||
|
||||
if (result.headers.length === 1) {
|
||||
this.$('.oe_import_options').show();
|
||||
@@ -419,8 +432,10 @@ var DataImport = Widget.extend({
|
||||
},
|
||||
onresults: function (event, from, to, message) {
|
||||
var no_messages = _.isEmpty(message);
|
||||
this.$('.oe_import_import').toggleClass('oe_highlight', no_messages);
|
||||
this.$('.oe_import_validate').toggleClass('oe_highlight', !no_messages);
|
||||
this.$buttons.filter('.o_import_import').toggleClass('btn-primary', no_messages);
|
||||
this.$buttons.filter('.o_import_import').toggleClass('btn-default', !no_messages);
|
||||
this.$buttons.filter('.o_import_validate').toggleClass('btn-primary', !no_messages);
|
||||
this.$buttons.filter('.o_import_validate').toggleClass('btn-default', no_messages);
|
||||
if (no_messages) {
|
||||
message.push({
|
||||
type: 'info',
|
||||
|
||||
+137
@@ -0,0 +1,137 @@
|
||||
.oe_import {
|
||||
.o-webclient-padding(@top: 8px);
|
||||
background-color: white;
|
||||
overflow: auto;
|
||||
position: absolute; // Needed for chrome
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@media (max-width: @screen-xs-max) {
|
||||
position: static;
|
||||
}
|
||||
|
||||
> p {
|
||||
text-align: justify
|
||||
}
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
font-size: large; // override h2 font-size which is too large
|
||||
}
|
||||
.oe_padding {
|
||||
padding: 13px 0;
|
||||
}
|
||||
|
||||
.oe_import_box {
|
||||
padding: 16px;
|
||||
background: #F0EEEE;
|
||||
border-radius: @border-radius-base;
|
||||
border: solid 1px #dddddd;
|
||||
label {
|
||||
font-weight: normal;
|
||||
}
|
||||
.oe_import_file {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.oe_import_toggle {
|
||||
margin-top: 8px;
|
||||
}
|
||||
a.oe_import_toggle {
|
||||
display: block;
|
||||
&:before {
|
||||
content: '+'
|
||||
}
|
||||
}
|
||||
.oe_import_options {
|
||||
margin-top: 8px;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
label {
|
||||
width: 100px;
|
||||
line-height: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
/* ----------- INITIAL SETUP ------------ */
|
||||
dd,
|
||||
.oe_import_toggled,
|
||||
.oe_import_grid,
|
||||
.oe_import_error_report,
|
||||
.oe_import_with_file,
|
||||
.oe_import_noheaders,
|
||||
.oe_import_report_more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.oe_import_with_file label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&.oe_import_preview .oe_import_grid {
|
||||
display: table;
|
||||
}
|
||||
&.oe_import_error .oe_import_error_report,
|
||||
&.oe_import_with_file .oe_import_with_file,
|
||||
&.oe_import_noheaders .oe_import_noheaders,
|
||||
.oe_import_report_showmore .oe_import_report_more {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.oe_import_noheaders {
|
||||
.text-muted();
|
||||
}
|
||||
|
||||
/* ------------- ERRORS AND WARNINGS REPORT ------------ */
|
||||
.oe_import_error_report {
|
||||
> ul {
|
||||
padding: 0;
|
||||
}
|
||||
.oe_import_report {
|
||||
padding: 4px;
|
||||
margin: 2px 0;
|
||||
list-style: none;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.oe_import_report_error {
|
||||
.bg-danger();
|
||||
.text-danger();
|
||||
}
|
||||
.oe_import_report_warning {
|
||||
.bg-warning();
|
||||
.text-warning();
|
||||
}
|
||||
.oe_import_report_info {
|
||||
.bg-info();
|
||||
.text-info();
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------- THE CSV TABLE ------------ */
|
||||
.oe_import_grid {
|
||||
tr {
|
||||
&.oe_import_grid-header:first-child {
|
||||
line-height: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
td {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Field dropdown */
|
||||
.oe_import_selector {
|
||||
font-size: @font-size-small;
|
||||
ul, li {
|
||||
margin: 0; padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.o-list-buttons.o-editing .o_list_button_import {
|
||||
display: none; // hidden for list view editable
|
||||
}
|
||||
@@ -2,28 +2,12 @@
|
||||
<t t-name="ImportView">
|
||||
<t t-set="_id" t-value="_.uniqueId('export')"/>
|
||||
<form action="" method="post" enctype="multipart/form-data" class="oe_import">
|
||||
<div class="oe_view_manager oe_view_manager_current">
|
||||
<div class="oe-control-panel oe_padding">
|
||||
<h2>
|
||||
Import a CSV File
|
||||
</h2>
|
||||
<input type="hidden" name="session_id"
|
||||
t-att-value="widget.session.session_id"/>
|
||||
<input type="hidden" name="import_id"/>
|
||||
<button type="button" disabled="disabled"
|
||||
class="oe_button oe_import_button oe_import_validate oe_highlight"
|
||||
>Validate</button>
|
||||
<button type="button" disabled="disabled"
|
||||
class="oe_button oe_import_button oe_import_import"
|
||||
>Import</button>
|
||||
<span class="oe_fade">or</span>
|
||||
<a class="oe_import_cancel" href="#">Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="session_id"
|
||||
t-att-value="widget.session.session_id"/>
|
||||
<input type="hidden" name="import_id"/>
|
||||
<p>Select the <a
|
||||
href="http://en.wikipedia.org/wiki/Comma-separated_values"
|
||||
class="oe_import_csv" target="_blank">.CSV</a>
|
||||
target="_blank">.CSV</a>
|
||||
file to import. If you need a sample importable file, you
|
||||
can use the export tool to generate one.</p>
|
||||
<div class="oe_import_box">
|
||||
@@ -72,7 +56,7 @@
|
||||
simpler especially when the file has many columns.</p>
|
||||
|
||||
<div class="oe_import_error_report"></div>
|
||||
<table class="oe_import_grid" />
|
||||
<table class="table-striped table-bordered oe_import_grid" />
|
||||
</div>
|
||||
<div class="oe_padding">
|
||||
<h2>Frequently Asked Questions</h2>
|
||||
@@ -349,26 +333,40 @@
|
||||
</form>
|
||||
</t>
|
||||
|
||||
<t t-name="ImportView.buttons">
|
||||
<button type="button" class="btn btn-sm btn-primary o_import_button o_import_validate"
|
||||
disabled="disabled">Validate</button>
|
||||
<button type="button" class="btn btn-sm btn-default o_import_button o_import_import"
|
||||
disabled="disabled">Import</button>
|
||||
<button type="button" class="btn btn-sm btn-default o_import_cancel">Cancel</button>
|
||||
</t>
|
||||
|
||||
<t t-name="ImportView.preview">
|
||||
<tr t-if="headers" class="oe_import_grid-header">
|
||||
<td t-foreach="headers" t-as="header" class="oe_import_grid-cell"
|
||||
><t t-esc="header"/></td>
|
||||
</tr>
|
||||
<tr class="oe_import_fields">
|
||||
<!-- Iterate on first row to ensure we have all columns -->
|
||||
<td t-foreach="preview[0]" t-as="column">
|
||||
<input class="oe_import_match_field"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr t-foreach="preview" t-as="row" class="oe_import_grid-row">
|
||||
<td t-foreach="row" t-as="cell" class="oe_import_grid-cell"
|
||||
><t t-esc="cell"/></td>
|
||||
</tr>
|
||||
<thead>
|
||||
<tr t-if="headers" class="oe_import_grid-header">
|
||||
<td t-foreach="headers" t-as="header" class="oe_import_grid-cell"
|
||||
><t t-esc="header"/></td>
|
||||
</tr>
|
||||
<tr class="oe_import_fields">
|
||||
<!-- Iterate on first row to ensure we have all columns -->
|
||||
<td t-foreach="preview[0]" t-as="column">
|
||||
<input class="oe_import_match_field"/>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr t-foreach="preview" t-as="row" class="oe_import_grid-row">
|
||||
<td t-foreach="row" t-as="cell" class="oe_import_grid-cell"
|
||||
><t t-esc="cell"/></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</t>
|
||||
<t t-name="ImportView.preview.error">
|
||||
<p>Import preview failed due to: <t t-esc="error"/>. The issue is
|
||||
usually an incorrect file encoding.</p>
|
||||
<p>Here is the start of the file we could not import:</p>
|
||||
<div class="oe_import_report oe_import_report_error">
|
||||
<p>Import preview failed due to: <t t-esc="error"/>. The issue is
|
||||
usually an incorrect file encoding.</p>
|
||||
<p>Here is the start of the file we could not import:</p>
|
||||
</div>
|
||||
<pre><t t-esc="preview"/></pre>
|
||||
</t>
|
||||
<ul t-name="ImportView.error">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<data>
|
||||
<template id="assets_backend" name="base_import assets" inherit_id="web.assets_backend">
|
||||
<xpath expr="." position="inside">
|
||||
<link rel="stylesheet" href="/base_import/static/src/css/import.css"/>
|
||||
<link rel="stylesheet" href="/base_import/static/src/less/import.less"/>
|
||||
<script type="text/javascript" src="/base_import/static/lib/javascript-state-machine/state-machine.js"></script>
|
||||
<script type="text/javascript" src="/base_import/static/src/js/import.js"></script>
|
||||
</xpath>
|
||||
|
||||
Reference in New Issue
Block a user