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

Improve default people "profile" view somewhat

Browse source
This commit is contained in:
Lance Edgar 2019-04-19 11:20:45 -05:00
parent efb1a73e88
commit 4a5f1ce19a
1 changed files with 345 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

257
tailbone/templates/people/view_profile.mako
View file

@ -4,8 +4,29 @@
<%def name="extra_javascript()">
${parent.extra_javascript()}
<script type="text/javascript">
## NOTE: we must delay activation of accordions, otherwise they do not
## seem to "resize" correctly
var customer_accordion_activated = false;
var user_accordion_activated = false;
$(function() {
$('#profile-tabs').tabs();
$('#profile-tabs').tabs({
activate: function(event, ui) {
## activate accordion, first time tab is activated
if (ui.newPanel.selector == '#customer-tab') {
if (! customer_accordion_activated) {
$('#customers-accordion').accordion();
customer_accordion_activated = true;
}
} else if (ui.newPanel.selector == '#user-tab') {
if (! user_accordion_activated) {
$('#users-accordion').accordion();
user_accordion_activated = true;
}
}
}
});
});
</script>
</%def>
@ -15,10 +36,15 @@
<li><a href="#personal-tab">Personal</a></li>
<li><a href="#customer-tab">Customer</a></li>
<li><a href="#employee-tab">Employee</a></li>
<li><a href="#user-tab">User</a></li>
</ul>
<div id="personal-tab">
<div style="display: flex; justify-content: space-between;">
<div>
<div class="field-wrapper first_name">
<div class="field-row">
<label>First Name</label>
@ -91,10 +117,73 @@
</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>
</div><!-- personal-tab -->
<div id="customer-tab">
% if person.customers:
<p>${person} is associated with ${len(person.customers)} customer account(s)</p>
<br />
<div id="customers-accordion">
% for customer in person.customers:
<h3>${customer.id} - ${customer.name}</h3>
<div>
<div style="display: flex; justify-content: space-between;">
<div>
<div class="field-wrapper id">
<div class="field-row">
@ -114,17 +203,80 @@
</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>
% endfor
</div>
% else:
<p>${person} has never been a customer.</p>
% endif
</div><!-- customer-tab -->
<div id="employee-tab">
% if person.employee:
% 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">
${person.employee.id or ''}
${employee.id or ''}
</div>
</div>
</div>
@ -133,7 +285,7 @@
<div class="field-row">
<label>Display Name</label>
<div class="field">
${person.employee.display_name or ''}
${employee.display_name or ''}
</div>
</div>
</div>
@ -142,14 +294,109 @@
<div class="field-row">
<label>Status</label>
<div class="field">
${enum.EMPLOYEE_STATUS[person.employee.status]}
${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
</div><!-- employee-tab -->
<div id="user-tab">
% if person.users:
<p>${person} is associated with ${len(person.users)} user account(s)</p>
<br />
<div id="users-accordion">
% for user in person.users:
<h3>${user.username}</h3>
<div>
<div style="display: flex; justify-content: space-between;">
<div>
<div class="field-wrapper id">
<div class="field-row">
<label>Username</label>
<div class="field">
${user.username}
</div>
</div>
</div>
</div>
<div>
% if request.has_perm('users.view'):
${h.link_to("View User", url('users.view', uuid=user.uuid), class_='button')}
% endif
</div>
</div>
</div>
% endfor
</div>
% else:
<p>${person} has never been a user.</p>
% endif
</div><!-- user-tab -->
</div><!-- profile-tabs -->