README
Angular (ngx) common
Module which has common services and components which can be used on all projects.
Getting Started
License
Instalation
$ npm i --save wacom
Services
Name | Description |
---|---|
Core |
Common supportive function which can be used in any service |
Http |
Http layer for HttpClient |
Store |
Service will is responsible for keeping information on the device |
Hash |
Hash management for easily use, storage which stay in url |
Render |
Make not automated render management well structured |
Meta |
Website meta tags management within router |
Alert |
Alerts management |
Modal |
Modals management |
Loader |
Loaders management |
UI |
Supportive UI/UX service |
Components
Name | Description |
---|---|
Picker |
Huge common component which is used to take information from user |
Core Service
device
version
set_version
host
parallel
serial
each
afterWhile
emit
on
done
ready
next
Mongo Service
Mongo Service is an suportive service for combining angular 6 client with waw CRUD back-end. Which means that you have to use waw Framework or you have to made your back-end routes in a way of waw crud. Example of importing mongo service:
import { MongoService } from 'wacom';
constructor(private mongo: MongoService){};
function
create connecting with waw CRUD create. As parameters accepting name of mongo collection, object with values for document and optionally callback function which will return the document. Document will be filled inside read callbacks. Example:
mongo.create('colName', {
name: 'docName'
}, created => {
console.log('document has been created');
});
function
read connecting with waw CRUD read. As parameters accepting name of mongo collection, optionally options, optionally callback which will return all documents in array as first parameter and in object with doc._id placeholder for doc as second parameter. Function returning directing array which will host the documents. Example:
mongo.get('colName',{
replace: {
name: function(val, cb, doc){
cb(val+'_modified')
}
},
name: 'me',
next: {
name: 'friends',
next: {
name: 'near',
next: {
name: 'city',
next: {
name: 'country'
}
}
}
},
populate: [{
field: 'author',
part: 'user'
}],
groups: 'city name' || ['city', 'name'] || {
first_name: {
field: function(doc, cb){
if(doc.name.split(' ').length>1) cb(doc.name.split(' ')[1]);
retun doc.name.split(' ')[0];
},
allow: function(doc){
return !!doc.name;
},
ignore: function(){
return false;
},
sort: function(){
}
}
},
query: {
male: function(doc){
return doc.gender;
},
female: {
allow: function(doc){
return !doc.gender;
},
ignore: function(){
return typeof doc.gender != 'boolean';
},
sort: function(a, b){
if(a.order > b.order) return -1;
return 1;
}
}
}
}, (arr, obj, name, resp) => {
/*
* arr will be array with total docs from that part
* obj will be object with total docs from that part binded by _id
* groups will be saved into obj in the way: obj.name['Denys'] or obj.city['Kiev']
* name is the name of current pull from server
* resp is the array of responsinse with documents queried
*/
})
options
replace work as filler of each doc for cases when we can calculate things to use in website. Good example can be currencies which change each moment, we have product in one currency and we want to show it in different currrencies. Other good example can be date fields, which is saved as string and we need them in new Date()
format.
options
populate works in the same way as populate of mongodb but in the client side. This works great when you need documents inside other documents and put on them sorting or other things.
options
groups makings arrays which show different documents inside specific placeholders. As example we can have list of users in specific town or country, so we don't have to create pipes for that.
options
next works as level of pulling different documents from the server. This is mostly made for performance, so user can have the info he needs directly.
function
updateAll connecting with waw CRUD updateAll. As parameters accepting name of mongo collection, document object, optionally options and optionally callback function which will return the document. Example:
mongo.updateAll('colName', {
name: doc.name,
_id: doc._id
}, {
fields: 'name'
}, () => {
console.log('document is updated');
});
function
updateUnique connecting with waw CRUD updateUnique. As parameters accepting name of mongo collection, object with document _id and field value, optionally options and optionally callback function which will return if field has been updated. Example:
mongo.updateUnique('colName', {
name: doc.name,
_id: doc._id
}, {
name: 'name'
}, (resp) => {
if(resp){
console.log('field is updated');
}else {
console.log('field is not updated');
}
});
function
delete connecting with waw CRUD delete. As parameters accepting name of mongo collection, document object, optionally options and optionally callback function which will return the document. Example:
mongo.delate('colName',{
_id: doc._id
}, {
name: 'admin'
}, () => {
console.log('document is deleted');
});
function
_id provide new mongo _id. As parameters accepting callback function which will return the _id. Example:
mongo._id( _id => {
console.log(_id);
});
function
to_id convert array of documents, object with documents, mixed documents or _id and converting it to array of _id. Example:
mongo.to_id([{
_id: '1'
}, '2']);
// ['1', '2']
mongo.to_id({
'1': true
'2': false
});
// ['1']
function
afterWhile provide delay on any action, usefull with input and model change. As parameters accepting document, callback and optionally time. Example:
mongo.afterWhile(doc, () => {
console.log('change can be applied');
}, 2000);
function
populate making population on specific field with specific collection. Example with doc which will have field as document of part provided:
mongo.populate(doc, 'field', 'colName');
function
on accepting array or string of parts and callback which will be called when all parts will be loaded. Example:
mongo.on('user post', () => {
console.log('user and post part has been loaded');
});
Sort
Set of functions, which are accepted by th function array.sort()
as a parameter. Each of these functions is for sorting documents(objects).
function
sortAscId accepting array of objects and return it sorted in ascending order by _id Example:
array.sort(mongo.sortAscId());
function
sortDescId accepting array of objects and return it sorted in descending order by _id Example:
mongo.sortDescId();
function
sortAscString accepting array of object and return it sorted in ascending order by alphabet Example:
mongo.sortAscString();
function
sortDescString accepting array of object and return it sorted in descending order by alphabet Example:
mongo.sortDescString();
function
sortAscDate accepting array of object and return it sorted in ascending order by date Example:
mongo.sortAscDate();
function
sortDescDate accepting array of object and return it sorted in descending order by date Example:
mongo.sortDescDate();
function
sortAscNumber accepting array of object and return it sorted in ascending order by number Example:
mongo.sortAscNumber();
function
sortDescNumber accepting array of object and return it sorted in descending order by number Example:
mongo.sortDescNumber();
function
sortAscBoolean accepting array of object and return it sorted: first - true, second - false Example:
mongo.sortAscBoolean();
function
sortDescBoolean accepting array of object and return it sorted: first - false, second - true Example:
mongo.sortDescBoolean();
function
beArr checking value if it's array then we keep it and in other case, we replace it with new array. Example where each doc will have data as array:
mongo.get('colName', {
replace: {
data:mongo.beArr
}
});
function
beObj checking value if it's object then we keep it and in other case, we replace it with new object. Example where each doc will have data as array:
mongo.get('colName', {
replace: {
data:mongo.beObj
}
});
function
beDate making value new Date(valueContent). Example where each doc will have date as date:
mongo.get('colName', {
replace: {
date:mongo.beDate
}
});
function
forceArr convert any value to array within replace options. Example where each doc will have data as empty array:
mongo.get('colName', {
replace: {
data:mongo.forceArr
}
});
function
forceObj convert any value to object within replace options. Example where each doc will have data as empty object:
mongo.get('colName', {
replace: {
data:mongo.forceObj
}
});
Alert Service
Alert Service is an suportive service for alerts manamanagement. Example of importing alert service:
import { AlertService } from 'wacom';
constructor(private alert: AlertService){};
function
show Opens the alert and return htmlElement of this alert. Example 1:
let my_alert = alert.show({
text: 'Are you sure?',
type: 'question',
timeout: 5000,
class: 'myClass',
position: 'bottomRight',
buttons: [{
text: 'YES',
callback: ()=>{
console.log("YES!");
}
},{
text: 'NO',
callback: ()=>{
console.log("NO!");
}
}]
});
Example 2:
let my_alert = alert.show({
component: MyCustomComponent,
timeout: 5000,
class: 'myClass',
position: 'center',
closable: true
});
options
Name | Type | Description |
---|---|---|
text |
string | Text of alert. |
type |
string | Type of alert(etc info , success , warning , error , question ). |
class |
string | Custom class for your alert. |
unique |
string | Identificator for your alerts. |
progress |
boolean | Enable timeout progress bar. |
position |
string | Position of the alert(topLeft , topCenter , topRight , right , bottomRight , bottomCenter , bottomLeft , left , center ). |
timeout |
number | Amount in milliseconds to close the alert, 0 to disable. |
closable |
boolean | Show "x" close button. |
buttons |
number | Array of buttons for your alerts. |
component |
string or @Component | Component which will be appended into the alert. |
close |
function | custom function for close alert. |
onClose |
function | Capture when the alert is closing. |
### destroy function |
||
Close all alerts. Example: | ||
```javascript | ||
alert.destroy(); | ||
``` | ||
## Modal Service | ||
Modal Service is an suportive service for modals manamanagement. Example of importing modal service: | ||
```javascript | ||
import { ModalService } from 'wacom'; | ||
constructor(private modal: ModalService){}; | ||
``` | ||
### show function |
||
Opens the modal and return htmlElement of this modal. Example: | ||
```javascript | ||
let my_modal = modal.show({ | ||
component: MyCustomComponent, | ||
size: 'mid', | ||
timeout: 5000, | ||
class: 'myClass', | ||
position: 'center', | ||
closable: true | ||
}); | ||
``` | ||
### options | ||
Name | Type | Description |
--------------- | --------- | --------------- |
id |
string | |
component |
string or @Component | Component which will be appended into the modal. |
size |
string | Size of the modal. |
timeout |
number | Amount in milliseconds to close the modal, 0 to disable. |
class |
string | Custom class for your modal. |
closable |
boolean | Show "x" close button. |
unique |
string | Identificator for your modals. |
close |
function | custom function for close modal. |
onOpen |
function | Capture when the modal is opening. |
onClose |
function | Capture when the modal is closing. |
### destroy function |
||
Close all modals. Example: | ||
```javascript | ||
modal.destroy(); | ||
``` | ||
## Loader Service | ||
Loader Service is an suportive service for loaders manamanagement.Example of importing loader service: | ||
```javascript | ||
import { LoaderService } from 'wacom'; | ||
constructor(private load: LoaderService){}; | ||
``` | ||
### show function |
||
Opens the loader and return htmlElement of this loader. Example: | ||
```javascript | ||
let my_loader = load.show({ | ||
timeout: 5000, | ||
class: 'myClass', | ||
closable: true | ||
}); | ||
``` | ||
### options | ||
Name | Type | Description |
--------------- | --------- | --------------- |
append |
@Component | Component where the loader will be appended. |
component |
string or @Component | Component which will be appended into the loader. |
timeout |
number | Amount in milliseconds to close the loader, 0 to disable. |
progress |
boolean | Enable timeout progress bar. |
class |
string | Custom class for your loader. |
closable |
boolean | Show "x" close button. |
close |
function | custom function for close loader. |
onClose |
function | Capture when the loader is closing. |
### destroy function |
||
Close all loaders. Example: | ||
```javascript | ||
loader.destroy(); | ||
``` | ||
## UI/UX Service | ||
UI/UX Service is supportive service for front-end features. This service provides saving css varibles and containes helpful tools for the front developer. | ||
### var | ||
Object which can be used to contain all needed fields for front-end. | ||
### get function |
||
Returns Object with all saved css viriables. | ||
Example: | ||
```javascript | ||
ui.get(); | ||
``` | ||
Result example: | ||
```javascript | ||
{ | ||
test: '15px solid' | ||
} | ||
``` | ||
### remove function |
||
Removes css varible by the key. | ||
Example: | ||
```javascript | ||
ui.remove('css'); | ||
``` | ||
### set function |
||
Method interface sets a new value for a property on a CSS style declaration object and saves all css variables which you have passed. | ||
Example: | ||
```javascript | ||
ui.set(variables, options); | ||
``` | ||
variables - All css varibles you want to pass. If you want to set array of variables you'll need to have specific structure of the array. Example: [{key: 'name', value: example}] . Object will be saved with the same structure. |
options
- If you want to save css variables to the localStorage you should pass local: true
. Also if you want to save variables only for specific host you should pass host: 'hostname'
function
arr Helps developer to generate array with custom length and with elements of specific type. Example:
<div *ngFor="let obj of ui.arr(length, type)"></div>
length
- Length of generated array.
type
- 'number'||'text'||'date'
Will set elements with random content at choosed type. 'number' is default type of elements.
function
text Helps developer to generate random string with specific length. Example:
<span>{{ui.text(length)}}</span>