From 1db6d642e7c31a99ffb519456382eb51dcbcca74 Mon Sep 17 00:00:00 2001
From: Lance Edgar <lance@edbob.org>
Date: Fri, 6 Mar 2020 14:01:10 -0600
Subject: [PATCH] Refactor "view profile" page per latest Buefy theme
 conventions

---
 .../templates/people/view_profile_buefy.mako  | 654 +++++++++---------
 1 file changed, 338 insertions(+), 316 deletions(-)

diff --git a/tailbone/templates/people/view_profile_buefy.mako b/tailbone/templates/people/view_profile_buefy.mako
index 6c3bf351..ecb8d60a 100644
--- a/tailbone/templates/people/view_profile_buefy.mako
+++ b/tailbone/templates/people/view_profile_buefy.mako
@@ -1,287 +1,100 @@
 ## -*- coding: utf-8; -*-
 <%inherit file="/master/view.mako" />
 
-<div id="profile-info-app">
-  <b-tabs v-model="activeTab" type="is-boxed">
+<%def name="page_content()">
+  <profile-info></profile-info>
+</%def>
 
-    <b-tab-item label="Personal" icon="check" icon-pack="fas">
-      <div style="display: flex; justify-content: space-between;">
+<%def name="render_this_page()">
+  ${self.page_content()}
+</%def>
 
-        <div>
+<%def name="render_this_page_template()">
+  ${parent.render_this_page_template()}
 
-          <div class="field-wrapper first_name">
-            <div class="field-row">
-              <label>First Name</label>
-              <div class="field">
-                ${person.first_name}
-              </div>
-            </div>
-          </div>
+  <script type="text/x-template" id="profile-info-template">
+    <div>
+      <b-tabs v-model="activeTab" type="is-boxed">
 
-          <div class="field-wrapper middle_name">
-            <div class="field-row">
-              <label>Middle Name</label>
-              <div class="field">
-                ${person.middle_name}
-              </div>
-            </div>
-          </div>
-
-          <div class="field-wrapper last_name">
-            <div class="field-row">
-              <label>Last Name</label>
-              <div class="field">
-                ${person.last_name}
-              </div>
-            </div>
-          </div>
-
-          <div class="field-wrapper street">
-            <div class="field-row">
-              <label>Street 1</label>
-              <div class="field">
-                ${person.address.street if person.address else ''}
-              </div>
-            </div>
-          </div>
-
-          <div class="field-wrapper street2">
-            <div class="field-row">
-              <label>Street 2</label>
-              <div class="field">
-                ${person.address.street2 if person.address else ''}
-              </div>
-            </div>
-          </div>
-
-          <div class="field-wrapper city">
-            <div class="field-row">
-              <label>City</label>
-              <div class="field">
-                ${person.address.city if person.address else ''}
-              </div>
-            </div>
-          </div>
-
-          <div class="field-wrapper state">
-            <div class="field-row">
-              <label>State</label>
-              <div class="field">
-                ${person.address.state if person.address else ''}
-              </div>
-            </div>
-          </div>
-
-          <div class="field-wrapper zipcode">
-            <div class="field-row">
-              <label>Zipcode</label>
-              <div class="field">
-                ${person.address.zipcode if person.address else ''}
-              </div>
-            </div>
-          </div>
-
-          % if person.phones:
-              % for phone in person.phones:
-                  <div class="field-wrapper">
-                    <div class="field-row">
-                      <label>Phone Number</label>
-                      <div class="field">
-                        ${phone.number} (type: ${phone.type})
-                      </div>
-                    </div>
-                  </div>
-              % endfor
-          % else:
-              <div class="field-wrapper">
-                <div class="field-row">
-                  <label>Phone Number</label>
-                  <div class="field">
-                    (none on file)
-                  </div>
-                </div>
-              </div>
-          % endif
-
-          % if person.emails:
-              % for email in person.emails:
-                  <div class="field-wrapper">
-                    <div class="field-row">
-                      <label>Email Address</label>
-                      <div class="field">
-                        ${email.address} (type: ${email.type})
-                      </div>
-                    </div>
-                  </div>
-              % endfor
-          % else:
-              <div class="field-wrapper">
-                <div class="field-row">
-                  <label>Email Address</label>
-                  <div class="field">
-                    (none on file)
-                  </div>
-                </div>
-              </div>
-          % endif
-
-        </div>
-
-        <div>
-          % if request.has_perm('people.view'):
-              ${h.link_to("View Person", url('people.view', uuid=person.uuid), class_='button')}
-          % endif
-        </div>
-
-      </div>
-    </b-tab-item><!-- Personal -->
-
-    <b-tab-item label="Customer" ${'icon="check" icon-pack="fas"' if person.customers else ''|n}>
-      % if person.customers:
-          <p>${person} is associated with <strong>${len(person.customers)}</strong> customer account(s)</p>
-          <br />
-          <div id="customers-accordion">
-            % for customer in person.customers:
-
-                <b-collapse class="panel"
-                            ## TODO: what's up with aria-id here?
-                            ## aria-id="contentIdForA11y2"
-                            >
-
-                  <div
-                     slot="trigger"
-                     class="panel-heading"
-                     role="button"
-                     ## TODO: what's up with aria-id here?
-                     ## aria-controls="contentIdForA11y2"
-                     >
-                    <strong>${customer.id} - ${customer.name}</strong>
-                  </div>
-
-                  <div class="panel-block">
-
-                    <div style="display: flex; justify-content: space-between; width: 100%;">
-
-                      <div>
-
-                        <div class="field-wrapper id">
-                          <div class="field-row">
-                            <label>ID</label>
-                            <div class="field">
-                              ${customer.id or ''}
-                            </div>
-                          </div>
-                        </div>
-
-                        <div class="field-wrapper name">
-                          <div class="field-row">
-                            <label>Name</label>
-                            <div class="field">
-                              ${customer.name}
-                            </div>
-                          </div>
-                        </div>
-
-                        % if customer.phones:
-                            % for phone in customer.phones:
-                                <div class="field-wrapper">
-                                  <div class="field-row">
-                                    <label>Phone Number</label>
-                                    <div class="field">
-                                      ${phone.number} (type: ${phone.type})
-                                    </div>
-                                  </div>
-                                </div>
-                            % endfor
-                        % else:
-                            <div class="field-wrapper">
-                              <div class="field-row">
-                                <label>Phone Number</label>
-                                <div class="field">
-                                  (none on file)
-                                </div>
-                              </div>
-                            </div>
-                        % endif
-
-                        % if customer.emails:
-                            % for email in customer.emails:
-                                <div class="field-wrapper">
-                                  <div class="field-row">
-                                    <label>Email Address</label>
-                                    <div class="field">
-                                      ${email.address} (type: ${email.type})
-                                    </div>
-                                  </div>
-                                </div>
-                            % endfor
-                        % else:
-                            <div class="field-wrapper">
-                              <div class="field-row">
-                                <label>Email Address</label>
-                                <div class="field">
-                                  (none on file)
-                                </div>
-                              </div>
-                            </div>
-                        % endif
-
-                      </div>
-
-                      <div>
-                        % if request.has_perm('customers.view'):
-                            ${h.link_to("View Customer", url('customers.view', uuid=customer.uuid), class_='button')}
-                        % endif
-                      </div>
-
-                    </div>
-
-                  </div>
-                </b-collapse>
-            % endfor
-          </div>
-
-      % else:
-          <p>${person} has never been a customer.</p>
-      % endif
-    </b-tab-item><!-- Customer -->
-
-    <b-tab-item label="Employee" ${'icon="check" icon-pack="fas"' if employee else ''|n}>
-
-      % if employee:
+        <b-tab-item label="Personal" icon="check" icon-pack="fas">
           <div style="display: flex; justify-content: space-between;">
 
             <div>
 
-              <div class="field-wrapper id">
+              <div class="field-wrapper first_name">
                 <div class="field-row">
