Meteoris Awesome Package to Boost Your Development

In my article before, we have been trying to install and get basic understanding about Meteoris. If You haven’t read about that, please read those article before continue reading. Here are some list of very useful Meteoris Packages:

1. meteoris:flash

Meteoris Package to show Flash/Toast Error/Success in your bottom right screen.

how to install:

#note: if you already install (meteor add meteoris:core), you don’t need to install this
#in command prompt, cd to your project, and type this
meteor add meteoris:flash

how to use in your js file:

//set flash message example
Meteoris.Flash.set('success', 'Data Successfully added');
Meteoris.Flash.set('danger', 'Data Failed to be added');

how to use in your html file:

<!-- Simply place this code on your html view anywhere -->
{{> meteoris_flash}}

2. meteoris:form-validation

Meteoris package to validate form easily. This Meteoris.FormValidation extension depends on collection2 and simpleschema:

how to install:

#note: if you already install (meteor add meteoris:core), you don’t need to install this
#in command prompt, cd to your project, and type this
meteor add meteoris:form-validation
  • how to use in your collection:
AccountType = new Mongo.Collection("accountType");
var schemas = new SimpleSchema({
accountClassId: {
type: String,
label: "Kelas Akun",
},
});
AccountType.attachSchema(schemas);
  • how to use in your js helper:
/* show error message on view */
error: function(field) {
return Meteoris.FormValidation.error(YourCollectionName, field);
},
  • how to use in your html view:
<div class="form-group {{#if error 'name'}}has-error{{/if}}">
<label for="name" class="control-label">Kelas Akun *</label>
<input type="text" id="name" value="{{name}}" placeholder="Kelas Akun" class="form-control" autofocus="true">
<span class="help-block">{{error "name"}}</span>
</div>

3. meteoris:formatter

  • this Meteoris.Formatter extension used for formatting anything like date, datetime, currency etc
  • this require lepozepo:accounting and momentjs:moment to works

how to install:

#note: if you already install (meteor add meteoris:core), you don’t need to install this
#in command prompt, cd to your project, and type this
meteor add meteoris:formatter
  • how to use in your html view:
{{meteoris_formatter 'the function name' firstParam secondParam}}
  • available function name:
- date (date)
- dateTime (date)
- elapsedTime (date)
- currency (value)
- combodate (date)
- combodateEmpty (date)
  • example date formatting
{{meteoris_formatter 'date' getCurrDate}}
Template.someTheme.helpers({
getCurrDate: function(){
return new Date();
}
});

4. meteoris:grid-view

Meteoris.GridView extension used for sorting your table header ascending or descending.

how to install:

#note: if you already install (meteor add meteoris:core), you don’t need to install this
#in command prompt, cd to your project, and type this
meteor add meteoris:grid-view
  • how to use in your html view:
<th id="btnSortName" class="{{meteoris_gridViewSortClass 'name'}}">Name</th>
  • how to use in your js events:
Template.accountTypeIndex.events = {
/* sorting by parameter */
'click #btnSortName': function(e) {
Meteoris.GridView.sort('name');
},
}

5. meteoris:theme-admin

This current version of meteoris only have 1 theme which is called meteoris:theme-admin. This theme using popular Admin LTE for it’s UI, Click here for more info about Admin LTE.

To install this theme, simply add meteor package:

meteor add meteoris:theme-admin

How to use

  • You can do general setting of this theme by targetting this url /meteoris/theme-admin/setting
  • You can easily hook sidebar in html file:

a. In your app client folder, create hook folder and inside it, add this template code. b. You can change everything such as loggedin user, global search, and menus inside the template as you wish

