verdnatura/hedera-web
verdnatura
/
hedera-web
0
1
Fork 2
Code Issues Pull Requests 4 Releases Wiki Activity

Suplantacion de usuarios mejorada, estilo responsive en varios formularios que usaban tablas

This commit is contained in:
Juan Ferrer Toribio 2015-11-30 17:46:24 +01:00
parent 32e2cd9d8d
commit c21a0dae60
16 changed files with 380 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web/forms/admin/users/style.css
View File

@ -1,15 +1,34 @@
.users
{
padding: 1em;
min-width: 35em;
}
.users .box
{
max-width: 50em;
max-width: 30em;
margin: 0 auto;
}
.users tbody tr
.users-box
{
height: 3.4em;
padding: 1em;
border-bottom: 1px solid #DDD;
}
.users-box > button
{
float: right;
}
.users-box > p
{
margin: .2em 0;
}
.users-box > p.important
{
font-size: 1.2em;
}
/* Topbar */
.action-bar .htk-search-entry
{
margin: .8em .6em;
}

77
web/forms/admin/users/ui.xml
View File

@ -1,26 +1,20 @@
<vn>
<vn-group>
<vn-param id="user-name"/>
<vn-hash-param key="user" param="user-name"/>
</vn-group>
<div id="title">
<h1><t>UserManagement</t></h1>
</div>
<div id="actions">
<htk-search-entry
param="user-name"/>
</div>
<div id="form" class="users">
<div class="box">
<table class="form">
<tbody>
<tr>
<td class="label">
<label><t>UserName:</t></label>
</td>
<td>
<htk-entry>
<vn-param id="user-name"/>
</htk-entry>
</td>
</tr>
</tbody>
</table>
<div>
<htk-grid>
<db-model>
<htk-repeater form-id="iter">
<db-model property="model">
<custom>
SELECT u.id, u.name, c.Cliente
FROM account.user u
INNER JOIN vn2008.Clientes c ON u.id = c.Id_Cliente
@ -28,25 +22,38 @@
OR c.Cliente LIKE CONCAT('%', #user, '%')
OR u.id = #user
ORDER BY u.name LIMIT 200
<sql-batch property="batch">
</custom>
<sql-batch property="batch">
<custom>
<item name="user" param="user-name"/>
</sql-batch>
</db-model>
<htk-column-button
column="id"
image="image/supplant.png"
tip="_AccessAsUser"
on-clicked="onChangeUserClick"/>
<htk-column-button
column="id"
image="image/access-log.svg"
tip="_AccessLog"
on-clicked="onAccessLogClick"/>
<htk-column-spin title="_UserNumber" column="id"/>
<htk-column-text title="_UserName" column="name"/>
<htk-column-text title="_Alias" column="Cliente"/>
</htk-grid>
</div>
</custom>
</sql-batch>
</db-model>
<custom>
<div class="users-box">
<htk-button
form="iter"
column="id"
tip="_AccessAsUser"
image="image/gnome.svg"
on-click="onChangeUserClick"/>
<htk-button
form="iter"
column="id"
tip="_AccessLog"
image="image/access-log.svg"
on-click="onAccessLogClick"/>
<p class="important">
<htk-text form="iter" column="Cliente"/>
</p>
<p>
<htk-text form="iter" column="id"/> -
<htk-text form="iter" column="name"/>
</p>
<div class="clear"/>
</div>
</custom>
</htk-repeater>
</div>
</div>
</vn>

17
web/forms/admin/users/users.js
View File

@ -3,15 +3,6 @@ Vn.Users = new Class
({
Extends: Vn.Form
,onChangeUserClick: function (column, value)
{
var batch = new Sql.Batch ();
batch.addValue ('user', value);
var query = 'UPDATE user_session_view SET user_id = #user';
this.conn.execQuery (query, this.userChanged.bind (this), batch);
}
,onAccessLogClick: function (column, value)
{
this.hash.set ({
@ -19,8 +10,14 @@ Vn.Users = new Class
,'user': value
});
}
,onChangeUserClick: function (button, form)
{
this.gui.supplantUser (form.get ('id'),
this.onUserSupplant.bind (this));
}
,userChanged: function ()
,onUserSupplant: function (userName)
{
this.hash.set ({'form': 'ecomerce/orders'});
}

44
web/forms/ecomerce/basket/basket.js
View File

@ -40,55 +40,21 @@ Vn.Basket = new Class
this.hash.set ({'form': 'ecomerce/confirm'});
}
,amountRender: function (renderer, form)
,repeaterFunc: function (res, form)
{
var amount = form.get ('amount');
var grouping = form.get ('grouping');
if (amount && grouping)
renderer.value = amount / grouping;
else
renderer.value = null;
res.$('subtotal').value = this.subtotal (form);
}
,onAmountChange: function (renderer, row, newValue)
,onDeleteClick: function (button, form)
{
var model = this.$('items');
model.set (row, 'amount', newValue * model.get (row, 'grouping'));
}
,featuresRender: function (renderer, form)
{
renderer.value = form.get ('Medida') +' '+ form.get ('Categoria') +' '+ form.get ('Color');
}
,stemsRender: function (renderer, form)
{
renderer.value = Vn.Value.format (form.get ('price'), '%.2d€') +' x '+ form.get ('amount');
if (form.get ('amount') > form.get ('available'))
renderer.td.className = 'available-exceeded';
else
renderer.td.className = '';
}
,subtotalRender: function (renderer, form)
{
renderer.value = this.subtotal (form);
if (confirm (_('ReallyDelete')))
form.deleteRow ();
}
,subtotal: function (form)
{
return form.get ('amount') * form.get ('price');
}
,availableRender: function (renderer, form)
{
if (form.get ('amount') > form.get ('avail'))
renderer.value = 'unavailable';
else
renderer.value = 'invisible';
}
});