-                  <label>ID</label>
+                  <label>First Name</label>
                   <div class="field">
-                    ${employee.id or ''}
+                    ${person.first_name}
                   </div>
                 </div>
               </div>
 
-              <div class="field-wrapper display_name">
+              <div class="field-wrapper middle_name">
                 <div class="field-row">
-                  <label>Display Name</label>
+                  <label>Middle Name</label>
                   <div class="field">
-                    ${employee.display_name or ''}
+                    ${person.middle_name}
                   </div>
                 </div>
               </div>
 
-              <div class="field-wrapper status">
+              <div class="field-wrapper last_name">
                 <div class="field-row">
-                  <label>Status</label>
+                  <label>Last Name</label>
                   <div class="field">
-                    ${enum.EMPLOYEE_STATUS.get(employee.status, '')}
+                    ${person.last_name}
                   </div>
                 </div>
               </div>
 
-              % if employee.phones:
-                  % for phone in employee.phones:
+              <div class="field-wrapper street">
+                <div class="field-row">
+                  <label>Street 1</label>
+                  <div class="field">
+                    ${person.address.street if person.address else ''}
+                  </div>
+                </div>
+              </div>
+
+              <div class="field-wrapper street2">
+                <div class="field-row">
+                  <label>Street 2</label>
+                  <div class="field">
+                    ${person.address.street2 if person.address else ''}
+                  </div>
+                </div>
+              </div>
+
+              <div class="field-wrapper city">
+                <div class="field-row">
+                  <label>City</label>
+                  <div class="field">
+                    ${person.address.city if person.address else ''}
+                  </div>
+                </div>
+              </div>
+
+              <div class="field-wrapper state">
+                <div class="field-row">
+                  <label>State</label>
+                  <div class="field">
+                    ${person.address.state if person.address else ''}
+                  </div>
+                </div>
+              </div>
+
+              <div class="field-wrapper zipcode">
+                <div class="field-row">
+                  <label>Zipcode</label>
+                  <div class="field">
+                    ${person.address.zipcode if person.address else ''}
+                  </div>
+                </div>
+              </div>
+
+              % if person.phones:
+                  % for phone in person.phones:
                       <div class="field-wrapper">
                         <div class="field-row">
                           <label>Phone Number</label>
@@ -302,8 +115,8 @@
                   </div>
               % endif
 
-              % if employee.emails:
-                  % for email in employee.emails:
+              % if person.emails:
+                  % for email in person.emails:
                       <div class="field-wrapper">
                         <div class="field-row">
                           <label>Email Address</label>
@@ -327,87 +140,296 @@
             </div>
 
             <div>
-              % if request.has_perm('employees.view'):
-                  ${h.link_to("View Employee", url('employees.view', uuid=employee.uuid), class_='button')}
+              % if request.has_perm('people.view'):
+                  ${h.link_to("View Person", url('people.view', uuid=person.uuid), class_='button')}
               % endif
             </div>
 
           </div>
+        </b-tab-item><!-- Personal -->
 
-      % else:
-          <p>${person} has never been an employee.</p>
-      % endif
-    </b-tab-item><!-- Employee -->
+        <b-tab-item label="Customer" ${'icon="check" icon-pack="fas"' if person.customers else ''|n}>
+          % if person.customers:
+              <p>${person} is associated with <strong>${len(person.customers)}</strong> customer account(s)</p>
+              <br />
+              <div id="customers-accordion">
+                % for customer in person.customers:
 
-    <b-tab-item label="User" ${'icon="check" icon-pack="fas"' if person.users else ''|n}>
-      % if person.users:
-          <p>${person} is associated with <strong>${len(person.users)}</strong> user account(s)</p>
-          <br />
-          <div id="users-accordion">
-            % for user in person.users:
+                    <b-collapse class="panel"
+                                ## TODO: what's up with aria-id here?
+                                ## aria-id="contentIdForA11y2"
+                                >
 
