quasar-crud

This package includes 4 main component that combine several feature of Quasar like q-table, q-input , q-time and etc:

• EntityIndex => For list of items.
• EntityEdit => For edit information of any item of list
• EntityCreate => For create new item
• EntityShow => For show information of item

It also has:

• Portlet => You can make every customized component that you want
• EntityIndexTable => For make table in a specific structure

install

npm i quasar-crud

Usage

To use it in vue files, you need to import the component you want and use it like a regular component, for example:

<template>
    <entity-index/>
</template>

<script>
    import EntityIndex from 'quasar-crud'
    export default {
        components: { EntityIndex }
    }
</script>

Features:

• EntityIndex

| props | default | type | description | |---------------------|:---------------------------:|:-----------------|--------------------------------------------| | value | [ ] | Array | | | title | ' ' | String | | | api | ' ' | String | | | createRouteName | ' ' | String, Boolean | | | tableKeys | { data: ' ', total: ' ' } | Object | query params of response | | table | { columns: [ ], data: [ ] } | Object | column include props of column in q-table | | beforeLoadInputData | () => { } | Function | | | afterLoadInputData | () => { } | Function | |

• EntityEdit

| props | default | type | description | |---------------------|:---------------------------:|:----------|------------------------------| | value | [ ] | Array | | | title | ' ' | String | | | api | ' ' | String | | | entityIdKey | ' id ' | String | Id of selected item | | entityParamKey | ' id ' | String | need for router param | | showRouteName | ' ' | String | route name of show component | | table | { columns: [ ], data: [ ] } | Object | | | beforeGetData | () => { } | Function | | | beforeLoadInputData | () => { } | Function | | | afterLoadInputData | () => { } | Function | |

• EntityCreate

| props | default | type | description | |-----------------------|:---------------------------:|:---------|--------------------------------------------------| | value | [ ] | Array | | | title | ' ' | String | | | api | ' ' | String | | | showRouteName | ' ' | String | route name of show component | | showRouteParamKey | ' ' | String | router param of show component | | entityIdKeyInResponse | ' id ' | String | ned for value of router param of show component | | indexRouteName | ' ' | String | route name of index component | | table | { columns: [ ], data: [ ] } | Object | | | beforeLoadInputData | () => { } | Function | | | afterLoadInputData | () => { } | Function | |

• EntityShow

| props | default | type | description | |---------------------|:---------------------------:|:---------|-------------------------------| | value | [ ] | Array | | | title | ' ' | String | | | api | ' ' | String | | | entityIdKey | ' id ' | String | Id of selected item | | entityParamKey | ' id ' | String | need for router param | | editRouteName | ' ' | String | route name of edit component | | indexRouteName | ' ' | String | route name of index component | | table | { columns: [ ], data: [ ] } | Object | | | beforeGetData | () => { } | Function | | | beforeLoadInputData | () => { } | Function | | | afterLoadInputData | () => { } | Function | |

• Portlet:

it has 3 slot that you can use them in all previous components:

#title
#toolbar
#content

• EntityIndexTable:

it has 3 slot that you can use them in EntityIndex component:

#top="props"
#body-cell="props"  
# content  

| props | default | type | |------------|:---------------------------------------------------------------------------------------------------------------------------------:|:----------| | value | { data: [ ], pagination:{ sortBy: 'desc',descending: false,page: 1, rowsPerPage: 0 }rowsNumber: 0 } | Object | | title | ' ' | String | | loading | false | Boolean | | columns | [ ] | Array | | changePage | () => {} | Function |

Notice!

You can create forms in all previous components using quasar-form-builder.
To access them you can v-model an array of input's props as value prop in quasar-crud's components