index.vue

<template>
  <transition name="fade">
    <div id="pageTable">
      <v-container grid-list-xl fluid>
        <v-layout row wrap>
          <v-flex sm12>
            <h3>Lista de usuários</h3>
          </v-flex>
          <v-flex lg12>
            <v-card>
              <v-toolbar card color="white">
                <v-text-field
                  flat
                  solo
                  prepend-icon="search"
                  placeholder="Busque por um usuário"
                  v-model="search"
                  hide-details
                  class="hidden-sm-and-down"
                ></v-text-field>
                <v-btn icon>
                  <v-icon>filter_list</v-icon>
                </v-btn>
              </v-toolbar>
              <v-divider></v-divider>
              <v-card-text class="pa-0">
                <v-data-table
                  :headers="complex.headers"
                  :items="users"
                  :search="search"
                  :rows-per-page-items="[5,10,25,{text:'Todos','value':-1}]"
                  rows-per-page-text="Itens por paginas"
                  no-results-text="Nenhum resultado encontrado"
                  class="elevation-1"
                  item-key="id"
                  :loading="loading"
                >
                  <template slot="no-data">
                    <v-alert
                      :value="true"
                      color="error"
                      icon="warning"
                    >
                      Desculpe, não há nada para mostrar aqui :(
                    </v-alert>
                  </template>
                  <template slot="items" slot-scope="props">
                    <td>
                      <v-avatar size="30px" class="cor-perfil">
                        <span
                          class="white--text headline"
                          v-if="props.item.photo === null"
                        >
                          <strong>{{ props.item.name | nameLetra }}</strong>
                        </span>
                        <template v-else>
                          <v-progress-circular
                            v-if="!props.item.photo"
                            :size="16"
                            color="white"
                            indeterminate
                            :with="2"
                          />
                          <img :src="props.item.photo" />
                        </template>
                      </v-avatar>
                    </td>
                    <td>{{ props.item.name}} {{ props.item.lastname}}</td>
                    <td>{{ props.item.gender | sexoLetra }}</td>
                    <td>{{ props.item.birth | formtData }}</td>
                    <td>{{ props.item.roles[0].name }}</td>
                    <td>{{ props.item.email }}</td>
                    <td>
                      <v-btn
                        v-if="isAdmin"
                        @click="editUser(props.item)"
                        depressed
                        outline
                        icon
                        fab
                        dark
                        color="primary"
                        small
                      >
                        <v-icon>edit</v-icon>
                      </v-btn>
                    </td>
                  </template>
                  <template
                    slot="pageText"
                    slot-scope="item"
                  >
                    {{item.pageStart}} - {{item.pageStop}} de {{item.itemsLength}}
                  </template>
                </v-data-table>
              </v-card-text>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
      <v-dialog v-model="openEdit" max-width="800px" @keydown.esc="closeEditModal">
                      <EditUserModal
                        v-if="openEdit"
                        :user="editedItem"
                        @closeEdit="closeEditModal"
                        @update="updateUser"
                        @deletar="deleteUser(editedItem.id)"
                        @changePassword="openPassw =  true"
                      >
                      </EditUserModal>
                    </v-dialog>
    </div>
  </transition>
</template>

<script>
import { URL_BASE } from '@Configs/configs';
import EditUserModal from './partials/EditUserModal';
// import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      users: [],
      editedItem: {},
      loading: true,
      search: '',
      openEdit: false,
      errors: {},
      complex: {
        headers: [
          {
            text: 'Avatar',
            value: 'avatar'
          },
          {
            text: 'Nome',
            value: 'name'
          },
          {
            text: 'Sexo',
            value: 'gender'
          },
          {
            text: 'Aniversário',
            value: 'birth'
          },
          {
            text: 'Papel',
            value: 'type'
          },
          {
            text: 'E-mail',
            value: 'email'
          },
          {
            text: 'Ações',
            value: '',
            sortable: false
          }
        ]
      }
    };
  },
  components: {
    EditUserModal
  },
  created() {
    this.fetchUsers();
  },

 
  methods: {
    fetchUsers() {
      this.$http.get(`${URL_BASE}users`, this.users).then(response => {
        this.users = response.data;
        setTimeout(() => {
          this.loading = false;
        }, 1000);
      })
        .catch(error => {
          this.errors = error.response.data.errors;
          this.$snotify.error('Falha...', 'Erro');
          this.loading = false;
        });
    },
    // usado para abrir o modal
    editUser(item) {
      this.editedItem = Object.assign({}, item);
      this.openEdit = true;
    },
    // fechar o modal
    closeEditModal() {
      this.openEdit = false;
    },
    // aqui faço update dos dados do usuário quem vem do evento @updade do meu componente "EditUser"
    updateUser(item) {
      const i = this.users.findIndex(user => user.id === item.id);
      this.users.splice(i, 1, item);
      this.closeEditModal();
    },
    deleteUser(id) {
      const index = this.users.indexOf(id);
      this.users.splice(index, 1);
      this.$http.delete(`${URL_BASE}users/${id}`).then(() => {
        this.$swal.fire(
          'Deletado!',
          'Usuário deletado com sucesso.',
          'success'
        );
      }).catch(() => {
        this.$swal.fire('Error!', 'Algum coisa deu errado', 'warning');
      });
      this.closeEditModal();
    }
  }
};
</script>
<style>
.cor-perfil {
  background: linear-gradient(90deg, #868f96 0, #596164);
}
</style>