[UPDATE] Front: movendo formulário de espécie para componente; novo v…

…iew para criar nova espécie #15
RedeMocambos · Jul 8, 2019 · a30fae6 · a30fae6
1 parent b290ab5
commit a30fae6
Show file tree

Hide file tree

Showing 5 changed files with 249 additions and 168 deletions.
diff --git a/front/src/modules/especie/components/FormEditar.vue b/front/src/modules/especie/components/FormEditar.vue
@@ -0,0 +1,206 @@
+<template>
+    <v-form
+        v-model="valid"
+    >
+        <v-card
+            class="pl-3"
+        >
+            <v-card-title>
+                <div class="headline">
+                    {{ textoCabecalho }}
+                </div>
+            </v-card-title>
+            <v-text-field
+                v-model="dadosEspecie.familia"
+                label="Família"
+                @change="atualizarCampo('familia', $event) "
+            />
+            <v-text-field
+                v-model="dadosEspecie.nome_cientifico"
+                label="Nome científico"
+                @change="atualizarCampo('nome_cientifico', $event) "
+            />
+            <v-text-field
+                v-model="dadosEspecie.nomes_populares"
+                label="Nomes populares"
+                @change="atualizarCampo('nomes_populares', $event) "
+            />
+        </v-card>
+        <v-card
+            class="pa-3"
+        >
+            <v-text-field
+                v-model="dadosEspecie.inicio_colheita"
+                label="Início da colheita"
+                @change="atualizarCampo('inicio_colheita', $event) "
+            />
+            <v-select
+                v-model="dadosEspecie.porte"
+                :items="dadosEspecieMetadata.porte"
+                item-text="descricao"
+                item-value="valor"
+                label="Porte"
+                @change="atualizarCampo('porte', $event) "
+            />
+            <v-select
+                v-model="dadosEspecie.estrato"
+                :items="dadosEspecieMetadata.estrato"
+                item-text="descricao"
+                item-value="valor"
+                label="Estrato"
+                @change="atualizarCampo('estrato', $event) "
+            />
+            <v-select
+                v-model="dadosEspecie.sucessao"
+                :items="dadosEspecieMetadata.sucessao"
+                item-text="descricao"
+                item-value="valor"
+                label="Sucessão"
+                @change="atualizarCampo('sucessao', $event) "
+            />
+            <v-select
+                v-model="dadosEspecie.umidade"
+                :items="dadosEspecieMetadata.umidade"
+                item-text="descricao"
+                item-value="valor"
+                label="Umidade"
+                @change="atualizarCampo('umidade', $event) "
+            />
+            <v-select
+                v-model="dadosEspecie.tolerancia_poda"
+                :items="rangePoda"
+                label="Tolerância a poda"
+                @change="atualizarCampo('tolerancia_poda', $event) "
+            />
+        </v-card>
+        <v-card
+            class="pa-3"
+        >
+            <v-text-field
+                v-model="dadosEspecie.temperatura_min"
+                xs4
+                label="Temperatura mínima"
+                @change="atualizarCampo('temperatura_min', $event) "
+            />
+            <v-text-field
+                v-model="dadosEspecie.temperatura_max"
+                xs4
+                label="Temperatura máxima"
+                @change="atualizarCampo('temperatura_max', $event) "
+            />
+        </v-card>
+        <v-btn
+            color="info"
+            @click="salvar()"
+        >
+            <v-icon
+                class="pr-3"
+            >save</v-icon>
+            salvar
+        </v-btn>
+        <v-btn
+            color="error"
+            @click="voltar()"
+        >
+            <v-icon
+                class="pr-3"
+            >cancel</v-icon>
+            cancelar
+        </v-btn>
+    </v-form>
+</template>
+<script>
+import Tools from '@/mixins/tools';
+import { mapActions, mapGetters } from 'vuex';
+
+export default {
+    name: 'FormEditar',
+    mixins: [
+        Tools,
+    ],
+    props: {
+        textoCabecalho: {
+            type: String,
+            default: 'Edição de espécie',
+        },
+    },
+    data() {
+        return {
+            dadosEditados: {
+                id: '',
+                nomes_populares: '',
+                nome_cientifico: '',
+                familia: '',
+                exigencia_solo: '',
+                temperatura_min: '',
+                temperatura_max: '',
+                inicio_colheita: '',
+                tempo_vida: '',
+                sucessao: '',
+                porte: '',
+                umidade: '',
+                tolerancia_poda: '',
+            },
+            valid: true,
+            rangePoda: [
+                ...Array(10).keys(),
+            ],
+        };
+    },
+    computed: {
+        ...mapGetters({
+            dadosEspecie: 'especie/especie',
+            dadosEspecieMetadata: 'especie/getEspecieMetadata',
+        }),
+    },
+    watch: {
+        dadosEspecie() {
+            this.inicializarDadosEspecie();
+        },
+    },
+    methods: {
+        ...mapActions({
+            updateEspecie: 'especie/updateEspecie',
+        }),
+        inicializarDadosEspecie() {
+            this.dadosEditados = {
+                id: this.dadosEspecie.id,
+                nomes_populares: this.dadosEspecie.nomes_populares,
+                nome_cientifico: this.dadosEspecie.nome_cientifico,
+                familia: this.dadosEspecie.familia,
+                exigencia_solo: this.dadosEspecie.exigencia_solo,
+                temperatura_min: this.dadosEspecie.temperatura_min,
+                temperatura_max: this.dadosEspecie.temperatura_max,
+                inicio_colheita: this.dadosEspecie.inicio_colheita,
+                tempo_vida: this.dadosEspecie.tempo_vida,
+                sucessao: this.dadosEspecie.sucessao,
+                porte: this.dadosEspecie.porte,
+                tolerancia_poda: this.dadosEspecie.tolerancia_poda,
+            };
+        },        inicializarDadosEspecie() {
+            this.dadosEditados = {
+                id: this.dadosEspecie.id,
+                nomes_populares: this.dadosEspecie.nomes_populares,
+                nome_cientifico: this.dadosEspecie.nome_cientifico,
+                familia: this.dadosEspecie.familia,
+                exigencia_solo: this.dadosEspecie.exigencia_solo,
+                temperatura_min: this.dadosEspecie.temperatura_min,
+                temperatura_max: this.dadosEspecie.temperatura_max,
+                inicio_colheita: this.dadosEspecie.inicio_colheita,
+                tempo_vida: this.dadosEspecie.tempo_vida,
+                sucessao: this.dadosEspecie.sucessao,
+                porte: this.dadosEspecie.porte,
+                tolerancia_poda: this.dadosEspecie.tolerancia_poda,
+            };
+        },
+        atualizarCampo(key, value) {
+            if (Object.keys(this.dadosEditados).includes(key)) {
+                this.dadosEditados[key] = value;
+            }
+        },
+        salvar() {
+            this.updateEspecie(this.dadosEditados);
+        },
+    },
+ };
+</script>
diff --git a/front/src/modules/especie/router.js b/front/src/modules/especie/router.js
@@ -1,6 +1,7 @@
 const VisualizarEspecieView = () => import(/* webpackChunkName: "visualizar-especie" */ './views/VisualizarEspecie.vue');
 const ListarEspeciesView = () => import(/* webpackChunkName: "listar-especies" */ './views/ListarEspecies.vue');
 const EditarEspecieView = () => import(/* webpackChunkName: "editar-especie" */ './views/EditarEspecie.vue');
+const CriarEspecieView = () => import(/* webpackChunkName: "criar-especie" */ './views/CriarEspecie.vue');
 
 export default [
     {
@@ -11,6 +12,14 @@ export default [
             title: 'Listar especies',
         },
     },
+    {
+        path: '/especie/criar',
+        name: 'criarEspecie',
+        component: CriarEspecieView,
+        meta: {
+            title: 'Criar especie',
+        },
+    },
     {
         path: '/especie/:id',
         name: 'visualizarEspecie',

diff --git a/front/src/modules/especie/views/CriarEspecie.vue b/front/src/modules/especie/views/CriarEspecie.vue
@@ -0,0 +1,27 @@
+<template>
+    <v-container
+        fluid
+    >
+        <v-layout>
+            <v-flex
+                xs10
+                offset-xs1
+            >
+                <form-editar
+                    :texto-cabecalho="'Criação de espécie'"
+                />
+            </v-flex>
+        </v-layout>
+    </v-container>
+</template>
+<script>
+import { mapActions, mapGetters } from 'vuex';
+import FormEditar from '../components/FormEditar';
+
+export default {
+    name: 'CriarEspecie',
+    components: {
+        FormEditar,
+    },
+};
+</script>