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

<template>
  <!-- eslint-disable max-len -->
  <main id="main">
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-lg-8">
          <div class="section-header">
            <h2>Agency Management</h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-1 offset-1">
          <button
            @click="routerGoTo('/status/userManagementPage')"
            type="button"
            class="btn-white-border"
          >
            USERS
          </button>
        </div>
          <div class="col-md-1 offset-1">
            <button
              @click="routerGoTo('/status/agentUserManagementPage')"
              type="button"
              class="btn-white-border"
            >
              AGENTS
            </button>
          </div>
        <div class="col-md-1 offset-1">
            <button type="button" class="btn-solid-blue">AGENCIES</button>
          </div>
        <div class="col-md-3 offset-3">
          <button
            type="button"
            class="btn-white-border"
            data-toggle="modal"
            :data-target="'#myModalAgency'"
          >
            NEW AGENCY
          </button>
          <div :id="'myModalAgency'" class="modal fade" role="dialog">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <Agency name="Agency" :isAddAgent="false" :item="item" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <ListView
          :items="agencies"
          :showNew="false"
          :editable="false"
          :deleteable="false"
          :showCustomAction="true"
          :showColumnChooser="false"
          :displayColumns="columns"
          :displayHeaders="headers"
          @onEdit="Edit"
          @onDelete="Delete"
        />
      </div>
    </div>
  </main>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from "vuex";
import axios from "axios";
import Agency from "../../user/registerAgencySection.vue";
// import alert from '../../shared/alert.vue';
import ListView from "../../shared/listView.vue";

export default {
  name: "agencyManagementPage",
  components: {
    ListView,
    Agency
    // alert,
  },
  props: {
    delete: Boolean
  },
  data() {
    return {
      columns: ["id", "agencyName", "eaabeffcNumber", "companyRegNumber"],
      headers: ["", "", "", ""],
      item: {}
    };
  },
  methods: {
    ...mapActions("register", ["getAgencies", "deleteAgency"]),
    addNewAgency({ commit }) {
      axios
        .post("/api/agency")
        .then(result => commit("saveAgency", result.data))
        .catch(console.error);
    },
    routerGoTo(goTo) {
      this.$router.push(goTo);
    },
    Edit(item) {
      this.$router.push({ name: "UpdateAgencyProfile", params: { agency: item } });
    },
    Delete(item) {
      console.log(item.id);
      this.deleteAgency(item.id);
    }
  },
  mounted() {
    this.getAgencies();
  },
  computed: {
    ...mapState("register", ["agencies", "removeAgency"])
  }
};
</script>

<style></style>