[UPDATE] Front: carregando selects com dados corretos; gravando valor…

…es corretamente #15
RedeMocambos · May 28, 2019 · ef3e572 · ef3e572
1 parent accd640
commit ef3e572
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 7 deletions.
diff --git a/front/src/components/CarregandoVuetify.vue b/front/src/components/CarregandoVuetify.vue
@@ -0,0 +1,28 @@
+<template>
+    <v-layout column>
+        <v-flex xs12>
+            <div class="text-xs-center">
+                <div style="padding: 20px">
+                    <h3 v-html="text"/>
+                </div>
+                <v-progress-circular
+                    :size="50"
+                    indeterminate
+                    color="primary"
+                />
+            </div>
+        </v-flex>
+    </v-layout>
+</template>
+
+<script>
+export default {
+    name: 'CarregandoVuetify',
+    props: {
+        text: {
+            type: String,
+            default: '',
+        },
+    },
+};
+</script>
diff --git a/front/src/helpers/api/Especie.js b/front/src/helpers/api/Especie.js
@@ -27,5 +27,5 @@ export const buscarEspecieMetadata = () => {
 
 export const updateEspecie = (params) => {
     const path = '/api/v1/especie/especie/';
-    return api.putRequest(path, params, params.id);
+    return api.putRequest(api.basePath + path, params, params.id);
 };
diff --git a/front/src/modules/especie/views/EditarEspecie.vue b/front/src/modules/especie/views/EditarEspecie.vue
@@ -2,7 +2,13 @@
     <v-form
         v-model="valid"
     >
+        <v-flex v-if="dadosEspecie.id === 'undefined'">
+            <carregando
+                :text="'Carregando dados da edição'"
+            />
+        </v-flex>
         <v-flex
+            v-else
             xs10
             offset-xs1
         >
@@ -12,14 +18,17 @@
             >
                 <v-text-field
                     v-model="dadosEspecie.familia"
+                    @change="atualizarCampo('familia', $event) "
                     label="Família"
                 />
                 <v-text-field
                     v-model="dadosEspecie.nome_cientifico"
+                    @change="atualizarCampo('nome_cientifico', $event) "
                     label="Nome científico"
                 />
                 <v-text-field
                     v-model="dadosEspecie.nomes_populares"
+                    @change="atualizarCampo('nomes_populares', $event) "
                     label="Nomes populares"
                 />
             </v-card>
@@ -28,31 +37,43 @@
             >
                 <v-text-field
                     v-model="dadosEspecie.inicio_colheita"
+                    @change="atualizarCampo('inicio_colheita', $event) "
                     label="Início da colheita"
                 />
                 <v-select
                     v-model="dadosEspecie.porte"
                     :items="getEspecieMetadata.porte"
+                    item-text="descricao"
+                    item-value="valor"
+                    @change="atualizarCampo('porte', $event) "
                     label="Porte"
                 />
                 <v-select
                     v-model="dadosEspecie.estrato"
                     :items="getEspecieMetadata.estrato"
+                    item-text="descricao"
+                    item-value="valor"
+                    @change="atualizarCampo('estrato', $event) "
                     label="Estrato"
                 />
                 <v-select
                     v-model="dadosEspecie.sucessao"
                     :items="getEspecieMetadata.sucessao"
+                    item-text="descricao"
+                    item-value="valor"
+                    @change="atualizarCampo('sucessao', $event) "
                     label="Sucessão"
                 />
                 <v-select
                     v-model="dadosEspecie.umidade"
                     :items="getEspecieMetadata.umidade"
+                    @change="atualizarCampo('umidade', $event) "
                     label="Umidade"
                 />
                 <v-select
                     v-model="dadosEspecie.tolerancia_poda"
                     :items="getEspecieMetadata.tolerancia_poda"
+                    @change="atualizarCampo('tolerancia_poda', $event) "
                     label="Tolerância a poda"
                 />
             </v-card>
@@ -62,11 +83,13 @@
                 <v-text-field
                     v-model="dadosEspecie.temperatura_min"
                     xs4
+                    @change="atualizarCampo('temperatura_min', $event) "
                     label="Temperatura mínima"
                 />
                 <v-text-field
                     v-model="dadosEspecie.temperatura_max"
                     xs4
+                    @change="atualizarCampo('temperatura_max', $event) "
                     label="Temperatura máxima"
                 />
             </v-card>
@@ -92,17 +115,36 @@
     </v-form>
 </template>
 <script>
+import Carregando from '@/components/CarregandoVuetify';
 import Tools from '@/mixins/tools';
 import { mapActions, mapGetters } from 'vuex';
 
 export default {
     name: 'EditarEspecie',
+    components: {
+        Carregando,
+    },
     mixins: [
         Tools,
     ],
     data() {
         return {
             valid: true,
+            dadosEditados: {
+                id: '',
+                nomes_populares: '',
+                nome_cientifico: '',
+                familia: '',
+                exigencia_solo: '',
+                temperatura_min: '',
+                temperatura_max: '',
+                inicio_colheita: '',
+                tempo_vida: '',
+                sucessao: '',
+                porte: '',
+                umidade: '',
+                tolerancia_poda: '',
+            },
         };
     },
     computed: {
@@ -114,6 +156,11 @@ export default {
             return this.$route.params.id;
         },
     },
+    watch: {
+        dadosEspecie() {
+            this.inicializarDadosEspecie();
+        },
+    },
     created() {
         if (typeof this.$route.params.id !== 'undefined') {
             this.buscarEspecie(this.$route.params.id);
@@ -126,13 +173,28 @@ export default {
             buscarEspecieMetadata: 'especie/buscarEspecieMetadata',
             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,
+            };
+        },
+        atualizarCampo(key, value) {
+            if (Object.keys(this.dadosEditados).includes(key)) {
+                this.dadosEditados[key] = value;
+            }
+        },
         salvar() {
-            this.updateEspecie(
-                {
-                    id: this.dadosEspecie.id,
-                    nomes_populares: this.dadosEspecie.nomes_populares,
-                },
-            );
+            this.updateEspecie(this.dadosEditados);
         },
     },
 };