search

wotamann / vuetify-form-base

Schema-based Form Generator - Vue.js 2.0 Component based on Vuetify 2.0
https://wotamann.github.io/vuetify
231 stars 63 forks source link

Using groups #59

Open Exalyn opened 3 years ago

Exalyn commented 3 years ago

Hi.

First of all, thanks for your amazing component, it reminds me of Symfony's FormType.

Here i came after using your component and i was wondering something.

I'm using Vuex with Vuex-Orm and it works like a charm. I have a Client model and schema like this :

Schema :

export const ClientSchema = {
    email: {
        type: 'text',
        label: 'Email',
        flex: 4,
        class: 'mx-2',
        outlined: true
    },
    siret: {
        type: 'text',
        label: 'Siret',
        flex: 4,
        class: 'mx-2',
        outlined: true
    },
    siteWeb: {
        type: 'text',
        label: 'Site web',
        flex: 4,
        class: 'mx-2',
        outlined: true
    },
    raisonSociale: {
        type: 'text',
        label: 'Raison sociale',
        flex: 4,
        class: 'mx-2',
        outlined: true
    },
    code: {
        type: 'text',
        label: 'Code',
        flex: 4,
        class: 'mx-2',
        outlined: true
    },
    telephoneMobile: {
        type: 'text',
        label: 'Téléphone Mobile',
        flex: 4,
        class: 'mx-2',
        outlined: true
    },
    telephoneFixe: {
        type: 'text',
        label: 'Téléphone Fixe',
        flex: 4,
        class: 'mx-2',
        outlined: true
    },
    codeNaf: {
        type: 'text',
        label: 'Code naf',
        flex: 4,
        class: 'mx-2',
        outlined: true
    },
    fax: {
        type: 'text',
        label: 'Fax',
        flex: 4,
        class: 'mx-2',
        outlined: true
    },
}

Model :

import {Model} from '@vuex-orm/core'

export class Client extends Model {
    static entity = 'Client'
    static fields() {
        return {
            id: this.string(null),
            email: this.string(''),
            siret: this.string(''),
            siteWeb: this.string(''),
            commentaire: this.string(''),
            raisonSociale: this.string(''),
            code: this.string(''),
            telephoneMobile: this.string(''),
            telephoneFixe: this.string(''),
            codeNaf: this.string(''),
            fax: this.string(''),
            actif: this.boolean('')
        }
    }
}

This is only the first and little part i'm implenting. I would like to know if i can group attributes, like Group 1 : label => Infos within a v-card and another group Legal within another card.

It would be very great to use groups for large form.

Example : https://vue-generators.gitbook.io/vue-generators/groups

Regards.

wotamann commented 3 years ago

Thank you for using v-form-base!

The intention by vuetify-formbase was to create a schema based on the model structure.

If the model structure contains a grouping property like 'person' or 'adress' in the following example, then grouping is possible

model: {
  person:{ 
    name:'Harari', 
    age:40 
  },  
  adress:{
    street:'5th Avenue',
    city:'NY'
  } 
}
schema: {
  person:{ 
    type:'group', 
    label:'Person', 
    schema: {
      name: { type: 'text' },    
      age: { type: 'number' }
    } 
  },  
  adress:{
    type:'group', 
    label:'Adress', 
    schema: {
      street:{ type: 'text' },
      city:{ type: 'text' }
  } 
}

However, it is not intended that an external grouping layer can be inserted. If this is desired, you must map the model data accordingly from

model: {
    name:'Harari', 
    age:40 
    street:'5th Avenue',
    city:'NY'
}

to 

model: {
  person:{ 
    name:'Harari', 
    age:40 
  },  
  adress:{
    street:'5th Avenue',
    city:'NY'
  } 
}
wotamann commented 3 years ago

Now you can group any model independent of any structure with type 'wrap'. Use type 'group' for grouping based on model structure

Example Group independent from Model-Structure with Type 'wrap'

Exalyn commented 3 years ago

That's a good news, thanks ! However your link does not work ;)

wotamann commented 3 years ago

This is the correct Link

antoniolucasnobar commented 2 years ago

above link is broken (404). I found this link in the docs. Unfortunately, the examples are not working (like the link from previous post).