advanced search example

advanced-search.html

<script type="text/ng-template" id="advanced-search.html">
    <div class="searchFilter hide">
        <div class="filterOpts">
            <section class="types">

                <div class="data">
                    <h5>Contest type:</h5>
                    <select
                        ng-model="filterOptions.contestTypes"
                        ng-options="type for type in contestTypes"
                        class="filter-by-type" ng-disabled="!contestTypes.length"></select>
                </div><br>


                <div class="data">
                    <h5>Contest title:</h5>
                    <input type="text" ng-model="filterOptions.searchText">
                </div><br>


                <div class="data">
                    <!--<h5>Technology Tags:</h5>
                    <select ng-model="filterOptions.technologies"
                            ng-options="type for type in technologies"  class="filter-by-type" ng-disabled="!technologies.length"
                            class="chosen-select" ></select>-->
                </div><br>
            </section>
            <section class="otherOpts" >
                <ul>
                    <li class="date row"><div class="lbl">
                            <input type="checkbox" id="fSDate" ng-model="chbFrom" />
                            <label for="fSDate"><strong>Submission End From:</strong></label>
                        </div>
                        <div class="val">
                            <span class="datePickerWrap">
                                <input ng-disabled="!chbFrom" id="startDate" type="text" class="datepicker from" calendar-icon="<?php echo $themePath ?>/i/ico-cal.png" />
                            </span>
                        </div>
                    </li>
                    <li class="date row">
                        <div class="lbl">
                            <input type="checkbox" id="fEDate" ng-model="chbTo"/>
                            <label ng-disabled="!chbTo" for="fEDate"><strong>Submission End To:</strong></label>
                        </div>

                        <div class="val">
                            <span class="datePickerWrap"><input id="endDate"  type="text" class="datepicker to" calendar-icon="<?php echo $themePath ?>/i/ico-cal.png" /></span>
                        </div>
                    </li>
                </ul>
            </section>
            <div class="clear"></div>
        </div>
        <!-- /.filterOpts -->
        <div class="actions">
            <a ng-click="closeForm()" class="btn btnSecondary btnClose">Close</a>
            <a ng-click="applyFilter()" class="btn btnApply">Apply</a>
        </div>
    </div>
</script>

directives.js

    angular.module('tc.AdvancedSearch', ['ui.bootstrap']).directive('advancedSearch', ['$compile', function($compile) {
        var developTypes = [
            'All',
            'Component Development',
            'Architecture',
            'First2Finish',
            'Assembly Competition',
            'Reporting',
            'Bug Hunt',
            'RIA Build Competition',
            'Code',
            'Specification',
            'Copilot Posting',
            'Test Scenarios',
            'Conceptualization',
            'Test Suites',
            'Content Creation',
            'Testing Competition',
            'Component Design',
            'UI Prototype Competition'
        ];
        var designTypes = [
            'All',
            'Logo Design',
            'Application Front End',
            'Print/Presentation',
            'Banner/Icon',
            'Web Design',
            'Design First2Finish',
            'Widget/Mobile Screen',
            'Idea Generation',
            'Wireframe'
        ];

        return {
            replace: true,
            //transclude: false,
            templateUrl:'advanced-search.html',
            scope: {
                applyFilterHandler: '=applyFilter',
                challengeCommunity: '=challengeCommunity',
                searchBarVisible: '=showOn',
                technologies: '=technologies'
            },

            controller: function($scope){
                $scope.chbFrom = false;
                $scope.chbTo = false;

                $scope.resetFilterOptions = function(){
                    $scope.filterOptions = {
                        contestTypes: 'All',
                        searchText: '',
                        startDate: null,
                        endDate: null
                    };

                    var contestTypes = [];
                    switch ($scope.challengeCommunity) {
                        case 'develop':
                            contestTypes = developTypes.slice(0);
                            break;
                        case 'design':
                            contestTypes = designTypes.slice(0);
                            break;
                        default :
                            contestTypes = [];
                            break;
                    }
                    $scope.contestTypes = contestTypes;
                };

                $scope.resetFilterOptions();

            },
            compile: function (tElement, tAttrs, transclude) {

                return function ($scope, $element, attr) {

                    $scope.closeForm = function () {
                        $($element).hide(200);
                        $scope.searchBarVisible = false;
                    };

                    $scope.applyFilter = function () {
                        var filterOptions = _.clone($scope.filterOptions);
                        $scope.applyFilterHandler(filterOptions);
                    };
                    $scope.$watch('searchBarVisible', function (newVal, oldVal) {
                        newVal && $($element).show(200);
                        $scope.resetFilterOptions();
                    }, true);
                    var
                        $datepickerFrom = $element.find('.datepicker.from'),
                        $datepickerTo = $element.find(".datepicker.to");

                    $datepickerFrom.datepicker({
                        showOn: 'both',
                        buttonImage: $datepickerFrom.attr('calendar-icon'),
                        buttonImageOnly: true,
                        dateFormat: 'yy-mm-dd',
                        buttonText: "",

                        onSelect: function(selectedDate) {
                            $datepickerTo.datepicker("option", "minDate", selectedDate);
                            $scope.filterOptions.startDate = new Date(Date.parse(selectedDate));
                            $scope.$apply();
                        }
                    });

                    $datepickerTo.datepicker({
                        showOn: 'both',
                        buttonImage: $datepickerTo.attr('calendar-icon'),
                        buttonImageOnly: true,
                        dateFormat: 'yy-mm-dd',
                        onSelect: function(selectedDate) {
                            $datepickerFrom.datepicker("option", "maxDate", selectedDate);
                            $scope.filterOptions.endDate = new Date(Date.parse(selectedDate));
                            $scope.$apply();
                        }
                    });

                    $scope.$watch('chbFrom', function (newVal, oldVal) {
                        if(!newVal){
                            $scope.filterOptions.startDate = null;
                        }
                        $datepickerFrom.datepicker(newVal? 'enable':'disable');
                    }, true);

                    $scope.$watch('chbTo', function (newVal, oldVal) {
                        if(!newVal){
                            $scope.filterOptions.endDate = null;
                        }
                        $datepickerTo.datepicker(newVal? 'enable':'disable');
                    }, true);

                    //$compile($element.contents())($scope);
                    //$compile($element)($scope);
                };
            }

        };
    }])