Skip to content

Instantly share code, notes, and snippets.

@tabiodun
Last active April 18, 2019 15:43
Show Gist options
  • Save tabiodun/de0aaabe87beba782cb57bbe713a9ca8 to your computer and use it in GitHub Desktop.
Save tabiodun/de0aaabe87beba782cb57bbe713a9ca8 to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
export default Ember.Component.extend({
});
import Ember from 'ember';
export default Ember.Component.extend({
});
import Ember from 'ember';
export default Mixin.create({
didInsertElement() {
this.get('registerFilter')(this.packFilter)
},
packFilter() {
}
});
import Ember from 'ember';
export default Ember.Component.extend({
filterFunctions: [],
actions: {
registerFilter(action) {
this.get('filterFunctions').pushObject(action);
},
filterAction() {
let filters = [];
this.get('filterFunctions').forEach(f => {
filters.addObject(f());
});
this.get('updateState')({
filters: filters
});
}
}
});
import Ember from 'ember';
import { computed } from '@ember/object';
export default Ember.Component.extend({
value: computed('selected.[]', 'data.[]', function() {
return this.get('selected').length === this.get('data').length;
}),
actions: {
toggle() {
if (event.target.checked) {
this.get('addAll')()
} else {
this.get('removeAll')()
}
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
});
import Ember from 'ember';
export default Ember.Component.extend({
didInsertElement() {
this.get('registerFilter')(() => {
return {
type: 'range',
from: this.get('from'),
to: this.get('to'),
property: this.get('property')
};
})
}
});
import Ember from 'ember';
export default Ember.Component.extend({
});
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
searchAction() {
this.get('updateState')({
search: {
text: this.get('text'),
}
});
}
}
});
import Ember from 'ember';
import { computed } from '@ember/object';
export default Ember.Component.extend({
value: computed('selected.[]', function() {
return this.get('selected').includes(this.get('row'));
}),
actions: {
toggle(event) {
if (event.target.checked) {
this.get('addSelected')(this.get('row'))
} else {
this.get('removeSelected')(this.get('row'))
}
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
didInsertElement() {
this.get('registerFilter')(() => {
return {
type: 'selection',
value: this.get('value'),
property: this.get('property')
};
})
}
});
import Ember from 'ember';
import { alias, equal } from '@ember/object/computed';
export default Ember.Component.extend({
actions: {
sortAction() {
// this.get('sortAction')();
let direction = '';
if (this.get('direction') === 'asc') {
direction = 'desc'
}
else if (this.get('direction') === 'desc') {
direction = ''
}
else if (this.get('direction') === undefined || this.get('direction') === '') {
direction = 'asc'
}
this.set('direction', direction);
this.get('updateState')({
sort: {
property: this.get('key'),
direction: direction
}
});
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
didInsertElement() {
this.get('registerFilter')(() => {
return {
type: 'value',
value: this.get('value'),
property: this.get('property')
};
})
},
actions: {
selectOption(value) {
this.set('value', value)
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
init() {
this._super(...arguments);
this.set('state', {})
this.set('selected', [])
},
actions: {
updateState(state) {
Object.assign(this.get('state'), state);
this.get('reloadTable')(this.get('state'))
console.log(this.get('state'))
},
addSelected(item) {
this.get('selected').pushObject(item);
this.set('selected', Object.assign([], this.get('selected')))
// console.log(item, this.get('selected'));
},
removeSelected(item) {
this.get('selected').removeObject(item);
this.set('selected', Object.assign([], this.get('selected')))
// console.log(item, this.get('selected'));
},
addAll() {
this.set('selected', Object.assign([], this.get('data')));
console.log(this.get('selected'));
},
removeAll() {
this.set('selected', Object.assign([], []));
console.log(this.get('selected'));
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
filterOptions: ['a', 'b', 'c'],
data: [{
projectName: 2,
clientName: 'b',
members: ['1', '2']
},{
projectName: 3,
clientName: 'c',
members: ['3', '4']
},{
projectName: 4,
clientName: 'c',
members: []
},{
projectName: 1,
clientName: 'a',
members: []
}],
originalData: [{
projectName: 2,
clientName: 'b',
members: ['1', '2']
},{
projectName: 3,
clientName: 'c',
members: ['3', '4']
},{
projectName: 4,
clientName: 'c',
members: []
},{
projectName: 1,
clientName: 'a',
members: []
}],
sortDirection: '',
sort(key, direction) {
if (direction == 'asc') {
this.set('data', (this.get('data').sortBy(key)))
} else if (direction == 'desc') {
this.set('data', (this.get('data').sortBy(key).reverse()))
} else if (direction == '') {
this.set('data', (this.get('data')))
}
},
applyFilters(filters, data) {
let filteredData = this.get('data');
filters.forEach((f) => {
if (f.type === 'range') {
if (!f.from && !f.to) {
return;
}
filteredData = this.get('data').filter(function(item){
return f.from <= item[f.property] && item[f.property] <= f.to;
});
}
if (f.type === 'value') {
if (f.value === undefined) {
return;
}
filteredData = filteredData.filter(function(item){
return f.value === item[f.property]
});
}
if (f.type === 'selection') {
if(f.value) {
filteredData = filteredData.filter(function(item){
return f.value === (item[f.property].length > 0)
});
}
}
})
this.set('data', filteredData)
},
search(text) {
if (!text) {
this.set('data', (this.get('data')))
} else {
this.set('data', (this.get('data').filterBy('clientName', text)))
}
},
actions: {
reloadTable({sort, search, filters}) {
this.set('data', this.get('originalData'));
if (sort) {
this.sort(sort.property, sort.direction);
}
if (filters) {
this.applyFilters(filters);
}
if (search) {
this.search(search.text);
}
}
}
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{#fb-table data=data reloadTable=(action 'reloadTable') as |table|}}
{{#table.header as |header|}}
{{header.search}}
{{#header.filter as |filter|}}
{{#filter.range-filter title="Project" property='projectName' as |filter|}}
{{/filter.range-filter}}
{{filter.value-filter title="Client" property='clientName' values=filterOptions}}
{{filter.selection-filter title="Has Members" property='members'}}
{{/header.filter}}
{{#header.row as |visualRow|}}
{{visualRow.header-select-cell}}
{{#visualRow.cell}}
{{#header.sort-key key='projectName'}}
Project Name
{{/header.sort-key}} /
{{#header.sort-key key='clientName'}}
Client Name
{{/header.sort-key}}
{{/visualRow.cell}}
{{#visualRow.cell}}
Project Members / Owner
{{/visualRow.cell}}
{{#visualRow.cell}}
Hours Logged
{{/visualRow.cell}}
{{#visualRow.cell}}
End Date
{{/visualRow.cell}}
{{/header.row}}
{{/table.header}}
{{#table.body as |body|}}
{{#each table.data as |row|}}
{{#body.row as |visualRow|}}
{{visualRow.select-cell row=row}}
{{#visualRow.cell}}
{{row.projectName}}
<br>
{{row.clientName}}
{{/visualRow.cell}}
{{#visualRow.cell}}
{{#each row.members as |member|}}
{{ member }}
{{/each}}
{{/visualRow.cell}}
{{#visualRow.cell}}
{{/visualRow.cell}}
{{#visualRow.cell}}
{{/visualRow.cell}}
{{/body.row}}
{{/each}}
{{/table.body}}
{{#table.footer as |footer|}}
{{/table.footer}}
{{/fb-table}}
<br>
<br>
{{yield
(hash
row=(component
'fb-table-row'
addSelected=addSelected
removeSelected=removeSelected
selected=selected
)
)
}}
<div style="display: flex; padding:10px">
{{yield}}
</div>
{{yield
(hash
range-filter=(component
'fb-table-range-filter'
registerFilter=(action 'registerFilter')
)
value-filter=(component
'fb-table-value-filter'
registerFilter=(action 'registerFilter')
)
selection-filter=(component
'fb-table-selection-filter'
registerFilter=(action 'registerFilter')
)
)
}}
<button {{action 'filterAction'}}>Filter</button>
{{yield}}
{{input type='checkbox' selected=value change=(action 'toggle')}}
{{yield
(hash
search=(component
'fb-table-search'
updateState=updateState
)
filter=(component
'fb-table-filter'
updateState=updateState
)
row=(component
'fb-table-row'
addAll=addAll
removeAll=removeAll
data=data
selected=selected
)
sort-key=(component
'fb-table-sort-key'
updateState=updateState
)
)
}}
{{yield}}
{{title}}
{{input value=from}}
{{input value=to}}
<div style="display: flex">
{{yield
(hash
cell=(component
'fb-table-cell'
)
select-cell=(component
'fb-table-select-cell'
addSelected=addSelected
removeSelected=removeSelected
selected=selected
)
header-select-cell=(component
'fb-table-header-select-cell'
updateState=updateState
addAll=addAll
removeAll=removeAll
selected=selected
data=data
)
)
}}
</div>
{{yield}}
{{input value=text}}
<button {{action 'searchAction'}} />
{{yield}}
{{input type='checkbox' selected=value checked=value change=(action 'toggle')}}
{{yield}}
{{input type="checkbox" checked=value}} {{title}}
<div {{action 'sortAction'}}>
{{yield}} {{direction}}
</div>
{{yield}}
<select onchange={{action "selectOption" value="target.value"}}>
2 {{#each values as |optionValue|}}
3 <option value={{optionValue}}>{{optionValue}}</option>
4 {{/each}}
5</select>
{{yield
(hash
header=(component
'fb-table-header'
updateState=(action 'updateState')
addAll=(action 'addAll')
removeAll=(action 'removeAll')
data=data
selected=selected
)
body=(component
'fb-table-body'
addSelected=(action 'addSelected')
removeSelected=(action 'removeSelected')
selected=selected
)
footer=(component
'fb-table-footer'
)
data=data
)
}}
{
"version": "0.15.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.4.3",
"ember-template-compiler": "3.4.3",
"ember-testing": "3.4.3"
},
"addons": {
"ember-data": "3.4.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment