Refactor "view profile" page per latest Buefy theme conventions
This commit is contained in:
Lance Edgar
parent
cd0703ba12
commit
1db6d642e7
|
|
@ -1,287 +1,100 @@
|
||||||
## -*- coding: utf-8; -*-
|
## -*- coding: utf-8; -*-
|
||||||
<%inherit file="/master/view.mako" />
|
<%inherit file="/master/view.mako" />
|
||||||
|
|
||||||
<div id="profile-info-app">
|
<%def name="page_content()">
|
||||||
<b-tabs v-model="activeTab" type="is-boxed">
|
<profile-info></profile-info>
|
||||||
|
</%def>
|
||||||
|
|
||||||
<b-tab-item label="Personal" icon="check" icon-pack="fas">
|
<%def name="render_this_page()">
|
||||||
<div style="display: flex; justify-content: space-between;">
|
${self.page_content()}
|
||||||
|
</%def>
|
||||||
|
|
||||||
<div>
|
<%def name="render_this_page_template()">
|
||||||
|
${parent.render_this_page_template()}
|
||||||
|
|
||||||
<div class="field-wrapper first_name">
|
<script type="text/x-template" id="profile-info-template">
|
||||||
<div class="field-row">
|
<div>
|
||||||
<label>First Name</label>
|
<b-tabs v-model="activeTab" type="is-boxed">
|
||||||
<div class="field">
|
|
||||||
${person.first_name}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-wrapper middle_name">
|
<b-tab-item label="Personal" icon="check" icon-pack="fas">
|
||||||
<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:
|
|
||||||
<div style="display: flex; justify-content: space-between;">
|
<div style="display: flex; justify-content: space-between;">
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
<div class="field-wrapper id">
|
<div class="field-wrapper first_name">
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<label>ID</label>
|
<label>First Name</label>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
${employee.id or ''}
|
${person.first_name}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field-wrapper display_name">
|
<div class="field-wrapper middle_name">
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<label>Display Name</label>
|
<label>Middle Name</label>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
${employee.display_name or ''}
|
${person.middle_name}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field-wrapper status">
|
<div class="field-wrapper last_name">
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<label>Status</label>
|
<label>Last Name</label>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
${enum.EMPLOYEE_STATUS.get(employee.status, '')}
|
${person.last_name}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
% if employee.phones:
|
<div class="field-wrapper street">
|
||||||
% for phone in employee.phones:
|
<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-wrapper">
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<label>Phone Number</label>
|
<label>Phone Number</label>
|
||||||
|
|
@ -302,8 +115,8 @@
|
||||||
</div>
|
</div>
|
||||||
% endif
|
% endif
|
||||||
|
|
||||||
% if employee.emails:
|
% if person.emails:
|
||||||
% for email in employee.emails:
|
% for email in person.emails:
|
||||||
<div class="field-wrapper">
|
<div class="field-wrapper">
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<label>Email Address</label>
|
<label>Email Address</label>
|
||||||
|
|
@ -327,87 +140,296 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
% if request.has_perm('employees.view'):
|
% if request.has_perm('people.view'):
|
||||||
${h.link_to("View Employee", url('employees.view', uuid=employee.uuid), class_='button')}
|
${h.link_to("View Person", url('people.view', uuid=person.uuid), class_='button')}
|
||||||
% endif
|
% endif
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</b-tab-item><!-- Personal -->
|
||||||
|
|
||||||
% else:
|
<b-tab-item label="Customer" ${'icon="check" icon-pack="fas"' if person.customers else ''|n}>
|
||||||
<p>${person} has never been an employee.</p>
|
% if person.customers:
|
||||||
% endif
|
<p>${person} is associated with <strong>${len(person.customers)}</strong> customer account(s)</p>
|
||||||
</b-tab-item><!-- Employee -->
|
<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}>
|
<b-collapse class="panel"
|
||||||
% if person.users:
|
## TODO: what's up with aria-id here?
|
||||||
<p>${person} is associated with <strong>${len(person.users)}</strong> user account(s)</p>
|
## aria-id="contentIdForA11y2"
|
||||||
<br />
|
>
|
||||||
<div id="users-accordion">
|
|
||||||
% for user in person.users:
|
|
||||||
|
|
||||||
<b-collapse class="panel"
|
<div
|
||||||
## TODO: what's up with aria-id here?
|
slot="trigger"
|
||||||
## aria-id="contentIdForA11y2"
|
class="panel-heading"
|
||||||
>
|
role="button"
|
||||||
|
## TODO: what's up with aria-id here?
|
||||||
|
## aria-controls="contentIdForA11y2"
|
||||||
|
>
|
||||||
|
<strong>${customer.id} - ${customer.name}</strong>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div
|
<div class="panel-block">
|
||||||
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 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">
|
||||||
<div class="field-wrapper id">
|
<label>ID</label>
|
||||||
<div class="field-row">
|
<div class="field">
|
||||||
<label>Username</label>
|
${customer.id or ''}
|
||||||
<div class="field">
|
</div>
|
||||||
${user.username}
|
</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>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
% if request.has_perm('customers.view'):
|
||||||
|
${h.link_to("View Customer", url('customers.view', uuid=customer.uuid), class_='button')}
|
||||||
|
% endif
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</b-collapse>
|
||||||
|
% endfor
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
% else:
|
||||||
% if request.has_perm('users.view'):
|
<p>${person} has never been a customer.</p>
|
||||||
${h.link_to("View User", url('users.view', uuid=user.uuid), class_='button')}
|
% endif
|
||||||
% 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>
|
<div class="panel-block">
|
||||||
|
|
||||||
</div>
|
<div style="display: flex; justify-content: space-between; width: 100%;">
|
||||||
</b-collapse>
|
|
||||||
% endfor
|
|
||||||
</div>
|
|
||||||
|
|
||||||
% else:
|
<div>
|
||||||
<p>${person} has never been a user.</p>
|
|
||||||
% endif
|
|
||||||
</b-tab-item><!-- User -->
|
|
||||||
|
|
||||||
</b-tabs>
|
<div class="field-wrapper id">
|
||||||
</div>
|
<div class="field-row">
|
||||||
|
<label>Username</label>
|
||||||
|
<div class="field">
|
||||||
|
${user.username}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script type="text/javascript">
|
</div>
|
||||||
|
|
||||||
new Vue({
|
<div>
|
||||||
el: '#profile-info-app',
|
% if request.has_perm('users.view'):
|
||||||
data() {
|
${h.link_to("View User", url('users.view', uuid=user.uuid), class_='button')}
|
||||||
return {
|
% endif
|
||||||
activeTab: 0
|
</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()}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue