UnivateProperties/src/components/admin/status/agentsUserManagementPage.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%">Agent Management</h1>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-2 offset-1">
        <button
          @click="routerGoTo('/status/userManagementPage')"
          type="button"
          class="btn btn-b-n"
        >Private Users</button>
      </div>
      <div class="col-md-2 offset-2">
        <button type="button" class="btn btn-b-n">Agents</button>
      </div>
      <div class="col-md-2 offset-2">
        <button type="button" class="btn btn-b-n">New Agent</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>Agents</h5>
            </td>
          </tr>
          <tr v-for="(item, i) in agents" :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="width: 85px; height:40px; color:#60CBEB"
              >Delete</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <br />
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import axios from 'axios';

export default {
  name: 'agentManagementPage',
  data() {
    return {};
  },
  methods: {
    ...mapActions('register', ['getAgents']),
    addNewAgent({ commit }) {
      axios
        .post('/api/agent')
        .then(result => commit('saveAgent', result.data))
        .catch(console.error);
    },
    routerGoTo(goTo) {
      this.$router.push(goTo);
    },
  },
  mounted() {
    this.getAgents();
  },
  computed: {
    ...mapState('register', ['agents']),
  },
};
</script>


<style>
</style>