Add Buefy panels support for "view product" page
This commit is contained in:
Lance Edgar
parent
6be4964221
commit
1fb121fb6d
|
|
@ -1,57 +1,17 @@
|
||||||
## -*- coding: utf-8; -*-
|
## -*- coding: utf-8; -*-
|
||||||
<%inherit file="/master/view.mako" />
|
<%inherit file="/master/view.mako" />
|
||||||
|
|
||||||
##############################
|
<%def name="extra_styles()">
|
||||||
## page body
|
${parent.extra_styles()}
|
||||||
##############################
|
% if use_buefy:
|
||||||
|
<style type="text/css">
|
||||||
<div style="display: flex; justify-content: space-between;">
|
#main-product-panel {
|
||||||
|
margin-right: 2em;
|
||||||
<div class="form-wrapper">
|
margin-top: 1em;
|
||||||
|
}
|
||||||
<div style="display: flex; flex-direction: column;">
|
</style>
|
||||||
|
% endif
|
||||||
<div class="panel" id="product-main">
|
</%def>
|
||||||
<h2>Product</h2>
|
|
||||||
<div class="panel-body">
|
|
||||||
<div style="display: flex; justify-content: space-between;">
|
|
||||||
<div>
|
|
||||||
${self.render_main_fields(form)}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
% if image_url:
|
|
||||||
${h.image(image_url, "Product Image", id='product-image', width=150, height=150)}
|
|
||||||
% endif
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="display: flex;">
|
|
||||||
<div class="panel-wrapper"> <!-- left column -->
|
|
||||||
${self.left_column()}
|
|
||||||
</div> <!-- left column -->
|
|
||||||
<div class="panel-wrapper" style="margin-left: 1em;"> <!-- right column -->
|
|
||||||
${self.right_column()}
|
|
||||||
</div> <!-- right column -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
% if buttons:
|
|
||||||
${buttons|n}
|
|
||||||
% endif
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul id="context-menu">
|
|
||||||
${self.context_menu_items()}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
##############################
|
|
||||||
## rendering methods
|
|
||||||
##############################
|
|
||||||
|
|
||||||
<%def name="render_main_fields(form)">
|
<%def name="render_main_fields(form)">
|
||||||
${form.render_field_readonly('upc')}
|
${form.render_field_readonly('upc')}
|
||||||
|
|
@ -72,6 +32,24 @@
|
||||||
</%def>
|
</%def>
|
||||||
|
|
||||||
<%def name="left_column()">
|
<%def name="left_column()">
|
||||||
|
% if use_buefy:
|
||||||
|
<nav class="panel">
|
||||||
|
<p class="panel-heading">Pricing</p>
|
||||||
|
<div class="panel-block">
|
||||||
|
<div>
|
||||||
|
${self.render_price_fields(form)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<nav class="panel">
|
||||||
|
<p class="panel-heading">Flags</p>
|
||||||
|
<div class="panel-block">
|
||||||
|
<div>
|
||||||
|
${self.render_flag_fields(form)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
% else:
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<h2>Pricing</h2>
|
<h2>Pricing</h2>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
|
|
@ -84,6 +62,7 @@
|
||||||
${self.render_flag_fields(form)}
|
${self.render_flag_fields(form)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
% endif
|
||||||
${self.extra_left_panels()}
|
${self.extra_left_panels()}
|
||||||
</%def>
|
</%def>
|
||||||
|
|
||||||
|
|
@ -100,12 +79,23 @@
|
||||||
<%def name="extra_main_fields(form)"></%def>
|
<%def name="extra_main_fields(form)"></%def>
|
||||||
|
|
||||||
<%def name="organization_panel()">
|
<%def name="organization_panel()">
|
||||||
|
% if use_buefy:
|
||||||
|
<nav class="panel">
|
||||||
|
<p class="panel-heading">Organization</p>
|
||||||
|
<div class="panel-block">
|
||||||
|
<div>
|
||||||
|
${self.render_organization_fields(form)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
% else:
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<h2>Organization</h2>
|
<h2>Organization</h2>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
${self.render_organization_fields(form)}
|
${self.render_organization_fields(form)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
% endif
|
||||||
</%def>
|
</%def>
|
||||||
|
|
||||||
<%def name="render_organization_fields(form)">
|
<%def name="render_organization_fields(form)">
|
||||||
|
|
@ -137,96 +127,220 @@
|
||||||
</%def>
|
</%def>
|
||||||
|
|
||||||
<%def name="movement_panel()">
|
<%def name="movement_panel()">
|
||||||
|
% if use_buefy:
|
||||||
|
<nav class="panel">
|
||||||
|
<p class="panel-heading">Movement</p>
|
||||||
|
<div class="panel-block">
|
||||||
|
<div>
|
||||||
|
${self.render_movement_fields(form)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
% else:
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<h2>Movement</h2>
|
<h2>Movement</h2>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
${self.render_movement_fields(form)}
|
${self.render_movement_fields(form)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
% endif
|
||||||
</%def>
|
</%def>
|
||||||
|
|
||||||
<%def name="render_movement_fields(form)">
|
<%def name="render_movement_fields(form)">
|
||||||
${form.render_field_readonly('last_sold')}
|
${form.render_field_readonly('last_sold')}
|
||||||
</%def>
|
</%def>
|
||||||
|
|
||||||
|
<%def name="lookup_codes_grid()">
|
||||||
|
<div class="grid full no-border">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<th>Seq</th>
|
||||||
|
<th>Code</th>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
% for code in instance._codes:
|
||||||
|
<tr>
|
||||||
|
<td>${code.ordinal}</td>
|
||||||
|
<td>${code.code}</td>
|
||||||
|
</tr>
|
||||||
|
% endfor
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</%def>
|
||||||
|
|
||||||
<%def name="lookup_codes_panel()">
|
<%def name="lookup_codes_panel()">
|
||||||
|
% if use_buefy:
|
||||||
|
<nav class="panel">
|
||||||
|
<p class="panel-heading">Additional Lookup Codes</p>
|
||||||
|
<div class="panel-block">
|
||||||
|
${self.lookup_codes_grid()}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
% else:
|
||||||
<div class="panel-grid" id="product-codes">
|
<div class="panel-grid" id="product-codes">
|
||||||
<h2>Additional Lookup Codes</h2>
|
<h2>Additional Lookup Codes</h2>
|
||||||
<div class="grid full no-border">
|
${self.lookup_codes_grid()}
|
||||||
<table>
|
</div>
|
||||||
<thead>
|
% endif
|
||||||
<th>Seq</th>
|
</%def>
|
||||||
<th>Code</th>
|
|
||||||
</thead>
|
<%def name="sources_grid()">
|
||||||
<tbody>
|
<div class="grid full no-border">
|
||||||
% for code in instance._codes:
|
<table>
|
||||||
<tr>
|
<thead>
|
||||||
<td>${code.ordinal}</td>
|
<th>${costs_label_preferred}</th>
|
||||||
<td>${code.code}</td>
|
<th>${costs_label_vendor}</th>
|
||||||
</tr>
|
<th>${costs_label_code}</th>
|
||||||
% endfor
|
<th>${costs_label_case_size}</th>
|
||||||
</tbody>
|
<th>Case Cost</th>
|
||||||
</table>
|
<th>Unit Cost</th>
|
||||||
</div>
|
<th>Status</th>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
% for i, cost in enumerate(instance.costs, 1):
|
||||||
|
<tr class="${'even' if i % 2 == 0 else 'odd'}">
|
||||||
|
<td class="center">${'X' if cost.preference == 1 else ''}</td>
|
||||||
|
<td>
|
||||||
|
% if request.has_perm('vendors.view'):
|
||||||
|
${h.link_to(cost.vendor, request.route_url('vendors.view', uuid=cost.vendor_uuid))}
|
||||||
|
% else:
|
||||||
|
${cost.vendor}
|
||||||
|
% endif
|
||||||
|
</td>
|
||||||
|
<td class="center">${cost.code or ''}</td>
|
||||||
|
<td class="center">${h.pretty_quantity(cost.case_size)}</td>
|
||||||
|
<td class="right">${'$ %0.2f' % cost.case_cost if cost.case_cost is not None else ''}</td>
|
||||||
|
<td class="right">${'$ %0.4f' % cost.unit_cost if cost.unit_cost is not None else ''}</td>
|
||||||
|
<td>${"discontinued" if cost.discontinued else "available"}</td>
|
||||||
|
</tr>
|
||||||
|
% endfor
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</%def>
|
</%def>
|
||||||
|
|
||||||
<%def name="sources_panel()">
|
<%def name="sources_panel()">
|
||||||
|
% if use_buefy:
|
||||||
|
<nav class="panel">
|
||||||
|
<p class="panel-heading">Vendor Sources</p>
|
||||||
|
<div class="panel-block">
|
||||||
|
${self.sources_grid()}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
% else:
|
||||||
<div class="panel-grid" id="product-costs">
|
<div class="panel-grid" id="product-costs">
|
||||||
<h2>Vendor Sources</h2>
|
<h2>Vendor Sources</h2>
|
||||||
<div class="grid full no-border">
|
${self.sources_grid()}
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<th>${costs_label_preferred}</th>
|
|
||||||
<th>${costs_label_vendor}</th>
|
|
||||||
<th>${costs_label_code}</th>
|
|
||||||
<th>${costs_label_case_size}</th>
|
|
||||||
<th>Case Cost</th>
|
|
||||||
<th>Unit Cost</th>
|
|
||||||
<th>Status</th>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
% for i, cost in enumerate(instance.costs, 1):
|
|
||||||
<tr class="${'even' if i % 2 == 0 else 'odd'}">
|
|
||||||
<td class="center">${'X' if cost.preference == 1 else ''}</td>
|
|
||||||
<td>
|
|
||||||
% if request.has_perm('vendors.view'):
|
|
||||||
${h.link_to(cost.vendor, request.route_url('vendors.view', uuid=cost.vendor_uuid))}
|
|
||||||
% else:
|
|
||||||
${cost.vendor}
|
|
||||||
% endif
|
|
||||||
</td>
|
|
||||||
<td class="center">${cost.code or ''}</td>
|
|
||||||
<td class="center">${h.pretty_quantity(cost.case_size)}</td>
|
|
||||||
<td class="right">${'$ %0.2f' % cost.case_cost if cost.case_cost is not None else ''}</td>
|
|
||||||
<td class="right">${'$ %0.4f' % cost.unit_cost if cost.unit_cost is not None else ''}</td>
|
|
||||||
<td>${"discontinued" if cost.discontinued else "available"}</td>
|
|
||||||
</tr>
|
|
||||||
% endfor
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
% endif
|
||||||
</%def>
|
</%def>
|
||||||
|
|
||||||
<%def name="notes_panel()">
|
<%def name="notes_panel()">
|
||||||
|
% if use_buefy:
|
||||||
|
<nav class="panel">
|
||||||
|
<p class="panel-heading">Notes</p>
|
||||||
|
<div class="panel-block">
|
||||||
|
<div class="field">${form.render_field_readonly('notes')}</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
% else:
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<h2>Notes</h2>
|
<h2>Notes</h2>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<div class="field">${form.render_field_readonly('notes')}</div>
|
<div class="field">${form.render_field_readonly('notes')}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
% endif
|
||||||
</%def>
|
</%def>
|
||||||
|
|
||||||
<%def name="ingredients_panel()">
|
<%def name="ingredients_panel()">
|
||||||
|
% if use_buefy:
|
||||||
|
<nav class="panel">
|
||||||
|
<p class="panel-heading">Ingredients</p>
|
||||||
|
<div class="panel-block">
|
||||||
|
${form.render_field_readonly('ingredients')}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
% else:
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<h2>Ingredients</h2>
|
<h2>Ingredients</h2>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
${form.render_field_readonly('ingredients')}
|
${form.render_field_readonly('ingredients')}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
% endif
|
||||||
</%def>
|
</%def>
|
||||||
|
|
||||||
<%def name="extra_left_panels()"></%def>
|
<%def name="extra_left_panels()"></%def>
|
||||||
|
|
||||||
<%def name="extra_right_panels()"></%def>
|
<%def name="extra_right_panels()"></%def>
|
||||||
|
|
||||||
|
<%def name="render_form()">
|
||||||
|
% if use_buefy:
|
||||||
|
<div style="display: flex; flex-direction: column;">
|
||||||
|
|
||||||
|
<nav class="panel" id="main-product-panel">
|
||||||
|
<p class="panel-heading">Product</p>
|
||||||
|
<div class="panel-block">
|
||||||
|
<div style="display: flex; justify-content: space-between; width: 100%;">
|
||||||
|
<div>
|
||||||
|
${self.render_main_fields(form)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
% if image_url:
|
||||||
|
${h.image(image_url, "Product Image", id='product-image', width=150, height=150)}
|
||||||
|
% endif
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div style="display: flex;">
|
||||||
|
<div class="panel-wrapper"> <!-- left column -->
|
||||||
|
${self.left_column()}
|
||||||
|
</div> <!-- left column -->
|
||||||
|
<div class="panel-wrapper" style="margin-left: 1em;"> <!-- right column -->
|
||||||
|
${self.right_column()}
|
||||||
|
</div> <!-- right column -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
% else:
|
||||||
|
<div style="display: flex; flex-direction: column;">
|
||||||
|
|
||||||
|
<div class="panel" id="product-main">
|
||||||
|
<h2>Product</h2>
|
||||||
|
<div class="panel-body">
|
||||||
|
<div style="display: flex; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
${self.render_main_fields(form)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
% if image_url:
|
||||||
|
${h.image(image_url, "Product Image", id='product-image', width=150, height=150)}
|
||||||
|
% endif
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex;">
|
||||||
|
<div class="panel-wrapper"> <!-- left column -->
|
||||||
|
${self.left_column()}
|
||||||
|
</div> <!-- left column -->
|
||||||
|
<div class="panel-wrapper" style="margin-left: 1em;"> <!-- right column -->
|
||||||
|
${self.right_column()}
|
||||||
|
</div> <!-- right column -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
% endif
|
||||||
|
|
||||||
|
% if buttons:
|
||||||
|
${buttons|n}
|
||||||
|
% endif
|
||||||
|
</%def>
|
||||||
|
|
||||||
|
|
||||||
|
${parent.body()}
|
||||||
|
|
|
||||||
|
|
@ -104,6 +104,8 @@ class ProductsView(MasterView):
|
||||||
]
|
]
|
||||||
|
|
||||||
form_fields = [
|
form_fields = [
|
||||||
|
'item_id',
|
||||||
|
'scancode',
|
||||||
'upc',
|
'upc',
|
||||||
'brand',
|
'brand',
|
||||||
'description',
|
'description',
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue