Add interval to filter component
authorChloe Laisne <chloe.laisne@gmail.com>
Thu, 23 Jun 2016 23:21:02 +0200
changeset 202 0446e07981db
parent 201 9ae2cf79d167
child 203 2ee21302dc47
Add interval to filter component Add filter.date observer to visu-chrono Minor playlist component styling
cms/app-client/app/components/filter-component.js
cms/app-client/app/components/visu-chrono.js
cms/app-client/app/controllers/application.js
cms/app-client/app/styles/components/playlist-component.scss
cms/app-client/app/templates/components/filter-component.hbs
cms/app-client/app/templates/components/playlist-component.hbs
--- a/cms/app-client/app/components/filter-component.js	Thu Jun 23 17:22:57 2016 +0200
+++ b/cms/app-client/app/components/filter-component.js	Thu Jun 23 23:21:02 2016 +0200
@@ -6,8 +6,32 @@
 
     filter: Ember.inject.service(),
 
+    intervals: Ember.computed('filter.date', function() {
+        var intervals = [];
+        this.get('filter.date').forEach(function(date) {
+            var isInterval = false;
+            intervals.forEach(function(interval) {
+                if(interval.length && (interval.includes(date + 1) || interval.includes(date - 1))) {
+                    interval.push(date);
+                    isInterval = true;
+                }
+            });
+            if (!isInterval) {
+                intervals.push([date]);
+            }
+        });
+        return intervals;
+    }),
+
     actions: {
         removeFilter: function(key, value) {
+            if(typeof this.get('filter').get(key) === 'object') {
+                var array = value.toArray();
+                value = this.get('filter').get(key).toArray();
+                array.forEach(function(element) {
+                    value.splice(value.indexOf(element), 1);
+                });
+            }
             this.get('filter').set(key, value);
         }
     }
--- a/cms/app-client/app/components/visu-chrono.js	Thu Jun 23 17:22:57 2016 +0200
+++ b/cms/app-client/app/components/visu-chrono.js	Thu Jun 23 23:21:02 2016 +0200
@@ -4,6 +4,14 @@
 
     filter: Ember.inject.service(),
 
+    dateObserver: Ember.observer('filter.date', function() {
+        var self = this;
+        this.$('li').removeClass('highlighted');
+        this.get('filter.date').forEach(function(date) {
+            self.$('li#' + date).addClass('highlighted');
+        });
+    }),
+
     elementId: "chrono-table",
 
     didInsertElement: function(){
@@ -14,25 +22,24 @@
         }
 
         var isMouseDown = false,
-        isHighlighted;
+            isHighlighted;
 
         Ember.$("#chrono-table li").mousedown(function () {
             isMouseDown = true;
-            Ember.$(this).toggleClass("highlighted");
-            isHighlighted = Ember.$(this).hasClass("highlighted");
             var dates = self.get('filter').get('date').toArray();
             var index = dates.indexOf(parseInt(Ember.$(this).attr('id')));
             if(index === -1) {
                 dates.push(parseInt(Ember.$(this).attr('id')));
+                isHighlighted = true;
             } else {
                 dates.splice(index, 1);
+                isHighlighted = false;
             }
             self.get('filter').set('date', dates);
             return false; // prevent text selection
         }).mouseover(function () {
             if (isMouseDown) {
                 if(Ember.$(this).hasClass("highlighted") !== isHighlighted) {
-                    Ember.$(this).toggleClass("highlighted", isHighlighted);
                     var dates = self.get('filter').get('date').toArray();
                     var index = dates.indexOf(parseInt(Ember.$(this).attr('id')));
                     if(index === -1) {
--- a/cms/app-client/app/controllers/application.js	Thu Jun 23 17:22:57 2016 +0200
+++ b/cms/app-client/app/controllers/application.js	Thu Jun 23 23:21:02 2016 +0200
@@ -71,6 +71,19 @@
             this.set(key, newValue);
         },
 
+        /*deleteTag: function(query, item) {
+            var newParams = null;
+            if (query === 'date'){
+                newParams = [];
+                Ember.$.each(this.get('date'), function(index, elt){
+                    if (elt !== item){
+                        newParams.push(elt);
+                    }
+                });
+            }
+            this.set(query, newParams);
+        }*/
+
         changeDocument: function(docDirection){
             var direction = (docDirection === "next") ? 1 : -1;
             var currentObject = this.get("filteredDocuments").findBy('id', this.get("currentItem").get('id'));
--- a/cms/app-client/app/styles/components/playlist-component.scss	Thu Jun 23 17:22:57 2016 +0200
+++ b/cms/app-client/app/styles/components/playlist-component.scss	Thu Jun 23 23:21:02 2016 +0200
@@ -15,6 +15,7 @@
     padding: 0;
     font-size: 0px;
     overflow-y: scroll;
+    background-color: #fbfbfb;
 }
 
 .playlist-component ul li {
@@ -22,7 +23,6 @@
     font-size: 12px;
     line-height: 20px;
     border-bottom: 1px solid #859097;
-    background-color: #fbfbfb;
     color: #59626b;
 }
 
--- a/cms/app-client/app/templates/components/filter-component.hbs	Thu Jun 23 17:22:57 2016 +0200
+++ b/cms/app-client/app/templates/components/filter-component.hbs	Thu Jun 23 23:21:02 2016 +0200
@@ -10,8 +10,8 @@
 <li class="filter discourse">{{filter.discourse}}<span{{action 'removeFilter' 'discourse'}}>&#10005;</span></li>
 {{/if}}
 {{#if filter.date}}
-    {{#each filter.date as |item| }}
-    <li class="filter date" data-dates="{{item}}">{{item}}<span{{action 'removeFilter' 'date' item }}>&#10005;</span></li>
+    {{#each intervals as |interval| }}
+    <li class="filter date" data-dates="{{interval}}">{{interval interval}}<span{{action 'removeFilter' 'date' interval }}>&#10005;</span></li>
     {{/each}}
 {{/if}}
 {{#if filter.theme}}
--- a/cms/app-client/app/templates/components/playlist-component.hbs	Thu Jun 23 17:22:57 2016 +0200
+++ b/cms/app-client/app/templates/components/playlist-component.hbs	Thu Jun 23 23:21:02 2016 +0200
@@ -1,4 +1,4 @@
-<h2>Résultats</h2>
+<h2>Résultat <span class="count">({{ documents.length }})</span></h2>
 <ul>
     {{#each documents as |document| }}
     <li id="{{document.id}}">