PetitTetonMeteor/imports/ui/Products.html

<template name="Products">
	<div id="products">
		{{#if Template.subscriptionsReady}}
			<div class="tableControls">
				<div class="showHidden">
					<span class="controlLabel">Show Hidden</span>
					<div class="toggleShowHidden checkbox checkbox-slider--b-flat">
						<label>
							<input type="checkbox" name="showHidden"><span></span>
						</label>
					</div>
				</div>
				<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="name">Name {{>ProductSearch columnName='name'}}</th>
						<th class="tags">Tags {{>ProductSearch columnName='tags' collectionQueryColumnName='name' collection='ProductTags' collectionResultColumnName='_id'}}</th>
						<th class="aliases">Aliases {{>ProductSearch columnName='aliases'}}</th>
						<th class="measures">Measures {{>ProductSearch columnName='measures' collectionQueryColumnName='name' collection='Measures' collectionResultColumnName='_id'}}</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></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}}
								{{> ProductEditor isNew=true}}
							{{/if}}
							{{#each products}}
								{{> Product}}
							{{/each}}
							</tbody>
						</table>
					</div>
				</div>
			</div>
		{{else}}
		{{/if}}
	</div>
</template>

<template name="Product">
	<tr class="{{getRowClass}}">
		{{#if editing}}
			{{> ProductEditor}}
		{{else}}
			{{#if converting}}
				{{> ConvertProduct}}
			{{else}}
				<td class="name noselect nonclickable left">{{name}}</td>
				<td class="tags noselect nonclickable left">{{tags}}</td>
				<td class="aliases noselect nonclickable left">{{aliases}}</td>
				<td class="measures noselect nonclickable left">{{measures}}</td>
				{{#if hidden}}
					<td class="actions center"><i class="actionEdit fa fa-pencil-square-o fa-lg noselect clickable" title="Edit" aria-hidden="true"></i>&nbsp;/&nbsp;<i class="actionShow fa fa-eye fa-lg noselect clickable" title="Show" aria-hidden="true"></i>&nbsp;/&nbsp;<i class="actionConvert fa fa-exclamation-triangle fa-lg noselect clickable" title="Convert" aria-hidden="true"></i></td>
				{{else}}
					{{#if deactivated}}
						<td class="actions center"><i class="actionEdit fa fa-pencil-square-o fa-lg noselect clickable" title="Edit" aria-hidden="true"></i>&nbsp;/&nbsp;<i class="actionActivate fa fa-toggle-on fa-lg noselect clickable" title="Activate" aria-hidden="true"></i>&nbsp;/&nbsp;<i class="actionHide fa fa-eye-slash fa-lg noselect clickable" title="Hide" aria-hidden="true"></i></td>
					{{else}}
						<td class="actions center"><i class="actionEdit fa fa-pencil-square-o fa-lg noselect clickable" title="Edit" aria-hidden="true"></i>&nbsp;/&nbsp;<i class="actionDeactivate fa fa-times-circle fa-lg noselect clickable" title="Deactivate" aria-hidden="true"></i></td>
					{{/if}}
				{{/if}}
			{{/if}}
		{{/if}}
	</tr>
</template>

<template name="ProductEditor">
	<td colspan="4" class="editorTd">
		<div class="editorDiv"><label>Name:</label><input name="name" class="form-control" type="text" value="{{name}}" autocomplete="off" required></div>
		<div class="editorDiv"><label>Tags:</label>
			<select class="productTagsEditor" multiple="multiple">
				{{#each tags}}
					<option value="{{_id}}" {{tagSelected}}>{{name}}</option>
				{{/each}}
			</select>
		</div>
		<div class="editorDiv"><label>Aliases:</label>
			<select class="productAliasesEditor" multiple="multiple">
				{{#each aliases}}
					<option value="{{this}}" selected>{{this}}</option>
				{{/each}}
			</select>
		</div>
		<div class="editorDiv"><label>Measures:</label>
			<select class="productMeasuresEditor" multiple="multiple">
				{{#each measures}}
					<option value="{{_id}}" {{measureSelected}}>{{name}}</option>
				{{/each}}
			</select>
		</div>
	</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="ConvertProduct">
	<td>{{name}}</td>
	<td colspan="3" class="convertProductTd">
		<label class='control-label'>Alternate Product</label>
		<input name="product" class="form-control" type="text" required/>
		<label><em>Convert sales from this product to an alternate.</em></label>
	</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="ProductSearch">
	<div class="search">
		<input type="text" class="searchInput" placeholder="Filter..." value="{{searchValue}}"/>
	</div>
</template>