2.2.60 • Published 2 years ago

@imagina/qcrud v2.2.60

Weekly downloads
43
License
ISC
Repository
github
Last release
2 years ago

QCRUD | 2.1.4

This package has a components to make a CRUD in the best and fast way

Installation

npm i @imagina/qcrud@2.1.4

Usage

You must create a file .vue with a computed method, than will content all params to config your CRUD. with next format:

<template></template>
<script>
  export default {
    data (){ return {crudId : this.$uid()} },
    computed: {
      //Config To create CRUD
      crudData() {
        return {
          crudId : this.crudId,//Required
          modalId : 'modal-id',//Set custom id to crud modal 
          apiRoute: 'api-route-name',//Required
          permission: 'prefix-permissions (ejm: iblog.posts)',
          create: {
            icon : 'icon-name',
            title: 'title',
            to : {name : '<route-name>', params : {}, query : {}} // optional, if you wan create custom form in other page
          },
          read: {
            search : Boolean, // Define if activate search field. Default it's true
            columns: ['array of object with columns to component qtable'],
            requestParams : {'standard-params-to-request'},
            actions : [//Add action buttons by record
              {
                icon : '',
                color : '',
                route : 'name.route', //redirect to route, and set all data row as route params
                action : (rowData) => {} //Get row data as param
              }
            ],
            filters : {'... Object with format fields'}, //Field to filter data
            filterName : 'filter-name'//Load master filter from app.filters
          },
          update: {
            title: 'title'
            requestParams : {'standard-params-to-request'},
            to : '<route-name>' // optional, if you wan create custom form in other page
          },
          delete: Boolean, //Permit delete record, if it's true same validate permission to delete
          formLeft: {{},{},'... Object with format fields'}, //If just set form left. field has 100% width
          formRight: {{},{},'... Object with format fields'}, //Optional. create form with secodn columnd right
        }
      },
      //Get information from CRUD form
      crudInfo(){
        return this.$store.state.qcrudComponent.component[this.crudId] || {}
      }
    },
  }
</script>

Note: the computed crudInfo has all form fields values. this is available to can validate prop vIf or rules. too has a additional field named typeForm to validate if form is "create" or "update"

  • Format to fields

    With this format can create fields to use in filters, fomrLeft and formRight

      let configField = {
        value: 'value',//Default Value to field
        name: '',//Set field name [options, by default set name of field]
        type: `[crud,input,search,date,hour,select,html,multiSelect,checkbox,image,media,permissions,settings]`,
        isTranslatable : Booblean, //Set field as translatable
        isFakeField: true,//Define if field is a fake field
        noCrud: true,//If is true, this field will no send as form
        props : {//All props accepted to field
          label: `${this.$tr('isite.cms.label.role')}`,
          rules : [], //rules to validate field
          vIf : true,//to load or no this field
          options: [ //Options to load only in type [select, multiSelect]
            {label: this.$tr('isite.cms.label.all'), id: '0'}
          ],
          crudType : [select, button-create, full], //type of load crud, default it's select
          crudData : import('path-crud'),
          crudProps : {},//Props to crud component
          //To load media type
          zone : 'name', //Filed only to use with type [media]
          entity : 'name', //Filed only to use with type [media]
          entityId : 'name', //Filed only to use with type [media]
        },
        loadOptions: { //Async load options form request, only in types [select, multiSelect]
          apiRoute: 'apiRoutes.quser.roles', //apiRoute to request
          select: {label: 'name', id: 'id'}, //Define fields to config select
          delayed : () => {} //Load async options
        },
        validateField : {//Validate if value of field exist [tested only in `input` type]
          apiRoute: 'api-route-name',//Required
          requestParams : {},//Request params
          crudId : this.crudId//<int> Default rule to validate when is with crud
        }     
      }

    When the crud.vue file has been created, you just use the <crud> component (this component is registered globally for use) and set the necesary props.

  • API

    ProptypeDescription
    typeStringDefine load type to component between select, button-create, full. "full" type it's default
    crud-dataimport('path')Import with config to CRUD
    crud-propsObjectObject with props to component
    configObjectObject with config to component like requestParams, options
    custom-dataObjectReplace information from crud.vue file
    EventDescription
    @createdDispath when item was create
    @updatedDispath when item was update
    MethodDescription
    create({})You can set prop type as none to hide component, and call this method to open modal with creation form, extra you can set a Object with data to change form data
    update(itemId)You can set prop type as none to hide component, and call this method to open modal with edition form

