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 .users
{ {
padding: 1em; padding: 1em;
min-width: 35em;
} }
.users .box .users .box
{ {
max-width: 50em; max-width: 30em;
margin: 0 auto; 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>
<vn-group>
<vn-param id="user-name"/>
<vn-hash-param key="user" param="user-name"/>
</vn-group>
<div id="title"> <div id="title">
<h1><t>UserManagement</t></h1> <h1><t>UserManagement</t></h1>
</div> </div>
<div id="actions">
<htk-search-entry
param="user-name"/>
</div>
<div id="form" class="users"> <div id="form" class="users">
<div class="box"> <div class="box">
<table class="form"> <htk-repeater form-id="iter">
<tbody> <db-model property="model">
<tr> <custom>
<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>
SELECT u.id, u.name, c.Cliente SELECT u.id, u.name, c.Cliente
FROM account.user u FROM account.user u
INNER JOIN vn2008.Clientes c ON u.id = c.Id_Cliente INNER JOIN vn2008.Clientes c ON u.id = c.Id_Cliente
@ -28,25 +22,38 @@
OR c.Cliente LIKE CONCAT('%', #user, '%') OR c.Cliente LIKE CONCAT('%', #user, '%')
OR u.id = #user OR u.id = #user
ORDER BY u.name LIMIT 200 ORDER BY u.name LIMIT 200
<sql-batch property="batch"> </custom>
<sql-batch property="batch">
<custom>
<item name="user" param="user-name"/> <item name="user" param="user-name"/>
</sql-batch> </custom>
</db-model> </sql-batch>
<htk-column-button </db-model>
column="id" <custom>
image="image/supplant.png" <div class="users-box">
tip="_AccessAsUser" <htk-button
on-clicked="onChangeUserClick"/> form="iter"
<htk-column-button column="id"
column="id" tip="_AccessAsUser"
image="image/access-log.svg" image="image/gnome.svg"
tip="_AccessLog" on-click="onChangeUserClick"/>
on-clicked="onAccessLogClick"/> <htk-button
<htk-column-spin title="_UserNumber" column="id"/> form="iter"
<htk-column-text title="_UserName" column="name"/> column="id"
<htk-column-text title="_Alias" column="Cliente"/> tip="_AccessLog"
</htk-grid> image="image/access-log.svg"
</div> 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>
</div> </div>
</vn> </vn>

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

@ -3,15 +3,6 @@ Vn.Users = new Class
({ ({
Extends: Vn.Form 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) ,onAccessLogClick: function (column, value)
{ {
this.hash.set ({ this.hash.set ({
@ -20,7 +11,13 @@ Vn.Users = new Class
}); });
} }
,userChanged: function () ,onChangeUserClick: function (button, form)
{
this.gui.supplantUser (form.get ('id'),
this.onUserSupplant.bind (this));
}
,onUserSupplant: function (userName)
{ {
this.hash.set ({'form': 'ecomerce/orders'}); 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'}); this.hash.set ({'form': 'ecomerce/confirm'});
} }
,amountRender: function (renderer, form) ,repeaterFunc: function (res, form)
{ {
var amount = form.get ('amount'); res.$('subtotal').value = this.subtotal (form);
var grouping = form.get ('grouping');
if (amount && grouping)
renderer.value = amount / grouping;
else
renderer.value = null;
} }
,onAmountChange: function (renderer, row, newValue) ,onDeleteClick: function (button, form)
{ {
var model = this.$('items'); if (confirm (_('ReallyDelete')))
model.set (row, 'amount', newValue * model.get (row, 'grouping')); form.deleteRow ();
}
,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);
} }
,subtotal: function (form) ,subtotal: function (form)
{ {
return form.get ('amount') * form.get ('price'); 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 .basket
{ {
padding: 1em; padding: 1em;
min-width: 25em;
} }
.basket .box .basket .box
{ {
max-width: 45em; max-width: 30em;
margin: 0 auto; margin: 0 auto;
} }
.basket .form .basket .form
@ -37,3 +36,32 @@
border-radius: 50%; 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 id="form" class="basket">
<div class="box"> <div class="box">
<div> <div>
<htk-grid show-header="false"> <htk-repeater form-id="iter" renderer="repeaterFunc">
<db-model id="items" property="model" updatable="true"> <db-model id="items" property="model" updatable="true">
<custom> <custom>
SELECT i.id, i.amount, i.price, a.Article, a.Categoria, 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 LEFT JOIN vn2008.Origen o ON a.id_origen = o.id
</custom> </custom>
</db-model> </db-model>
<htk-column-image <custom>
column="Foto" <div class="basket-line">
directory="catalog" <htk-button
subdir="50x50" form="iter"
show-full="true" column="ticket_id"
full-dir="900x900" class="delete"
class="icon"/> tip="_SeeOrder"
<htk-column-text title="_Item" column="Article"/> image="image/delete.svg"
<htk-column-text renderer="featuresRender"/> on-click="onDeleteClick"/>
<htk-column-text title="_Amount" column="amount" renderer="stemsRender"/> <htk-image
<htk-column-spin unit="€" digits="2" renderer="subtotalRender"/> form="iter"
</htk-grid> 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"> <div class="form">
<p> <p>
<t>OrderTotal</t> <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'}); this.hash.set ({'form': 'ecomerce/basket'});
} }
,onShowClick: function (column, ticketId) ,onShowClick: function (button, form)
{ {
this.hash.set ({ this.hash.set ({
'form': 'ecomerce/ticket', 'form': 'ecomerce/ticket',
'ticket': ticketId 'ticket': form.get ('ticket_id')
}); });
} }
@ -25,7 +25,7 @@ Vn.Orders = new Class
,balanceConditionalFunc: function (field, value) ,balanceConditionalFunc: function (field, value)
{ {
if (value > 0) if (value >= 0)
Vn.Node.removeClass (this.$('balance'), 'negative'); Vn.Node.removeClass (this.$('balance'), 'negative');
else else
Vn.Node.addClass (this.$('balance'), 'negative'); Vn.Node.addClass (this.$('balance'), 'negative');

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

@ -4,38 +4,7 @@
} }
.orders .box .orders .box
{ {
max-width: 45em; max-width: 30em;
}
.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;
} }
/* Balance */ /* Balance */
@ -77,3 +46,24 @@
margin: auto; 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>
<div id="form" class="orders"> <div id="form" class="orders">
<div class="box confirmed"> <div class="box confirmed">
<div> <htk-repeater form-id="iter">
<htk-grid show-header="false"> <db-model property="model" id="tickets">
<db-model property="model" id="tickets"> <custom>
<custom> CALL ticket_list ();
CALL ticket_list (); </custom>
</custom> </db-model>
</db-model> <custom>
<htk-column-date column="date" format="%A, %e of %B"/> <div class="order-box">
<htk-column-text title="_SendMethod" column="type"/> <htk-button
<htk-column-spin column="total" unit="€" digits="2"/> class="show-order"
<htk-column-button form="iter"
column="ticket_id" column="ticket_id"
image="image/show.svg" tip="_SeeOrder"
tip="_SeeOrder" image="image/show.svg"
on-clicked="onShowClick"/> on-click="onShowClick"/>
</htk-grid> <p class="important">
</div> <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>
</div> </div>
</vn> </vn>

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

@ -64,16 +64,7 @@
</p> </p>
</div> </div>
</div> </div>
<!-- <htk-grid> <htk-repeater form-id="iter" renderer="repeaterFunc">
<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">
<db-model property="model" id="movements"> <db-model property="model" id="movements">
<custom> <custom>
SELECT m.item_id, amount, concept, Categoria, Medida, Tallos, Color, 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 .vn-gui .menu-header
{ {
height: 5.5em;
background-color: #333; background-color: #333;
color: white;
padding: 1em;
} }
.vn-gui .logo .vn-gui .logo
{ {
display: block;
width: 12em; width: 12em;
float: left; margin-bottom: .6em;
margin: 1em;
margin-bottom: .2em;
} }
.vn-gui .welcome .vn-gui .welcome
{ {
float: left; display: block;
color: white; }
margin: .5em 1em; .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 .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;' var sql = 'SELECT default_form, image_dir, image_host FROM config;'
+'SELECT production_domain, test_domain FROM config;' +'SELECT production_domain, test_domain FROM config;'
+'SELECT name FROM customer_view;' +'SELECT name FROM customer_account;'
+'CALL form_list ();'; +'CALL form_list ();';
this.conn.execQuery (sql, this.onMainQueryDone.bind (this)); this.conn.execQuery (sql, this.onMainQueryDone.bind (this));
}, },
@ -482,6 +482,53 @@ Vn.Gui = new Class
report.open (batch); 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 () ,_destroy: function ()
{ {
this.hide (); this.hide ();

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

@ -2,10 +2,14 @@
<div id="main" class="vn-gui"> <div id="main" class="vn-gui">
<div id="left-panel" class="left-panel"> <div id="left-panel" class="left-panel">
<div class="menu-overflow"> <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"/> <img class="logo" src="image/dark/logo.svg" alt="Verdnatura"/>
<div class="welcome"> <div class="welcome" id="user-name"/>
<span id="user-name"></span> <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>
</div> </div>
<a id="test-link" class="test-link" href="#"></a> <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'); var loadingBox = document.createElement ('div');
loadingBox.className = 'htk-full-image-loader'; loadingBox.className = 'htk-full-image-loader';
var loadingImg = document.createElement ('img'); var spinner = new Htk.Spinner ();
loadingImg.src = 'image/loader-black.gif'; loadingBox.appendChild (spinner.getNode ());
loadingImg.alt = _('Loading');
loadingBox.appendChild (loadingImg);
this.div = div; this.div = div;
this.loadingBox = loadingBox; this.loadingBox = loadingBox;
this.loadingImg = loadingImg; this.spinner = spinner;
this.parent (props); this.parent (props);
} }
@ -50,8 +48,6 @@ Htk.FullImage = new Class
} }
this.cancelHide (); this.cancelHide ();
this.loadingBox.style.left = this.getLeft (40);
this.loadingBox.style.top = this.getTop (40);
this.closed = false; this.closed = false;
this.src = src this.src = src
@ -64,6 +60,7 @@ Htk.FullImage = new Class
if (!this.img.complete && !this.loading) if (!this.img.complete && !this.loading)
{ {
document.body.appendChild (this.loadingBox); document.body.appendChild (this.loadingBox);
this.spinner.start ();
this.loading = true; this.loading = true;
} }
} }
@ -165,6 +162,7 @@ Htk.FullImage = new Class
if (this.loading) if (this.loading)
{ {
document.body.removeChild (this.loadingBox); document.body.removeChild (this.loadingBox);
this.spinner.stop ();
this.loading = false; this.loading = false;
} }
} }

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

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