32
web/forms/ecomerce/basket/style.css
View File

@ -1,11 +1,10 @@
.basket
{
padding: 1em;
min-width: 25em;
}
.basket .box
{
max-width: 45em;
max-width: 30em;
margin: 0 auto;
}
.basket .form
@ -37,3 +36,32 @@
border-radius: 50%;
}
/* Lines */
.basket-line
{
padding: 1em;
border-bottom: 1px solid #DDD;
}
.basket-line > .delete
{
margin-top: .3em;
margin-right: .5em;
float: left;
}
.basket-line > .photo
{
margin-right: 1em;
float: left;
border-radius: 50%;
}
.basket-line > p
{
margin: .1em 0;
margin-left: 7.5em;
}
.basket-line .subtotal
{
float: right;
}

47
web/forms/ecomerce/basket/ui.xml
View File

@ -22,7 +22,7 @@
<div id="form" class="basket">
<div class="box">
<div>
<htk-grid show-header="false">
<htk-repeater form-id="iter" renderer="repeaterFunc">
<db-model id="items" property="model" updatable="true">
<custom>
SELECT i.id, i.amount, i.price, a.Article, a.Categoria,
@ -32,18 +32,39 @@
LEFT JOIN vn2008.Origen o ON a.id_origen = o.id
</custom>
</db-model>
<htk-column-image
column="Foto"
directory="catalog"
subdir="50x50"
show-full="true"
full-dir="900x900"
class="icon"/>
<htk-column-text title="_Item" column="Article"/>
<htk-column-text renderer="featuresRender"/>
<htk-column-text title="_Amount" column="amount" renderer="stemsRender"/>
<htk-column-spin unit="€" digits="2" renderer="subtotalRender"/>
</htk-grid>
<custom>
<div class="basket-line">
<htk-button
form="iter"
column="ticket_id"
class="delete"
tip="_SeeOrder"
image="image/delete.svg"
on-click="onDeleteClick"/>
<htk-image
form="iter"
column="Foto"
class="photo"
directory="catalog"
subdir="50x50"
show-full="true"
full-dir="900x900"/>
<p class="concept">
<htk-text form="iter" column="Article"/>
<htk-text form="iter" column="Medida"/>
<htk-text form="iter" column="Categoria"/>
</p>
<p class="amount">
<htk-text form="iter" column="amount"/> x
<htk-text form="iter" column="price" format="%.2d€"/>
<span class="subtotal">
<htk-text id="subtotal" format="%.2d€"/>
</span>
</p>
<div class="clear"/>
</div>
</custom>
</htk-repeater>
<div class="form">
<p>
<t>OrderTotal</t>