Services

Using $crud can access to this predefined services to call data with standard.

ServiceSintaxDescription
create$crud.create(<apiRoute>, data)Create new record
index$crud.index(<apiRoute>, params : {refresh, remember , params})Request data
show$crud.show(<apiRoute>, criteria, params : {refresh, remember , params})Request single record
update$crud.update(<apiRoute>, criteria, data, params : {params})Update record
delete$crud.delete(<apiRoute>, criteria, params : {params})Delete Record
post$crud.post(<apiRoute>, params : {data, requestParams}})Method post
get$crud.get(<apiRoute>, params})Method get
put$crud.put(<apiRoute>, data})Method put

Store

To use SSR it's necessary save data in store. This actions make request with same way of services and save response in states.

ActionSintaxDescription
index$store.dispatch('qcrudMaster/INDEX', indexName, apiRoute, requestParams : {})Request data and save in $store.state.qcrudMaster.index[indexName]
show$store.dispatch('qcrudMaster/SHOW', indexName, criteria, apiRoute, requestParams : {})Request single record and save in $store.state.qcrudMaster.show[indexName]
2.2.60

2 years ago

2.2.59

2 years ago

2.2.57

2 years ago

2.2.58

2 years ago

2.2.55

2 years ago

2.2.56

2 years ago

2.2.54

2 years ago

2.2.53

2 years ago

2.2.51

3 years ago

2.2.52

2 years ago

2.2.50

3 years ago

2.2.48

3 years ago

2.2.49

3 years ago

2.2.46

3 years ago

2.2.45

3 years ago

2.2.44

3 years ago

2.2.43

3 years ago

2.2.39

3 years ago

2.2.37

3 years ago

2.2.38

3 years ago

2.2.35

3 years ago

2.2.36

3 years ago

2.2.42

3 years ago

2.2.40

3 years ago

2.2.41

3 years ago

2.2.34

3 years ago

2.2.33

3 years ago

2.2.32

3 years ago

2.2.31

3 years ago

2.2.28

3 years ago

2.2.29

3 years ago

2.2.27

4 years ago

2.2.30

3 years ago

2.2.26

4 years ago

2.2.25

4 years ago

2.2.24

4 years ago

2.2.23

4 years ago

2.2.22

4 years ago

2.2.21

4 years ago

2.2.20

4 years ago

2.2.19

4 years ago

2.2.18

4 years ago

2.2.17

4 years ago

2.2.16

4 years ago

2.2.14

4 years ago

2.2.13

4 years ago

2.2.12

4 years ago

2.2.11

4 years ago

2.2.10

4 years ago

2.2.9

4 years ago

2.2.8

5 years ago

2.2.7

5 years ago

2.2.6

5 years ago

2.2.5

5 years ago

2.2.4

5 years ago

2.2.3

5 years ago

2.2.1

5 years ago

2.2.2

5 years ago

2.2.0

5 years ago

2.1.4

5 years ago

2.1.3

6 years ago

2.1.2

6 years ago

2.1.1

6 years ago

2.1.0

6 years ago

2.0.6

6 years ago

2.0.5

6 years ago

2.0.4

6 years ago

2.0.3

6 years ago

2.0.2

6 years ago

1.0.4

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

0.0.28

6 years ago

0.0.27

6 years ago

0.0.26

6 years ago

0.0.25

6 years ago

0.0.24

6 years ago

0.0.23

6 years ago

0.0.22

6 years ago

0.0.21

7 years ago

0.0.20

7 years ago

0.0.19

7 years ago

0.0.18

7 years ago

0.0.17

7 years ago

0.0.16

7 years ago

0.0.15

7 years ago

0.0.14

7 years ago

0.0.13

7 years ago

0.0.12

7 years ago

0.0.11

7 years ago

0.0.10

7 years ago

0.0.9

7 years ago

0.0.8

7 years ago

0.0.7

7 years ago

0.0.6

7 years ago

0.0.5

7 years ago

0.0.4

7 years ago

0.0.3

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago