unity/resources/js/admin/pages/admin-roles/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">
              <admin-role-filter
                :form="form"
                @clicked="filterSubmit"
                @reset="FilterReset"
              ></admin-role-filter>
            </div>
        </b-col>
        <b-col md="6"  v-if="permission_list.includes('add role')" class="text-right">
          <router-link 
            class="btn btn-primary" 
            to="create" 
            tag="button"
          >
            <i class="fa fa-plus"></i>
          </router-link>
        </b-col>
      </b-row>
      <table class="table table-striped">
        <thead>
          <paginate-nav
            v-if="admin_role_list.page"
            :colspan="colspan"
            :pervious_page="admin_role_list.page.pervious_page"
            :next_page="admin_role_list.page.next_page"
            @clicked="dataHandler"
          ></paginate-nav>
          <tr>
              <th>#</th>
              <th>Name</th>
              <th>Permission</th>
              <th>Status</th>
              <th>Created</th>
              <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="admin_role_list.data" v-for="(role, $index) in admin_role_list.data" :key="$index">
            <td>{{ $index + 1 }}</td>
            <td>
              {{ role.name }}
            </td>
            <td>
              <b-row>
                <b-col 
                  v-if="role.permission_list" 
                  v-for="(permission, $index_permission) in role.permission_list" 
                  :key="$index_permission"
                  md="3"
                >
                  {{  permission.name }}
                </b-col>
              </b-row>
            </td>
            <td>
                <span :class="'badge badge-' + role.status[0].color">{{ role.status[0].name }}</span>
            </td>
            <td>
              {{ role.created_at }}
            </td>
            <td>
              <router-link  
                  v-if="permission_list.includes('edit role')"
                  :to="'edit/' + role.hash_id" 
                  class="btn btn-xs btn-light" 
                  title="Edit"
                >
                  <i class="fa fa-edit"></i>
              </router-link>
            </td>
          </tr>
          <tr v-if="!admin_role_list.data || !admin_role_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="admin_role_list.page">
          <paginate-nav
            :colspan="colspan"
            :pervious_page="admin_role_list.page.pervious_page"
            :next_page="admin_role_list.page.next_page"
            @clicked="dataHandler"
          >
          </paginate-nav>
          <tr>
            <td class="text-right" :colspan="colspan">
              <small>Total: {{ admin_role_list.total }}</small>
            </td>
          </tr>
        </tfoot>
      </table>
    </b-card>
  </div>
</template>

<script>
  import AdminRoleFilter from "./Filter";
  import PaginateNav from '../../components/paginations/NextPerviousPagination';

  export default {
    components: {
      AdminRoleFilter,
      PaginateNav
    },
    data() {
      return {
        form: new Form({
            name: General.getURLParam('name'),
            status: General.returnAray(General.getURLParam('status[]')),
            page: General.getURLParam('page')
        }),
        colspan: 6,
        filter_status: false,
        loading: true,
        admin_role_list: [],
        selected_img: [],
        permission_list: []
      }
    },
    methods: {
      getPermissionList() {
        let vm = this;
        let url = 'admin/self';
        let form = new Form({});
        General.getCall(url, form).then(response => {
            vm.permission_list = response.data.permission_list;
        });
      },
      getAdminRoleList() {
        let vm = this;
        let url = 'admin-role/list';
        vm.tableCall(url);
      },
      tableCall(url) {
        let vm = this;
        vm.loading = true;
        General.tableCall(url, vm.form).then(response => {
          vm.loading = false;
          vm.admin_role_list = response;
          vm.form.page = General.getURLParam('page');
          vm.convertStatus();
        });
      },
      convertStatus() {
        let vm = this;  
        vm.admin_role_list.data.forEach(function(element, index) {
            element.status = General.initFormArray(Constants.role_status, [element.status]);
        });
      },
      dataHandler(url) {
        let vm = this;
        vm.form.page = General.getStringParam('page', url);
        vm.tableCall('admin-role/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 = 'admin-role/list';
        vm.form.page = '';
        vm.tableCall(url);
        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.getAdminRoleList();
    }
  }
</script>