I have created some users and i have data in my users collection.I wan to display this data in a reactive table https://github.com/aslagle/reactive-table
This is my helper code
settings: function () {
return {
collection: Meteor.users.find(),
rowsPerPage: 10,
showFilter: true,
fields: ['_id', 'profile.schoolname', 'profile.schoollocation']
};
},
and this is my html
{{> reactiveTable settings=settings}}
When i run the code,only the fields i have defined show but not the data.
What could be the problem?.
I solved it this way.
In the helper
settings: function () {
return {
collection: 'ma',
rowsPerPage: 5,
showFilter: true,
showNavigation: 'auto',
fields: [
{ key: '_id', label: 'Id' },
{ key: 'profile.schoolname', label: 'Name' },
{ key: 'profile.schooltelephonenumber', label: 'Telephone' },
{ key: 'profile.schoollocation', label: 'Location' }
],
useFontAwesome: true,
group: 'client'
};
},
and in my publish
ReactiveTable.publish("ma",
function () {
return Meteor.users;
}
);
the html
{{> reactiveTable settings=settings}
Related
I want to add some styling to the last row in my grid. I wont know what the row number is as there could be any number of rows. How can I go about this? I've seen rowClass and rowRenderer but not a working example. Here is the code I have:
var displayData = function (itemViewModelList) {
var fields = [
{
name: 'ConsultantName', type: 'text', width: 100, title: 'Consultant Name'
},
{
name: 'BranchName', type: 'text', width: 100, title: 'Branch Name', css: "red"
},
{ name: 'NumberOfInvestments', type: 'text', title: 'Number Of Investments' },
{
name: 'ValueOfInvestments', type: 'money', width: 150, title: 'Value Of Investments',
itemTemplate: function (value) {
return tisCommon.formatForMoney(value);
}
},
{
name: 'AverageValueOfInvestments', type: 'money', width: 150, title: 'Average Value Of Investments',
itemTemplate: function (value) {
return tisCommon.formatForMoney(value);
}
},
{
name: 'Month', type: 'text', width: 100, title: 'Month',
itemTemplate: function (value) {
return moment(value, 'M').format('MMMM');;
}
},
];
var options = {
inserting: false,
editing: false,
pageSize: 20,
fields: fields,
rowHeaders: false,
colHeaders: false,
data: itemViewModelList,
controller: controller = {
loadData: function () {
},
},
};
$('#investment-grid').tisGrid('', options);
if (itemViewModelList[0].ConsultantName != null) {
$("#investment-grid").jsGrid("fieldOption", "BranchName", "visible", false);
} else {
$("#investment-grid").jsGrid("fieldOption", "ConsultantName", "visible", false);
}
};
My data being passed "itemViewModelList" is an array of objects
I resolved this by using rowClass as follows:
controller: controller =
{
loadData: function () {},
},
rowClass: function (item, itemIndex) //item is the data in a row, index is the row number.
{
if ((item.ConsultantName == "Totals") || (item.BranchName == "Totals"))
{
return "totalItem highlight";
}
}
I have my if statement where I find the item in the last row based on my conditions. When they are met, I add my custom CSS classes to that row.
Hello I have a problem
Working:
Meteor
Angular Meteor
ui-grid
I follow the plunker example in documentation ui-grid link
The problem is that the data don't show when filters are activated.
I have no errors in console.
I put my code:
html file
<button id='toggleFiltering' ng-click="inventario.toggleFiltering()" class="btn btn-success">Toggle Filtering</button>
<div id="grid1" ui-grid="inventario.gridOptions" class="grid"></div>
js file
class Inventario {
constructor($scope, $reactive, $uibModal, $http, uiGridConstants) {
'ngInject';
$reactive(this).attach($scope);
this.$uibModal = $uibModal;
var today = new Date();
var nextWeek = new Date();
this.highlightFilteredHeader = (row, rowRenderIndex, col, colRenderIndex) => {
if( col.filters[0].term ){
return 'header-filtered';
} else {
return '';
}
};
this.gridOptions = {
enableFiltering: true,
onRegisterApi: (gridApi) => {
this.gridApi = gridApi;
},
columnDefs: [
// default
{ field: 'name', headerCellClass: this.highlightFilteredHeader },
// pre-populated search field
{ field: 'gender', filter: {
term: '1',
type: uiGridConstants.filter.SELECT,
selectOptions: [ { value: '1', label: 'male' }, { value: '2', label: 'female' }, { value: '3', label: 'unknown'}, { value: '4', label: 'not stated' }, { value: '5', label: 'a really long value that extends things' } ]
},
cellFilter: 'mapGender', headerCellClass: this.highlightFilteredHeader },
// no filter input
{ field: 'company', enableFiltering: false, filter: {
noTerm: true,
condition: (searchTerm, cellValue) => {
return cellValue.match(/a/);
}
}},
// specifies one of the built-in conditions
// and a placeholder for the input
{
field: 'email',
filter: {
condition: uiGridConstants.filter.ENDS_WITH,
placeholder: 'ends with'
}, headerCellClass: this.highlightFilteredHeader
},
// custom condition function
{
field: 'phone',
filter: {
condition: (searchTerm, cellValue) => {
var strippedValue = (cellValue + '').replace(/[^\d]/g, '');
return strippedValue.indexOf(searchTerm) >= 0;
}
}, headerCellClass: this.highlightFilteredHeader
},
// multiple filters
{ field: 'age', filters: [
{
condition: uiGridConstants.filter.GREATER_THAN,
placeholder: 'greater than'
},
{
condition: uiGridConstants.filter.LESS_THAN,
placeholder: 'less than'
}
], headerCellClass: this.highlightFilteredHeader},
// date filter
{ field: 'mixedDate', cellFilter: 'date', width: '15%', filter: {
condition: uiGridConstants.filter.LESS_THAN,
placeholder: 'less than',
term: nextWeek
}, headerCellClass: this.highlightFilteredHeader
},
{ field: 'mixedDate', displayName: "Long Date", cellFilter: 'date:"longDate"', filterCellFiltered:true, width: '15%',
}
]
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success((data) => {
this.gridOptions.data = data;
this.gridOptions.data[0].age = -5;
data.forEach( function addDates( row, index ){
row.mixedDate = new Date();
row.mixedDate.setDate(today.getDate() + ( index % 14 ) );
row.gender = row.gender==='male' ? '1' : '2';
});
});
this.toggleFiltering = () => {
this.gridOptions.enableFiltering = !this.gridOptions.enableFiltering;
this.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
};
}
}
const name = 'inventario';
// Módulo
export default angular
.module(name, [
uiRouter,
EditarArticulo
])
.component(name, {
templateUrl: `imports/ui/components/${name}/${name}.html`,
controllerAs: name,
controller: Inventario
})
.config(config)
.filter('mapGender', function() {
var genderHash = {
1: 'male',
2: 'female'
};
return function(input) {
if (!input){
return '';
} else {
return genderHash[input];
}
};
});
Given that everything seems to work when filtering is disabled, you must have a problem with the (multiple) filters you have declared.
It is most likely a combination of the filters that is excluding all of your data. Start by commenting out all of the filters (you should see all the data), and then re-introduce the filters one by one until you see the problem again.
This will narrow down the problem, and allow you to see which filter is wrong.
I'm using reactive table package from aslagle in my app and I want to create in-line editing, I searched and I found that there's x-editable package for Meteor, so how can I use aslagle:reactive-table package with workman:x-editable-reactive-template package?
I tried this:
Reactive-Table settings:
tableSettings: function () {
return {
collection: fLogCollection,
rowsPerPage: 10,
showFilter: true,
fields: [
{ key: 'name', label: 'Name'},
{ key: 'amount',
label: 'Amount',
tmpl: Template.xEditableAmount
},
{ key: 'cashFrom', label: 'Cash From'},
{ key: 'dateIs', label: 'Date', sortOrder: 0, sortDirection: 'descending'},
{ key: 'controls', label: 'Controls', fn: function () {
return new Spacebars.SafeString(
"<button class='editFlog'><span class='glyphicon glyphicon-pencil'></span> </button>"+
"<button class='delete'><span class='glyphicon glyphicon-remove'></span> </button>"
); } },
{ key: 'createdAt', label: 'createdAt', hidden: true },
],
};
},
xEditableAmount template:
<template name="xEditableAmount">
{{amount}}
</template>
This code to get the x-editable rendered:
Template.fLog.onRendered(function() {
this.$('.editable').editable({
success: function (response, newValue) {
if(response.status == 'error') return response.msg; //msg will be shown in editable form
else Meteor.call('flog.edit2', this._id, newValue);
},
});
});
I succeeded in making x-editable render but
I failed at getting the field updated with the new value in collection...
You can inject templates into fields which makes it convenient to add almost anything you want.
Template helper:
tableSettings: function() {
return {
collection: foo,
fields: [
{
key: 'foo_1',
label: 'Foo 1',
tmpl: Template.foo1,
},
{
key: 'foo_2',
label: 'Foo 2',
tmpl: Template.foo2,
},
{
key: 'foo_2',
label: 'Foo 2',
tmpl: Template.foo2,
}
]
};
}
In foo2 helper (copied directly from workman/x-editable-reactive-template atmosphere page):
Template.foo2.helpers({
onSuccess: function () {
var id = this._id;
return function (res, val) {
MyColl.update({ _id: id }, { $set: { prop: val } });
}
}
});
In your Templates:
<template name='table>
{{> reactiveTable settings=tableSettings}}`
</template>
<template name='foo1'>
<!-- Any html (below pasted from docs (link at bottom of post)-->
superuser
</template>
<template name='foo2'>
{{> xEditable type="text" success=onSuccess placement="right" }} <!-- put your workman:x-editable-reactive-template here -->
</template>
This should get you pointed in the right direction.
https://vitalets.github.io/x-editable/docs.html
I am confused how to apply BelongsToMany with Bookshelf.
Say, there is a Movie that BelongsToMany Genres, e.g.
"The Artist" has the genres "Comedy, Drama"
I have setup a join table called join_movies_genres that has FK movie_id and genre_id.
I try to fetch genres from a Movie with and without a through(...) definition. I get however undefined targets, similar to:
relatedData:
{ type: 'belongsToMany',
target:
{ [Function]
NotFoundError: [Function: ErrorCtor],
NoRowsUpdatedError: [Function: ErrorCtor],
NoRowsDeletedError: [Function: ErrorCtor] },
targetTableName: 'genres',
targetIdAttribute: 'id',
joinTableName: 'join_movies_genres',
foreignKey: { debug: true },
otherKey: undefined,
parentId: 1,
parentTableName: 'movies',
parentIdAttribute: 'id',
parentFk: 1,
throughTarget:
{ [Function]
NotFoundError: [Function: ErrorCtor],
NoRowsUpdatedError: [Function: ErrorCtor],
NoRowsDeletedError: [Function: ErrorCtor] },
throughTableName: 'join_movies_genres',
throughIdAttribute: 'id',
throughForeignKey: { debug: true } }
So, how would I approach setting up this relation? How can I enable a debug output?
The current state of the Model is:
var Movie = bookshelf.Model.extend({
tableName: 'movies',
genres: function() {
// return this.belongsToMany(Genre, 'join_movies_genres', 'movie_id', 'genre_id', {debug: true});
// return this.belongsToMany(Genre).through(JoinMovieGenre, 'movie_id', 'genre_id');
return this.belongsToMany(Genre, 'join_movies_genres', 'movie_id', 'genre_id').through(JoinMovieGenre, {debug: true});
}
});
var Genre = bookshelf.Model.extend({
tableName: 'genres'
});
new Movie({title: 'The Artist'}).fetch({debug: true}).then(function(m) {
console.log(m.toJSON());
console.log(m.genres())
})
A sandbox of this code is at https://github.com/mulderp/bookshelf-demo/tree/cli_migrations
Does this work?
var Movie = bookshelf.Model.extend({
tableName: 'movies',
genres: function() {
return this.belongsToMany(Genre, 'join_movies_genres', 'movie_id', 'genre_id');
}
});
var Genre = bookshelf.Model.extend({
tableName: 'genres'
});
new Movie({title: 'The Artist'}).fetch({withRelated:['genres']}).then(function(m) {
console.log(m.toJSON());
});
I am trying to use reactive-table (reactive-table) in Meteor to display users and to edit. I have a major problem:
- I am creating the users with Accounts.createUser() method and I have an extra field "profile" (using meteor-roles package). I am defining the table format using the following code:
Template.adminusers.helpers({
usersCol: function() {
return Meteor.users;
},
settings: function() {
return {
rowsPerPage: 10,
showFilter: true,
fields: [{
key: 'profile.lastname',
label: 'Last name'
}, {
key: 'profile.firstname',
label: 'First name'
}, {
key: 'roles',
label: 'Role'
}, {
key: 'emails.0.address',
label: 'Email'
}, {
key: 'edit',
label: '',
sortable: false,
fn: function() {
var html = '<button class="btn btn-info btn-xs" type="button"><i class="fa fa-paste"></i> Edit</button>'
return new Spacebars.SafeString(html);
}
}]
};
}
});
The problem is that roles and email are displayed only for the current user. I have no idea why...
The profile fields its published to the client by default.
Now in order to get all the user objects, you should do something like this (using allaning roles).
For example you have an user with the rol of Admin, this is how the publish should look and the subscribe.
if(Meteor.isClient){
Tracker.autorun(function(){
Meteor.subscribe('Admin')
})
}else if(Meteor.isServer){
Meteor.publish("Admin", function () {
var user = Meteor.users.findOne({_id:this.userId});
if (Roles.userIsInRole(user, ["Admin"])) {
return Meteor.users.find({}, {fields: {emails: 1, profile: 1, roles: 1}});
}
}
Witht his the Admin user will get all the users, also use a helper like this.
Template.example.helpers({
userList:function(){
return Meteor.users.find();
}
})