bairrosComponent.vue

<template>
  <div class="bairros-admin">
    <b-form>
      <input id="bairro-id" type="hidden" v-model="bairro.id" />
      <b-row>
        <b-col md="6" sm="12">
          <b-form-group label="Estado" label-for="cidade-estadoId">
            <b-form-select id="cidade-estadoId"
              :options="estados"
              :disabled="mode === 'remove'"
              v-model="ufId"
              v-on:change="loadCidadesByUF"
            >
            </b-form-select>
          </b-form-group>
        </b-col>
      </b-row>
      <b-row>
        <b-col md="6" sm="12">
          <b-form-group label="Cidade" label-for="cidade-estadoId">
            <b-form-select id="cidade-estadoId"
              :options="cidadesPorEstado"
              :disabled="ufId === null || mode === 'remove'"
              v-model="bairro.cidade"
            />
          </b-form-group>
        </b-col>
      </b-row>
      <b-row>
        <b-col md="6" sm="12">
          <b-form-group label="Nome" label-for="bairro-nome">
            <b-form-input id="bairro-nome" type="text"
              v-model="bairro.nome" required
              :readonly="mode === 'remove'"
              placeholder="Nome do Bairro"
              trim
            />
          </b-form-group>
        </b-col>
      </b-row>
      <b-button variant="primary" v-if="mode === 'save'"
        @click.prevent="save">
          Salvar
      </b-button>
      <b-button variant="danger" v-if="mode === 'remove'" @click.prevent="remove">Remover</b-button>
      <b-button class="ml-2" @click.prevent="reset">Cancelar</b-button>
    </b-form>
    <hr/>
    <b-table hover striped :items="bairros" :fields="fields" :busy="loading" :small="true">
      <template #table-busy>
        <div class="text-center text-danger my-2">
          <b-spinner class="align-middle"></b-spinner>
          <strong>Carregando...</strong>
        </div>
      </template>
      <template #cell(actions)="data">
        <b-button variant="warning" @click.prevent="loadBairro(data.item)" class="mr-2">
          <i class="fa fa-pencil"></i>
        </b-button>
        <b-button variant="danger" @click.prevent="loadBairro(data.item, 'remove')">
          <i class="fa fa-trash"></i>
        </b-button>
      </template>
    </b-table>
  </div>
</template>

<script>

import { mapState } from 'vuex';
import { showError } from '@/global';

export default {
  name: 'BairrosAdmin',
  data() {
    return {
      mode: 'save',
      bairro: {},
      cidadesPorEstado: [],
      loading: false,
      ufId: null,
      fields: [
        { key: 'id', label: 'Código' },
        { key: 'nome', label: 'Nome' },
        { key: 'actions', label: 'Ações' },
      ],
    };
  },
  computed: {
    ...mapState('estados', ['estados']),
    ...mapState('cidades', ['cidades']),
    ...mapState('bairros', ['bairros']),
  },
  methods: {
    async init() {
      this.loading = true;
      await this.$store.dispatch('bairros/loadAll')
        .then(() => {
          this.loading = false;
        }).catch(showError).finally(() => {
          this.loading = false;
        });
      this.$store.dispatch('estados/loadAll');
      this.$store.dispatch('cidades/loadAll');
    },
    reset() {
      this.mode = 'save';
      this.bairro = {};
      this.ufId = null;
      this.cidadesPorEstado = [];
      this.init();
    },
    async save() {
      this.loading = true;
      await this.$store.dispatch('bairros/saveOrUpdate', this.bairro)
        .then(() => {
          this.$toasted.global.defaultSuccess();
          this.reset();
          this.loading = false;
        }).catch(showError).finally(() => {
          this.loading = false;
        });
    },
    async remove() {
      this.loading = true;
      await this.$store.dispatch('bairros/remove', this.bairro)
        .then(() => {
          this.$toasted.global.defaultSuccess();
          this.reset();
          this.loading = false;
        }).catch(showError).finally(() => {
          this.loading = false;
        });
    },
    loadBairro(bairro, mode = 'save') {
      this.mode = mode;
      this.bairro = { ...bairro };
      const cidade = this.cidades.find(c => c.id === bairro.cidade);
      this.ufId = cidade.uf;
      this.loadCidadesByUF();
    },
    loadCidadesByUF() {
      this.cidadesPorEstado = this.cidades.filter(c => c.uf === this.ufId);
    },
  },
  created() {
    this.init();
  },
};
</script>

<style>

</style>