BairroCadastro.vue

<template>
  <pl-form
    title="Cadastro de Bairro"
    @close="fecharBairroCadastro()"
    class="w-90-tb w-80-dt w-60-lg w-45-xl maximize-tb-down"
    :blocked="bloqueado"
  >
    <div class="bar mt-3">
      <pl-input v-model="objBairro.no_municipio" label="Município" class="wf-auto blocked"></pl-input>
      <pl-switch
        v-model="objBairro.st_registro"
        label="Status"
        text-enabled="Ativo"
        text-disabled="Inativo"
        color="primary"
        class="w-20"
        style="width: 125px;"
      />
    </div>
    <div class="bar mt-3">
      <pl-input
        :class="{blocked: objBairro.st_zona_rural }"
        v-model="objBairro.no_bairro"
        label="Nome do Bairro"
        class="wf-auto"
      />
      <pl-switch
        @true="objBairro.no_bairro = 'Área Rural';"
        @false="objBairro.no_bairro = '';"
        v-model="objBairro.st_zona_rural"
        label="Zona Rural?"
        text-enabled="Sim"
        text-disabled="Não"
        color="primary"
        class="w-20"
        style="width: 125px;"
      />
    </div>
    <pl-space slot="footer"/>
    <template v-for="action in actions">
      <pl-button
        v-if="!action.isSeparator"
        slot="footer"
        @click.native="action.handler(objBairro)"
        :label="action.label"
        :color="action.color"
        :class="action.className"
      />
      <pl-space
        v-else
        slot="footer"
      />
    </template>
  </pl-form>
</template>

<script>
import bairroService from "@/domains/bairro/services/bairro.js";
export default {
  name: "BairroCadastro",
  props: {
    crud:{
      required: true,
      type: String,
    },
    data: {
      required: true,
      type: Object
    }
  },
  data() {
    return {
      strOperacao: "",
      objBairro: {},
      operations: [
        {
          scopes: ['create', 'update'],
          label: 'Salvar',
          color: 'primary'
          className: 'wf-30',
          handler: this.salvarBairro
        },
        {
          isSeparator: true
        }
      ]
    };
  },
  methods: {
    salvarBairro(bairro) {
      this.$loader("Gravando informações...");
      bairroService
        .salvar(bairro)
        .then(response => {
          this.$swal({
            type: "success",
            title: "Sucesso!",
            html: `<div>${response}</div>`
          });
          this.confirmarGravacaoBairro(bairro);
        })
        .catch(e => {
          this.$swal({
            type: "error",
            title: "Erro ao salvar registro!",
            html: `<div>${e}</div>`
          });
        })
        .then(() => {
          this.$loader(false);
        });
    },
    confirmarGravacaoBairro(bairro) {
      this.$emit("success");
      this.fecharBairroCadastro();
    },
    fecharBairroCadastro() {
      this.$emit("close");
    },
    desbloquearEdicao(){
      this.strOperacao = "editar";
    }
  },
  /////////////////////////////////////
  // OBSERVADORES
  computed: {
    actions () {
      return this.operations.filter((operation) => operation.scopes.includes(this.strOperacao))
    }
  },
  // Executado pouco antes de ser adicionado ao DOM.
  beforeMount() {
    this.strOperacao = this.crud;
    this.objBairro = this.data;
  }
};
</script>