public/html/callOuts-list.html
<div class="modal" role="dialog" aria-label="Call Out List View">
<div class="modal-background"></div>
<div class="modal-card" style="width: 1000px">
<div class="modal-card-head">
<h2 class="modal-card-title">
Call Out List 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 is-hidden-print">
<div class="menu" style="position: sticky; top: 0">
<p class="menu-label">Call Out List</p>
<ul class="menu-list">
<li>
<a href="#tab--callOuts-details">
<span class="icon">
<i class="fas fa-info-circle" aria-hidden="true"></i>
</span>
<span>List Details</span>
</a>
</li>
<li>
<a class="is-active" href="#tab--callOuts-members">
<span class="icon">
<i class="fas fa-hard-hat" aria-hidden="true"></i>
</span>
<span>Members</span>
</a>
</li>
<li>
<a href="#tab--callOuts-reports">
<span class="icon">
<i class="fas fa-file" aria-hidden="true"></i>
</span>
<span>Reports</span>
</a>
</li>
</ul>
</div>
</div>
<div class="column">
<div class="tabs-container" style="min-height:calc(100vh - 220px)">
<article class="is-hidden" id="tab--callOuts-details">
<form id="form--callOutListEdit">
<input
id="callOutListEdit--listId"
name="listId"
type="hidden"
/>
<fieldset disabled>
<div class="field">
<label class="label" for="callOutListEdit--listName"
>Call Out List Name</label
>
<div class="control has-icons-right">
<input
class="input"
id="callOutListEdit--listName"
name="listName"
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 class="field">
<label class="label" for="callOutListEdit--listDescription"
>List Description</label
>
<div class="control">
<textarea
class="textarea"
id="callOutListEdit--listDescription"
name="listDescription"
maxlength="500"
></textarea>
</div>
</div>
<div class="columns">
<div class="column">
<div class="field">
<label
class="label"
for="callOutListEdit--allowSelfSignUp"
>Self Sign Up</label
>
<div class="control">
<div class="select is-fullwidth">
<select
id="callOutListEdit--allowSelfSignUp"
name="allowSelfSignUp"
>
<option value="0">Not Allowed</option>
<option value="1">Self Sign Up Allowed</option>
</select>
</div>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label
class="label"
for="callOutListEdit--selfSignUpKey"
>Self Sign Up Key</label
>
<div class="control">
<input
class="input"
id="callOutListEdit--selfSignUpKey"
name="selfSignUpKey"
type="text"
maxlength="10"
pattern="^\w*$"
/>
</div>
</div>
</div>
</div>
<div class="columns">
<div class="column">
<div class="field">
<label
class="label"
for="callOutListEdit--eligibilityFunction"
>Eligibility Function</label
>
<div class="control">
<div class="select is-fullwidth">
<select
id="callOutListEdit--eligibilityFunction"
name="eligibilityFunction"
>
<option value="">(All Employees Eligible)</option>
</select>
</div>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label
class="label"
for="callOutListEdit--sortKeyFunction"
>Sort Key Function</label
>
<div class="control">
<div class="select is-fullwidth">
<select
id="callOutListEdit--sortKeyFunction"
name="sortKeyFunction"
>
<option value="">(Default Sort)</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="field">
<label
class="label"
for="callOutListEdit--employeePropertyName"
>
Employee Property Name
</label>
<div class="control">
<input
class="input"
id="callOutListEdit--employeePropertyName"
name="employeePropertyName"
type="text"
maxlength="100"
list="datalist--employeePropertyNames"
/>
</div>
</div>
<p
class="has-text-right is-hidden"
id="callOutListEdit--updateButtons"
>
<button class="button is-success" type="submit">
<span class="icon is-small">
<i class="fas fa-save" aria-hidden="true"></i>
</span>
<span>Update Call Out List</span>
</button>
</p>
</fieldset>
<p
class="has-text-right is-hidden is-hidden-print"
id="callOutListEdit--unlockButtons"
>
<button class="button is-primary" data-cy="unlock" type="button">
<span class="icon is-small">
<i class="fas fa-pencil-alt" aria-hidden="true"></i>
</span>
<span>Switch To Edit Mode</span>
</button>
</p>
</form>
</article>
<article id="tab--callOuts-members">
<div class="tabs is-boxed is-size-7 is-size-6-tablet">
<ul role="presentation">
<li>
<a class="is-hidden" href="#tab--callOutMembers-manage">
<span class="icon is-small">
<i class="fas fa-pencil-alt" aria-hidden="true"></i>
</span>
<span>Manage Members</span>
</a>
</li>
<li class="is-active">
<a href="#tab--callOutMembers-current"> Current Members </a>
</li>
</ul>
</div>
<div class="tabs-container">
<div class="is-hidden" id="tab--callOutMembers-manage">
<div class="columns is-mobile">
<div class="column">
<h2 class="title is-4">Available Employees</h2>
<div class="field">
<div class="control has-icons-left">
<input
class="input"
id="filter--callOutListAvailableEmployees"
type="text"
placeholder="Filter available employees"
aria-label="Filter available employees"
/>
<span class="icon is-small is-left">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</div>
</div>
<div id="container--callOutListAvailableEmployees">
<div class="has-text-centered">
<i
class="fas fa-4x fa-spin fa-cog has-text-grey"
aria-hidden="true"
></i>
</div>
</div>
</div>
<div class="column">
<h2 class="title is-4">Current Members</h2>
<div id="container--callOutListCurrentMembers">
<div class="has-text-centered">
<i
class="fas fa-4x fa-spin fa-cog has-text-grey"
aria-hidden="true"
></i>
</div>
</div>
</div>
</div>
</div>
<div id="tab--callOutMembers-current">
<div id="container--callOutListMembers">
<div class="has-text-centered">
<i
class="fas fa-4x fa-spin fa-cog has-text-grey"
aria-hidden="true"
></i
><br />
<em>Loading members</em>
</div>
</div>
</div>
</div>
</article>
<article class="is-hidden" id="tab--callOuts-reports">
<div class="panel">
<a
class="panel-block"
id="reportingLink--callOutListReport"
href="#"
target="_blank"
>
<div class="columns is-mobile">
<div class="column is-narrow">
<i class="fas fa-2x fa-file" aria-hidden="true"></i>
</div>
<div class="column">Print Friendly Call Out List</div>
</div>
</a>
</div>
<h2 class="title is-5">CSV Exports</h2>
<div class="panel">
<a
class="panel-block"
id="reportingLink--callOutListMembersCSV"
href="#"
target="_blank"
download
>
<div class="columns is-mobile">
<div class="column is-narrow">
<i class="fas fa-2x fa-file-csv" aria-hidden="true"></i>
</div>
<div class="column">Call Out List Members</div>
</div>
</a>
<a
class="panel-block"
id="reportingLink--callOutRecordsCSV"
href="#"
target="_blank"
download
>
<div class="columns is-mobile">
<div class="column is-narrow">
<i class="fas fa-2x fa-file-csv" aria-hidden="true"></i>
</div>
<div class="column">Call Out Record Recent History</div>
</div>
</a>
</div>
</article>
</div>
</div>
</div>
</section>
<div class="modal-card-foot is-justify-content-right is-hidden-print">
<a class="button" id="reportingLink--callOutListReport2" href="#" target="_blank">
<span class="icon is-small">
<i class="fas fa-print" aria-hidden="true"></i>
</span>
<span>Print List</span>
</a>
<div class="dropdown is-right is-up is-hidden">
<div class="dropdown-trigger">
<button class="button" 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-call-out-list" href="#">
<span class="icon is-small">
<i
class="fas fa-trash-alt has-text-danger"
aria-hidden="true"
></i>
</span>
<span>Delete Call Out List</span>
</a>
</div>
</div>
</div>
<button class="button is-close-modal-button ml-2" type="button">
Close
</button>
</div>
</div>
</div>