hibrad v0.0.9

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

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

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

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

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

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

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:

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

PROPS:

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:

Example:

Config:

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

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

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.