public/html/employeeAdmin-employee.html
<div class="modal" role="dialog" aria-label="Employee View">
<div class="modal-background"></div>
<div class="modal-card" style="width: 1000px">
<div class="modal-card-head">
<h2 class="modal-card-title">Employee View</h2>
<button
class="delete is-close-modal-button"
aria-label="close"
type="button"
></button>
</div>
<section class="modal-card-body">
<div class="columns">
<div class="column is-3">
<div class="menu" style="position:sticky;top:0">
<ul class="menu-list">
<li>
<a class="is-active" href="#tab--employeeDetails">
<span class="icon">
<i class="fas fa-info-circle" aria-hidden="true"></i>
</span>
<span>Employee Details</span>
</a>
</li>
<li>
<a href="#tab--employeeProperties">
<span class="icon">
<i class="fas fa-list-alt" aria-hidden="true"></i>
</span>
<span>Properties</span>
</a>
</li>
</ul>
</div>
</div>
<div class="column">
<div class="tabs-container" style="min-height:100vh">
<article id="tab--employeeDetails">
<form id="form--employeeEdit">
<div class="columns">
<div class="column">
<input
id="employeeEdit--employeeNumber"
name="employeeNumber"
type="hidden"
/>
<div>
<strong>Employee Number</strong><br />
<span id="employeeEdit--employeeNumberSpan">-</span>
</div>
</div>
<div class="column">
<div class="field">
<label class="label" for="employeeEdit--isActive"
>Active Status</label
>
<div class="control has-icons-left">
<div class="select is-fullwidth">
<select
id="employeeEdit--isActive"
name="isActive"
required
>
<option value="1">Active and Available</option>
<option value="0">Inactive</option>
</select>
</div>
<span class="icon is-small is-left">
<i class="fas fa-lightbulb" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
<p class="has-text-right">
<button class="button is-success" type="submit">
<span class="icon is-small">
<i class="fas fa-save" aria-hidden="true"></i>
</span>
<span>Update Employee Details</span>
</button>
</p>
<hr />
<div>
<div class="columns">
<div class="column">
<h3 class="title is-4">Main Details</h3>
</div>
<div class="column is-narrow">
<div class="control has-icons-left">
<div class="select">
<select
id="employeeEdit--isSynced"
name="isSynced"
aria-label="Sync Details"
required
>
<option value="1">Details Synced</option>
<option value="0">Not Synced</option>
</select>
</div>
<span class="icon is-small is-left">
<i class="fas fa-sync" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<div class="columns">
<div class="column">
<div class="field">
<label
class="label"
for="employeeEdit--employeeSurname"
>
Employee Surname
</label>
<div class="control has-icons-right">
<input
class="input"
id="employeeEdit--employeeSurname"
name="employeeSurname"
type="text"
maxlength="100"
required
/>
<span class="icon is-small is-right">
<i class="fas fa-asterisk" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label
class="label"
for="employeeEdit--employeeGivenName"
>
Employee Given Name
</label>
<div class="control has-icons-right">
<input
class="input"
id="employeeEdit--employeeGivenName"
name="employeeGivenName"
type="text"
maxlength="100"
required
/>
<span class="icon is-small is-right">
<i class="fas fa-asterisk" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
<div class="columns">
<div class="column is-7">
<div class="field">
<label class="label" for="employeeEdit--jobTitle">
Job Title
</label>
<div class="control">
<input
class="input"
id="employeeEdit--jobTitle"
name="jobTitle"
type="text"
maxlength="100"
/>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label" for="employeeEdit--userName">
User Name
</label>
<div class="control">
<input
class="input"
id="employeeEdit--userName"
name="userName"
type="text"
maxlength="20"
/>
</div>
</div>
</div>
</div>
<div class="columns">
<div class="column is-7">
<div class="field">
<label class="label" for="employeeEdit--department">
Department
</label>
<div class="control">
<input
class="input"
id="employeeEdit--department"
name="department"
type="text"
maxlength="100"
/>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label
class="label"
for="employeeEdit--seniorityDateTime"
>
Seniority Date
</label>
<div class="control">
<input
class="input"
id="employeeEdit--seniorityDateTime"
name="seniorityDateTime"
type="date"
/>
</div>
</div>
</div>
</div>
<p class="has-text-right">
<button class="button is-success" type="submit">
<span class="icon is-small">
<i class="fas fa-save" aria-hidden="true"></i>
</span>
<span>Update Employee Details</span>
</button>
</p>
</div>
<hr />
<div>
<div class="columns">
<div class="column">
<h3 class="title is-4">Contact Information</h3>
</div>
<div class="column is-narrow">
<div class="control has-icons-left">
<div class="select">
<select
id="employeeEdit--syncContacts"
name="syncContacts"
aria-label="Sync Contacts"
required
>
<option value="1">Contacts Synced</option>
<option value="0">Not Synced</option>
</select>
</div>
<span class="icon is-small is-left">
<i class="fas fa-sync" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<div class="columns">
<div class="column">
<div class="field">
<label class="label" for="employeeEdit--workContact1"
>Work Contact 1</label
>
<div class="control has-icons-left">
<input
class="input"
id="employeeEdit--workContact1"
name="workContact1"
type="tel"
maxlength="100"
/>
<span class="icon is-left">
<i class="fas fa-briefcase" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<div class="column is-narrow is-align-self-flex-end">
<button class="button is-light is-primary is-fullwidth is-swap-button">
<span class="icon is-hidden-mobile"><i class="fas fa-exchange-alt" aria-hidden="true"></i></span>
<span>Swap <span class="is-hidden-tablet">Work Contacts</span></span>
</button>
</div>
<div class="column">
<div class="field">
<label class="label" for="employeeEdit--workContact2"
>Work Contact 2</label
>
<div class="control has-icons-left">
<input
class="input"
id="employeeEdit--workContact2"
name="workContact2"
type="tel"
maxlength="100"
/>
<span class="icon is-left">
<i class="fas fa-briefcase" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
<div class="message is-info is-small is-self-service-message is-hidden">
<p class="message-body">
Note that employees are able to log into the Employee Self Service portal
using the last four digits of one of their home phone numbers.
</p>
</div>
<div class="columns">
<div class="column">
<div class="field">
<label class="label" for="employeeEdit--homeContact1"
>Home Contact 1</label
>
<div class="control has-icons-left">
<input
class="input"
id="employeeEdit--homeContact1"
name="homeContact1"
type="tel"
maxlength="100"
/>
<span class="icon is-left">
<i class="fas fa-home" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<div class="column is-narrow is-align-self-flex-end">
<button class="button is-light is-primary is-fullwidth is-swap-button">
<span class="icon is-hidden-mobile"><i class="fas fa-exchange-alt" aria-hidden="true"></i></span>
<span>Swap <span class="is-hidden-tablet">Home Contacts</span></span>
</button>
</div>
<div class="column">
<div class="field">
<label class="label" for="employeeEdit--homeContact2"
>Home Contact 2</label
>
<div class="control has-icons-left">
<input
class="input"
id="employeeEdit--homeContact2"
name="homeContact2"
type="tel"
maxlength="100"
/>
<span class="icon is-left">
<i class="fas fa-home" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
<p class="has-text-right">
<button class="button is-success" type="submit">
<span class="icon is-small">
<i class="fas fa-save" aria-hidden="true"></i>
</span>
<span>Update Employee Details</span>
</button>
</p>
</div>
</form>
</article>
<article class="is-hidden" id="tab--employeeProperties">
<div class="tabs is-boxed">
<ul role="presentation">
<li>
<a href="#employeePropertyTab--add">
<span class="icon is-small">
<i class="fas fa-plus" aria-hidden="true"></i>
</span>
<span>Add New Property</span>
</a>
</li>
<li class="is-active"><a href="#employeePropertyTab--current">Current Properties</a></li>
</ul>
</div>
<div class="tabs-container">
<div class="is-hidden" id="employeePropertyTab--add">
<form id="form--employeePropertyAdd">
<input
id="employeePropertyAdd--employeeNumber"
name="employeeNumber"
type="hidden"
/>
<input id="employeePropertyAdd--isSynced" name="isSynced" type="hidden" value="0" />
<div class="field">
<label class="label" for="employeePropertyAdd--propertyName"
>New Property Name</label
>
<div class="control has-icons-right">
<input
class="input"
id="employeePropertyAdd--propertyName"
name="propertyName"
type="text"
maxlength="100"
list="datalist--employeePropertyNames"
required
/>
<span class="icon is-small is-right">
<i class="fas fa-asterisk" aria-hidden="true"></i>
</span>
</div>
</div>
<div class="field">
<label
class="label"
for="employeePropertyAdd--propertyValue"
>Property Value</label
>
<div class="control">
<input
class="input"
id="employeePropertyAdd--propertyValue"
name="propertyValue"
type="text"
maxlength="500"
/>
</div>
</div>
<p class="has-text-right">
<button class="button is-success" type="submit">
<span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>
<span>Add Property</span>
</button>
</p>
</form>
</div>
<div id="employeePropertyTab--current">
<table class="table is-fullwidth is-striped is-hoverable is-fade-hoverable">
<thead class="is-size-7">
<tr>
<th>Property Name</th>
<th>Property Value</th>
<th>Synced</th>
<th class="has-width-1">
<span class="is-sr-only">Options</span>
</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
<div class="modal-card-foot is-justify-content-right">
<div class="dropdown is-right is-up mr-2">
<div class="dropdown-trigger">
<button class="button" data-cy="options" type="button">
<span class="icon is-small">
<i class="fas fa-cog" aria-hidden="true"></i>
</span>
<span>Options</span>
<span class="icon is-small">
<i class="fas fa-angle-up" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a class="dropdown-item is-delete-employee" data-cy="delete-employee" href="#">
<span class="icon is-small">
<i class="fas fa-trash-alt has-text-danger" aria-hidden="true"></i>
</span>
<span>Delete Employee</span>
</a>
</div>
</div>
</div>
<button class="button is-close-modal-button" data-cy="close" type="button">Close</button>
</div>
</div>
</div>