Skip to content

Instantly share code, notes, and snippets.

@Glarregle
Created July 21, 2017 21:28
Show Gist options
  • Save Glarregle/8addff2ce217c9b9ab434d8ac29c4a60 to your computer and use it in GitHub Desktop.
Save Glarregle/8addff2ce217c9b9ab434d8ac29c4a60 to your computer and use it in GitHub Desktop.
Gabi
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());
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
});
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
setFilter(key) {
this.get('onListClick')(key);
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
import Ember from 'ember';
export default Ember.Controller.extend({
queryParams: ['date'],
date: null
});
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;
import Ember from 'ember';
export default Ember.Route.extend({
setupController: function(controller, model){
this._super(controller, model);
controller.set('value', 10);
},
});
<h1>Welcome to {{appName}}</h1>
<br>
<h2>hola</h2>
<br>
{{outlet}}
<br>
<br>
{{yield (hash
header=(
component 'page-header'
pageTitle=dateTitle
)
groups=(
component 'appointment-groups'
appointments=filteredByDate
)
nav=(
component 'nav-tab'
navRoutes=navRoutes
onListClick=(action 'setFilterKey')
)
)}}
{{#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}}
<h1>Holaaa</h1>
{{link-to 'super boton' 'tests' (query-params value=25)}}
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment