<template>
  <div>
    <div v-if="wait" id="preloader"></div>
    <main id="main" style="margin-top:-20px; padding-bottom:50px">
      <!-- eslint-disable max-len -->
      <div class="container">
        <br />
        <br />
        <div class="row">
          <div class="col-md-12 col-lg-8">
            <div class="section-header">
              <h2>User Roles</h2>
            </div>
          </div>
        </div>
        <div class="container">
          <ListView
            :items="individuals"
            :showNew="false"
            :editable="true"
            :showCustomAction="true"
            :showColumnChooser="false"
            :displayColumns="columns"
            :displayHeaders="headers"
            @onEdit="Edit"
          />
          <br />
        </div>
      </div>
    </main>
  </div>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions, mapGetters } from "vuex";
import ListView from "../../shared/listView.vue";

export default {
  name: "userManagementPage",
  components: {
    ListView
    // alert,
  },
  data() {
    return {
      columns: ["id", "name", "surname", "cellNumber", "telephone", "email", "isDeleted", "role"],
      headers: ["", "", "", "", "", "", "", ""],
      item: {},
      wait: true
    };
  },
  props: {},
  created() {
    this.retrieveUserRoles().then(() => {
      this.wait = false;
    });
  },
  methods: {
    ...mapActions("role", ["retrieveUserRoles"]),
    routerGoTo(goTo) {
      this.$router.push(goTo);
    },
    Edit(item) {
      this.$router.push({
        path: "/user/updateProfileInfo",
        query: { id: item.id }
      });
    },
    Delete(item) {
      this.deleteIndividual(item.id);
    }
  },
  mounted() {
    this.getIndividuals();
  },
  computed: {
    ...mapGetters("role", ["getRoles"])
  }
};
</script>

<style></style>
