rattail/tailbone
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Add Buefy panels support for "view product" page

Browse source
This commit is contained in:
Lance Edgar 2019-05-23 19:15:47 -05:00
parent 6be4964221
commit 1fb121fb6d
2 changed files with 215 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

228
tailbone/templates/products/view.mako
View file

@ -1,57 +1,17 @@
## -*- coding: utf-8; -*-
<%inherit file="/master/view.mako" />
##############################
## page body
##############################
<div style="display: flex; justify-content: space-between;">
<div class="form-wrapper">
<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)}
<%def name="extra_styles()">
${parent.extra_styles()}
% if use_buefy:
<style type="text/css">
#main-product-panel {
margin-right: 2em;
margin-top: 1em;
}
</style>
% 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>
<%def name="render_main_fields(form)">
${form.render_field_readonly('upc')}
@ -72,6 +32,24 @@
</%def>
<%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">
<h2>Pricing</h2>
<div class="panel-body">
@ -84,6 +62,7 @@
${self.render_flag_fields(form)}
</div>
</div>
% endif
${self.extra_left_panels()}
</%def>
@ -100,12 +79,23 @@
<%def name="extra_main_fields(form)"></%def>
<%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">
<h2>Organization</h2>
<div class="panel-body">
${self.render_organization_fields(form)}
</div>
</div>
% endif
</%def>
<%def name="render_organization_fields(form)">
@ -137,21 +127,30 @@
</%def>
<%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">
<h2>Movement</h2>
<div class="panel-body">
${self.render_movement_fields(form)}
</div>
</div>
% endif
</%def>
<%def name="render_movement_fields(form)">
${form.render_field_readonly('last_sold')}
</%def>
<%def name="lookup_codes_panel()">
<div class="panel-grid" id="product-codes">
<h2>Additional Lookup Codes</h2>
<%def name="lookup_codes_grid()">
<div class="grid full no-border">
<table>
<thead>
@ -168,12 +167,25 @@
</tbody>
</table>
</div>
</div>
</%def>
<%def name="sources_panel()">
<div class="panel-grid" id="product-costs">
<h2>Vendor Sources</h2>
<%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">
<h2>Additional Lookup Codes</h2>
${self.lookup_codes_grid()}
</div>
% endif
</%def>
<%def name="sources_grid()">
<div class="grid full no-border">
<table>
<thead>
@ -206,27 +218,129 @@
</tbody>
</table>
</div>
</%def>
<%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">
<h2>Vendor Sources</h2>
${self.sources_grid()}
</div>
% endif
</%def>
<%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">
<h2>Notes</h2>
<div class="panel-body">
<div class="field">${form.render_field_readonly('notes')}</div>
</div>
</div>
% endif
</%def>
<%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">
<h2>Ingredients</h2>
<div class="panel-body">
${form.render_field_readonly('ingredients')}
</div>
</div>
% endif
</%def>
<%def name="extra_left_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()}

2
tailbone/views/products.py
View file

@ -104,6 +104,8 @@ class ProductsView(MasterView):
]
form_fields = [
'item_id',
'scancode',
'upc',
'brand',
'description',