6
web/forms/ecomerce/orders/orders.js
View File

@ -13,11 +13,11 @@ Vn.Orders = new Class
this.hash.set ({'form': 'ecomerce/basket'});
}
,onShowClick: function (column, ticketId)
,onShowClick: function (button, form)
{
this.hash.set ({
'form': 'ecomerce/ticket',
'ticket': ticketId
'ticket': form.get ('ticket_id')
});
}
@ -25,7 +25,7 @@ Vn.Orders = new Class
,balanceConditionalFunc: function (field, value)
{
if (value > 0)
if (value >= 0)
Vn.Node.removeClass (this.$('balance'), 'negative');
else
Vn.Node.addClass (this.$('balance'), 'negative');

54
web/forms/ecomerce/orders/style.css
View File

@ -4,38 +4,7 @@
}
.orders .box
{
max-width: 45em;
}
.orders .box .header,
.balance-grid > thead > tr
{
background-color: #3F51B6;
}
.orders .htk-grid tbody tr
{
height: 5em;
}
/* Info box */
.orders .info
{
padding: 0.4em;
background-color: #FFC;
border-radius: 0.1em;
}
.orders .info > img
{
vertical-align: middle;
margin: 0.7em;
height: 1.5em;
}
/* Buttons */
.orders td.hide
{
display: none;
max-width: 30em;
}
/* Balance */
@ -77,3 +46,24 @@
margin: auto;
}
/* List */
.order-box
{
padding: 1em;
border-bottom: 1px solid #DDD;
}
.order-box > p
{
margin: .1em 0;
}
.order-box > p.important
{
font-size: 1.2em;
}
.order-box > .show-order
{
margin: 1.6em .5em;
float: right;
}

48
web/forms/ecomerce/orders/ui.xml
View File

@ -45,23 +45,37 @@
</div>
<div id="form" class="orders">
<div class="box confirmed">
<div>
<htk-grid show-header="false">
<db-model property="model" id="tickets">
<custom>
CALL ticket_list ();
</custom>
</db-model>
<htk-column-date column="date" format="%A, %e of %B"/>
<htk-column-text title="_SendMethod" column="type"/>
<htk-column-spin column="total" unit="€" digits="2"/>
<htk-column-button
column="ticket_id"
image="image/show.svg"
tip="_SeeOrder"
on-clicked="onShowClick"/>
</htk-grid>
</div>
<htk-repeater form-id="iter">
<db-model property="model" id="tickets">
<custom>
CALL ticket_list ();
</custom>
</db-model>
<custom>
<div class="order-box">
<htk-button
class="show-order"
form="iter"
column="ticket_id"
tip="_SeeOrder"
image="image/show.svg"
on-click="onShowClick"/>
<p class="important">
<htk-text form="iter" column="date" format="%A, %e of %B"/>
</p>
<p>
<t>Delivery</t> <htk-text form="iter" column="type"/>
</p>
<p>
<htk-text form="iter" column="consignee"/>
</p>
<p>
<htk-text form="iter" column="total" format="%.2d€"/>
</p>
<div class="clear"/>
</div>
</custom>
</htk-repeater>
</div>
</div>
</vn>

11
web/forms/ecomerce/ticket/ui.xml
View File

@ -64,16 +64,7 @@
</p>
</div>
</div>
<!-- <htk-grid>
<htk-column-spin title="_Ref" column="item_id"/>
<htk-column-spin title="_Amount" column="amount"/>
<htk-column-text title="_Item" column="concept"/>
<htk-column-text title="_S1" column="Medida"/>
<htk-column-text title="_Cat" column="Categoria"/>
<htk-column-spin title="_Price" column="price" unit="€" digits="2"/>
<htk-column-spin title="_Subtotal" unit="€" digits="2" renderer="subtotalRenderer"/>
</htk-grid>
--> <htk-repeater form-id="iter" renderer="repeaterFunc">
<htk-repeater form-id="iter" renderer="repeaterFunc">
<db-model property="model" id="movements">
<custom>
SELECT m.item_id, amount, concept, Categoria, Medida, Tallos, Color,

88
web/image/gnome.svg Normal file
View File

@ -0,0 +1,88 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="16"
height="16"
viewBox="0 0 2.55976 4.0244"
id="svg2"
sodipodi:version="0.32"
inkscape:version="0.91 r13725"
sodipodi:docname="gnome.svg"
inkscape:output_extension="org.inkscape.output.svg.inkscape"
sodipodi:modified="true">
<metadata
id="metadata35">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs33" />
<sodipodi:namedview
inkscape:window-height="1016"
inkscape:window-width="1920"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
guidetolerance="10.0"
gridtolerance="10.0"
objecttolerance="10.0"
borderopacity="1.0"
bordercolor="#666666"
pagecolor="#ffffff"
id="base"
inkscape:zoom="51.6875"
inkscape:cx="3.1729141"
inkscape:cy="7.9613059"
inkscape:window-x="1920"
inkscape:window-y="27"
inkscape:current-layer="svg2"
showgrid="false"
inkscape:window-maximized="1" />
<g
id="g4"
transform="matrix(0.02977634,0,0,0.02977634,-0.15250938,0.25152507)"
style="fill:#666666;fill-opacity:1">
<g
id="g6"
style="fill:#666666;fill-opacity:1">
<path
d="M 86.068,0 C 61.466,0 56.851,35.041 70.691,35.041 84.529,35.041 110.671,0 86.068,0 Z"
id="path8"
inkscape:connector-curvature="0"
style="fill:#666666;fill-opacity:1" />
<path
d="M 45.217,30.699 C 52.586,31.149 60.671,2.577 46.821,4.374 32.976,6.171 37.845,30.249 45.217,30.699 Z"
id="path10"
inkscape:connector-curvature="0"
style="fill:#666666;fill-opacity:1" />
<path
d="M 11.445,48.453 C 16.686,46.146 12.12,23.581 3.208,29.735 -5.7,35.89 6.204,50.759 11.445,48.453 Z"
id="path12"
inkscape:connector-curvature="0"
style="fill:#666666;fill-opacity:1" />
<path
d="M 26.212,36.642 C 32.451,35.37 32.793,9.778 21.667,14.369 10.539,18.961 19.978,37.916 26.212,36.642 l 0,0 z"
id="path14"
inkscape:connector-curvature="0"
style="fill:#666666;fill-opacity:1" />
<path
d="m 58.791,93.913 c 1.107,8.454 -6.202,12.629 -13.36,7.179 C 22.644,83.743 83.16,75.088 79.171,51.386 75.86,31.712 15.495,37.769 8.621,68.553 3.968,89.374 27.774,118.26 52.614,118.26 c 12.22,0 26.315,-11.034 28.952,-25.012 C 83.58,82.589 57.867,86.86 58.791,93.913 l 0,0 z"
id="path16"
inkscape:connector-curvature="0"
style="fill:#666666;fill-opacity:1" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

26
web/js/hedera/gui.css
View File

