Introduction
The C2FO ui component library is designed to be an all-encompassing library for C2FO ui components. Built on top of our angular-style-guide and ui-guide, the ui component library gives a stable testing ground for the shared frontend resources across our applications.
Getting Started
Installation
npm install --save c2fo-ui-components
Usage
All modules are available through a bundled script or as commonjs modules. Using the commonjs module approach you can pick and choose exactly what modules you need for your use case.
CommonJS
Recommended loading pattern for enhanced flexbility and debugging capabilities.
/*
* CommonJS
*/
var angular = require('angular');
require('c2fo-ui-components');
// Add the entire ui library as a dependency
angular.module('app', [
'c2fo.ui'
]);
// Only load a few modules
// Note: You should only use the required amount of source code if you choose this path.
angular.module('app', [
'c2fo.ui.modules.pager'
]);
Static
If CommonJS is not avaible then you can you the static bundled source code, but a bundled copy of the source code is available for static serving as well.
<!--
Static Bundled HTML
-->
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/scripts/c2fo-ui-components/dist/c2fo-ui-components.min.css"/>
</head>
<body class="container">
<div ng-app="app"></div>
<script src="/scripts/angular/angular.min.js"></script>
<script src="/scripts/c2fo-ui-components/dist/c2fo-ui-components.min.js"></script>
<script>
angular.module('app', ['c2fo.ui']);
</script>
</body>
</html>
Directives
Checkbox Filter Group
A group of checkboxes to
Module Name
c2fo.ui.modules.checkboxFilterGroup
Parameters
Name | Type | Default | Required | Description |
---|---|---|---|---|
label | String | undefined | false | The string representation of checkbox group’s title. |
fields | Array | undefined | true | An array of field objects. Each field can write to it’s own “filter-key” by setting an optional attribute of filterKey within the field declaration. |
filter | Object | undefined | true | The filter reference object. |
filter-key | String | undefined | true | The filter object key to store values in. Values will always be stored in an array format. |
multicheck | Boolean | false | false | Setting multicheck to false let’s the filter group act as a radio button group (only one value can be selected at a time). Setting multicheck to true allows multiple values to be selected and stored. |
on-update | Function | undefined | false | Optional callback for when a checkbox is selected. |
Usage (Javascript)
angular.module('app', ['c2fo.ui.modules.checkboxFilterGroup']).controller(AppController);
AppController.$inject = [];
function AppController() {
var vm = this;
/*
* If all of these fields were checked then the output would like.
vm.filter => {
custom-filter-key: ['new-value']
status: ['approved-value', peer-reviewed-value, 'closed-value']
}
* By applying a filterKey in the field declaration you can override the base group value and group things
* that may have semantic meaning to the end user, but don't correlate together in your system.
*/
vm.fields = [
{ label: 'New', value: 'new-value', filterKey: 'custom-filter-key'},
{ label: 'Approved', value: 'approved-value'},
{ label: 'Peer Reviewed', value: 'peer-reviewed-value'},
{ label: 'Closed', value: 'closed-value'}
]
vm.filter = {};
vm.onUpdate = onUpdate;
function onUpdate() {
console.log(vm.filter);
}
}
Usage (HTML View)
<c2fo-checkbox-filter-group
label="Status"
fields="appCtrl.fields"
filter="appCtrl.filter"
filter-key="status"
multicheck="true"
on-update="appCtrl.onUpdate">
</c2fo-checkbox-filter-group>
Pager
Data list pagination helper.
Module Name
c2fo.ui.modules.pager
Parameters
Name | Type | Default | Required | Description |
---|---|---|---|---|
current-page | Integer | undefined | true | The id for the current dataset page. |
previous-page | Integer | undefined | true | The id for the previous dataset page. |
has-previous-page | Boolean | false | true | True if the current dataset has preceding data. |
next-page | Integer | undefined | true | The id for next dataset page. |
has-next-page | Boolean | false | true | True if the current dataset has more data. |
total-pages | Integer | undefined | true | The total number of pages in the dataset. |
on-page-change | Function | undefined | true | The callback function for when a page changes. Returns an integer value of page dataset to show. |
previous-page-count | Integer | 0 | false | The number of quick links to show for previous pages. |
next-page-count | Integer | 0 | false | The number of quick links to show for next pages. |
Usage (Javascript)
angular.module('app', ['c2fo.ui.modules.pager']).controller(AppController);
AppController.$inject = [];
function AppController() {
var vm = this;
vm.filter = {
page: 1
};
vm.numPreviousLinks = 3;
vm.onPageChange = onPageChange;
function onPageChange(pageNumber) {
vm.filter.page = pageNumber;
vm.invoices = _getInvoices();
}
function _getInvoices() {
return {
data: [], // invoice data
meta: {
currentPage: 4,
totalPages: 22,
hasPreviousPage: true,
previousPage: 3,
hasNextPage: true,
nextPage: 5
}
}
}
}
Usage (HTML View)
<c2fo-pager
current-page="appCtrl.invoices.meta.currentPage"
total-pages="appCtrl.invoices.meta.totalPages"
has-previous-page="appCtrl.invoices.meta.hasPreviousPage"
previous-page="appCtrl.invoices.meta.previousPage"
has-next-page="appCtrl.invoices.meta.hasNextPage"
next-page="appCtrl.invoices.meta.nextPage"
previous-page-count="appCtrl.numPreviousLinks"
next-page-count="appCtrl.numPreviousLinks"
on-page-change="appCtrl.onPageChange">
</c2fo-pager>
Filters
Absolute Value
Return the absolute value of a number.
Module Name
c2fo.ui.modules.absoluteValueFilter
Parameters
Type | Default | Required | Description |
---|---|---|---|
Number | undefined | true | The number to get the absolute value of. |
Usage
angular.module('app', []).controller(appController);
appController.$inject = ['$filter'];
function appController($filter) {
$filter('abs')(-7); // 7
}
Boolean
Convert boolean values to string representations.
Module Name
c2fo.ui.modules.booleanFilter
Parameters
Type | Default | Required | Description |
---|---|---|---|
Varies | undefined | true | The value to convert to a boolean string representation. |
Usage
angular.module('app', []).controller(appController);
appController.$inject = ['$filter'];
function appController($filter) {
$filter('boolean')({}); // 'T'
$filter('boolean')([]); // 'T'
$filter('boolean')(true); // 'T'
$filter('boolean')(1); // 'T'
$filter('boolean')(''); // 'F'
$filter('boolean')(false); // 'F'
$filter('boolean')(0); // 'F'
}