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>
    <div class="container">
      <div class="d-flex justify-content-between">
        <div class="p-2">
          <input v-model="searchItem" class="form-control" placeholder="Search ..." />
        </div>
      </div>
      <br />
      <table class="table table-bordered">
        <thead>
          <tr>
            <td colspan="10">
              <div class="myWell">
                <h4>Private Users</h4>
              </div>
            </td>
          </tr>
          <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>
              <b>Modify</b>
            </th>
            <th>
              <b>Remove</b>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in DisplayItems" :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>
              <button type="button" class="btn" style="margin:2px; color: #60CBEB">Reset</button>
            </td>
            <td>
              <button
                type="button"
                data-toggle="modal"
                :data-target="'#myModal' + i"
                class="btn"
                style="margin:2px; color: #60CBEB"
              >Edit</button>
              <div :id="'myModal' + i" 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>
                    <div padding-left="20px">
                      <Individual name="PrivateIndividual" :isAddIndividual="false" :item="item" />
                    </div>
                  </div>
                </div>
              </div>
            </td>
            <td>
              <button type="button" class="btn" style="margin:2px; color: #60CBEB">Delete</button>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="d-flex justify-content-between">
        <div class="p-1">{{ currentPage + ' / ' + PageCount }}</div>
        <div class="p-1">
          <BasePagination
            :currentPage="currentPage"
            :pageCount="PageCount"
            @nextPage="pageChangeHandle('next')"
            @previousPage="pageChangeHandle('previous')"
            @loadPage="pageChangeHandle"
          />
        </div>
      </div>
      <br />
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import _ from 'lodash';
import ItemsPerPageList from '../../../assets/staticData/itemsPerPage';
import BasePagination from '../../shared/basePagination.vue';
import Individual from '../../user/registerPage.vue';

export default {
  name: 'userManagementPage',
  components: {
    BasePagination,
    Individual,
  },
  data() {
    return {
      sortKey: '',
      reverse: false,
      searchItem: '',
      itemsPerPageList: ItemsPerPageList,
      visibleItemsPerPageCount: 0,
      currentPage: 1,
      item: {},
    };
  },
  methods: {
    ...mapActions('register', ['getIndividuals']),
    routerGoTo(goTo) {
      this.$router.push(goTo);
    },
    sortBy(sortKey) {
      this.reverse = this.sortKey === sortKey ? !this.reverse : false;
      this.sortKey = sortKey;
    },
    async pageChangeHandle(value) {
      console.log(value);
      switch (value) {
        case 'next':
          this.currentPage += 1;
          break;
        case 'previous':
          this.currentPage -= 1;
          break;
        default:
          this.currentPage = value;
      }
    },
    onChangeItemsPerPage() {
      if (this.currentPage !== 1) {
        this.currentPage = 1;
      }
    },
  },
  mounted() {
    this.getIndividuals();
    try {
      // to assign initial value to itemsPerPage
      if (this.itemsPerPageList && this.itemsPerPageList.length > 0) {
        const [startItem] = this.itemsPerPageList;
        this.visibleItemsPerPageCount = startItem;
      }
    } catch (error) {
      throw error;
    }
  },
  computed: {
    ...mapState('register', ['individuals']),

    SortDirection() {
      return this.reverse ? 'desc' : 'asc';
    },
    PageCount() {
      return this.visibleItemsPerPageCount !== 0
        ? Math.ceil(this.FilteredItems.length / this.visibleItemsPerPageCount)
        : 1;
    },
    FilteredItems() {
      const list = _.filter(this.individuals, item => Object.values(item).some(
          i => JSON.stringify(i)
              .toLowerCase()
              .indexOf(this.searchItem) > -1,
        ),);
      return _.orderBy(list, this.sortKey, this.SortDirection);
    },
    DisplayItems() {
      const list = this.FilteredItems;
      const startSlice = (this.currentPage - 1) * this.visibleItemsPerPageCount;
      let endSlice = this.currentPage * this.visibleItemsPerPageCount;
      if (endSlice > list.length) {
        endSlice = list.length;
      }
      return list.slice(startSlice, endSlice);
    },
  },
};
</script>


<style>
</style>