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:

1. Realtime search.
2. 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:

1. Create form input.
2. Request to create object to server.
3. 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:

1. Fetch data from server
2. 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:

1. Fetch data from server.
2. Create form to user input data.
3. Request update value to server.
4. 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

1. Fetch data from server.
2. Confirm delete action of User.
3. Request delete object to server.
4. 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.