Gabi

components.filter-component.js

import Ember from 'ember';

const { Component, computed, inject } = Ember;

export default Component.extend({

  filterKey: 'day',
  startingValue: computed('filterKey', function(){
    return this.get('dates').getFirstDayOf(this.get('filterKey'));
  }).volatile(),
  finalValue: computed('filterKey', function(){
    
    return this.get('dates').getLastDayOf(this.get('filterKey'));
  }),
  filteredByDate: computed('filterKey', 'startingDate', 'finalDate', function() {
    console.log('filteredByDate has executed');
    const appointments = this.get('model');
    const startingDate = this.get('startingDate').setHours(0);
    const finalDate = this.get('finalDate').setHours(23)
    return appointments.filter((appointment) => {
      const appointmentDate = appointment.get("scheduledCheckinAt");
      return appointmentDate >= startingDate && appointmentDate <= finalDate;
    });
  }),
  navRoutes: computed('filterKey', 'startingDate', 'finalDate',function() {
    console.log('Navroutes Changed');
    const dates = [new Date(), this.get('startingDate'), this.get('finalDate')]
    const formatedDates = [];
    for (var i=0; i < dates.length; ++i) {
      formatedDates.push(moment(dates[i]).format('YYYY-MM-DD'));
    };
    const routeTitle = ['Day', 'Week', 'Month'];
    const routes = [];
    for (var i=0; i < formatedDates.length; ++i) {
      let queryParams = formatedDates[i];
      console.log(routeTitle[i], queryParams);
      if (routeTitle[i]=='Week') queryParams = `${formatedDates[i]}-to-${formatedDates[i + 1]}`;
      if (routeTitle[i]=='Month') queryParams = moment(formatedDates[i - 1]).format('MMMM');
      routes.push(
        { route : 'authenticated.appointments.list',
          name : routeTitle[i],
          filter: routeTitle[i],
          queryParams : queryParams });
    }
    return routes;
  }),
  dateTitle: computed('filterKey', function(){
    console.log('dateTitle has excecuted')
    const key = this.get('filterKey');
    if (key == 'day') return moment(this.get('startingDate')).format('dddd, MMMM Do YYYY');
    if (key == 'week') return `Week of ${moment(this.get('startingDate')).format('MMMM, Do')} to ${moment(this.get('finalDate')).format('MMMM, Do')}`;
    else return `Month of ${moment(this.get('startingDate')).format('MMMM YYYY')}`
  }),
  actions: {
    setFilterKey(value) {
      console.log('setFilterKey was called with value:', value)
      this.set('filterKey', value.toLowerCase());
    }
  }
});

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.nav-tab.js

import Ember from 'ember';

export default Ember.Component.extend({

  actions: {
    setFilter(key) {
      this.get('onListClick')(key);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.test.js

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['date'],
  date: null
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
   this.route('test');
});

export default Router;

routes.test.js

import Ember from 'ember';

export default Ember.Route.extend({
  setupController: function(controller, model){
    this._super(controller, model);
    controller.set('value', 10);
  },
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<h2>hola</h2>
<br>
{{outlet}}
<br>
<br>

templates.components.filter-component.hbs

{{yield (hash
    header=(
      component 'page-header'
      pageTitle=dateTitle
    )
    groups=(
      component 'appointment-groups'
      appointments=filteredByDate
    )
    nav=(
      component 'nav-tab'
      navRoutes=navRoutes
      onListClick=(action 'setFilterKey')
    )
)}}

templates.components.my-component.hbs

{{yield}}

templates.components.nav-tab.hbs

{{#each navRoutes as |route|}}
  <li class={{liClass}} {{action 'setFilter' route.filter}}>
    {{#link-to route.route (query-params date=route.queryParams) class=aClass}}
      {{route.name}}
      <span class={{route.icon}} class={{sphttps://ember-twiddle.com/?openFiles=nav-tab.template.hbs%2Cnav-tab.template.hbs#anClass}}></span>
      <p class={{pClass}}>{{route.count}}</p>
    {{/link-to}}
  </li>
{{/each}}

templates.test.hbs

<h1>Holaaa</h1>
{{link-to 'super boton' 'tests' (query-params value=25)}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}