PetitTetonMeteor/imports/ui/SalesSheetEditor.html

<!-- ******** Sheet Editor - Edit a sales sheet structure (has two sub-parts: product selector, and configuration) ********* -->

<template name="SalesSheetEditor">
	<div class="salesSheetEditorControls vscFixed">
		<ul class="tabRow"><li class="productSelection {{productSelectionSelected}}">Selection</li><li class="sheetConfiguration {{sheetConfigurationSelected}}">Configuration</li></ul>
	</div>
	{{> Template.dynamic template=salesSheetEditorForm data=salesSheetEditorData}}
</template>

<!-- ******** The Sheet Editor's Product Selector ********* -->

<template name="SalesSheetEditorProductSelection">
	<div class="tableControls vscFixed">
		<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 style="margin-bottom: 6px"><label>Filter </label><input class="form-control" type="text" name="productFilter" autocomplete="off"/></div>
		<i class="fa fa-times-circle clickable noselect clearFilter" style="margin-bottom: 5px" aria-hidden="true"></i>
	</div>
	<div class="selectionProductsListing columnContainer">
		{{#each products}}
			{{>SalesSheetEditorProductSelectionRow}}
		{{/each}}
	</div>
</template>

<template name="SalesSheetEditorProductSelectionRow">
	<div class="selectionProduct {{#if sheetProduct}}selected{{/if}} columnContent">
		<span class="include clickable">
			{{#if sheetProduct}}
				<i class="fa fa-check-circle" aria-hidden="true"></i>
			{{else}}
				<i class="fa fa-circle-o" aria-hidden="true"></i>
			{{/if}}
			<span class="productName noselect {{#if hidden}}hidden{{/if}} {{#if deactivated}}deactivated{{/if}}">{{name}}</span>
		</span>
		{{#if showAlternateName}}
			<div class="includeAs">&nbsp;&nbsp;as "{{sheetProductName}}"</div>
		{{/if}}
	</div>
</template>

<!-- ******** The Sheet Editor's Configuration ********* -->
<!-- The overall Sheet Configuration Editor.  Contains multiple rows in columns, one row for each PRODUCT or HEADER. -->
<template name="SalesSheetEditorConfiguration">
	<div class="vscFixed tableControls">
		<div class="heading columnContent noselect">
			<div class="name clickable" title="Drag to the list to create a new heading.">New Heading</div>
			<div class="nameEditor"><input name="name" tabindex="1" value="New Heading"/> <i class="fa fa-check-circle accept" aria-hidden="true"></i> <i class="fa fa-times-circle reject" aria-hidden="true"></i></div>
		</div>
		<span class="controlLabel" title="Show/Hide the measures available for each product.">Show Measures</span>
		<div class="toggleShowHidden checkbox checkbox-slider--b-flat" title="Show/Hide the measures available for each product.">
			<label>
				<input type="checkbox" name="showMeasures"><span></span>
			</label>
		</div>
	</div>
	<div class="configurationProductsListing columnContainer">
		{{#each products}}
			{{>SalesSheetEditorConfigurationRow}}
		{{/each}}
	</div>
</template>

<!-- A single row of the Sheet Configuration Editor (allows reordering, addition of headers, sorting, and renaming of sheet products). -->
<template name="SalesSheetEditorConfigurationRow">
	{{#if isProduct}}  {{! PRODUCT }}
	<div class="product columnContent noselect" data-model="{{productId}}">
		<div class="name clickable"></div>
		<div class="nameEditor"><input class="form-control" name="name" type="text" tabindex="1" value="{{name}}"/> <i class="fa fa-check-circle accept" aria-hidden="true"></i> <i class="fa fa-times-circle reject" aria-hidden="true"></i></div>
		{{#if showMeasures}}
			<div class="measures">
				{{#each measureId in measures}}
					<span class="measureButton button {{#if isSelected measureId}}selected{{/if}}" data-model="{{measureId}}">{{measureName measureId}}</span>
				{{/each}}
			</div>
		{{/if}}
	</div>
	{{else}}  {{! HEADING }}
	<div class="heading columnContent noselect">
		<div class="headingNameRow"><span class="name clickable"></span><span class="sort clickable noselect"><i class="fa fa-arrow-down" aria-hidden="true"></i> sort <i class="fa fa-arrow-up" aria-hidden="true"></i></span></div>
		<div class="nameEditor"><input class="form-control" name="name" type="text" tabindex="1" value="{{name}}"/> <i class="fa fa-check-circle accept" aria-hidden="true"></i> <i class="fa fa-times-circle reject" aria-hidden="true"></i></div>
	</div>
	{{/if}}
</template>