unity/resources/js/admin/pages/users/Table.vue

<template>
  <div>
    <b-card class="main-card mb-4">
      <b-row class="mb-2" no-gutters>
        <b-col md="6">
            <button type="button" class="btn btn-primary" @click="filterToggle">
              <i class="fa fa-filter"></i>
            </button>
            <div v-if="filter_status" class="filter dropdown-menu show">
              <user-filter
                :form="form"
                @clicked="filterSubmit"
                @reset="FilterReset"
              ></user-filter>
            </div>
        </b-col>
      </b-row>
      <table class="table table-striped">
        <thead>
          <paginate-nav
            v-if="user_list.page"
            :colspan="colspan"
            :pervious_page="user_list.page.pervious_page"
            :next_page="user_list.page.next_page"
            @clicked="dataHandler"
          ></paginate-nav>
          <tr>
              <th>#</th>
              <th>Profile</th>
              <th style="width: 25%">Details</th>
              <th>Status</th>
              <th>Created</th>
              <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="user_list.data" v-for="(user, $index) in user_list.data" :key="$index">
            <td>{{ $index + 1 }}</td>
            <td>
              <img class="img-fluid pointer-cursor" 
                :src="user.img[0].file_info.original.file" width="60px" height="60px"
                @click="ImgPopModalToggle(user.img)"
              >
            </td>
            <td>
              <div><b>Name</b>: {{ user.username }}</div>
              <div><b>Email</b>: {{ user.email }}</div>
              <div><b>Country</b>: {{ user.country_list[0].name }}</div>
            </td>
            <td>
                <span :class="'badge badge-' + user.status[0].color">{{ user.status[0].name }}</span>
            </td>
            <td>
              {{ user.created_at }}
            </td>
            <td>
              <router-link  
                  v-if="permission_list.includes('view user')"
                  :to="'detail/' + user.hash_id" 
                  class="btn btn-xs btn-light" 
                  title="View"
                >
                  <i class="fa fa-eye"></i>
              </router-link>
            </td>
          </tr>
          <tr v-if="!user_list.data || !user_list.data[0]">
            <td class="text-center" :colspan="colspan">
              <vue-element-loading v-if="loading" :active="true" spinner="line-scale" color="var(--primary)"></vue-element-loading>
              <span v-if="!loading">Empty</span>
            </td>
          </tr>
        </tbody>
        <tfoot v-if="user_list.page">
          <paginate-nav
            :colspan="colspan"
            :pervious_page="user_list.page.pervious_page"
            :next_page="user_list.page.next_page"
            @clicked="dataHandler"
          >
          </paginate-nav>
          <tr>
            <td class="text-right" :colspan="colspan">
              <small>Total: {{ user_list.total }}</small>
            </td>
          </tr>
        </tfoot>
      </table>
    </b-card>
    <img-pop-modal
      :label="'Profile'"
      :img="selected_img"
    >
    </img-pop-modal>
  </div>
</template>

<script>
  import userFilter from "./Filter";
  import ImgPopModal from "../../components/modals/ImgPopModal";
  import PaginateNav from '../../components/paginations/NextPerviousPagination';

  export default {
    components: {
      userFilter,
      ImgPopModal,
      PaginateNav
    },
    data() {
      return {
        form_permission: new Form({}),
        form: new Form({
            username: General.getURLParam('username'),
            email: General.getURLParam('email'),
            status: General.returnAray(General.getURLParam('status[]')),
            page: General.getURLParam('page')
        }),
        colspan: 6,
        filter_status: false,
        loading: true,
        user_list: [],
        selected_img: [],
        permission_list: []
      }
    },
    methods: {
      ImgPopModalToggle(img) {
        let vm = this;
        vm.selected_img = img;
        vm.$bvModal.show('img-pop-modal');
      },
      getPermissionList() {
        let vm = this;
        let url = 'admin/self';
        let params = {}
        General.getCall(url, vm.form_permission).then(response => {
            vm.permission_list = response.data.permission_list;
        });
      },
      getUserList() {
        let vm = this;
        let url = 'user/list';
        vm.tableCall(url);
      },
      tableCall(url) {
        let vm = this;
        vm.loading = true;
        General.tableCall(url, vm.form).then(response => {
          vm.loading = false;
          vm.user_list = response;
          vm.form.page = General.getURLParam('page');
          vm.convertStatus();
        });
      },
      convertStatus() {
        let vm = this;  
        vm.user_list.data.forEach(function(element, index) {
          element.status = General.initFormArray(Constants.user_status, [element.status]);
        });
      },
      dataHandler(url) {
        let vm = this;
        vm.form.page = General.getStringParam('page', url);
        vm.tableCall('user/list');
      },
      filterToggle() {
        let vm = this;
        vm.filter_status = !vm.filter_status;
      },
      filterCloseClick(e) {
        let vm = this;
        if (!vm.$el.contains(e.target) && !e.target.classList.contains('filter')) {
          vm.filter_status = false;
        }
      },
      filterSubmit() {
        let vm = this;
        let url = 'user/list';
        vm.tableCall(url);
        vm.form.page = '';
        vm.filterToggle();
      },
      FilterReset() {
        let vm = this;
        vm.form.reset();
        vm.filterSubmit();
      }
    },
    mounted() {
      let vm = this;
      document.addEventListener('click', vm.filterCloseClick);
    },
    created() {
      let vm = this;
      vm.getPermissionList();
      vm.getUserList();
    }
  }
</script>