-                <b-collapse class="panel"
-                            ## TODO: what's up with aria-id here?
-                            ## aria-id="contentIdForA11y2"
-                            >
+                      <div
+                         slot="trigger"
+                         class="panel-heading"
+                         role="button"
+                         ## TODO: what's up with aria-id here?
+                         ## aria-controls="contentIdForA11y2"
+                         >
+                        <strong>${customer.id} - ${customer.name}</strong>
+                      </div>
 
-                  <div
-                     slot="trigger"
-                     class="panel-heading"
-                     role="button"
-                     ## TODO: what's up with aria-id here?
-                     ## aria-controls="contentIdForA11y2"
-                     >
-                    <strong>${user.username}</strong>
-                  </div>
+                      <div class="panel-block">
 
-                  <div class="panel-block">
+                        <div style="display: flex; justify-content: space-between; width: 100%;">
 
-                    <div style="display: flex; justify-content: space-between; width: 100%;">
+                          <div>
 
-                      <div>
-
-                        <div class="field-wrapper id">
-                          <div class="field-row">
-                            <label>Username</label>
-                            <div class="field">
-                              ${user.username}
+                            <div class="field-wrapper id">
+                              <div class="field-row">
+                                <label>ID</label>
+                                <div class="field">
+                                  ${customer.id or ''}
+                                </div>
+                              </div>
                             </div>
+
+                            <div class="field-wrapper name">
+                              <div class="field-row">
+                                <label>Name</label>
+                                <div class="field">
+                                  ${customer.name}
+                                </div>
+                              </div>
+                            </div>
+
+                            % if customer.phones:
+                                % for phone in customer.phones:
+                                    <div class="field-wrapper">
+                                      <div class="field-row">
+                                        <label>Phone Number</label>
+                                        <div class="field">
+                                          ${phone.number} (type: ${phone.type})
+                                        </div>
+                                      </div>
+                                    </div>
+                                % endfor
+                            % else:
+                                <div class="field-wrapper">
+                                  <div class="field-row">
+                                    <label>Phone Number</label>
+                                    <div class="field">
+                                      (none on file)
+                                    </div>
+                                  </div>
+                                </div>
+                            % endif
+
+                            % if customer.emails:
+                                % for email in customer.emails:
+                                    <div class="field-wrapper">
+                                      <div class="field-row">
+                                        <label>Email Address</label>
+                                        <div class="field">
+                                          ${email.address} (type: ${email.type})
+                                        </div>
+                                      </div>
+                                    </div>
+                                % endfor
+                            % else:
+                                <div class="field-wrapper">
+                                  <div class="field-row">
+                                    <label>Email Address</label>
+                                    <div class="field">
+                                      (none on file)
+                                    </div>
+                                  </div>
+                                </div>
+                            % endif
+
                           </div>
+
+                          <div>
+                            % if request.has_perm('customers.view'):
+                                ${h.link_to("View Customer", url('customers.view', uuid=customer.uuid), class_='button')}
+                            % endif
+                          </div>
+
                         </div>
 
                       </div>
+                    </b-collapse>
+                % endfor
+              </div>
 
