hibrad
v0.0.9
Published
Admin page restful platform
Downloads
1
Readme
HIBRAD
Library for build manager aplication client
VERSION 0.0.9
Search
Application for search action. It provide one method search is: User can input values to search bar, then system will get results from server and display to the screen. It provide many feature as:
- Realtime search.
- Paginagation.
How to use
Use can put attributes by props or extends Search class
Attributes
Attributes | Description ----- | ---------- fieldElements | list of field to direct how to user input value to search. request({keys,page,pageSize,success,fail.error}) | function, how to request search to server. | keys : dict value get by fieldElements. | page : page of list page user want see. | pageSize : max element in one page want see. | success(items,currentPage,maxPage) : | fail(res,json) | error(e) renderItem(data) | how to render one item in search result
Examples
- Put attrs by props:
<Search
fieldElements={[ <CharField name='key' />,<CharField name='description' />]}
request ={ (keys,page,pageSize,success,fail,error)=>{
...
//finish
success(items,currentPage,maxPage)
}}
renderItem={ (item)=>{ return <div>{item.name}</div>}}
/>
- Use extends class:
class ExampleSearch extends Search {
get fieldElements(){
return [ <CharField name='key' />,<CharField name='description' />];
}
request({keys,page,pageSize,success,fail,error}){
...
//finish
success(items,currentPage,maxPage)
}
renderItem(item){
return <div>{item.name}</div>;
}
}
Create
Feature:
- Create form input.
- Request to create object to server.
- Handle error.
Use
Like 'Search'
Attributes
Attributes | Description ---- | --------- fieldElements | list of field to direct how to user input value. request({formData,success,fail.error}) |function, how to request to server. |formData: data to create object. |success(item): |fail(res,json): |error(e) :
Examples
class ExampleCreate extends Create {
get fieldElements(){
return [ <CharField name='name' />,<CharField name='description' />];
}
request({formData,success,fail,error}){
...
//finish
success(createdItem)
}
}
Read
Feature:
- Fetch data from server
- Display result
Use
Like 'Search'
Attributes
Attributes | Description ---- | ------- getRequest({values,success,fail,error}) | how to get item on server. renderItem(item) | how to render item fetched.
Example
class ExampleRead extends Read {
getRequest({values,success,fail,error}){
...
//finish
success(fetchedItem)
}
renderItem(item){
return <div>{item.name}</div>;
}
}
Update
Feature:
- Fetch data from server.
- Create form to user input data.
- Request update value to server.
- Handle error.
Use
Like 'Search'
Attributes
Attributes | Description ---- | -------- fieldElements | list of field to direct how to user input value. request({values,formData,success,fail.error} | function, how to request to server. | values : contain id of object | formData : data to create object. | success(item): | fail(res,json) : | error(e) : getRequest({values,success,fail,error}) | fetch object
Examples
class ExampleUpdate extends Update {
get fieldElements(){
return [ <CharField name='name' />,<CharField name='description' />];
}
request({values,formData,success,fail,error}){
...
//finish
success(updatedItem)
}
getRequest({values,success,fail,error}){
...
//finish
success(fetchedItem)
}
}
Delete
Feature
- Fetch data from server.
- Confirm delete action of User.
- Request delete object to server.
- Handle error
Use
Like 'Search'
Attributes
Attributes | Description ---- | -------- request({values,formData,success,fail.error}) | function, how to request to server. | values : contain id of object | formData : data to create object. | success(item) : | fail(res,json) : | error(e) : getRequest({values,success,fail,error}) | fetch object renderItem(item) |
Examples
class ExampleDelete extends Delete {
request({values,success,fail,error}){
...
//finish
success()
}
getRequest({values,success,fail,error}){
...
//finish
success(fetchedItem)
}
renderItem(item){
return <div>{item.name}</div>;
}
}
Manager
Combine Search, Create, Read, Update, Delete to one app Manager. It has all feature of each child application and combine them operate.
Use
Like 'Search'
Attributes
Attributes | Description ---- | -------- searchFieldElements | list of field to direct how to user input value to search. fieldElements | list of field to direct how to user input value. searchRequest({keys,page,pageSize,success,fail,error}) | function, how to request search to server. | keys : dict value get by fieldElements. | page : page of list page user want see. | pageSize : max element in one page want see. | success(items,currentPage,maxPage) : | fail(res,json) : | error(e) : getRequest({values,success,fail,error}) | how to get item on server. | values : contain id of object | success(item) | fail(res,json) | error(e) createRequest({formData, success, fail, error}) | function, how to request create to server. | formData : data to create object. | success(item) : | fail(res,json) : | error(e) : updateRequest({values,formData, success, fail, error}) | function, how to request update to server. | values : contain id of object | formData : data to create object. | success(item) : | fail(res,json) : | error(e) : deleteRequest({values, success, fail, error}) | function, how to request to server. | values : contain id of object | formData : data to create object. | success(item) : | fail(res,json) : | error(e) : renderSearchItem(item) | how to render one item of search result renderReadItem(item) | how to render fetched item renderDeleteItem(item) | how to render fetched item to delete
Examples
import React, {PropTypes} from 'react'
import {TextField,CharField,SelectField,ImageField,ReferenceField } from 'src'
import {Manager} from 'src'
import {SuggestRestAPI,SearchRestAPI,CreateRestAPI,GetRestAPI,UpdateRestAPI,DeleteRestAPI} from 'src'
import {SignerField} from './SignerManager'
import {LegalDocumentTypeField} from './LegalDocumentTypeManager'
const URL = "http://127.0.0.1:8000/api/legal_documents";
class LegalDocumentManager extends Manager {
// props
get searchFieldElements() {
return [< CharField name = 'name' inline = {
false
}
showLabel = {
false
} />]
}
// props
get fieldElements() {
return [ <CharField name = 'name' />, <LegalDocumentTypeField name = 'type' sendName = 'type_id' />, < TextField name = "description" />, < ImageField name = "avatar" />, < SignerField name = 'signer' sendName = 'signer_id' />, < LegalDocumentField multiple = {
true
}
name = 'is_guided_by_documents' verboseName='Duoc huong dan boi' sendName = 'is_guided_by_document_ids' />
]
}
// props
searchRequest({keys,page,pageSize,success,fail,error}){
new SearchRestAPI({
getUrl: this.getSearchUrl.bind(this),
getItems: (res, json) => {
return json.results;
},
getCurrentPage: (res, json) => {
return json.currentPage;
},
getMaxPage: (res, json) => {
return json.pageCount;
}
}).request({keys,page,pageSize,success,fail,error});
}
// props
getRequest({values,success,fail,error}){
new GetRestAPI(this.getObjectUrl.bind(this)).request({values,success,error})
}
// props
createRequest({formData, success, fail, error}){
new CreateRestAPI(this.getCreateUrl()).request({formData,success,fail,error})
}
// props
updateRequest({values,formData, success, fail, error}){
new UpdateRestAPI(this.getObjectUrl.bind(this)).request({values,formData, success, fail, error})
}
// props
deleteRequest({values, success, fail, error}){
new DeleteRestAPI(this.getObjectUrl.bind(this)).request({values, success, fail, error});
}
// props
getSearchUrl(keys, page, pageSize) {
return `${URL}/search?page=${page}&name=${keys.name
? keys.name
: ""}&size=${pageSize}`;
}
// props
getObjectUrl(keys) {
return `${URL}/${keys.id}/`;
}
// props
getCreateUrl() {
return `${URL}/`;
}
// props
renderSearchItem(item) {
if (!item) {
return <div>None</div>
}
return (
<div>
<div>{item.name}</div>
<div>
Description: {item.description}
</div>
</div>
)
}
// props
renderReadItem(item) {
if (!item) {
return <div>None</div>
}
return (
<div>
<h1>{item.name}</h1>
<div>
Type: {item.type
? item.type.name
: null}
</div>
<div>Description: {item.description}</div>
<img src={item.avatar} width="100" height="100"/>
<div>
Nguoi ky: {item.signer
? item.signer.name
: "Khong co!"}
</div>
<div>
Tai lieu duoc huong dan: {item.is_guided_by_documents.map((item) => {
return <div key={item.id}>{item.name}</div>
})
}
</div>
</div>
);
}
// props
renderDeleteItem(item) {
if (!item) {
return <div>None</div>
}
return (
<div>
<h1>{item.name}</h1>
<div>{item.description}</div>
<img src={item.avatar} width="100" height="100"/>
</div>
);
}
}
export default LegalDocumentManager
Form:
React Component for combine field. It can provide tool of input value fetch.
Use
- Use to combine field.
- It support User input value to form
API
When Form Component binded to Element, it has API:
API | Description ---- | -------- getValues() | return values of all field in form. getFormData() | return formData to request to server. getFormDataValue() | return formData in json format
Example
class TestForm extends React.Component {
getFieldElements() {
return [< CharField name = "search" />, < TextField name = "data" showLabel = {
false
} />, < SelectField name = "gender" options = {
[
{
value: "nam",
label: 'Nam'
}, {
value: 'nu',
label: 'Nu'
}
]
} />
]
}
render() {
return (
<div>
<Form fieldElements ={this.getFieldElements()} onChange={(form)=>{
console.log(form.getValues());
console.log(form.getFormData());
}} />
</div>
)
}
}
render(
<TestForm/>, document.getElementById('test'));
or:
<Form
fieldElements={
[ <CharField name = "search" />,
<TextField name = "data" showLabel = {false} />,
<SelectField name = "gender" options = {
[
{
value: "nam",
label: 'Nam'
}, {
value: 'nu',
label: 'Nu'
}
]
} />
]
}
/>
Field:
Is Used in Form. It declare how to User can input one value.
0. Field
The abstract of all Field.
API
API | Description ---- | --------- getKeyValueList() | return list of dict { key: key,value:value} to add to formData. getValue() | return value of field. getError() | return error of field. putValue(value) | putValue to field. putError(error) | putError to field.
PROPS:
Prop | Description ---- | -------- label | 'label' before input, if undefined, system use 'name' as default. name | name of field, it's required. showLabel | signal boolean, default is true, if true? show label before input : don't show anything. inline | signal boolean, default is true, if true? show label and input in onw line : show int two line. hidden | show or hide field
How to use:
It's used in form
( <Form fieldElements = list of 'field' />)
1. CharField:
Input string value by text input.
2. TextField
Input string value by textarea.
3. FileField
Input File value.
4. ImageField
Input Image value.
5. SelectField
Input select value.
Extra props
- options: list of option in input.
Example
<SelectField name = "gender" options = {
[
{
value: "nam",
label: 'Nam'
}, {
value: 'nu',
label: 'Nu'
}
]
} />
```
### 6. ReferenceField
Input reference value.
It is select field that item of options are fetched from server.
#### Extra Props:
Prop | Description
---- | --------
**sendName** | name of value in formData
**managerElement** | manage element for select option in manager app.
**suggestRequest({key, success, fail, error})** | How to request suggest item for select from server.
**renderItem(item)** | How to render one item in list suggest item
**receive** | How to receive value for type
**send** | How to send value for type
**toValue** | How to get value for type
#### Example:
Config:
```js
export class LegalDocumentField extends ReferenceField {
get managerElement() {
return <LegalDocumentManager />
}
get receive() {
return 'object'
}
get send() {
return 'id'
}
get toValue() {
return 'object'
}
suggestRequest({key, success, fail, error}) {
return new SuggestRestAPI({
getUrl: (key) => `http://127.0.0.1:8000/api/legal_documents/search?name=${key}`,
getItems: (res, json) => json.results
}).request({key, success, fail, error})
}
renderItem(item) {
return <div>{item.name}</div>
}
}
And Use:
<LegalDocumentField name='re' sendName='re_id' />
7. ManyObjectField
Feature
Provide field for many object input. It provide json string as value
Props
Prop | Description ---- | -------- sendName | name of value send to server fieldElements | fields of form to input one Object renderItem(item) | how to render one object getSendItem(item) | how to send one value of object
Examples
<ManyObjectField
name='drug_substance_in_drug_items'
sendName='drug_substance_in_drug_items_json'
fieldElements={[<CharField name='id' hidden />,<DrugSubstanceField name='drug_substance' receive='object' send='object' />,<TextField name='info' />]}
renderItem ={(item)=> <div>{item.drug_substance.name} - { item.info}</div>}
getSendItem = {({id,drug_substance,info}) =>{ return {id: id,drug_substance_id : drug_substance.id,info: info} } }
/>
Update version 0.0.9
Field:
Add prop: hidden hidden is the attribute that: true : hide field false or undefined or not declare: don't anything.
Form:
Add function: getFormDataJson() return form data in json format
ManyObjectField:
Feature
Provide field for many object input. It provide json string as value
Props
Prop | Description ---- | -------- sendName | name of value send to server fieldElements | fields of form to input one Object renderItem(item) | how to render one object getSendItem(item) | how to send one value of object
Examples
<ManyObjectField
name='drug_substance_in_drug_items'
sendName='drug_substance_in_drug_items_json'
fieldElements={[<CharField name='id' hidden />,<DrugSubstanceField name='drug_substance' receive='object' send='object' />,<TextField name='info' />]}
renderItem ={(item)=> <div>{item.drug_substance.name} - { item.info}</div>}
getSendItem = {({id,drug_substance,info}) =>{ return {id: id,drug_substance_id : drug_substance.id,info: info} } }
/>
Navigation:
Fix next overload issue.