@ -148,21 +148,33 @@
.vn-gui .menu-header
{
height: 5.5em;
background-color: #333;
color: white;
padding: 1em;
}
.vn-gui .logo
{
display: block;
width: 12em;
float: left;
margin: 1em;
margin-bottom: .2em;
margin-bottom: .6em;
}
.vn-gui .welcome
{
float: left;
color: white;
margin: .5em 1em;
display: block;
}
.vn-gui .supplant
{
margin-top: .2em;
display: none;
}
.vn-gui .supplant > span
{
font-size: 1.1em;
}
.vn-gui .supplant > button
{
float: right;
padding: .2em;
}
.vn-gui .background
{

49
web/js/hedera/gui.js
View File

@ -20,7 +20,7 @@ Vn.Gui = new Class
var sql = 'SELECT default_form, image_dir, image_host FROM config;'
+'SELECT production_domain, test_domain FROM config;'
+'SELECT name FROM customer_view;'
+'SELECT name FROM customer_account;'
+'CALL form_list ();';
this.conn.execQuery (sql, this.onMainQueryDone.bind (this));
},
@ -481,6 +481,53 @@ Vn.Gui = new Class
var report = new module.klass (module, this);
report.open (batch);
}
,supplantUser: function (userId, callback)
{
var batch = new Sql.Batch ();
batch.addValue ('user', userId);
var query = 'UPDATE user_session_view SET user_id = #user;'+
'SELECT Cliente FROM vn2008.Clientes WHERE Id_cliente = #user';
this.conn.execQuery (query,
this._onUserSupplant.bind (this, userId, callback), batch);
}
,_onUserSupplant: function (userId, callback, resultSet)
{
this._supplantClear ();
this._supplanted = userId;
resultSet.fetchResult ();
var userName = resultSet.fetchValue ();
Vn.Node.setText (this.$('supplanted'), userName);
Vn.Node.show (this.$('supplant'));
if (callback)
callback ();
}
,_supplantClear: function ()
{
if (this._supplanted)
{
Vn.Node.hide (this.$('supplant'));
this._supplanted = null;
}
}
,onSupplantExitClick: function ()
{
var query = 'UPDATE user_session_view SET user_id = account.user_get_id ()'
this.conn.execQuery (query, this.supplantExit.bind (this));
}
,supplantExit: function ()
{
this._supplantClear ();
this._onFormChange ();
}
,_destroy: function ()
{

10
web/js/hedera/gui.xml
View File

@ -2,10 +2,14 @@
<div id="main" class="vn-gui">
<div id="left-panel" class="left-panel">
<div class="menu-overflow">
<div class="menu-header">
<div class="menu-header" id="menu-header">
<img class="logo" src="image/dark/logo.svg" alt="Verdnatura"/>
<div class="welcome">
<span id="user-name"></span>
<div class="welcome" id="user-name"/>
<div id="supplant" class="supplant">
<span id="supplanted"/>
<button on-click="onSupplantExitClick" title="_Exit">
<img src="image/dark/exit.svg" alt="_Exit"/>
</button>
</div>
</div>
<a id="test-link" class="test-link" href="#"></a>

12
web/js/htk/full-image.js
View File

@ -20,14 +20,12 @@ Htk.FullImage = new Class
var loadingBox = document.createElement ('div');
loadingBox.className = 'htk-full-image-loader';
var loadingImg = document.createElement ('img');
loadingImg.src = 'image/loader-black.gif';
loadingImg.alt = _('Loading');
loadingBox.appendChild (loadingImg);
var spinner = new Htk.Spinner ();
loadingBox.appendChild (spinner.getNode ());
this.div = div;
this.loadingBox = loadingBox;
this.loadingImg = loadingImg;
this.spinner = spinner;
this.parent (props);
}
@ -50,8 +48,6 @@ Htk.FullImage = new Class
}
this.cancelHide ();
this.loadingBox.style.left = this.getLeft (40);
this.loadingBox.style.top = this.getTop (40);
this.closed = false;
this.src = src
@ -64,6 +60,7 @@ Htk.FullImage = new Class
if (!this.img.complete && !this.loading)
{
document.body.appendChild (this.loadingBox);
this.spinner.start ();
this.loading = true;
}
}
@ -165,6 +162,7 @@ Htk.FullImage = new Class
if (this.loading)
{
document.body.removeChild (this.loadingBox);
this.spinner.stop ();
this.loading = false;
}
}

23
web/js/htk/style.css
View File

@ -99,6 +99,7 @@ th.cell-radio
}
td.cell-button
{
max-width: 2em;
text-align: center;
}
td.cell-button > button
@ -266,20 +267,26 @@ td.cell-image img
position: fixed;
background-color: #FFF;
text-align: center;
border: 1px solid #999;
border-radius: 2px;
box-shadow: 0 0 0.4em #666;
}
.htk-full-image,
.htk-full-image > img
{
border-radius: .2em;
}
.htk-full-image-loader
{
z-index: 110;
position: fixed;
top: 50%;
left: 50%;
margin-top: -1.6em;
margin-left: -1.6em;
background-color: #FFF;
border: 1px solid #999;
border-radius: 0.1em;
}
.htk-full-image-loader img
{
padding: 1em;
padding: .7em;
box-shadow: 0 0 0.4em #666;
height: 1.8em;
border-radius: 50%;
}
/* Toast */