<!-- In your app client folder, create hook folder and inside it, add this template code. -->
<!-- You can change everything such as loggedin user, global search, and menus inside the template as you wish -->
<template name="meteoris_themeAdmin_hookSidebar">
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
{{#if currentUser}}
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="/images/user.png" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>{{currentUser.profile.name}}</p>
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
</div>
</div>
{{/if}}
<!--search form-->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
<!--/.search form-->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li><a href="/"><i class="fa fa-home"></i> Home</a></li>
<!--Uncomment this if you want to hide this menu using the power of meteoris:role-->
<!--{{#if meteoris_roleUserIsInGroup "admin"}}-->
<li class="header">ADMIN AREA</li>
<li class="treeview">
<a href="#">
<i class="fa fa-gears"></i>
<i class="fa fa-angle-left pull-right"></i>
<span>Setting</span>
</a>
<ul class="treeview-menu">
<li><a href="/meteoris/theme-admin/setting"><i class="fa fa-laptop"></i> Theme Admin Setting</a></li>
<li><a href="/meteoris/user"><i class="fa fa-users"></i> Users Management</a></li>
<li><a href="/meteoris/user/settings"><i class="fa fa-user"></i> User Settings</a></li>
<li><a href="/meteoris/role"><i class="fa fa-flag-o"></i> Role Management</a></li>
</ul>
</li>
<!--{{/if}}-->
</ul>
</section>
<!-- /.sidebar -->
</aside>
</template>
  • You can hook navbar too in html file: a. In your app client folder, create hook folder and inside it, add this template code. b. You can change everything such as notification, current logged in user, user profile menu etc inside the template as you wish
<template name="meteoris_themeAdmin_hookNavbar">
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
{{#if currentUser}}
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="/images/user.png" class="user-image" alt="User Image">
<span class="hidden-xs">{{currentUser.profile.name}}</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="/images/user.png" class="img-circle" alt="User Image">
<p>
{{currentUser.profile.name}}
</p>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="#" id="btnLogout" class="btn btn-default btn-flat">Logout</a>
</div>
</li>
</ul>
</li>
{{else}}
<li>
<a href="/meteoris/user/login">Login</a>
</li>
{{/if}}
</ul>
</div>
</template>
  • add js file according to the template to get some event, and helper
var ctrl = new Meteoris.UserController();
Template.meteoris_themeAdmin_hookNavbar.events = {
'click #btnLogout': function(){
ctrl.logout();
}
};

6. meteoris:user

  • NB: This package depends on Meteoris Theme Admin
  • The First Registered user will be assigned to admin group by default

how to install:

#in command prompt, cd to your project, and type this
meteor add meteoris:user

You can use this main router:

‘/meteoris/user’, #to manage user as admin

‘/meteoris/user/login’, #to logged in the user and ‘/meteoris/user/register’, #to registering user

‘/meteoris/user/profile’ #to updating current logged in user profile

‘/meteoris/user/settings’, #to setting user oauth account

7. meteoris:role

how to install:

#note: if you already install (meteor add meteoris:core), you don’t need to install this
#in command prompt, cd to your project, and type this
meteor add meteoris:role
  • Check whether current logged in user is in role or not in Collection/Server:
//you can use this code on collection-allow or on server
Meteoris.Role.userIsInRole(collection, action);
//example on collection:
MyCollection.allow({
insert: function(userId, doc) {
return Meteoris.Role.userIsInRole("my-collection", Meteoris.Role.POST);
},
update: function(userId, doc) {
return Meteoris.Role.userIsInRole("my-collection", Meteoris.Role.PUT);
},
remove: function(userId, doc) {
return Meteoris.Role.userIsInRole("my-collection", Meteoris.Role.DELETE);
},
});
//example on router
var roleRoutes = FlowRouter.group({
prefix: '/meteoris/role',
name: 'meteoris_role',
triggersEnter: [authenticating]
});
/* router level validation, only allow user with group "admin" to access this page */
function authenticating() {
if (!Meteoris.Role.userIsInRole("my-collection", Meteoris.Role.GET_ALL)){
Meteoris.Flash.set("danger", "403 Unauthenticated");
FlowRouter.go("/");
}
}
  • Check whether current logged in user is in group or not in Collection/Server:
//you can use this code on collection-allow or on server
Meteoris.Role.userIsInGroup(groupName);
//example on collection:
MyCollection.allow({
insert: function(userId, doc) {
return Meteoris.Role.userIsInGroup("admin");
},
update: function(userId, doc) {
return Meteoris.Role.userIsInGroup("admin");
},
remove: function(userId, doc) {
return Meteoris.Role.userIsInGroup("admin");
},
});
var roleRoutes = FlowRouter.group({
prefix: '/meteoris/role',
name: 'meteoris_role',
triggersEnter: [authenticating]
});
/* router level validation, only allow user with group "admin" to access this page */
function authenticating() {
if (!Meteoris.Role.userIsInGroup("user")){
Meteoris.Flash.set("danger", "403 Unauthenticated");
FlowRouter.go("/");
}
}
  • Check whether current logged in user is in role or not in Client template:
//you can use this code on client template html
{{#if meteoris_roleUserIsInRole "collectionName" "actionName"}}
<!-- Your logic here -->
{{/if}}
//example on client template html:
{{#if meteoris_roleUserIsInRole "my-collection" "GET_ALL"}}
<li><a href="/my-collection"><i class="fa fa-flag-o"></i> My Collection Menu</a></li>
{{/if}}
  • Check whether current logged in user is in group or not in Client template:
//you can use this code on client template html
{{#if meteoris_roleUserIsInGroup "groupName"}}
<!-- Your logic here -->
{{/if}}
//example on client template html:
{{#if meteoris_roleUserIsInGroup "admin"}}
<li><a href="/my-collection"><i class="fa fa-flag-o"></i> My Collection Menu</a></li>
{{/if}}
Try Meteoris now, and show to the world what You have been achieved. Follow me, Share this article and get more tutorial about Meteoris. Stay Tuned!
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.