Partners UI
This commit is contained in:
Mauricio Baeza
parent
b00afd00f6
commit
65489b5a3a
|
|
@ -3,13 +3,15 @@
|
|||
var controllers = {
|
||||
init: function(){
|
||||
//~ Main
|
||||
$$("menu_user").attachEvent("onMenuItemClick", menu_user_click);
|
||||
$$('menu_user').attachEvent('onMenuItemClick', menu_user_click);
|
||||
//~ Partner
|
||||
$$("cmd_new_partner").attachEvent("onItemClick", cmd_new_partner_click);
|
||||
$$("cmd_edit_partner").attachEvent("onItemClick", cmd_edit_partner_click);
|
||||
$$("cmd_delete_partner").attachEvent("onItemClick", cmd_delete_partner_click);
|
||||
$$("cmd_save_partner").attachEvent("onItemClick", cmd_save_partner_click);
|
||||
$$("cmd_cancel_partner").attachEvent("onItemClick", cmd_cancel_partner_click);
|
||||
$$('cmd_new_partner').attachEvent('onItemClick', cmd_new_partner_click);
|
||||
$$('cmd_new_contact').attachEvent('onItemClick', cmd_new_contact_click);
|
||||
$$('cmd_edit_partner').attachEvent('onItemClick', cmd_edit_partner_click);
|
||||
$$('cmd_delete_partner').attachEvent('onItemClick', cmd_delete_partner_click);
|
||||
$$('cmd_save_partner').attachEvent('onItemClick', cmd_save_partner_click);
|
||||
$$('cmd_cancel_partner').attachEvent('onItemClick', cmd_cancel_partner_click);
|
||||
$$('cmd_cancel_contact').attachEvent('onItemClick', cmd_cancel_contact_click);
|
||||
//~ $$('grid_partners').attachEvent('onItemClick', grid_partners_click);
|
||||
$$('postal_code').attachEvent('onKeyPress', postal_code_key_press);
|
||||
$$('postal_code').attachEvent('onTimedKeyPress', postal_code_key_up);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,16 @@
|
|||
|
||||
|
||||
function cmd_new_partner_click(id, e, node){
|
||||
$$('form_partner').setValues({id:0, country:'México'});
|
||||
$$('grid_partners').clearSelection();
|
||||
$$("multi_partners").setValue("partners_new");
|
||||
$$('form_partner').setValues({
|
||||
id:0, country:'México', opt_person_type: 1, is_active: true})
|
||||
$$('grid_partners').clearSelection()
|
||||
$$('multi_partners').setValue('partners_new')
|
||||
};
|
||||
|
||||
|
||||
function cmd_new_contact_click(id, e, node){
|
||||
$$('grid_contacts').clearSelection()
|
||||
$$('multi_contacts').setValue('contacts_new')
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -71,7 +78,7 @@ function cmd_save_partner_click(id, e, node){
|
|||
var form = this.getFormView();
|
||||
|
||||
if (!form.validate()) {
|
||||
webix.message({ type:'error', text:'Valores inválidos' });
|
||||
webix.message({ type:'error', text:'Valores inválidos'})
|
||||
return
|
||||
}
|
||||
|
||||
|
|
@ -109,10 +116,13 @@ function update_grid_partner(values){
|
|||
|
||||
|
||||
function cmd_cancel_partner_click(id, e, node){
|
||||
|
||||
$$('multi_partners').setValue('partners_home')
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
function cmd_cancel_contact_click(id, e, node){
|
||||
$$('multi_contacts').setValue('contacts_home')
|
||||
}
|
||||
|
||||
|
||||
function postal_code_key_up(){
|
||||
|
|
|
|||
|
|
@ -11,10 +11,14 @@ var toolbar_partners = [
|
|||
|
||||
|
||||
var grid_partners_cols = [
|
||||
{id: 'index', header:'#', adjust:'data', css:'right', footer: {content: 'rowCount'}},
|
||||
{id: 'id', header: 'Clave', adjust:'data', sort: 'int', css: 'right', footer: 'Clientes'},
|
||||
{id: 'rfc', header: ['RFC', {content: 'textFilter'}], adjust:'data', sort: 'string'},
|
||||
{id: 'name', header: ['Razón Social', {content: 'textFilter'}], fillspace:true, sort: 'string'},
|
||||
{id: 'index', header:'#', adjust:'data', css:'right',
|
||||
footer: {content: 'rowCount'}},
|
||||
{id: 'id', header: 'Clave', adjust:'data', sort: 'int', css: 'right',
|
||||
footer: 'Clientes'},
|
||||
{id: 'rfc', header: ['RFC', {content: 'textFilter'}], adjust:'data',
|
||||
sort: 'string'},
|
||||
{id: 'name', header: ['Razón Social', {content: 'textFilter'}],
|
||||
fillspace:true, sort: 'string'},
|
||||
]
|
||||
|
||||
|
||||
|
|
@ -40,31 +44,220 @@ var grid_partners = {
|
|||
}
|
||||
|
||||
|
||||
var controls_fiscales = [
|
||||
{cols:[{view:"text", id: "cia", name: "cia", label: "CIA", width: 300, required: true, invalidMessage: "CIA inválido", attributes: {maxlength: 11}},{}]},
|
||||
{cols:[{view:"text", id: "rfc", name: "rfc", label: "RFC", width: 300, required: true, invalidMessage: "RFC inválido", attributes: {maxlength: 13}},{}]},
|
||||
{view:"text", id: "name", name: "name", label: "Razón Social", required: true, invalidMessage: "La Razón Social es requerida"},
|
||||
{view:"text", id: "street", name: "street", label: "Calle"},
|
||||
{cols:[{view:"text", id: "num_ext", name: "num_ext", width: 300, label: "No Exterior"},{}]},
|
||||
{cols:[{view:"text", id: "num_int", name: "num_int", width: 300, label: "No Interior"},{}]},
|
||||
{cols:[{view:"search", id: "postal_code", name: "postal_code", width: 300, label: "C.P.", attributes: {maxlength: 5}},{}]},
|
||||
{view:"text", id: "colonia", name: "colonia", label: "Colonia"},
|
||||
{view:"text", id: "municipio", name: "municipio", label: "Municipio"},
|
||||
{view:"search", id: "state", name: "state", label: "Estado"},
|
||||
{view:"text", id:"country", name:"country", label: "País", value: "México"},
|
||||
{template:"Contacto", type:"section"},
|
||||
{view:"text", id: "contact", name: "contact", label: "Nombre"},
|
||||
{view:"text", id: "email", name: "email", label: "Correo"},
|
||||
{view:"text", id: "phone", name: "phone", label: "Teléfono"},
|
||||
var persons_type = [
|
||||
{id: 1, value: 'Física'},
|
||||
{id: 2, value: 'Moral'},
|
||||
{id: 3, value: 'Público'},
|
||||
{id: 4, value: 'Extranjero'},
|
||||
]
|
||||
|
||||
|
||||
var controls_fiscales = [
|
||||
{template: 'Tipo de Persona', type: 'section' },
|
||||
{view: 'radio', id: 'opt_person_type', name: 'opt_person_type', label: 'Tipos: ',
|
||||
labelWidth: 150, value: 1, options: persons_type, required: true,
|
||||
invalidMessage: 'El Tipo de Persona es requerido'},
|
||||
{template: 'Dirección Fiscal', type: 'section'},
|
||||
{cols: [{view: 'text', id: 'rfc', name: 'rfc', label: 'RFC: ', width: 300,
|
||||
required: true, invalidMessage: 'RFC inválido', attributes: {maxlength: 13}},{}]},
|
||||
{view: 'text', id: 'name', name: 'name', label: 'Razón Social: ', required: true,
|
||||
invalidMessage: 'La Razón Social es requerida'},
|
||||
{view: 'text', id: 'street', name: 'street', label: 'Calle: '},
|
||||
{cols: [{view: 'text', id: 'num_ext', name: 'num_ext', width: 300,
|
||||
label: 'No Exterior: '},{}]},
|
||||
{cols: [{view: 'text', id: 'num_int', name: 'num_int', width: 300,
|
||||
label: 'No Interior: '},{}]},
|
||||
{cols: [{view: 'search', id: 'postal_code', name: 'postal_code', width: 300,
|
||||
label: 'C.P.: ', attributes: {maxlength: 5}},{}]},
|
||||
{view: 'text', id: 'colonia', name: 'colonia', label: 'Colonia: '},
|
||||
{view: 'text', id: 'municipio', name: 'municipio', label: 'Municipio: '},
|
||||
{view: 'text', id: 'state', name: 'state', label: 'Estado: '},
|
||||
{view: 'text', id: 'country', name: 'country', label: 'País: ',
|
||||
value: 'México', readonly: true},
|
||||
{template: 'Condiciones Comerciales', type: 'section'},
|
||||
{cols: [
|
||||
{view: 'combo', id: 'cbo_method_pay', name: 'cbo_method_pay',
|
||||
label: 'Método de Pago: ', editable: false, required: true},
|
||||
{view: 'text', id: 'account_pay', name: 'account_pay',
|
||||
label: 'Cuenta de Pago: '},
|
||||
]},
|
||||
{cols: [
|
||||
{view: 'combo', id: 'cbo_conditions_pay', name: 'cbo_conditions_pay',
|
||||
label: 'Condiciones de Pago: '},
|
||||
{view: 'counter', label: 'Días de pago', step:5, value: 0, min: 0,
|
||||
max: 365, maxWidth: 250, tooltip: 'Permite calcular las fechas de pago'},
|
||||
{view: 'checkbox', id: 'habiles', name: 'habiles',
|
||||
label: 'Hábiles: ', maxWidth: 200, value: false},
|
||||
]}
|
||||
]
|
||||
|
||||
|
||||
var controls_others = [
|
||||
{view: 'checkbox', id: 'is_active', name: 'is_active', label: 'Activo: ',
|
||||
value: true, bottomLabel: ' Se recomienda solo desactivar y no eliminar'},
|
||||
{view: 'text', id: 'name2', name: 'name2', label: 'Nombre Comercial: '},
|
||||
{view: 'text', id: 'page_web', name: 'page_web', label: 'Página Web: '},
|
||||
{view: 'text', id: 'invoice_email', name: 'invoice_email',
|
||||
label: 'Correos para Facturas: ', tooltip: 'Separados por comas'},
|
||||
{cols: [
|
||||
{view: 'checkbox', id: 'is_client', name: 'is_client',
|
||||
label: 'Es Cliente: ', value: true, width: 180},
|
||||
{view: 'text', id: 'account_client', name: 'account_client',
|
||||
label: 'Cuenta Cliente: ', disabled: true}, {}]
|
||||
},
|
||||
{cols: [
|
||||
{view: 'checkbox', id: 'is_supplier', name: 'is_supplier',
|
||||
label: 'Es Proveedor: ', value: false, width: 180},
|
||||
{view: 'text', id: 'account_supplier', name: 'account_supplier',
|
||||
label: 'Cuenta Proveedor: ', disabled: true}, {}]
|
||||
},
|
||||
{view: 'checkbox', name: 'is_ong', label: 'Es ONG: ', value: false},
|
||||
{view: 'text', name: 'tags', label: 'Etiquetas', tooltip: 'Utiles para filtrados rápidos. Separa por comas.'},
|
||||
{view: 'textarea' , height: 200, name: 'notes', label: 'Notas'},
|
||||
]
|
||||
|
||||
|
||||
|
||||
var toolbar_contacts = [
|
||||
{view: 'button', id: 'cmd_new_contact', label: 'Nuevo', type: 'iconButton',
|
||||
autowidth: true, icon: 'user-plus'},
|
||||
]
|
||||
|
||||
|
||||
var grid_contacts_cols = [
|
||||
{id: 'index', header:'#', adjust:'data', css:'right',
|
||||
footer: {content: 'rowCount'}},
|
||||
{id: 'id', header: '', hidden: true},
|
||||
{id: 'title', header: 'Título', adjust:'data', sort: 'string',
|
||||
footer: 'Contactos'},
|
||||
{id: 'first_name', header: ['Nombre', {content: 'textFilter'}], adjust:'data',
|
||||
sort: 'string'},
|
||||
{id: 'paterno', header: ['Apellido Paterno', {content: 'textFilter'}],
|
||||
fillspace:true, sort: 'string'},
|
||||
{id: 'materno', header: ['Apellido Materno', {content: 'textFilter'}],
|
||||
fillspace:true, sort: 'string'},
|
||||
{id: 'date_born', header: ['Fecha de Nacimiento'],
|
||||
adjust: 'data'},
|
||||
]
|
||||
|
||||
|
||||
var grid_contacts = {
|
||||
view: 'datatable',
|
||||
id: 'grid_contacts',
|
||||
select: 'row',
|
||||
adjust: true,
|
||||
height: 400,
|
||||
footer: true,
|
||||
resizeColumn: true,
|
||||
headermenu: true,
|
||||
columns: grid_contacts_cols,
|
||||
on:{
|
||||
'data->onStoreUpdated':function(){
|
||||
this.data.each(function(obj, i){
|
||||
obj.index = i+1;
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
var grid_email = {
|
||||
view: 'datatable',
|
||||
id: 'grid_email',
|
||||
select: 'row',
|
||||
adjust: true,
|
||||
height: 200,
|
||||
resizeColumn: true,
|
||||
columns: [
|
||||
{id: 'id', header: '', hidden: true},
|
||||
{id: 'type', header: 'Tipo', adjust:'data', sort: 'string'},
|
||||
{id: 'email', header: ['Correo Electrónico'], fillspace:true, sort: 'string'},
|
||||
],
|
||||
}
|
||||
|
||||
|
||||
var grid_phone = {
|
||||
view: 'datatable',
|
||||
id: 'grid_phone',
|
||||
select: 'row',
|
||||
adjust: true,
|
||||
height: 200,
|
||||
resizeColumn: true,
|
||||
columns: [
|
||||
{id: 'id', header: '', hidden: true},
|
||||
{id: 'type', header: 'Tipo', adjust:'data', sort: 'string'},
|
||||
{id: 'phone', header: ['Teléfono'], fillspace:true, sort: 'string'},
|
||||
],
|
||||
}
|
||||
|
||||
|
||||
var controls_contact = [
|
||||
{template: 'Datos Generales', type: 'section' },
|
||||
{cols: [
|
||||
{view: 'combo', id: 'cbo_title_contact', name: 'cbo_title_contact',
|
||||
label: 'Título: ', width: 150},
|
||||
{view: 'text', id: 'name_contact', name: 'name_contact',
|
||||
label: 'Nombre: '},
|
||||
{view: 'text', id: 'paterno_contact', name: 'paterno_contact',
|
||||
label: 'A. Paterno: '},
|
||||
{view: 'text', id: 'materno_contact', name: 'materno_contact',
|
||||
label: 'A. Materno: '},
|
||||
{view: 'datepicker', id: 'date_contact', name: 'date_contact',
|
||||
label: 'Fecha de Nacimiento: ', format: '%d-%M-%Y'},
|
||||
]},
|
||||
{template: 'Correos y Teléfonos', type: 'section' },
|
||||
{cols: [
|
||||
grid_email,
|
||||
{maxWidth: 10},
|
||||
grid_phone,
|
||||
]},
|
||||
{},
|
||||
{ template:"", type: "section" },
|
||||
{ margin: 10, cols: [{},
|
||||
{view: "button", id: "cmd_save_conctact", label: "Guardar Contacto" , type: "form", autowidth: true, align:"center"},
|
||||
{view: "button", id: "cmd_cancel_contact", label: "Regresar" , type: "danger", autowidth: true, align:"center"},
|
||||
{}]
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
|
||||
var form_contact = {
|
||||
type: 'space',
|
||||
cols: [{
|
||||
view: 'form',
|
||||
id: 'form_contact',
|
||||
complexData: true,
|
||||
elements: controls_contact,
|
||||
elementsConfig: {
|
||||
labelPosition: 'top',
|
||||
},
|
||||
autoheight: true,
|
||||
}]
|
||||
}
|
||||
|
||||
|
||||
var multi_contacts = {
|
||||
id: 'multi_contacts',
|
||||
animate: true,
|
||||
cells:[
|
||||
{id: 'contacts_home', rows:[
|
||||
{view: 'toolbar', elements: toolbar_contacts},
|
||||
grid_contacts,
|
||||
]},
|
||||
{id: 'contacts_new', rows:[form_contact, {}]}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
var controls_partner = [
|
||||
{
|
||||
view: "tabview",
|
||||
tabbar: {options: ["Datos Fiscales"]}, animate: true,
|
||||
view: 'tabview',
|
||||
tabbar: {options: ['Datos Fiscales', 'Otros Datos', 'Contactos']}, animate: true,
|
||||
cells: [
|
||||
{id: "Datos Fiscales", rows: controls_fiscales},
|
||||
{id: 'Datos Fiscales', rows: controls_fiscales},
|
||||
{id: 'Otros Datos', rows: controls_others},
|
||||
{id: 'Contactos', rows: [multi_contacts]},
|
||||
]
|
||||
},
|
||||
{rows: [
|
||||
|
|
@ -79,21 +272,19 @@ var controls_partner = [
|
|||
|
||||
|
||||
var form_partner = {
|
||||
type: "space",
|
||||
type: 'space',
|
||||
cols: [{
|
||||
view: "form",
|
||||
id: "form_partner",
|
||||
//~ width: 600,
|
||||
view: 'form',
|
||||
id: 'form_partner',
|
||||
complexData: true,
|
||||
elements: controls_partner,
|
||||
elementsConfig: {
|
||||
labelWidth: 130,
|
||||
labelAlign: "right"
|
||||
labelWidth: 150,
|
||||
labelAlign: 'right'
|
||||
},
|
||||
autoheight: true,
|
||||
rules: {
|
||||
cia: function(value){ return value.trim() != ""; },
|
||||
name: function(value){ return value.trim() != ""; },
|
||||
name: function(value){ return value.trim() != '';},
|
||||
rfc: validate_rfc,
|
||||
}
|
||||
}]
|
||||
|
|
@ -101,24 +292,25 @@ var form_partner = {
|
|||
|
||||
|
||||
var multi_partners = {
|
||||
id: "multi_partners",
|
||||
id: 'multi_partners',
|
||||
animate: true,
|
||||
cells:[
|
||||
{id: "partners_home", rows:[
|
||||
{view:"toolbar", elements: toolbar_partners},
|
||||
{id: 'partners_home', rows:[
|
||||
{view: 'toolbar', elements: toolbar_partners},
|
||||
grid_partners,
|
||||
]},
|
||||
{id: "partners_new", rows:[form_partner, {}]}
|
||||
{id: 'partners_new', rows:[form_partner, {}]}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
var title_partners = 'Administración de Clientes y Proveedores'
|
||||
var app_partners = {
|
||||
id: "app_partners",
|
||||
id: 'app_partners',
|
||||
rows:[
|
||||
{view: "template", id: "th_partner", type: "header", template:"Administración de Clientes" },
|
||||
{view: 'template', id: 'th_partner', type: 'header', template: title_partners},
|
||||
multi_partners
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<link rel="stylesheet" href="/static/css/air.css" type="text/css">
|
||||
<link rel="stylesheet" href="/static/css/app.css" type="text/css">
|
||||
<script src="/static/js/webix_debug.js" type="text/javascript" ></script>
|
||||
<script src="/static/js/es.js" type="text/javascript" ></script>
|
||||
<script src="/static/js/es-MX.js" type="text/javascript" ></script>
|
||||
|
||||
<%block name="media"/>
|
||||
|
||||
|
|
@ -18,6 +18,7 @@
|
|||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
webix.debug = true;
|
||||
webix.i18n.setLocale("es-MX");
|
||||
</script>
|
||||
|
||||
<%block name="content"/>
|
||||
|
|
|
|||
|
|
@ -25,11 +25,11 @@
|
|||
|
||||
webix.ready(function(){
|
||||
webix.CustomScroll.init()
|
||||
webix.ui(ui_main);
|
||||
controllers.init();
|
||||
var user = document.getElementById("username").value;
|
||||
$$('menu_user').getMenu(0).updateItem(0, {value:user});
|
||||
});
|
||||
webix.ui(ui_main)
|
||||
controllers.init()
|
||||
var user = document.getElementById("username").value
|
||||
$$('menu_user').getMenu(0).updateItem(0, {value:user})
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue