we-bases

Package we-bases

What does this package do?

1. set Global method mixin in project
   • $_asset(path)
   • $_name(path, text)
   • $_color(slug)
   • $_dialog(properties)
   • $_helper(slug)
   • $_openModal(name, data = {}, $can = null)
   • $_closeModal(slug)
2. set Global data mixin in project
   • modal = false
   • modal_data = {}
3. set Global components
   • use <we-base /> for dialog and helper
4. set Global directive
   • example v-can:client-edit.disable="postObject"
   • example v-soon.disable="client-list"
5. has {urlGenerator}
6. Load Category names and store in local storage

• this package a special package for willaengine project

Prerequisites

• use package we-axios.

install

npm install we-bases

Usage

use in main:

import Base from 'we-bases'
Vue.use(Base, options);

defult Options:

const options = {
    basic_roues: {
         login: "/ms-login",
         main: "/main/home",
         user: "/user/list",
         originHostName: 'www.willaengine.ir',
         api: 'https://www.willaengine.ir'
    },
    prefix: 'v1'
};

Mixin

Assets

use for image or file static from https://www.willaengine.ir

if Vue.config.devtools == true => subpath equal '/'

if Vue.config.devtools == true => subpath equal 'https://www.willaengine.ir/'

$_asset(path);

Nomenclature

For names that are going to change according to the customer's needs

get list name from server and save in local storage

$_name(path, text);
//example $_name('common.task.name', 'ثبت $_name')

define default name in install package and projects:

const Task = {
    my_task: {name: ' وظایف من ', name_en: ' My Tasks '},
    my_request: {name: ' درخواست های من ', name_en: ' My Requests '},
    title: {
        add: {name: 'تعریف وظیفه ', name_en: ' Define a Task '},
        add_category: {name: 'افزودن نوع وظیفه', name_en: ' Add a Task Type '},
        list_category: {name: ' مدیریت انواع وظیفه ', name_en: ' Manage the Task types '},
        add_status: {name: ' افزودن وضعیت وظیفه ', name_en: '  Add a Task Status  '},
        list_status: {name: 'مدیریت وضعیت وظیفه ', name_en: '  Manage the Task Status  '},
        detail: {name: 'جزیئات وظیفه ', name_en: '  Task Details  '},
        change_status: {name: 'تغییر وضعیت وظیفه ', name_en: 'Change Task Status'},
    },
    name: 'وظیفه',
    name_en: 'Task',
    names: 'وظایف',
    name_ens: 'Tasks',
    begin_date: {name: 'تاریخ شروع وظیفه', name_en: 'Task Begin Date'},
    end_date: {name: ' تاریخ اتمام وظیفه ', name_en: 'Task End Date'},
    category: {name: 'نوع وظیفه', name_en: 'Task Type'},
    status: {name: 'وضعیت وظیفه', name_en: 'Task Status'},
    responsibility: {name: 'مسئول وظیفه', name_en: 'Task Responsibility'},
};
Vue.prototype.$defaultNames['task'] = Task;

Colors

All WillaEngine project packages that have a special color should be added colors to Vue.prototype.$specialColors Variable

use in component

$_color(slug);
//example $_color('task')

add in package in install OR add in Projects

const taskColors = {
task: 'red',
task_status: 'brown',
task_category: 'yellow'
}
Object.assign(Vue.prototype.$specialColors, taskColors);

Dialog

$_dialog(properties)
//example $_dialog({success: () => {removeCategory(item)}})

default properties variable:

const properties = {
    type: "delete",
    success: function() {
        return "";
    },
    close: function() {
        return "";
    },
    message:
        "آیا از حذف آیتم مطمئن هستید؟ امکان بازگشت وجود نخواهد داشت.",
    title: " تایید حذف ",
    titleEn: " Remove Confirmation ",
    color: "red",
    cancelButtonText: "انصراف",
    confirmButtonText: "حذف",
    cancelButtonColor: "cyan",
    confirmButtonColor: "red"
}

Helper

Passing the slug will prompt you to request this api v1/help/${slug} and get response from server for this slug

$_helper(slug)
//example $_helper('index-category')

Modal

in all components you access to variable data => modal and modal_data

modal is boolean

modal_data is object passing from $_openmodal

$_openModal(name, data = {}, $can = null)
$_closeModal()
//example $_openModal(name, data = {}, $can = null)

name is component name except modal

example:// component name is modal_task_list => name passing in $_openModal('name') is task_list

data access in modal component modal_data variable

$can is object policy $can.model $can.method

$can = {model: 'Client', method: 'index', data}
//data is passing data to directive can
//if data not passing, use data passing to $_openModal()
 
// OR Use 
$can = "Client::index"
// In this case, the data becomes the data used in the $_openModal()

Directive

Policy

must be define class policy in packages and merge with Vue.prototype.$policies

in directory policy file TaskStatusPolicy.js

export default class TaskStatusPolicy {
    //permissions => Object.values(rootPermissions[module])
    //module => Vue.prototype.$module.current
    //rootPermissions => Vue.prototype.$permission
 
    index({module, rootPermissions, permissions}) {
        return permissions.includes('manage-task-status');
    }
    
    create({permissions}) {
        return permissions.includes('manage-task-status');
    }
    
    update({permissions}, object) {
        return permissions.includes('manage-task-status') || object.owner;
    }
    
    delete({permissions}, object) {
        return permissions.includes('manage-task-status') || object.owner;
    }
    
}

in directory policy file index

import TaskStatus from './TaskStatusPolicy'
import Task from './TaskPolicy'
Vue.prototype.$policies['TaskStatus'] = TaskStatus;
Vue.prototype.$policies['Task'] = Task;

//disable
<div v-can:client-show.disable="client" >{{client.name}}</div>
 
//hidden
<div v-can:client-show="client" >{{client.name}}</div>

client-show => client is model name and show is method name split with -

CommingSoon

must be define array in packages and merge with Vue.prototype.$soon

//hidden
<div v-soon="'client'" ><component /></div>
 
//disable
<div v-soon.disable="'client'" ><btn /></div>

Usage URL Generator

file ./url.js

import {urlGenerator} from 'we-bases'
//use prefix in import Base from 'we-bases'
//Vue.use(Base, {prefix: 'v1'});
 
const urls = {
    //Cities && Districts
    indexCities: "cities",
    showCity: "city/:city",
}
export default url = urlGenerator(urls);

use in other file

import urls from './url'
import {axios} from 'we-axios'
$axios.get(urls('showCity', {city: 1}))