Skip to content

Instantly share code, notes, and snippets.

@ChrisMoney

ChrisMoney/knockout-view.cshtml

Created November 30, 2017 23:25
Show Gist options
  • Save ChrisMoney/5298de286b3f393f81b5b7bfabea373b to your computer and use it in GitHub Desktop.
Save ChrisMoney/5298de286b3f393f81b5b7bfabea373b to your computer and use it in GitHub Desktop.
Download ZIP
UI for Knockout binding
Raw
knockout-view.cshtml
<!-- ko stopBinding: true -->
<div id="TaskFilters">
<div class="tmsUIwidget" data-bind="css: { 'jarviswidget-color-chartergreen': (isSourceFilterSet() || isUserFilterSet() || isStatusFilterSet() || isSubStatusFilterSet() || isPriorityFilterSet() ||
isSupervisorFilterSet() || (isDateFilterActive())),
'jarviswidget-color-charterblue': (!isSourceFilterSet() && !isUserFilterSet() && !isStatusFilterSet() && !isSubStatusFilterSet() && !isPriorityFilterSet() &&
(!isDateFilterActive())),
}"
data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-sortable="false">
<header class="txt-color-white" data-toggle="collapse" data-target="#filterDiv">
<div class="tmsUIwidget-ctrls" role="menu">
<a href="javascript:void(0);" class="txt-color-white button-icon tmsUIwidget-toggle-btn" id="aCollapseFilter"><i class="fa fa-plus"></i></a>
</div>
<span class="widget-icon"> <i class="fa fa-filter"></i> </span>
<h2> Filter </h2>
<div class="widget-toolbar" data-bind="visible: (isSourceFilterSet() || isUserFilterSet() || isStatusFilterSet() || isSubStatusFilterSet() || isPriorityFilterSet() || isSupervisorFilterSet() || (isDateFilterActive()))">
<a href="javascript:void(0);" id="divUpperClear" style="display:none;" class="btn btn-default" data-bind="click: function() { clearFilter(); }"><i class="fa fa-times"></i> Clear Active Filters</a>
</div>
</header>
<!-- Widget div -->
<div class="collapse" id="filterDiv" style="overflow:hidden;clear:both;" data-bind="css:{'in': (isSourceFilterSet() || isUserFilterSet() || isStatusFilterSet() || isSubStatusFilterSet() || isPriorityFilterSet() ||
isSupervisorFilterSet() || (isDateFilterActive()))}">
<!-- end widget edit box -->
<div class="widget-body">
<form>
<fieldset>
<div class="row">
<!---Task Source Filter-->
<div class="col-sm-3">
<div class="form-group">
<label>Task Sources</label>
<select id="selSourceFilter" multiple class="select2" style="width:100%" data-bind="foreach: taskGroupFilters">
<optgroup label="0" data-bind="attr: { label: displayName }, foreach: taskSources">
<option data-bind="value: id, text: name, attr: { selected: isChecked() ? 'selected' : null }" />
</optgroup>
</select>
</div>
</div>
<!---Status Filter-->
<div class="col-sm-3">
<div class="form-group">
<label>Status</label>
<select id="selStatusFilter" multiple class="select2" style="width:100%" data-bind="foreach: statusFilters">
<option data-bind="value: id, text: name, attr: { selected: isChecked() ? 'selected' : null }" />
</select>
</div>
</div>
<!---Priority Filter-->
<div class="col-sm-3">
<div class="form-group">
<label>Priority</label>
<select id="selPriorityFilter" multiple class="select2" style="width:100%" data-bind="foreach: priorityFilters">
<option data-bind="value: id, text: name, attr: { selected: isChecked() ? 'selected' : null }" />
</select>
</div>
</div>
<!--Task ID-->
@*<div class="col-sm-3">
<div class="form-group">
<label>Task ID</label>
<input id="selTaskIdFilter" style="width:100%" class="" name="optionvalue" type="hidden" />
</div>
</div>*@
</div>
<div class="row">
<!---Sub status filter-->
<div class="col-sm-3">
<label>Sub Status</label>
<input id="selSubStatusFilter" style="width:100%" class="" name="optionvalue" type="hidden" />
</div>
<!--Users-->
<div class="col-sm-3">
<div class="form-group">
<label>Users</label>
<input id="selUserFilter" style="width:100%" class="" name="optionvalue" type="hidden" />
</div>
</div>
<!--Supervisors-->
<div class="col-sm-3">
<div class="form-group">
<label>Supervisors</label>
<input id="selSupFilter" style="width:100%" class="" name="optionvalue" type="hidden" />
</div>
</div>
</div>
<!--Advanced Search -->
<div class="row padding-top-10">
<div class="col-sm-12">
<div class="form-group small">
@*<input type="text" class="input-sm" data-bind="value: searchTerm, valueUpdate: 'afterkeydown', enterKey: function() { search(searchTerm); }, enable: isSearchBasic" placeholder="Basic Search" />*@
<label class="checkbox" style="display:inline-block;margin-left:40px;">
<input type="checkbox" name="optincluderange" value="false" data-toggle="collapse" data-target="#divDateTimeFilter"
data-bind="checked: showDateFilterActive" />
<i style="margin-left:-5px;"></i> Use DateTime Filter
</label>
<label class="checkbox" style="display:inline-block; margin-left:40px;">
<input type="checkbox" value="true" data-bind="checked: searchAllRegions">
<i style="margin-left:-5px;"></i> Search All Regions
</label>
<label class="checkbox" style="display:inline-block; margin-left:40px;">
<input type="checkbox" value="true" data-bind="checked: isAdvancedSearch">
<i style="margin-left:-5px;"></i> Search Specific Fields
</label>
</div>
</div>
</div>
<!--Date Field to Search Row-->
<div class="row padding-top-10 collapse" id="divDateTimeFilter">
<div class="col-sm-4">
<div class="form-group">
<label>Date Field to Search</label>
<select id="selDateFieldFilter" class="form-control" style="width:100%" data-bind="options:DateFields">
<option data-bind="value: id, text: name, attr: { selected: isChecked() ? 'selected' : null }" />
</select>
</div>
</div>
<!--From Date Range-->
<div class="col-sm-4">
<div class="form-group">
<label>From:</label>
<div class="input-group">
<input class="form-control" id="fromDatePicker" type="text" data-bind="datetimepicker:rangeStartDate" placeholder="From">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
</div>
@*<div class="col-sm-2">
<div class="form-group">
<label>From (Time):</label>
<div class="input-group">
<input class="form-control" id="fromTimePicker" type="text" data-bind="value:rangeStartTime" placeholder="Select time">
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>*@
<!--To Date Range-->
<div class="col-sm-4">
<div class="form-group">
<label>To:</label>
<div class="input-group">
<input class="form-control" id="toDatePicker" type="text" data-bind="datetimepicker:rangeEndDate" placeholder="To">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
</div>
<!--CW- old cold that was already commented out-->
@*<div class="col-sm-2">
<div class="form-group">
<label>To (Time):</label>
<div class="input-group">
<input class="form-control" id="toTimePicker" type="text" data-bind="value:rangeEndTime" placeholder="Select time">
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>*@
</div>
<!--Specific Field Search-->
<div class="row padding-top-10">
<div class="fullWidth">
<span class="col-md-4 ">
<span class="col-md-5 no-padding">
<select class="form-control input-sm" data-bind="options: globalElements,
value: selAdvSearchA,
optionsText: 'name',
optionsValue: 'id',
optionsCaption: '-- Select Field --', enable: isAdvancedSearch"></select>
</span>
<span class="col-md-1 no-padding text-align-center" style="line-height:2;"> = </span>
<span class="col-md-5 no-padding">
<input type="text" class="form-control input-sm " placeholder="Enter Value" data-bind="value: advSearchTermA, valueUpdate: 'afterkeydown', enterKey: function() { search(); }, enable: isAdvancedSearch">
</span>
<span class="col-md-1 text-align-center" style="line-height:2;"> and </span>
</span>
<span class="col-md-4 ">
<span class="col-md-5 no-padding">
<select class="form-control input-sm" data-bind="options: globalElements,
value: selAdvSearchB,
optionsText: 'name',
optionsValue: 'id',
optionsCaption: '-- Select Field --', enable: isAdvancedSearch"></select>
</span>
<span class="col-md-1 no-padding text-align-center" style="line-height:2;"> = </span>
<span class="col-md-5 no-padding">
<input type="text" class="form-control input-sm" placeholder="Enter Value" data-bind="value: advSearchTermB, valueUpdate: 'afterkeydown', enterKey: function() { search(); }, enable: isAdvancedSearch">
</span>
<span class="col-md-1 text-align-center" style="line-height:2;"> and </span>
</span>
<span class="col-md-4 ">
<span class="col-md-5 no-padding">
<select class="form-control input-sm" data-bind="options: globalElements,
value: selAdvSearchC,
optionsText: 'name',
optionsValue: 'id',
optionsCaption: '-- Select Field --', enable: isAdvancedSearch"></select>
</span>
<span class="col-md-1 no-padding text-align-center" style="line-height:2;"> = </span>
<span class="col-md-5 no-padding">
<input type="text" class="form-control input-sm" placeholder="Enter Value" data-bind="value: advSearchTermC, valueUpdate: 'afterkeydown', enterKey: function() { search(); }, enable: isAdvancedSearch">
</span>
</span>
</div>
</div>
</fieldset>
<!--Apply Filter Row-->
<div class="form-actions">
<div class="row">
<div class="col-md-12">
<div class="col-xs-4 col-md-4">
<div class="input-group row">
<select id="ddlSavedFilter" class="form-control" data-bind="options: savedFilters,
optionsText: 'name',
optionsValue: 'id',
optionsCaption: '-- Select Filter to Load --',
value: selectedFilter" name="ddlSavedFilter">
</select> <i></i>
<span class="input-group-btn margin-left-10">
<button class="btn bg-color-charterblue txt-color-white margin-right-10" type="button" title="Load Selected Filter" data-bind="click: loadSelectedFilter, enable: isFilterSelected"><i class="fa fa-share-square-o"></i> Load</button>
<button class="btn btn-danger" type="button" title="Remove Selected Filter" data-bind="click: removeSelectedFilter, enable: isFilterSelected"><i class="fa fa-times"></i> Remove</button>
</span>
</div>
<div class="input-group row padding-top-10" data-bind="visible: (isSourceFilterSet() || isUserFilterSet() || isStatusFilterSet() || isSubStatusFilterSet() || isPriorityFilterSet() || (isDateFilterActive()) || isSupervisorFilterSet() )">
<input class="form-control margin-right-10" type="text" placeholder="Enter filter name to save" data-bind="value: newFilterName"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-bind="click: saveCurrentFilter"><i class="fa fa-floppy-o" ></i> Save Current Filter</button>
</span>
</div>
</div>
<button class="btn btn-default" type="button" data-bind="click: function() { clearFilter(); }, visible: (isSourceFilterSet() || isUserFilterSet() || isStatusFilterSet() || isSubStatusFilterSet() || isPriorityFilterSet() || (isDateFilterActive()) || isSupervisorFilterSet() )">
<i class="fa fa-times"></i>
Clear Active Filters
</button>
<div class="btn-group dropup">
<button type="button" class="btn bg-color-charterblue txt-color-white" data-bind="click: function() { applyFilter(); }">
<i class="fa fa-check"></i>
Apply Filter
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ko-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment