# HG changeset patch # User Chloe Laisne # Date 1464645514 -7200 # Node ID d1baf7ccecc8341154e0a4ae241751e6505a2cce # Parent 7a7cfcba5bfe83242bf923a015c89c99e4f7d0ff Add `thematiques` components diff -r 7a7cfcba5bfe -r d1baf7ccecc8 cms/app-client/app/components/discourses-component.js --- a/cms/app-client/app/components/discourses-component.js Thu May 19 14:49:42 2016 +0200 +++ b/cms/app-client/app/components/discourses-component.js Mon May 30 23:58:34 2016 +0200 @@ -6,105 +6,105 @@ export default Ember.Component.extend({ - constants: Ember.inject.service(), + constants: Ember.inject.service(), - init: function() { - this._super(...arguments); - }, + init: function() { + this._super(...arguments); + }, - didRender: function() { - var self = this; - var baseURL = env.baseURL.replace(/\/$/,"")+'/api/v1'; + didRender: function() { + var self = this; + var baseURL = env.baseURL.replace(/\/$/,"")+'/api/v1'; - d3.json(baseURL + "/discourses", function(discourses) { - console.log(discourses); + d3.json(baseURL + "/discourses", function(discourses) { + console.log(discourses); - var width = self.$().parent().width(); - var height = self.$().parent().height(); + var width = self.$().parent().width(); + var height = self.$().parent().height(); - var bubble = d3.layout.pack() - .sort(null) - .size([width, height]) - .padding(33); + var bubble = d3.layout.pack() + .sort(null) + .size([width, height]) + .padding(33); - var element = d3.select('#' + self.get('elementId')); + var element = d3.select('#' + self.get('elementId')); - var svg = element.append("svg") - .attr("width", width) - .attr("height", height) - .attr("class", "bubble"); + var svg = element.append("svg") + .attr("width", width) + .attr("height", height) + .attr("class", "bubble"); - var nodes = svg.selectAll(".node") - .data(bubble.nodes(self.createNodes(discourses))) - .enter().append("g") - .attr("width", function(d) { return 2.5 * d.r + 'px'; }) - .attr("class", function(d) { return "node" + (!d.children ? " leaf" : ""); }) - .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) - .style("font-size", function(d) { return Math.max(13, d.r / 2) + 'px'; }); - + var nodes = svg.selectAll(".node") + .data(bubble.nodes(self.createNodes(discourses))) + .enter().append("g") + .attr("width", function(d) { return 2.5 * d.r + 'px'; }) + .attr("class", function(d) { return "node" + (!d.children ? " leaf" : ""); }) + .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) + .style("font-size", function(d) { return Math.max(13, d.r / 2) + 'px'; }); + - var leaf = svg.selectAll(".leaf") - .on('click', function(d) { document.location = self.setQueryString('discours', d.name); }); - - leaf.append("circle") - .attr("r", function(d) { return d.r; }) - .attr("fill", function(d) { return d.fill; }) - .attr("stroke", function(d) { return "#000"; }); - - leaf.append("text") - .attr("dy", ".3em") - .style("text-anchor", "middle") - .text(function(d) { return d.name; }); + var leaf = svg.selectAll(".leaf") + .on('click', function(d) { document.location = self.setQueryString('discours', d.name); }); + + leaf.append("circle") + .attr("r", function(d) { return d.r; }) + .attr("fill", function(d) { return d.fill; }) + .attr("stroke", function(d) { return "#000"; }); + + leaf.append("text") + .attr("dy", ".3em") + .style("text-anchor", "middle") + .text(function(d) { return d.name; }); - element.style("height", height + "px"); - }); + element.style("height", height + "px"); + }); - this._super(...arguments); - }, + this._super(...arguments); + }, - createNodes: function(json) { - var self = this; - var nodes = {}; - var children = {}; + createNodes: function(json) { + var self = this; + var nodes = {}; + var children = {}; - Object.keys(json).forEach(function(key) { - var discourse = json[key]; - var index = self.get('constants').DISCOURSES[key]; - var category = self.get('constants').DISCOURSE_CATEGORIES[index]; + Object.keys(json).forEach(function(key) { + var discourse = json[key]; + var index = self.get('constants').DISCOURSES[key]; + var category = self.get('constants').DISCOURSE_CATEGORIES[index]; - children[index] = children[index] || {}; - children[index]['name'] = index; - children[index]['children'] = children[index]['children'] || []; - children[index]['children'].push({ "name": discourse.label, "value": discourse.count, "fill": category.fill }); - }); + children[index] = children[index] || {}; + children[index]['name'] = index; + children[index]['children'] = children[index]['children'] || []; + children[index]['children'].push({ "name": discourse.label, "value": discourse.count, "fill": category.fill }); + }); - nodes.children = []; - Object.keys(children).forEach(function(key) { - nodes.children.push(children[key]); - }); + nodes.children = []; + Object.keys(children).forEach(function(key) { + nodes.children.push(children[key]); + }); - return nodes; - }, + return nodes; + }, - setQueryString: function(field, value) { - var hash = document.location.href.split('?'); - var query_parameters = hash.pop(); + setQueryString: function(field, value) { + var hash = document.location.href.split('?'); + var query_parameters = hash.pop(); - // Unserialize - var parameters = []; - query_parameters.split('&').forEach(function(parameter){ - var object = parameter.split('='); - object[1] && (parameters[object[0]] = object[1]); - }); + // Unserialize + var parameters = []; + query_parameters.split('&').forEach(function(parameter){ + var object = parameter.split('='); + object[1] && (parameters[object[0]] = object[1]); + }); - // Serialize - var string = []; - parameters[field] = encodeURI(value); - Object.keys(parameters).forEach(function(key) { - string.push(key + '=' + parameters[key]); - }); + // Serialize + var string = []; + parameters[field] = encodeURI(value); + Object.keys(parameters).forEach(function(key) { + string.push(key + '=' + parameters[key]); + }); - return hash + '?' + string.join('&'); - } - + return hash + '?' + string.join('&'); + } + }); diff -r 7a7cfcba5bfe -r d1baf7ccecc8 cms/app-client/app/components/filtering-component.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/app/components/filtering-component.js Mon May 30 23:58:34 2016 +0200 @@ -0,0 +1,25 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + + filter: '', + + filteredThemes: Ember.computed.filter('themes', function(item) { + return this.get('filter') && (item.get('label') || '').match(this.get('filter')); + }).property('filter'), + + actions: { + + setQueryParameters: function(id) { + this.get('setQueryParameters')(id); + }, + + filterBy: function(input) { + this.set('filter', input && new RegExp('^' + input)); + this.get('filteredThemes'); + } + + } + + +}); diff -r 7a7cfcba5bfe -r d1baf7ccecc8 cms/app-client/app/components/sorting-component.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/app/components/sorting-component.js Mon May 30 23:58:34 2016 +0200 @@ -0,0 +1,26 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + + sorting: [], + sortedThemes: Ember.computed.sort('themes', 'sorting'), + + minimum: Ember.computed('themes', function() { return Math.min(...this.themes.mapBy('count')); }), + + maximum: Ember.computed('themes', function() { return Math.max(...this.themes.mapBy('count')); }), + + actions: { + + + setQueryParameters: function(id) { + this.get('setQueryParameters')(id); + }, + + sortBy: function (type) { + this.set('sorting', type === 'popularity' ? ['count:desc'] : ['label']); + this.get('sortedThemes'); + } + + } + +}); diff -r 7a7cfcba5bfe -r d1baf7ccecc8 cms/app-client/app/controllers/tabs/thematiques.js --- a/cms/app-client/app/controllers/tabs/thematiques.js Thu May 19 14:49:42 2016 +0200 +++ b/cms/app-client/app/controllers/tabs/thematiques.js Mon May 30 23:58:34 2016 +0200 @@ -1,9 +1,12 @@ import Ember from 'ember'; export default Ember.Controller.extend({ - actions: { - updateUrl: function(selection){ - this.transitionToRoute({queryParams: {thematique: selection}}); + + actions: { + + transitionTo: function(id){ + this.transitionToRoute({queryParams: {thematique: id}}); + } + } - } }); diff -r 7a7cfcba5bfe -r d1baf7ccecc8 cms/app-client/app/helpers/popularity.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/app/helpers/popularity.js Mon May 30 23:58:34 2016 +0200 @@ -0,0 +1,15 @@ +import Ember from 'ember'; + +export function popularity([target, minimum, maximum]) { + var classname = ['not-popular', 'popular', 'very-popular']; + var interval = ( maximum - minimum ) / classname.length; + + var i = 0; + while( target > minimum + ( interval * ( i + 1 ) ) ) { + i ++; + } + + return classname[i]; +} + +export default Ember.Helper.helper(popularity); diff -r 7a7cfcba5bfe -r d1baf7ccecc8 cms/app-client/app/mirage/config.js --- a/cms/app-client/app/mirage/config.js Thu May 19 14:49:42 2016 +0200 +++ b/cms/app-client/app/mirage/config.js Mon May 30 23:58:34 2016 +0200 @@ -4,17 +4,7 @@ export default function() { - // These comments are here to help you get started. Feel free to delete them. - - /* - Config (with defaults). - - Note: these only affect routes defined *after* them! - */ - // this.urlPrefix = ''; // make this `http://localhost:8080`, for example, if your API is on a different server - // this.namespace = ''; // make this `api`, for example, if your API is namespaced this.namespace = ENV.baseURL.replace(/\/$/,'')+'/api/v1'; - // this.timing = 400; // delay for each request, automatically set to 0 during testing this.get('/documents'); this.get('/documents/:id', function(db, request) { @@ -90,72 +80,4 @@ }); - /* - Route shorthand cheatsheet - */ - /* - GET shorthands - - // Collections - this.get('/contacts'); - this.get('/contacts', 'users'); - this.get('/contacts', ['contacts', 'addresses']); - - // Single objects - this.get('/contacts/:id'); - this.get('/contacts/:id', 'user'); - this.get('/contacts/:id', ['contact', 'addresses']); - */ - - /* - POST shorthands - - this.post('/contacts'); - this.post('/contacts', 'user'); // specify the type of resource to be created - */ - - /* - PUT shorthands - - this.put('/contacts/:id'); - this.put('/contacts/:id', 'user'); // specify the type of resource to be updated - */ - - /* - DELETE shorthands - - this.del('/contacts/:id'); - this.del('/contacts/:id', 'user'); // specify the type of resource to be deleted - - // Single object + related resources. Make sure parent resource is first. - this.del('/contacts/:id', ['contact', 'addresses']); - */ - - /* - Function fallback. Manipulate data in the db via - - - db.{collection} - - db.{collection}.find(id) - - db.{collection}.where(query) - - db.{collection}.update(target, attrs) - - db.{collection}.remove(target) - - // Example: return a single object with related models - this.get('/contacts/:id', function(db, request) { - var contactId = +request.params.id; - - return { - contact: db.contacts.find(contactId), - addresses: db.addresses.where({contact_id: contactId}) - }; - }); - - */ } - -/* - You can optionally export a config that is only loaded during tests - export function testConfig() { - - } -*/ diff -r 7a7cfcba5bfe -r d1baf7ccecc8 cms/app-client/app/models/theme.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/app/models/theme.js Mon May 30 23:58:34 2016 +0200 @@ -0,0 +1,9 @@ +import Model from 'ember-data/model'; +import attr from 'ember-data/attr'; + +export default Model.extend({ + + label: attr('string'), + count: attr('number') + +}); diff -r 7a7cfcba5bfe -r d1baf7ccecc8 cms/app-client/app/routes/tabs/thematiques.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/app/routes/tabs/thematiques.js Mon May 30 23:58:34 2016 +0200 @@ -0,0 +1,9 @@ +import Ember from 'ember'; + +export default Ember.Route.extend({ + + model: function() { + return this.store.findAll('theme'); + } + +}); diff -r 7a7cfcba5bfe -r d1baf7ccecc8 cms/app-client/app/serializers/theme.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/app/serializers/theme.js Mon May 30 23:58:34 2016 +0200 @@ -0,0 +1,22 @@ +import DS from 'ember-data'; + +export default DS.JSONSerializer.extend({ + + normalizeResponse: function(store, primaryModelClass, payload, id, requestType) { + var data = []; + Object.keys(payload).forEach(function(key) { + data.push({ + 'id': key, + 'type': 'theme', + 'attributes': { + 'label': payload[key].label, + 'count': payload[key].count + } + }); + }); + return { + 'data': data + }; + } + +}); \ No newline at end of file diff -r 7a7cfcba5bfe -r d1baf7ccecc8 cms/app-client/app/templates/components/filtering-component.hbs --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/app/templates/components/filtering-component.hbs Mon May 30 23:58:34 2016 +0200 @@ -0,0 +1,11 @@ +{{yield}} + +{{ input type='text' key-up='filterBy' placeholder='Entrez une thématique'}} + + \ No newline at end of file diff -r 7a7cfcba5bfe -r d1baf7ccecc8 cms/app-client/app/templates/components/sorting-component.hbs --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/app/templates/components/sorting-component.hbs Mon May 30 23:58:34 2016 +0200 @@ -0,0 +1,24 @@ +{{yield}} + +
+ +
Trier par :
+ + + +
+ + \ No newline at end of file diff -r 7a7cfcba5bfe -r d1baf7ccecc8 cms/app-client/app/templates/tabs/thematiques.hbs --- a/cms/app-client/app/templates/tabs/thematiques.hbs Thu May 19 14:49:42 2016 +0200 +++ b/cms/app-client/app/templates/tabs/thematiques.hbs Mon May 30 23:58:34 2016 +0200 @@ -1,60 +1,5 @@ -
- {{input type="text" placeholder="Entrez une thématique" enter="updateUrl"}} -
+{{outlet}} -
- ipsum - dolor - sit - amet - consectetur - adipiscing - elit - Curabitur - non - ipsum - dolor - sit - amet - consectetur - adipiscing - elit - Curabitur - non - ipsum - dolor - sit - amet - consectetur - adipiscing - elit - Curabitur - non - ipsum - dolor - sit - amet - consectetur - adipiscing - elit - Curabitur - non - ipsum - dolor - sit - amet - consectetur - adipiscing - elit - Curabitur - non - ipsum - dolor - sit - amet - consectetur - adipiscing - elit - Curabitur - non -
+{{ filtering-component themes=model setQueryParameters=( action 'transitionTo' ) }} + +{{ sorting-component themes=model setQueryParameters=( action 'transitionTo' ) }} diff -r 7a7cfcba5bfe -r d1baf7ccecc8 cms/app-client/tests/integration/components/filtering-component-test.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/tests/integration/components/filtering-component-test.js Mon May 30 23:58:34 2016 +0200 @@ -0,0 +1,24 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('filtering-component', 'Integration | Component | filtering component', { + integration: true +}); + +test('it renders', function(assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.on('myAction', function(val) { ... }); + + this.render(hbs`{{filtering-component}}`); + + assert.equal(this.$().text().trim(), ''); + + // Template block usage: + this.render(hbs` + {{#filtering-component}} + template block text + {{/filtering-component}} + `); + + assert.equal(this.$().text().trim(), 'template block text'); +}); diff -r 7a7cfcba5bfe -r d1baf7ccecc8 cms/app-client/tests/integration/components/sorting-component-test.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/tests/integration/components/sorting-component-test.js Mon May 30 23:58:34 2016 +0200 @@ -0,0 +1,24 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('sorting-component', 'Integration | Component | sorting component', { + integration: true +}); + +test('it renders', function(assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.on('myAction', function(val) { ... }); + + this.render(hbs`{{sorting-component}}`); + + assert.equal(this.$().text().trim(), ''); + + // Template block usage: + this.render(hbs` + {{#sorting-component}} + template block text + {{/sorting-component}} + `); + + assert.equal(this.$().text().trim(), 'template block text'); +}); diff -r 7a7cfcba5bfe -r d1baf7ccecc8 cms/app-client/tests/unit/controllers/tabs/thematiques-test.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/tests/unit/controllers/tabs/thematiques-test.js Mon May 30 23:58:34 2016 +0200 @@ -0,0 +1,12 @@ +import { moduleFor, test } from 'ember-qunit'; + +moduleFor('controller:tabs/thematiques', 'Unit | Controller | tabs/thematiques', { + // Specify the other units that are required for this test. + // needs: ['controller:foo'] +}); + +// Replace this with your real tests. +test('it exists', function(assert) { + let controller = this.subject(); + assert.ok(controller); +}); diff -r 7a7cfcba5bfe -r d1baf7ccecc8 cms/app-client/tests/unit/helpers/popularity-test.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/tests/unit/helpers/popularity-test.js Mon May 30 23:58:34 2016 +0200 @@ -0,0 +1,10 @@ +import { popularity } from 'app-client/helpers/popularity'; +import { module, test } from 'qunit'; + +module('Unit | Helper | popularity'); + +// Replace this with your real tests. +test('it works', function(assert) { + let result = popularity([42]); + assert.ok(result); +}); diff -r 7a7cfcba5bfe -r d1baf7ccecc8 cms/app-client/tests/unit/models/theme-test.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/tests/unit/models/theme-test.js Mon May 30 23:58:34 2016 +0200 @@ -0,0 +1,12 @@ +import { moduleForModel, test } from 'ember-qunit'; + +moduleForModel('theme', 'Unit | Model | theme', { + // Specify the other units that are required for this test. + needs: [] +}); + +test('it exists', function(assert) { + let model = this.subject(); + // let store = this.store(); + assert.ok(!!model); +}); diff -r 7a7cfcba5bfe -r d1baf7ccecc8 cms/app-client/tests/unit/routes/tabs/thematiques-test.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/tests/unit/routes/tabs/thematiques-test.js Mon May 30 23:58:34 2016 +0200 @@ -0,0 +1,11 @@ +import { moduleFor, test } from 'ember-qunit'; + +moduleFor('route:tabs/thematiques', 'Unit | Route | tabs/thematiques', { + // Specify the other units that are required for this test. + // needs: ['controller:foo'] +}); + +test('it exists', function(assert) { + let route = this.subject(); + assert.ok(route); +}); diff -r 7a7cfcba5bfe -r d1baf7ccecc8 cms/app-client/tests/unit/serializers/theme-test.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/tests/unit/serializers/theme-test.js Mon May 30 23:58:34 2016 +0200 @@ -0,0 +1,15 @@ +import { moduleForModel, test } from 'ember-qunit'; + +moduleForModel('theme', 'Unit | Serializer | theme', { + // Specify the other units that are required for this test. + needs: ['serializer:theme'] +}); + +// Replace this with your real tests. +test('it serializes records', function(assert) { + let record = this.subject(); + + let serializedRecord = record.serialize(); + + assert.ok(serializedRecord); +});