Angular (ngx) common

Module which has common services and components which can be used on all projects.

Getting Started

License

MIT

Instalation

$ npm i --save wacom

Services

Components

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){};

create function

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');
});

read function

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
*/
})

replace options

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.

populate options

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.

groups options

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.

next options

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.

updateAll function

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');
});

updateUnique function

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');
    }
});

delete function

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');
});

_id function

provide new mongo _id. As parameters accepting callback function which will return the _id. Example:

mongo._id( _id => {
    console.log(_id);
});

to_id function

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']

afterWhile function

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);

populate function

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');

on function

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).

sortAscId function

accepting array of objects and return it sorted in ascending order by _id Example:

array.sort(mongo.sortAscId());

sortDescId function

accepting array of objects and return it sorted in descending order by _id Example:

mongo.sortDescId();

sortAscString function

accepting array of object and return it sorted in ascending order by alphabet Example:

mongo.sortAscString();

sortDescString function

accepting array of object and return it sorted in descending order by alphabet Example:

mongo.sortDescString();

sortAscDate function

accepting array of object and return it sorted in ascending order by date Example:

mongo.sortAscDate();

sortDescDate function

accepting array of object and return it sorted in descending order by date Example:

mongo.sortDescDate();

sortAscNumber function

accepting array of object and return it sorted in ascending order by number Example:

mongo.sortAscNumber();

sortDescNumber function

accepting array of object and return it sorted in descending order by number Example:

mongo.sortDescNumber();

sortAscBoolean function

accepting array of object and return it sorted: first - true, second - false Example:

mongo.sortAscBoolean();

sortDescBoolean function

accepting array of object and return it sorted: first - false, second - true Example:

mongo.sortDescBoolean();

beArr function

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
    }
});

beObj function

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
    }
});

beDate function

making value new Date(valueContent). Example where each doc will have date as date:

mongo.get('colName', {
    replace: {
        date:mongo.beDate
    }
});

forceArr function

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
    }
});

forceObj function

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){};

show function

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

destroy function

Close all alerts. Example:

alert.destroy();

Modal Service

Modal Service is an suportive service for modals manamanagement. Example of importing modal service:

import { ModalService } from 'wacom';
constructor(private modal: ModalService){};

show function

Opens the modal and return htmlElement of this modal. Example:

let my_modal = modal.show({
    component: MyCustomComponent,
    size: 'mid',
    timeout: 5000,
    class: 'myClass',
    position: 'center',
    closable: true
});

options

destroy function

Close all modals. Example:

modal.destroy();

Loader Service

Loader Service is an suportive service for loaders manamanagement.Example of importing loader service:

import { LoaderService } from 'wacom';
constructor(private load: LoaderService){};

show function

Opens the loader and return htmlElement of this loader. Example:

let my_loader = load.show({
    timeout: 5000,
    class: 'myClass',
    closable: true
});

options

destroy function

Close all loaders. Example:

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:

ui.get();

Result example:

{
  test: '15px solid'
}

remove function

Removes css varible by the key. Example:

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:

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'

arr function

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.

text function

Helps developer to generate random string with specific length. Example:

<span>{{ui.text(length)}}</span>