Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
@momsfriendlydevco/angular-ui-query-builder
Advanced tools
Readme
MongoDB format query-builder UI component for Angular.
This component comes in two parts:
Demo.
npm install --save @momsfriendlydevco/angular-ui-query-builder
<script src="/libs/angular-ui-query-builder/dist/angular-ui-query-builder.min.js"/>
<link href="/libs/angular-ui-query-builder/dist/angular-ui-query-builder.min.css" rel="stylesheet" type="text/css"/>
angular.module()
call:var app = angular.module('app', ['angular-ui-query-builder'])
<ui-query-builder query="$ctrl.myQuery" spec="$ctrl.mySpec"></ui-query-builder>
A demo is also available. To use this follow the instructions in the demo directory.
Simply create a query object and link it up to the directive.
In a controller:
$scope.mySpec = {
_id: {type: 'objectId'},
name: {type: 'string'},
email: {type: 'string'},
status: {type: 'string', enum: ['pending', 'active', 'deleted']},
};
$scope.myQuery = {
status: 'active', // Assumes you have a status field
limit: 10,
skip: 0,
};
In a HTML template:
<ui-query-builder query="$ctrl.myQuery" spec="$ctrl.mySpec"></ui-query-builder>
... or see the Demo.
The ui-query-builder directive takes the following parameters:
Parameter | Type | Description |
---|---|---|
query | Object | The current query, this object will be mutated into / from a MongoDB compatible query |
spec | Object | A base specification of field types to use when providing the UI |
If using either the full JS release (angular-ui-query-builder.js
) or the table add-on (angular-ui-query-builder-tables.js
) additional functionality is provided for Tables including column setup, pagination and other functionality.
To use:
qb-table
directive to the table header with a pointer to the query object to mutateqb-col
directive to any table column to extend, include attributes like sortable
to add that functionalityqb-pagination
directive into the table footer to add pagination functionalityFor example:
<table class="table table-bordered table-striped table-hover" qb-table="query">
<thead>
<tr>
<th qb-col="name" sortable>Name</th>
<th qb-col="username" sortable>Username</th>
<th qb-col="email" sortable>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data track by row.id">
<td>{{row.name}}</td>
<td>{{row.username}}</td>
<td>{{row.email}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<qb-pagination></qb-pagination>
</td>
</tr>
</tfoot>
</table>
For a more complex example see the demo.
Use on a <table/>
element to designate that it should be managed by this module.
Valid attributes are:
Attribute | Type | Description |
---|---|---|
qb-table | Object | The main query object to mutate when the table is interacted with |
sticky-thead | boolean | Indicates that the <thead/> portion of the table should remain on screen when scrolling |
sticky-tfoot | boolean | Indicates that the <tfoot/> portion of the table should remain on screen when scrolling |
Use on <td>
/ <th>
element within a <thead>
to provide column level interaction.
<table class="table table-bordered table-striped table-hover" qb-table="query">
<thead>
<tr>
<th qb-col="name" sortable>Name</th>
<th qb-col="username" sortable>Username</th>
<th qb-col="email" sortable>Email</th>
</tr>
</thead>
...
</table>
Valid attributes are:
Attribute | Type | Description |
---|---|---|
qb-col | string | The database field to link against in dotted notation |
sortable | boolean or string | Indicates that this column can be sorted, if blank or boolean true this simply uses the qb-col value as the field to sort by, if its a string it uses that field instead |
Use on <td>
/ <th>
element within a <thead>
/ <thead>
to provide column level interaction.
If this element is within <thead>
it adds table level meta functionality (such as controlling which rows are selected if selector
is truthy). If its within a <tbody>
it adds per-row functionality.
<table class="table table-bordered table-striped table-hover" qb-table="query">
<thead>
...
</thead>
<tbody>
<tr ng-repeat="row in data track by row.id">
<td qb-cell selector="row.selected"></td>
<td>{{row.name}}</td>
</tr>
</tbody>
</table>
Valid attributes are:
Attribute | Type | Description |
---|---|---|
selector | Object | Indicates the field to bind against + mutate when selection is toggled. This usually resembles something like row.selected |
An element, usually found in the <tfoot>
section of a table which provides general pagination functionality.
<table class="table table-bordered table-striped table-hover" qb-table="query">
<thead>
...
</thead>
<tbody>
...
</tbody>
<tfoot>
<tr>
<td colspan="10">
<qb-pagination></qb-pagination>
</td>
</tr>
</tfoot>
</table>
This directive has no attributes.
$or
/ $and
$eq
condition) to a multiple choice enum ($in
) when a comma is used in a string$in
type automatically$regexp
$length
FAQs
MongoDB format query-builder UI component for Angular
We found that @momsfriendlydevco/angular-ui-query-builder demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).