Preserve current tab for page reload in profile view

also makes sharing links better etc.

tailbone/templates/people/view_profile_buefy.mako

@@ -540,6 +540,7 @@
 
 <%def name="render_personal_tab()">
   <b-tab-item label="Personal"
+              value="personal"
               icon-pack="fas"
               icon="check">
     <personal-tab :person="person"
@@ -554,7 +555,10 @@
 </%def>
 
 <%def name="render_member_tab()">
-  <b-tab-item label="Member" icon-pack="fas" :icon="members.length ? 'check' : null">
+  <b-tab-item label="Member"
+              value="member"
+              icon-pack="fas"
+              :icon="members.length ? 'check' : null">
 
     <div v-if="members.length">
 
@@ -641,7 +645,10 @@
 </%def>
 
 <%def name="render_customer_tab()">
-  <b-tab-item label="Customer" icon-pack="fas" :icon="customers.length ? 'check' : null">
+  <b-tab-item label="Customer"
+              value="customer"
+              icon-pack="fas"
+              :icon="customers.length ? 'check' : null">
 
     <div v-if="customers.length">
 
@@ -983,6 +990,7 @@
 
 <%def name="render_employee_tab()">
   <b-tab-item label="Employee"
+              value="employee"
               icon-pack="fas"
               :icon="employee.current ? 'check' : null">
     <employee-tab :employee="employee"
@@ -995,7 +1003,9 @@
 </%def>
 
 <%def name="render_user_tab()">
-  <b-tab-item label="User" ${'icon="check" icon-pack="fas"' if person.users else ''|n}>
+  <b-tab-item label="User"
+              value="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 />
@@ -1064,7 +1074,9 @@
 <%def name="render_profile_info_template()">
   <script type="text/x-template" id="profile-info-template">
     <div>
-      <b-tabs v-model="activeTab" type="is-boxed">
+      <b-tabs v-model="activeTab"
+              type="is-boxed"
+              @input="activeTabChanged">
         ${self.render_profile_tabs()}
       </b-tabs>
     </div>
@@ -1641,7 +1653,11 @@
   <script type="text/javascript">
 
     let ProfileInfoData = {
-        activeTab: 0,
+        % if buefy_0_8:
+        activeTab: location.hash ? parseInt(location.hash.substring(1)) : undefined,
+        % else:
+        activeTab: location.hash ? location.hash.substring(1) : undefined,
+        % endif
         person: ${json.dumps(person_data)|n},
         customers: ${json.dumps(customers_data)|n},
         member: null,           // TODO
@@ -1658,18 +1674,33 @@
         mixins: [FormPosterMixin],
         computed: {},
         methods: {
+
             personUpdated(person) {
                 this.person = person
             },
+
             employeeUpdated(employee) {
                 this.employee = employee
             },
+
             employeeHistoryUpdated(employeeHistory) {
                 this.employeeHistory = employeeHistory
             },
+
             changeContentTitle(newTitle) {
                 this.$emit('change-content-title', newTitle)
             },
+
+            activeTabChanged(value) {
+                % if buefy_0_8:
+                location.hash = value.toString()
+                % else:
+                location.hash = value
+                % endif
+                this.activeTabChangedExtra(value)
+            },
+
+            activeTabChangedExtra(value) {},
         },
     }