PetitTetonMeteor/imports/ui/Sales.html

<template name="Sales">
	<div id="salesMain">
		{{#if Template.subscriptionsReady}}
			<div class="insertSale">
				{{>InsertSale}}
			</div>
			<div class="grid">
				<table class="table table-striped table-hover">
					<thead>
					<tr class="headers">
						<th class="amount noselect nonclickable">Amount</th>
						<th class="product noselect nonclickable">Product</th>
						<th class="price noselect nonclickable">Price</th>
						<th class="measure noselect nonclickable">Measure</th>
						<th class="date noselect nonclickable">Date (Week)</th>
						<th class="venue noselect nonclickable">Venue</th>
						<th class="actions noselect nonclickable">Actions</th>
					</tr>
					<tr class="footers">
						<th>{{>SaleSearch columnName='amount' width='90%'}}</th>
						<th>{{>SaleSearch columnName='productId' collectionQueryColumnName='name' collection='Products' collectionResultColumnName='_id' width='90%'}}</th>
						<th>{{>SaleSearch columnName='price' width='90%'}}</th>
						<th>{{>SaleSearch columnName='measureId' collectionQueryColumnName='name' collection='Measures' collectionResultColumnName='_id' width='90%'}}</th>
						<th></th>
						<th>{{>SaleSearch columnName='venueId' collectionQueryColumnName='name' collection='Venues' collectionResultColumnName='_id' width='90%'}}</th>
						<th></th>
					</tr>
					</thead>
					<tbody>
					{{#each sales}}
						{{> Sale}}
					{{/each}}
					</tbody>
				</table>
			</div>
			<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>
		{{else}}
		{{/if}}
	</div>
</template>

<template name="Sale">
	<tr>
		<td class="tdLarge noselect nonclickable center">{{amount}}</td>
		<td class="tdLarge noselect nonclickable left">{{productName productId}}</td>
		<td class="tdLarge noselect nonclickable left">{{formatPrice price}}{{#if showTotalPrice amount}} ({{formatTotalPrice price amount}}){{/if}}</td>
		<td class="tdLarge noselect nonclickable left">{{measureName measureId}}</td>
		<td class="tdLarge noselect nonclickable left">{{formatDate date}}</td>
		<td class="tdLarge noselect nonclickable left">{{venueName venueId}}</td>
		<td class="tdLarge noselect left"><i class="fa fa-times-circle fa-lg saleRemove clickable" 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="InsertSale">
	<form 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 type="date" class="form-control" name="date" data-schema-key='date' required>
				</div>
				<div class="form-group">
					<label class='control-label'>Product</label>
					<input name="product" class="form-control" type="text" required/>
				</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>
</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>