From 1fb121fb6d1df57c70fe510a095e00ff4f40029a Mon Sep 17 00:00:00 2001
From: Lance Edgar <ledgar@techsupport.coop>
Date: Thu, 23 May 2019 19:15:47 -0500
Subject: [PATCH] Add Buefy panels support for "view product" page

---
 tailbone/templates/products/view.mako | 312 ++++++++++++++++++--------
 tailbone/views/products.py            |   2 +
 2 files changed, 215 insertions(+), 99 deletions(-)

diff --git a/tailbone/templates/products/view.mako b/tailbone/templates/products/view.mako
index db73208f..6836c974 100644
--- a/tailbone/templates/products/view.mako
+++ b/tailbone/templates/products/view.mako
@@ -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)}
-              % 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="extra_styles()">
+  ${parent.extra_styles()}
+  % if use_buefy:
+      <style type="text/css">
+        #main-product-panel {
+            margin-right: 2em;
+            margin-top: 1em;
+        }
+      </style>
+  % endif
+</%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,96 +127,220 @@
 </%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_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()">
+  % 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>
-    <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>
+    ${self.lookup_codes_grid()}
+  </div>
+  % endif
+</%def>
+
+<%def name="sources_grid()">
+  <div class="grid full no-border">
+    <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>
 </%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>
-    <div class="grid full no-border">
-      <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>
+    ${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()}
diff --git a/tailbone/views/products.py b/tailbone/views/products.py
index 0ee2b7d7..e15154cd 100644
--- a/tailbone/views/products.py
+++ b/tailbone/views/products.py
@@ -104,6 +104,8 @@ class ProductsView(MasterView):
     ]
 
     form_fields = [
+        'item_id',
+        'scancode',
         'upc',
         'brand',
         'description',