UnivateProperties/src/components/admin/status/userManagementPage.vue

<template>
  <!-- eslint-disable max-len -->
  <div class="container">
    <br />
    <br />
    <div class="row">
      <div class="col-md-12 col-lg-8">
        <div class="title-box-d">
          <h1 class="title-d" style="text-align:left; font-size: 250%">User Management</h1>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-2 offset-1">
        <button type="button" class="btn btn-b-n">Private Users</button>
      </div>
      <div class="col-md-2 offset-2">
        <button
          @click="routerGoTo('/status/agentUserManagementPage')"
          type="button"
          class="btn btn-b-n"
        >Agents</button>
      </div>
    </div>
    <br />
    <br />
    <div class="container">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>
              <b>ID</b>
            </th>
            <th>
              <b>Name</b>
            </th>
            <th>
              <b>Surname</b>
            </th>
            <th>
              <b>Cell Number</b>
            </th>
            <th>
              <b>Telephone Number</b>
            </th>
            <th>
              <b>Email</b>
            </th>
            <th>
              <b>Role</b>
            </th>
            <th>
              <b>Reset Password</b>
            </th>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td colspan="10">
              <h5>Private Users</h5>
            </td>
          </tr>
          <tr v-for="(item, i) in individuals" :key="i">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.surname }}</td>
            <td>{{ item.cellNumber }}</td>
            <td>{{ item.telephone }}</td>
            <td>{{ item.email }}</td>
            <td v-if="item.user">{{ item.user.role }}</td>
            <td v-else></td>
            <td></td>
            <td>
              <button
                type="button"
                @click="Edit(item)"
                class="btn"
                style="margin:2px; color: #60CBEB"
              >Edit</button>
            </td>
            <td>
              <button type="button" class="btn" style="margin:2px; color: #60CBEB">Delete</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <br />
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'userManagementPage',
  data() {
    return {};
  },
  methods: {
    ...mapActions('register', ['getIndividuals']),
    routerGoTo(goTo) {
      this.$router.push(goTo);
    },
  },
  mounted() {
    this.getIndividuals();
  },
  computed: {
    ...mapState('register', ['individuals']),
  },
};
</script>


<style>
</style>