Author: bleny Date: 2014-05-15 18:11:05 +0200 (Thu, 15 May 2014) New Revision: 1945 Url: http://forge.codelutin.com/projects/wao/repository/revisions/1945 Log: refs #4483 trying a new filtering UX Added: trunk/wao-web/src/main/resources/fr/ifremer/wao/web/action/obsmer/SamplingPlanAction-conversion.properties Modified: trunk/wao-web/src/main/webapp/WEB-INF/content/obsmer/sampling-plan.jsp trunk/wao-web/src/main/webapp/wao.js Added: trunk/wao-web/src/main/resources/fr/ifremer/wao/web/action/obsmer/SamplingPlanAction-conversion.properties =================================================================== --- trunk/wao-web/src/main/resources/fr/ifremer/wao/web/action/obsmer/SamplingPlanAction-conversion.properties (rev 0) +++ trunk/wao-web/src/main/resources/fr/ifremer/wao/web/action/obsmer/SamplingPlanAction-conversion.properties 2014-05-15 16:11:05 UTC (rev 1945) @@ -0,0 +1 @@ +filter=org.nuiton.web.struts2.converters.JsonConverter Modified: trunk/wao-web/src/main/webapp/WEB-INF/content/obsmer/sampling-plan.jsp =================================================================== --- trunk/wao-web/src/main/webapp/WEB-INF/content/obsmer/sampling-plan.jsp 2014-05-15 14:55:00 UTC (rev 1944) +++ trunk/wao-web/src/main/webapp/WEB-INF/content/obsmer/sampling-plan.jsp 2014-05-15 16:11:05 UTC (rev 1945) @@ -32,9 +32,37 @@ $(document).ready(function () { - var sampleRowsFilterController = new FilterController(WAO.OBSMER_SAMPLE_ROWS_FILTER_VALUES_JSON_URL, $('#sampling-plan-filters-form')); - sampleRowsFilterController.init(); + // var sampleRowsFilterController = new FilterController(WAO.OBSMER_SAMPLE_ROWS_FILTER_VALUES_JSON_URL, $('#sampling-plan-filters-form')); + // sampleRowsFilterController.init(); + var filterMappings = [ + { + filterName: 'filter.fishingZoneFacadeNames', + filterLabel: "<s:text name="wao.ui.field.FishingZone.facadeName"/>", + filterValuesField: 'fishingZoneFacadeNames', + }, + { + filterName: 'filter.fishingZoneSectorNames', + filterLabel: "<s:text name="wao.ui.field.FishingZone.sectorName"/>", + filterValuesField: 'fishingZoneSectorNames', + }, + { + filterName: 'filter.fishingGearDcfIds', + filterLabel: "<s:text name="wao.ui.entity.fishingGearDCF"/>", + filterValuesField: 'fishingGearDcfs', + }, + { + filterName: 'filter.targetSpeciesDcfIds', + filterLabel: "<s:text name="wao.ui.entity.targetSpeciesDCF"/>", + filterValuesField: 'targetSpeciesDcfs', + } + ]; + + var filter = <s:property value="filter" escapeHtml="false"/>; + + sampleRowsFilterController2 = new FilterController2(filterMappings, filter, WAO.OBSMER_SAMPLE_ROWS_FILTER_VALUES_JSON_URL, $('#sampling-plan-filters-form fieldset.toto')); + sampleRowsFilterController2.init(); + $('#switch-estimated-real').click(function () { $('#switch-estimated-real').toggleClass('show-estimated').toggleClass('show-real'); $('table.sampling-plan').toggleClass('show-estimated').toggleClass('show-real'); @@ -84,6 +112,7 @@ </fieldset> +<%-- <fieldset class="filters-group"> <s:if test="authenticatedWaoUser.authorizedToViewOtherCompanies"> @@ -151,7 +180,12 @@ dataBinding="targetSpeciesDcfs" /> </fieldset> +--%> + <fieldset class="toto"> + + </fieldset> + <div class="form-actions"> <s:submit type="button" cssClass="btn btn-primary"> Modified: trunk/wao-web/src/main/webapp/wao.js =================================================================== --- trunk/wao-web/src/main/webapp/wao.js 2014-05-15 14:55:00 UTC (rev 1944) +++ trunk/wao-web/src/main/webapp/wao.js 2014-05-15 16:11:05 UTC (rev 1945) @@ -208,6 +208,221 @@ }; +var FilterModel2 = function (filterMappings, filter, filterValuesUrl) { + + var self = this; + + this.filterMappings = filterMappings; + this.filter = filter; + this.filterValuesUrl = filterValuesUrl; + + this.updateOptions = function (oneFilterModel) { + var filter = $.extend({}, self.filter); + // on lance la recherche mais on ne prend pas en compte le critère qu'on est en train de modifier comme un filtre + delete filter[oneFilterModel.filterMapping.filterName]; + + var successCallback = function (data) { + var options = WAO.getNestedPropertyValue(oneFilterModel.filterMapping.filterValuesField, data.filterValues); + oneFilterModel.setOptions(options); + } + WAO.get(this.filterValuesUrl, filter, successCallback); + } +}; + +var FilterView2 = function (filterModel, $filtersForm) { + + var self = this; + + this.model = filterModel; + this.$filtersForm = $filtersForm; + + this.init = function () { + + } + +}; + + +var FilterController2 = function (filterMappings, filter, filterValuesUrl, $filtersForm) { + + var self = this; + + this.model = new FilterModel2(filterMappings, filter, filterValuesUrl); + this.view = new FilterView2(this.model, $filtersForm); + + this.init = function () { + + $.each(this.model.filterMappings, function (index, filterMapping) { + + var oneFilterController = new OneFilterController(filterMapping, self.model); + oneFilterController.init(); + + self.view.$filtersForm.append(oneFilterController.view.$container); + + }); + + }; + +}; + +var OneFilterModel = function (filterMapping, filterModel) { + + var self = this; + + this.filterMapping = filterMapping; + this.options = []; + this.selectedOptions = []; + this.filterModel = filterModel; + + this.updateOptions = function () { + this.filterModel.updateOptions(self); + }; + + this.setOptions = function (options) { + this.options = options; + $(self).trigger('options-updated'); + } + + this.setSelectedOptions = function (selectedOptions) { + this.selectedOptions = selectedOptions; + var filterValue = []; + $.each(selectedOptions, function (index, selectedOption) { + filterValue.push(selectedOption.value); + }); + this.filterModel.filter[this.filterMapping.filterName] = filterValue; + } + +}; + +var OneFilterView = function (oneFilterModel) { + + var self = this; + + this.model = oneFilterModel; + + this.init = function () { + + var html = '<div class="control-group">' + + ' <label class="control-label">' + + ' ' + this.model.filterMapping.filterLabel + + ' </label>' + + ' <div class="controls">' + + ' <span class="selected-options-container"></span>' + + ' <span class="select-container">' + + ' <select name="' + this.model.filterMapping.filterName + '" multiple="multiple" class="input-large">' + + ' </select>' + + ' <button type="button" class="btn btn-link close-button">' + + ' <i class="fa fa-check"></i>' + + ' </button>' + + ' </span>' + + ' <button type="button" class="btn btn-link open-button">' + + ' <i class="fa fa-edit"></i>' + + ' </button>' + + ' </div>' + + '</div>' + ; + + this.$container = $(html); + + this.$selectContainer = this.$container.find('.select-container'); + this.$select = this.$container.find('select'); + this.$select.select2(); + + this.$selectedOptionsContainer = this.$container.find('.selected-options-container'); + + this.$openButton = this.$container.find('button.open-button'); + this.$closeButton = this.$container.find('button.close-button'); + + this.updateSelectedOptions(); + + $(this.model).on('options-updated', function () { + self.updateOptions(); + }); + + this.hide(); + }; + + this.show = function () { + this.$selectedOptionsContainer.hide(); + this.$openButton.hide(); + this.$selectContainer.show(); + }; + + this.hide = function () { + this.$selectedOptionsContainer.show(); + this.$openButton.show(); + this.$selectContainer.hide(); + }; + + this.updateOptions = function () { + self.$select.empty(); + $.each(this.model.options, function (index, option) { + var optionHtml = '<option value="' + option.value + '">' + option.label + '</option>'; + self.$select.append(optionHtml); + }); + }; + + this.updateSelectedOptions = function () { + var selectedOptions = self.model.selectedOptions; + self.$selectedOptionsContainer.empty(); + if (selectedOptions.length === 0) { + self.$selectedOptionsContainer.append("Pas de filtrage"); + } else { + var $ul = $('<ul></ul>'); + $.each(selectedOptions, function (index, selectedOption) { + $ul.append('<li>' + selectedOption.label + '</li>'); + }); + self.$selectedOptionsContainer.append($ul); + } + } + +}; + +var OneFilterController = function (filterMapping, filterModel) { + + var self = this; + + this.model = new OneFilterModel(filterMapping, filterModel); + this.view = new OneFilterView(this.model); + + this.init = function () { + + this.view.init(); + + this.view.$select.change(function () { + var val = self.view.$select.val(); + var selectedOptions = []; + $.each(self.model.options, function (index, option) { + if ($.inArray(option.value, val) !== -1) { + selectedOptions.push(option); + } + }); + self.model.setSelectedOptions(selectedOptions); + }); + + this.view.$closeButton.click(function () { + self.close(); + }); + + this.view.$openButton.click(function () { + self.open(); + }); + + }; + + this.open = function () { + this.model.updateOptions(); + this.view.show(); + } + + this.close = function () { + this.view.updateSelectedOptions(); + this.view.hide(); + } + +}; + + var Wao = function () { var self = this;