public/html/contractView.html
<div class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<h3 class="modal-card-title"><span data-customization="contract.alias"></span> View</h3>
<button class="delete is-close-modal-button" aria-label="close" type="button"></button>
</header>
<section class="modal-card-body">
<form id="form--contractEdit">
<fieldset disabled>
<input id="contractEdit--contractId" name="contractId" type="hidden" />
<div class="field">
<label class="label" for="contractEdit--contractTitle"><span data-customization="contract.alias"></span> Title</label>
<div class="control has-icons-right">
<input class="input" id="contractEdit--contractTitle" name="contractTitle" type="text" maxlength="200" required />
<span class="icon is-small is-right">
<i class="fas fa-asterisk" aria-hidden="true"></i>
</span>
</div>
</div>
<div class="field" id="field--contractEdit--contractCategory">
<label class="label" for="contractEdit--contractCategory"><span data-customization="contractCategory.alias"></span></label>
<div class="control">
<input class="input" id="contractEdit--contractCategory" name="contractCategory" type="text" maxlength="100" />
</div>
</div>
<div class="columns">
<div class="column">
<div class="field">
<label class="label" for="contractEdit--contractParty"><span data-customization="contractParty.alias"></span></label>
<div class="control">
<input class="input" id="contractEdit--contractParty" name="contractParty" type="text" maxlength="200" />
</div>
</div>
</div>
<div class="column is-4">
<div class="field">
<label class="label" for="contractEdit--managingUserName">Managing User</label>
<div class="control is-expanded">
<div class="select is-fullwidth">
<select id="contractEdit--managingUserName" name="managingUserName">
<option value="">(None Selected)</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="field">
<label class="label" for="contractEdit--contractDescription">Description</label>
<div class="control">
<textarea class="textarea" id="contractEdit--contractDescription" name="contractDescription"></textarea>
</div>
</div>
<div class="field is-hidden">
<label class="label" for="contractEdit--privateContractDescription">Private Description</label>
<div class="control">
<textarea class="textarea" id="contractEdit--privateContractDescription" name="privateContractDescription"></textarea>
</div>
<p class="help">Only available to update users.</p>
</div>
<div class="columns">
<div class="column">
<div class="field">
<label class="label" for="contractEdit--startDateString">Start Date</label>
<div class="control has-icons-right">
<input class="input" id="contractEdit--startDateString" name="startDateString" type="date" 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="contractEdit--endDateString">End Date</label>
<div class="control">
<input class="input" id="contractEdit--endDateString" name="endDateString" type="date" />
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label" for="contractEdit--extensionDateString">Extension Date</label>
<div class="control">
<input class="input" id="contractEdit--extensionDateString" name="extensionDateString" type="date" />
</div>
</div>
</div>
</div>
<div class="facheck">
<input id="contractEdit--hasBeenReplaced" name="hasBeenReplaced" type="checkbox" />
<label for="contractEdit--hasBeenReplaced">
<span data-customization="contract.alias"></span> Has Been Replaced
</label>
</div>
</fieldset>
</form>
<div class="mt-4 is-hidden" id="section--contractDocuShare">
<h4 class="title is-4">Related Documents</h4>
<div id="container--contractDocuShare">
<p class="has-text-centered">
<i class="fas fa-4x fa-spinner fa-pulse" aria-hidden="true"></i><br />
Loading Documents from DocuShare...
</p>
</div>
</div>
</section>
<footer class="modal-card-foot is-justify-content-right">
<button class="button is-primary is-hidden" id="button--switchToEditMode" type="button">
<span class="icon"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span>Switch to Edit Mode</span>
</button>
<button class="button is-success is-hidden" type="submit" form="form--contractEdit">
<span class="icon"><i class="fas fa-save" aria-hidden="true"></i></span>
<span>Update <span data-customization="contract.alias"></span></span>
</button>
<div class="dropdown is-up is-right is-hidden mr-2" id="contractEdit--optionsButton">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="contractEdit--optionsDropdown">
<span>Options</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="contractEdit--optionsDropdown" role="menu">
<div class="dropdown-content">
<a class="dropdown-item" id="contractEdit--removeContractButton" href="#">
<span class="icon is-small"><i class="fas fa-trash-alt has-text-danger" aria-hidden="true"></i></span>
<span>Remove <span data-customization="contract.alias"></span></span>
</a>
</div>
</div>
</div>
<button class="button is-close-modal-button" type="button">Close</button>
</footer>
</div>
</div>