新增 blog頁面顯示

resources/js/src/@core/libs/acl/utils.js

@@ -27,14 +27,14 @@ export const canViewVerticalNavMenuLink = item => can('read', item.group)
 // eslint-disable-next-line arrow-body-style
 export const canViewVerticalNavMenuGroup = item => {
   // ! This same logic is used in canViewHorizontalNavMenuGroup and canViewHorizontalNavMenuHeaderGroup. So make sure to update logic in them as well
-  const hasAnyVisibleChild = item.children.some(i => can(i.action, i.resource))
+  const hasAnyVisibleChild = item.children.some(i => can('read', i.group))
 
   // If resource and action is defined in item => Return based on children visibility (Hide group if no child is visible)
   // Else check for ability using provided resource and action along with checking if has any visible child
-  if (!(item.action && item.resource)) {
+  if (!('read' && item.group)) {
     return hasAnyVisibleChild
   }
-  return can(item.action, item.resource) && hasAnyVisibleChild
+  return can('read', item.group) && hasAnyVisibleChild
 }
 
 /**
@@ -49,14 +49,14 @@ export const canViewVerticalNavMenuHeader = item => can('read', item.group)
  * Based on item's action and resource
  * @param {Object} item navigation object item
  */
-export const canViewHorizontalNavMenuLink = item => can(item.action, item.resource)
+export const canViewHorizontalNavMenuLink = item => can('read', item.group)
 
 /**
  * Check if user can view item based on it's ability
  * Based on item's action and resource
  * @param {Object} item navigation object item
  */
-export const canViewHorizontalNavMenuHeaderLink = item => can(item.action, item.resource)
+export const canViewHorizontalNavMenuHeaderLink = item => can('read', item.group)
 
 /**
  * Check if user can view item based on it's ability
@@ -66,14 +66,14 @@ export const canViewHorizontalNavMenuHeaderLink = item => can(item.action, item.
 // eslint-disable-next-line arrow-body-style
 export const canViewHorizontalNavMenuGroup = item => {
   // ? Same logic as canViewVerticalNavMenuGroup
-  const hasAnyVisibleChild = item.children.some(i => can(i.action, i.resource))
+  const hasAnyVisibleChild = item.children.some(i => can(i.action, i.group))
 
   // If resource and action is defined in item => Return based on children visibility (Hide group if no child is visible)
   // Else check for ability using provided resource and action along with checking if has any visible child
-  if (!(item.action && item.resource)) {
+  if (!('read' && item.group)) {
     return hasAnyVisibleChild
   }
-  return can(item.action, item.resource) && hasAnyVisibleChild
+  return can('read', item.group) && hasAnyVisibleChild
 }
 
 // eslint-disable-next-line arrow-body-style
@@ -89,8 +89,8 @@ export const canViewHorizontalNavMenuHeaderGroup = item => {
 
   // If resource and action is defined in item => Return based on children visibility (Hide group if no child is visible)
   // Else check for ability using provided resource and action along with checking if has any visible child
-  if (!(item.action && item.resource)) {
+  if (!('read' && item.group)) {
     return hasAnyVisibleChild
   }
-  return can(item.action, item.resource) && hasAnyVisibleChild
+  return can('read', item.group) && hasAnyVisibleChild
 }

resources/js/src/navigation/vertical/index.js

@@ -21,6 +21,27 @@ export default [
     icon: 'CreditCardIcon',
     group: 'visited',
   },
+  {
+    title: 'Blog',
+    group: 'visited',
+    children: [
+      {
+        title: 'List',
+        route: 'blog-list',
+        group: 'visited',
+      },
+      {
+        title: 'Detail',
+        route: { name: 'blog-detail', params: { id: 1 } },
+        group: 'visited',
+      },
+      {
+        title: 'Edit',
+        route: { name: 'blog-edit', params: { id: 1 } },
+        group: 'visited',
+      },
+    ],
+  },
   {
     header: '管理功能',
     group: 'management',

resources/js/src/router/index.js

@@ -58,6 +58,69 @@ const router = new VueRouter({
         ],
       },
     },
+    {
+      path: '/blog/list',
+      name: 'blog-list',
+      component: () => import('@/views/blog/BlogList.vue'),
+      meta: {
+        pageTitle: 'Blog List',
+        group: 'visited',
+        breadcrumb: [
+          {
+            text: 'Pages',
+          },
+          {
+            text: 'Blog',
+          },
+          {
+            text: 'List',
+            active: true,
+          },
+        ],
+      },
+    },
+    {
+      path: '/blog/:id',
+      name: 'blog-detail',
+      component: () => import('@/views/blog/BlogDetail.vue'),
+      meta: {
+        pageTitle: 'Blog Detail',
+        group: 'visited',
+        breadcrumb: [
+          {
+            text: 'Pages',
+          },
+          {
+            text: 'Blog',
+          },
+          {
+            text: 'Detail',
+            active: true,
+          },
+        ],
+      },
+    },
+    {
+      path: '/blog/edit/:id',
+      name: 'blog-edit',
+      component: () => import('@/views/blog/BlogEdit.vue'),
+      meta: {
+        pageTitle: 'Blog Edit',
+        group: 'visited',
+        breadcrumb: [
+          {
+            text: 'Pages',
+          },
+          {
+            text: 'Blog',
+          },
+          {
+            text: 'Edit',
+            active: true,
+          },
+        ],
+      },
+    },
     {
       path: '/permission',
       name: 'permission',

resources/js/src/views/blog/BlogList.vue

@@ -12,7 +12,7 @@
           tag="article"
           no-body
         >
-          <b-link :to="{ name: 'pages-blog-detail', params: { id: blog.id } }">
+          <b-link :to="{ name: 'blog-detail', params: { id: blog.id } }">
             <b-img
               :src="blog.img"
               :alt="blog.img.slice(5)"
@@ -22,7 +22,7 @@
           <b-card-body>
             <b-card-title>
               <b-link
-                :to="{ name: 'pages-blog-detail', params: { id: blog.id } }"
+                :to="{ name: 'blog-detail', params: { id: blog.id } }"
                 class="blog-title-truncate text-body-heading"
               >
                 {{ blog.title }}
@@ -77,7 +77,7 @@
                 </div>
               </b-link>
               <b-link
-                :to="{ name: 'pages-blog-detail', params: { id: blog.id } }"
+                :to="{ name: 'blog-detail', params: { id: blog.id } }"
                 class="font-weight-bold"
               >
                 Read More
@@ -154,7 +154,7 @@
           :class="index? 'mt-2':''"
         >
           <b-media-aside class="mr-2">
-            <b-link :to="{ name: 'pages-blog-detail', params:{ id :recentpost.id } }">
+            <b-link :to="{ name: 'blog-detail', params:{ id :recentpost.id } }">
               <b-img
                 :src="recentpost.img"
                 :alt="recentpost.img.slice(6)"
@@ -167,7 +167,7 @@
           <b-media-body>
             <h6 class="blog-recent-post-title">
               <b-link
-                :to="{ name: 'pages-blog-detail', params:{ id :recentpost.id } }"
+                :to="{ name: 'blog-detail', params:{ id :recentpost.id } }"
                 class="text-body-heading"
               >
                 {{ recentpost.title }}