PetitTetonMeteor/imports/ui/Sales.html

<template name="Sales">
	<div id="salesMain">
		{{#if Template.subscriptionsReady}}
			<div class="controls">
				<div class="pageControls">
					<input type="button" class="showDuplicates btn btn-info" style="margin-right: 30px" value="Duplicate Analysis"/>
				</div>
				<div class="tableControls">
					<select name="sortSelect" class="form-control" style="width: auto; display: inline;">
						<option value="date" selected>Sale Date</option>
						<option value="createdAt">Data Entry Date</option>
					</select>
					<div class="pagination">
						<span class="prevButton noselect {{#if disablePrev}}disabled{{/if}}"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Prev</span>
						<span class="nextButton noselect {{#if disableNext}}disabled{{/if}}">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></span>
					</div>
				</div>
			</div>
			<div class="separatedTableHeader">
				<table class="table table-striped table-hover">
					<thead>
					<tr>
						<th class="amount noselect nonclickable">Amount {{>SaleSearch columnName='amount' width='90%'}}</th>
						<th class="product noselect nonclickable">Product <br/>{{>SaleSearch columnName='productId' collectionQueryColumnName='name' collection='Products' collectionResultColumnName='_id' width='90%'}}</th>
						<th class="price noselect nonclickable">Price {{>SaleSearch columnName='price' width='90%'}}</th>
						<th class="measure noselect nonclickable">Measure {{>SaleSearch columnName='measureId' collectionQueryColumnName='name' collection='Measures' collectionResultColumnName='_id' width='90%'}}</th>
						<th class="saleDate noselect nonclickable">Date (Week) {{>DateRangeSearch columnName='date' width='90%'}}</th>
						<th class="createdDate noselect nonclickable">Created On</th>
						<th class="venue noselect nonclickable">Venue {{>SaleSearch columnName='venueId' collectionQueryColumnName='name' collection='Venues' collectionResultColumnName='_id' width='90%'}}</th>
						<th class="actions noselect nonclickable">Actions <span class="newSaleButton btn btn-success" title="Create Sale"><i class="fa fa-plus-circle" aria-hidden="true"></i><i class="fa fa-times-circle" aria-hidden="true"></i></span> <i class="fa fa-commenting fa-lg showOnlyComments clickable" title="Show Commented Sales" aria-hidden="true"></i></th>
					</tr>
					</thead>
				</table>
			</div>
			<div class="listRow">
				<div class="listCell">
					<div class="tableContainer mCustomScrollbar" data-mcs-theme="dark">
						<table class="table table-striped table-hover">
							<tbody>
							{{#if displayNewSale}}
								{{> InsertSale}}
							{{/if}}
							{{#each sales}}
								{{#if editing}}
									{{> SaleEditor}}
								{{else}}
									{{> Sale}}
								{{/if}}
							{{/each}}
							</tbody>
						</table>
					</div>
				</div>
			</div>
		{{else}}
		{{/if}}
	</div>
</template>

<template name="Sale">
	<tr>
		<td class="amount tdLarge noselect nonclickable center">{{amount}}</td>
		<td class="product tdLarge noselect nonclickable left">{{productName productId}}</td>
		<td class="price tdLarge noselect nonclickable left">{{formatPrice price}}{{#if showTotalPrice amount}} ({{formatTotalPrice price amount}}){{/if}}</td>
		<td class="measure tdLarge noselect nonclickable left">{{measureName measureId}}</td>
		<td class="saleDate tdLarge noselect nonclickable left">{{formatDateAndWeek date weekOfYear}}</td>
		<td class="createdDate tdLarge noselect nonclickable left">{{formatDateTime createdAt}}</td>
		<td class="venue tdLarge noselect nonclickable left">{{venueName venueId}}</td>
		<td class="actions tdLarge noselect left"><i class="fa fa-pencil-square-o fa-lg actionEdit noselect clickable" title="Edit" aria-hidden="true"></i> <i class="fa fa-commenting fa-lg editComment noselect clickable {{commentClass}}" aria-hidden="true"></i> <i class="fa fa-times-circle fa-lg saleRemove noselect clickable" aria-hidden="true"></i></td>
	</tr>
</template>

<template name="SaleEditor">
	<tr>
		<td colspan="7" class="saleEditor">
			<form name="editSaleForm">
				<div class="grid">
					<div class="col-6-12">
						<div class="editorDiv heading">{{productName}} - {{measureName measureId}}</div>
						<div class="editorDiv"><label>Date</label><input name="date" class="form-control" type="date" data-schema-key='date' required></div>
						<div class="editorDiv"><label>Venue</label><input name="venue" class="form-control" type="text" required/></div>
					</div>
					<div class="col-6-12">
						<div class="editorDiv"><label>Amount</label><input type="number" class="form-control amount" name="amount" min="0" step="1" data-schema-key='amount' value="{{amount}}" required></div>
						<div class="editorDiv"><label>Price</label><div class="priceContainer"><input type="number" class="form-control price" name="price" min="0" step="0.01" data-schema-key='currency' value="{{price}}" required><div class="priceButtons"><i class="fa fa-cogs setDefaultPrice noselect clickable" title="Calculate Default Price" aria-hidden="true"></i></div></div></div>
						<div class="editorDiv"><label>Total</label><input type="number" class="form-control total" name="total" data-schema-key='currency' value="{{total}}" tabindex="-1" readonly></div>
					</div>
				</div>
			</form>
		</td>
		<td class="center productEditorTd noselect"><i class="editorApply fa fa-check-square-o fa-lg noselect clickable" title="Save" aria-hidden="true"></i>&nbsp;/&nbsp;<i class="editorCancel fa fa-times-circle fa-lg noselect clickable" title="Cancel" aria-hidden="true"></i></td>
	</tr>
</template>

<template name="SaleSearch">
	<input type="text" class="searchInput" placeholder="Filter..." value="{{searchValue}}" style="padding-right: 10px; width: {{width}}"/>
</template>

<template name="DateRangeSearch">
	<div style="padding-right: 10px; width: {{width}};"><input type="date" class="searchDateStartInput" value="{{startDate}}" data-schema-key='date' required> - <input type="date" class="searchDateEndInput" value="{{endDate}}" data-schema-key='date' required></div>
</template>

<template name="InsertSale">
	<tr>
		<td colspan="8">
			<form name="insertSaleForm" class="insertSaleForm" autocomplete="off">
				<div class="grid">
					<div class="col-4-12">
						<div class="formGroupHeading">New Sale</div>
						<div class="form-group">
							<label class='control-label'>Date</label>
							<input name="date" class="form-control" type="date" data-schema-key='date' required>
						</div>
						<div class="form-group">
							<label class='control-label'>Product</label>
							<div class="form-group-line"><input name="product" class="form-control" type="text" required/><span class="spacer"></span><span class='speechBtn'><a class="speechLink"><i class="fa fa-microphone" aria-hidden="true"></i></a></span></div>
						</div>
						<div class="form-group">
							<label class='control-label'>Venue</label>
							<input name="venue" class="form-control" type="text" required/>
						</div>
					</div>
					{{#each productMeasures}}
						{{>InsertSaleMeasure this}}
					{{/each}}
					<div class="col-1-1">
						<div class="form-group">
							<input type="submit" class="btn btn-success" value="Save Sale">
						</div>
					</div>
				</div>
			</form>
		</td>
	</tr>
</template>

<template name="InsertSaleMeasure">
	<div class="col-2-12 insertSaleMeasure">
		<div class="formGroupHeading">{{name}}</div>
		<input type="hidden" class="measureId" value="{{this._id}}">
		<div class="form-group">
			<label class='control-label'>Amount</label>
			<input type="number" class="form-control amount" name="amount" min="0" data-schema-key='amount' value="{{amount}}" required>
		</div>
		<div class="form-group">
			<label class='control-label'>Price</label>
			<input type="number" class="form-control price" name="price" min="0" data-schema-key='currency' value="{{price}}" required>
		</div>
		<div class="form-group">
			<label class='control-label'>Total</label>
			<input type="number" class="form-control total" name="total" data-schema-key='currency' value="{{total}}" tabindex="-1" readonly>
		</div>
	</div>
</template>