change block unblock

shellrean-dev · Sep 7, 2022 · b67dd25 · b67dd25
1 parent 00e268d
commit b67dd25
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 1 deletion.
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
@@ -130,6 +130,13 @@
             Reset login peserta
           </router-link>
         </li>
+        <li class="c-sidebar-nav-item">
+          <router-link class="c-sidebar-nav-link" :to="{ name: 'peserta.blocked' }"
+          :class="[currentPage.includes('peserta.blocked') ? activeClass : '']">
+            <i class="mr-3 flaticon2-drop"></i>
+            Blocked peserta
+          </router-link>
+        </li>
         <li class="c-sidebar-nav-title">Menu pengolahan</li>
         <li class="c-sidebar-nav-item c-sidebar-nav-dropdown">
           <a class="c-sidebar-nav-link c-sidebar-nav-dropdown-toggle" href="#">

diff --git a/src/router/index.js b/src/router/index.js
@@ -25,6 +25,7 @@ const AddPeserta = () => import( '@/views/peserta/Add')
 const EditPeserta = () => import( '@/views/peserta/Edit')
 const UploadPeserta = () => import( '@/views/peserta/Upload')
 const KartuPeserta = () => import( '@/views/peserta/Kartu')
+const BlockedPeserta = () => import( '@/views/peserta/BlockedPeserta')
 
 import MatpelIndex from '@/views/matpel/Index'
 const DataMatpel = () => import( '@/views/matpel/Matpel')
@@ -210,8 +211,14 @@ const routes = [
         name: 'peserta.kartu',
         component: KartuPeserta,
         meta: { title: 'Kartu peserta' }
+      },
+      {
+        path: 'blocked',
+        name: 'peserta.blocked',
+        component: BlockedPeserta,
+        meta: { title: 'Blocked peserta '}
       }
-    ]
+    ],
   },
   {
     path: '/matpel',

diff --git a/src/store/peserta.js b/src/store/peserta.js
@@ -3,6 +3,7 @@ import $axios from '@/services/api.js'
 const state = () => ({
     pesertas: [],
     peserta_login: [],
+    blocked_pesertas: [],
     peserta: {
         no_ujian: '',
         nama: '',
@@ -25,6 +26,9 @@ const mutations = {
     ASSIGN_PESERTA_LOGIN(state, payload) {
         state.peserta_login = payload
     },
+    ASSIGN_PESERTA_BLOCKED(state, payload) {
+        state.blocked_pesertas = payload
+    },
     SET_PAGE(state, payload) {
         state.page = payload
     },
@@ -227,6 +231,37 @@ const actions = {
                 reject(error.response.data)
             }
         })
+    },
+    getPesertasBlocked({ commit }) {
+        commit('SET_LOADING',true, { root: true })
+
+        return new Promise(( resolve, reject ) => {
+            $axios.get(`pesertas/status-blocked`)
+            .then((response) => {
+                commit('ASSIGN_PESERTA_BLOCKED', response.data.data)
+                commit('SET_LOADING',false, { root: true })
+                resolve(response.data)
+            })
+            .catch((error) => {
+                commit('SET_LOADING',false, { root: true })
+                reject(error.response.data)
+            })
+        })
+    },
+    unblockPeserta({ commit }, payload) {
+        commit('SET_LOADING',true, { root: true })
+
+        return new Promise(( resolve, reject ) => {
+            $axios.delete(`pesertas/unblock?peserta_id=${payload}`)
+            .then((response) => {
+                commit('SET_LOADING',false, { root: true })
+                resolve(response.data)
+            })
+            .catch((error) => {
+                commit('SET_LOADING',false, { root: true })
+                reject(error.response.data)
+            })
+        })
     }
 }
 

diff --git a/src/views/peserta/BlockedPeserta.vue b/src/views/peserta/BlockedPeserta.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="card">
+        <div class="card-header">
+        </div>
+        <div class="card-body">
+          <div class="row">
+            <div class="col-sm-5">
+              <h4 id="traffic" class="card-title mb-0">Manage Blocked Peserta</h4>
+              <div class="small text-muted">Manage data blocked peserta</div>
+            </div>
+          </div>
+          <div class="table-responsive-md mt-5">
+            <b-table 
+            striped hover bordered small show-empty
+            :fields="fields" 
+            :items="blocked_pesertas"
+            selectable
+            @row-selected="onRowSelected"
+            ref="selectableTable"
+            selected-variant="danger"
+            >
+              <template v-slot:cell(no)="row">
+                {{ row.index + 1}}
+              </template>
+              <template v-slot:cell(actions)="row">
+                <b-button variant="danger" :disabled="isLoading" class="mr-1" size="sm"
+                @click="_unblockPeserta(row.item.id)"
+                >
+                  Unblock
+                </b-button>
+              </template>
+            </b-table>
+            <div class="row mt-2">
+              <div class="col-md-6">
+                <div class="btn-group" role="group" aria-label="Basic example">
+                  <b-button variant="outline-dark" size="sm" @click="selectAllRows">
+                    <i class="flaticon-list-3"></i> Select all
+                  </b-button>
+                  <b-button variant="outline-dark" size="sm" @click="clearSelected">
+                    <i class="flaticon2-reload"></i> Clear selected
+                  </b-button>
+                  <b-button variant="outline-danger" size="sm" @click="bulkUnblockPeserta">
+                    <i class="flaticon2-trash"></i> Bulk unblock peserta
+                  </b-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="card-footer"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState, mapActions, mapGetters } from 'vuex';
+export default {
+  data: () => ({
+    fields: [
+      { key: 'no', label: '#' },
+      { key: 'no_ujian', label: 'No ujian' },
+      { key: 'nama_peserta', label: 'Nama peserta' },
+      { key: 'actions', label: 'Aksi' }
+    ],
+    selected: []
+  }),
+  computed: {
+    ...mapGetters(['isLoading']),
+    ...mapState('peserta', ['blocked_pesertas'])
+  },
+  methods: {
+    ...mapActions('peserta', ['getPesertasBlocked', 'unblockPeserta']),
+    onRowSelected(items) {
+      this.selected = items
+    },
+    selectAllRows() {
+      this.$refs.selectableTable.selectAllRows()
+    },
+    clearSelected() {
+      this.$refs.selectableTable.clearSelected()
+    },
+    async bulkUnblockPeserta() {
+      try {
+        let pesertaId = this.selected.map((item) => item.id).join(',')
+        await this.unblockPeserta(pesertaId)
+        this.selected = []
+        this.getPesertasBlocked()
+      } catch (e) {
+        console.log(e)
+      } finally {
+      }
+    },
+    async _unblockPeserta(peserta_id) {
+      try {
+        await this.unblockPeserta(peserta_id)
+        this.getPesertasBlocked()
+      } catch (e) {
+      } finally {
+      }
+    }
+  },
+  created() {
+    this.getPesertasBlocked()
+  }
+}
+</script>