we-bases
v0.2.0
Published
ya Ali
Downloads
3
Readme
Package we-bases
What does this package do?
- set Global method mixin in project
$_asset(path)
$_name(path, text)
$_color(slug)
$_dialog(properties)
$_helper(slug)
$_openModal(name, data = {}, $can = null)
$_closeModal(slug)
- set Global data mixin in project
modal = false
modal_data = {}
- set Global components
- use
<we-base />
for dialog and helper
- use
- set Global directive
- example
v-can:client-edit.disable="postObject"
- example
v-soon.disable="client-list"
- example
- has
{urlGenerator}
- Load Category names and store in local storage
- this package a special package for willaengine project
Prerequisites
- [x] 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}))