PetitTetonMeteor/imports/ui/Production.html

<template name="Production">
	<div id="production">
		{{#if Template.subscriptionsReady}}
			<div class="tableControls">
				<div class="contentControls">
					<a class="loadMoreLink {{#if disableLoadMore}}disabled{{/if}}" href="javascript:">Load More...</a>
				</div>
			</div>
			<div class="separatedTableHeader">
				<table class="table table-striped table-hover">
					<thead>
					<tr>
						<th class="hasLabels"></th>
						<th class="name">Name {{>BatchSearch columnName='productId' collectionQueryColumnName='name' collection='Products' collectionResultColumnName='_id' width="90%"}}</th>
						<th class="date">Date {{>BatchDateRangeSearch columnName='date' width='90%'}}</th>
						<th class="amount">Amount</th>
						<th class="cook">Cook {{>BatchSearch columnName='cook' collectionQueryColumnName='name' collection='Workers' collectionResultColumnName='_id'}}</th>
						<th class="canner">Canner {{>BatchSearch columnName='canner' collectionQueryColumnName='name' collection='Workers' collectionResultColumnName='_id'}}</th>
						<th class="comment">Comment</th>
						<th class="actions">Actions <span class="newButton btn btn-success"><i class="fa fa-plus-circle" aria-hidden="true"></i><i class="fa fa-times-circle" aria-hidden="true"></i></span> <span class="showDeletedButton btn btn-success {{showDeletedSelected}}"><i class="fa fa-trash" aria-hidden="true"></i></span></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 displayNew}}
								{{> BatchNew}}
							{{/if}}
							{{#each batches}}
								{{> Batch}}
							{{/each}}
							</tbody>
						</table>
					</div>
				</div>
			</div>
		{{else}}
		{{/if}}
	</div>
</template>

<template name="Batch">
	<tr class="{{getRowClass}}">
		{{#if editing}}
			{{> BatchEditor}}
		{{else}}
			<td class="hasLabels noselect left"><i class="fa fa-print clickable {{hasLabelsClass}}" aria-hidden="true"></i></td>
			<td class="name noselect nonclickable left">{{name}}</td>
			<td class="date noselect nonclickable left">{{date}} ({{jdate}})</td>
			<td class="amount noselect nonclickable left">{{amount}}</td>
			<td class="cook noselect nonclickable left">{{cook}}</td>
			<td class="canner noselect nonclickable left">{{canner}}</td>
			<td class="comment noselect nonclickable left">{{comment}}</td>
			<td class="actions center"><i class="actionEdit fa fa-pencil-square-o fa-lg noselect clickable" title="Edit" aria-hidden="true"></i>&nbsp;/&nbsp;{{#if isDeleted}}<i class="actionUndelete fa fa-check-circle fa-lg noselect clickable" title="Delete" aria-hidden="true"></i>{{else}}<i class="actionDelete fa fa-times-circle fa-lg noselect clickable" title="Delete" aria-hidden="true"></i>{{/if}}</td>
		{{/if}}
	</tr>
</template>

<template name="BatchEditor">
	<td colspan="7" class="editorTd">
		<form name="editorForm" class="insertForm" autocomplete="off">
			<div class="grid">
				<div class="col-4-12">
					<div class="editorDiv heading">{{name}}</div>
					<div class="editorDiv heading">{{date}}</div>
					<div class="editorDiv heading">Cook: {{cook}} / Canner: {{canner}}</div>
				</div>
				<div class="col-2-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>
				<div class="col-6-12">
					<div class="editorDiv"><label for="batchEditorComment">Comment:</label><textarea id="batchEditorComment" class="comment" rows="4" cols="50" style="width: 100%; height: 80px">{{comment}}</textarea></div>
				</div>
			</div>
		</form>
	</td>
	<td class="center editorTd"><i class="editorApply fa fa-check-square-o fa-lg noselect clickable" aria-hidden="true"></i>&nbsp;/&nbsp;<i class="editorCancel fa fa-times-circle fa-lg noselect clickable" aria-hidden="true"></i></td>
</template>

<template name="BatchNew">
	<td colspan="7" class="editorTd">
		<form name="insertForm" class="insertForm" autocomplete="off">
			<div class="grid">
				<div class="col-4-12">
					<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'>Date</label>
						<input name="date" class="form-control" type="date" data-schema-key='date' value="{{today}}" required>
					</div>
				</div>
				<div class="col-4-12">
					<div class="form-group">
						<label class='control-label'>Cook</label>
						<input name="cook" class="form-control" type="text" required/>
					</div>
					<div class="form-group">
						<label class='control-label'>Canner</label>
						<input name="canner" class="form-control" type="text" required/>
					</div>
				</div>
				{{#each productMeasures}}
					{{>InsertBatchMeasure this}}
				{{/each}}
			</div>
			<div class="editorDiv" style="width: 100%; height: 150px"><label for="batchNewComment">Comment:</label><textarea id="batchNewComment" class="comment" rows="4" cols="50" style="width: 100%; height: 120px">{{comment}}</textarea></div>
		</form>
	</td>
	<td class="center editorTd"><i class="editorApply fa fa-check-square-o fa-lg noselect clickable" aria-hidden="true"></i>&nbsp;/&nbsp;<i class="editorCancel fa fa-times-circle fa-lg noselect clickable" aria-hidden="true"></i></td>
</template>

<template name="InsertBatchMeasure">
	<div class="col-2-12 insertMeasure">
		<input type="hidden" class="measureId" value="{{this._id}}">
		<div class="form-group">
			<label class='control-label'>{{name}} Count</label>
			<input type="number" class="form-control amount" name="amount" min="0" data-schema-key='amount' value="{{amount}}" required>
		</div>
	</div>
</template>

<template name="BatchSearch">
	<div class="search">
		<input type="text" class="searchInput" placeholder="Filter..." value="{{searchValue}}"/>
	</div>
</template>

<template name="BatchDateRangeSearch">
	<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>