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.

hibrad

HIBRAD

VERSION 0.0.9

Search

How to use

Attributes

Examples

Create

Feature:

Use

Attributes

Examples

Read

Feature:

Use

Attributes

Example

Update

Feature:

Use

Attributes

Examples

Delete

Feature

Use

Attributes

Examples

Manager

Use

Attributes

Examples

Form:

Use

API

Example

Field:

0. Field

API

PROPS:

How to use:

1. CharField:

2. TextField

3. FileField

4. ImageField

5. SelectField

Extra props

Example

7. ManyObjectField

Feature

Props

Examples

Update version 0.0.9

Field:

Form:

ManyObjectField:

Feature

Props

Examples

Navigation:

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Last publish

Collaborators

Weekly Downloads