新增 table依照ability顯示

resources/js/src/views/CardAction.vue

@@ -2,24 +2,32 @@
   <section id="card-actions">
     <b-row>
 
+      <b-col cols="12">
+        <b-card-actions ref="cardAction" title="ability test" @refresh="refreshStop('cardAction')">
+          <b-row>
+            <b-col cols="12">
+              <div v-if="checkAbility">
+                <b-table responsive :items="items" bordered>
+                  <template #cell(ICON)="data" class="text-center">
+                    <div class="text-center">
+                      <feather-icon :icon="data.value" />
+                    </div>
+                  </template>
+                </b-table>
+              </div>
+              <div v-else>沒權限</div>
+            </b-col>
+          </b-row>
+        </b-card-actions>
+      </b-col>
+
       <!-- card actions -->
       <b-col cols="12">
-        <b-card-actions
-          ref="cardAction"
-          title="Card Actions"
-          @refresh="refreshStop('cardAction')"
-        >
+        <b-card-actions ref="cardAction" title="Card Actions" @refresh="refreshStop('cardAction')">
           <b-row>
             <b-col cols="12">
-              <b-table
-                responsive
-                :items="items"
-                bordered
-              >
-                <template
-                  #cell(ICON)="data"
-                  class="text-center"
-                >
+              <b-table responsive :items="items" bordered>
+                <template #cell(ICON)="data" class="text-center">
                   <div class="text-center">
                     <feather-icon :icon="data.value" />
                   </div>
@@ -32,10 +40,7 @@
 
       <!-- card collapsible  -->
       <b-col md="6">
-        <b-card-actions
-          title="Collapsible"
-          action-collapse
-        >
+        <b-card-actions title="Collapsible" action-collapse>
           <b-card-text>
             <span>You can create a collapsible content by adding </span>
             <code>actionCollapse</code>
@@ -52,12 +57,7 @@
 
       <!-- card refresh -->
       <b-col md="6">
-        <b-card-actions
-          ref="refreshCard"
-          title="Refresh Content"
-          action-refresh
-          @refresh="refreshStop('refreshCard')"
-        >
+        <b-card-actions ref="refreshCard" title="Refresh Content" action-refresh @refresh="refreshStop('refreshCard')">
           <b-card-text>
             To create a card with refresh action use <code>actionRefresh</code> prop along with
             <code>&lt;b-card-actions&gt;</code>
@@ -72,10 +72,7 @@
 
       <!-- card remove -->
       <b-col md="6">
-        <b-card-actions
-          title="Remove Card"
-          action-close
-        >
+        <b-card-actions title="Remove Card" action-close>
           <b-card-text>
             You can create a closeable card by using <code>actionClose</code> prop along with
             <code>&lt;b-card-actions&gt;</code>
@@ -96,6 +93,7 @@ import BCardActions from '@core/components/b-card-actions/BCardActions.vue'
 import {
   BRow, BCol, BTable, BCardText,
 } from 'bootstrap-vue'
+import ability from '../libs/acl/ability'
 
 export default {
   components: {
@@ -117,8 +115,14 @@ export default {
         { ACTION: 'Refresh Content', ICON: 'RotateCwIcon', DETAILS: 'Refresh your card content using refresh action.' },
         { ACTION: 'Remove Card', ICON: 'XIcon', DETAILS: 'Remove card from page using remove card action' },
       ],
+      show: false,
     }
   },
+  computed: {
+    checkAbility() {
+      return ability.can('read', 'management')
+    },
+  },
   methods: {
 
     // stop refreshing card in 3 sec
@@ -127,6 +131,8 @@ export default {
         this.$refs[cardName].showLoading = false
       }, 3000)
     },
+
   },
 }
+
 </script>

routes/api.php

@@ -4,6 +4,7 @@ use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 use Illuminate\Support\Facades\Hash;
 use Illuminate\Validation\ValidationException;
+use Illuminate\Support\Facades\DB;
 
 use App\Models\User;
 
@@ -46,4 +47,10 @@ Route::middleware('auth:sanctum')->post('/logout', function (Request $request) {
     $user = $request->user();
     $user->tokens()->delete();
     return $user;
+});
+
+Route::get('/test', function (Request $request) {
+    // $user = User::all()->sortByDesc("created_at")->take(2);
+    $user = DB::select("SELECT TOP (2) *  FROM [laravel_kevin].[dbo].[users] ORDER BY created_at desc");
+    return $user;
 });