-                      <div>
-                        % if request.has_perm('users.view'):
-                            ${h.link_to("View User", url('users.view', uuid=user.uuid), class_='button')}
-                        % endif
+          % else:
+              <p>${person} has never been a customer.</p>
+          % endif
+        </b-tab-item><!-- Customer -->
+
+        <b-tab-item label="Employee" ${'icon="check" icon-pack="fas"' if employee else ''|n}>
+
+          % if employee:
+              <div style="display: flex; justify-content: space-between;">
+
+                <div>
+
+                  <div class="field-wrapper id">
+                    <div class="field-row">
+                      <label>ID</label>
+                      <div class="field">
+                        ${employee.id or ''}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="field-wrapper display_name">
+                    <div class="field-row">
+                      <label>Display Name</label>
+                      <div class="field">
+                        ${employee.display_name or ''}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="field-wrapper status">
+                    <div class="field-row">
+                      <label>Status</label>
+                      <div class="field">
+                        ${enum.EMPLOYEE_STATUS.get(employee.status, '')}
+                      </div>
+                    </div>
+                  </div>
+
+                  % if employee.phones:
+                      % for phone in employee.phones:
+                          <div class="field-wrapper">
+                            <div class="field-row">
+                              <label>Phone Number</label>
+                              <div class="field">
+                                ${phone.number} (type: ${phone.type})
+                              </div>
+                            </div>
+                          </div>
+                      % endfor
+                  % else:
+                      <div class="field-wrapper">
+                        <div class="field-row">
+                          <label>Phone Number</label>
+                          <div class="field">
+                            (none on file)
+                          </div>
+                        </div>
+                      </div>
+                  % endif
+
+                  % if employee.emails:
+                      % for email in employee.emails:
+                          <div class="field-wrapper">
+                            <div class="field-row">
+                              <label>Email Address</label>
+                              <div class="field">
+                                ${email.address} (type: ${email.type})
+                              </div>
+                            </div>
+                          </div>
+                      % endfor
+                  % else:
+                      <div class="field-wrapper">
+                        <div class="field-row">
+                          <label>Email Address</label>
+                          <div class="field">
+                            (none on file)
+                          </div>
+                        </div>
+                      </div>
+                  % endif
+
+                </div>
+
+                <div>
+                  % if request.has_perm('employees.view'):
+                      ${h.link_to("View Employee", url('employees.view', uuid=employee.uuid), class_='button')}
+                  % endif
+                </div>
+
+              </div>
+
+          % else:
+              <p>${person} has never been an employee.</p>
+          % endif
+        </b-tab-item><!-- Employee -->
+
+        <b-tab-item label="User" ${'icon="check" icon-pack="fas"' if person.users else ''|n}>
+          % if person.users:
+              <p>${person} is associated with <strong>${len(person.users)}</strong> user account(s)</p>
+              <br />
+              <div id="users-accordion">
+                % for user in person.users:
+
+                    <b-collapse class="panel"
+                                ## TODO: what's up with aria-id here?
+                                ## aria-id="contentIdForA11y2"
+                                >
+
+                      <div
+                         slot="trigger"
+                         class="panel-heading"
+                         role="button"
+                         ## TODO: what's up with aria-id here?
+                         ## aria-controls="contentIdForA11y2"
+                         >
+                        <strong>${user.username}</strong>
                       </div>
 
-                    </div>
+                      <div class="panel-block">
 
-                  </div>
-                </b-collapse>
-            % endfor
-          </div>
+                        <div style="display: flex; justify-content: space-between; width: 100%;">
 
-      % else:
-          <p>${person} has never been a user.</p>
-      % endif
-    </b-tab-item><!-- User -->
+                          <div>
 
-  </b-tabs>
-</div>
+                            <div class="field-wrapper id">
+                              <div class="field-row">
+                                <label>Username</label>
+                                <div class="field">
+                                  ${user.username}
+                                </div>
+                              </div>
+                            </div>
 
-<script type="text/javascript">
+                          </div>
 
-  new Vue({
-      el: '#profile-info-app',
-      data() {
-          return {
-              activeTab: 0
-          }
-      }
-  })
+                          <div>
+                            % if request.has_perm('users.view'):
+                                ${h.link_to("View User", url('users.view', uuid=user.uuid), class_='button')}
+                            % endif
+                          </div>
 
-</script>
+                        </div>
+
+                      </div>
+                    </b-collapse>
+                % endfor
+              </div>
+
+          % else:
+              <p>${person} has never been a user.</p>
+          % endif
+        </b-tab-item><!-- User -->
+
+      </b-tabs>
+    </div>
+  </script>
+</%def>
+
+<%def name="make_this_page_component()">
+  ${parent.make_this_page_component()}
+  <script type="text/javascript">
+
+    const ProfileInfo = {
+        template: '#profile-info-template',
+        data() {
+            return {
+                activeTab: 0,
+            }
+        },
+    }
+
+    Vue.component('profile-info', ProfileInfo)
+
+  </script>
+</%def>
+
+
+${parent.body()}