postCategory page

src/components/PostItem.vue

@@ -7,11 +7,18 @@
           <q-img :src="post.thumbnail" />
         </router-link>
       </div>
-      <div class="title">
+      <div class="title ellipsis-2-lines">
         <router-link :to="{name: 'Public.Post.Show', params: {id: post.id}}">
           {{post.title}}
         </router-link>
       </div>
+      <div class="child-category ellipsis-2-lines">
+        <router-link :to="{name: 'Public.PostCategory.Show', params: {category_id: post.category_info?.id}}">
+          <q-icon name="account_tree" />
+          دسته:
+          {{post.category_info?.title}}
+        </router-link>
+      </div>
       <q-card-actions class="action-section">
         <q-btn color="primary"
                class="btn-show-post"
@@ -51,6 +58,16 @@ export default defineComponent({
     }
   }
   .title {
+    font-size: 17px;
+    letter-spacing: 0;
+    padding-right: 26px;
+    padding-left: 26px;
+    margin-bottom: 16px;
+    a {
+      color: #475F4A;
+    }
+  }
+  .child-category {
     font-size: 17px;
     letter-spacing: 0;
     padding-right: 26px;

src/components/Widgets/Post/PostList/OptionPanel.vue

@@ -1,10 +1,45 @@
 <template>
   <option-panel-tabs v-model:options="localOptions">
     <template #main-tab>
+      <div class="q-mt-md">
+        کد دسته پدربزرگ
+      </div>
+      <div class="row">
+        <div class="col-md-4 col-12">
+          <q-checkbox v-model="localOptions.categoryCategoryCategoryFromQueryParams"
+                      label="استفاده از کوری پارام صفحه" />
+        </div>
+        <div v-if="!localOptions.categoryCategoryCategoryFromQueryParams"
+             class="col-md-8 col-12">
+          <q-input v-model="localOptions.categoryCategoryCategoryId" />
+        </div>
+      </div>
+      <div>
+        کد دسته پدر
+      </div>
+      <div class="row">
+        <div class="col-md-4 col-12">
+          <q-checkbox v-model="localOptions.categoryCategoryFromQueryParams"
+                      label="استفاده از کوری پارام صفحه" />
+        </div>
+        <div v-if="!localOptions.categoryCategoryFromQueryParams"
+             class="col-md-8 col-12">
+          <q-input v-model="localOptions.categoryCategoryId" />
+        </div>
+      </div>
       <div>
-        کد دسته
+        کد دسته فرزند
+      </div>
+      <div class="row">
+        <div class="col-md-4 col-12">
+          <q-checkbox v-model="localOptions.categoryFromQueryParams"
+                      label="استفاده از کوری پارام صفحه" />
+        </div>
+        <div v-if="!localOptions.categoryFromQueryParams"
+             class="col-md-8 col-12">
+          <q-input v-model="localOptions.categoryId" />
+        </div>
       </div>
-      <q-input v-model="localOptions.categoryId" />
     </template>
   </option-panel-tabs>
 </template>
@@ -19,6 +54,18 @@ export default defineComponent({
   components: {
     OptionPanelTabs
   },
-  mixins: [mixinOptionPanel]
+  mixins: [mixinOptionPanel],
+  data () {
+    return {
+      defaultOptions: {
+        categoryId: null,
+        categoryCategoryId: null,
+        categoryCategoryCategoryId: null,
+        categoryFromQueryParams: false,
+        categoryCategoryFromQueryParams: false,
+        categoryCategoryCategoryFromQueryParams: false
+      }
+    }
+  }
 })
 </script>

src/components/Widgets/Post/PostList/PostList.vue

@@ -12,7 +12,6 @@
                   :api="api"
                   :table="table"
                   :table-keys="tableKeys"
-                  :create-route-name="createRouteName"
                   :table-grid-size="true"
                   :default-layout="false"
                   :show-search-button="false"
@@ -30,8 +29,9 @@ import { EntityIndex } from 'quasar-crud'
 import { mixinWidget } from 'src/mixin/Mixins.js'
 import { APIGateway } from 'src/api/APIGateway.js'
 import PostItem from 'src/components/PostItem.vue'
-import Breadcrumbs from 'src/components/Widgets/Breadcrumbs/Breadcrumbs.vue'
 import { FormBuilderAssist } from 'quasar-form-builder'
+import { PostCategory } from 'src/models/PostCategory.js'
+import Breadcrumbs from 'src/components/Widgets/Breadcrumbs/Breadcrumbs.vue'
 
 export default {
   name: 'PostList',
@@ -48,34 +48,95 @@ export default {
         pageKey: 'page'
       },
       inputs: [
-        { type: 'hidden', name: 'category', value: null }
+        { type: 'hidden', name: 'category', value: null },
+        { type: 'hidden', name: 'category__parent', value: null },
+        { type: 'hidden', name: 'category__parent__parent', value: null }
       ],
       table: {
         columns: []
       },
       mounted: false,
-      createRouteName: ''
+      postCategory: new PostCategory(),
+      breadcrumbs: {
+        visible: true,
+        loading: false,
+        path: [
+          {
+            label: 'خانه',
+            to: { name: 'Public.Home' }
+          },
+          {
+            label: 'یادداشت ها و مقالات',
+            to: { name: 'Public.Post.List' }
+          }
+        ]
+      },
+      defaultOptions: {
+        categoryId: null,
+        categoryCategoryId: null,
+        categoryCategoryCategoryId: null,
+        categoryFromQueryParams: false,
+        categoryCategoryFromQueryParams: false,
+        categoryCategoryCategoryFromQueryParams: false
+      }
+    }
+  },
+  computed: {
+    postCategoryId () {
+      if (this.localOptions.categoryFromQueryParams && this.$route.params.category_id) {
+        return this.$route.params.category_id
+      }
+
+      if (this.localOptions.categoryId) {
+        return this.localOptions.categoryId
+      }
+
+      return null
     }
   },
   mounted() {
     this.mounted = true
-    this.$store.commit('AppLayout/updateBreadcrumbs', {
-      visible: true,
-      loading: false,
-      path: [
-        {
-          label: 'خانه',
-          to: { name: 'Public.Home' }
-        },
-        {
-          label: 'یادداشت ها و مقالات',
-          to: { name: 'Public.Post.List' }
-        }
-      ]
-    })
-    if (this.localOptions.categoryId) {
+    this.$store.commit('AppLayout/updateBreadcrumbs', this.breadcrumbs)
+
+    if (this.localOptions.categoryCategoryCategoryFromQueryParams) {
+      FormBuilderAssist.setAttributeByName(this.inputs, 'category__parent__parent', 'value', this.$route.params.category_parent_parent_id)
+    } else if (this.localOptions.categoryCategoryCategoryId) {
+      FormBuilderAssist.setAttributeByName(this.inputs, 'category__parent__parent', 'value', this.localOptions.categoryCategoryCategoryId)
+    }
+
+    if (this.localOptions.categoryCategoryFromQueryParams) {
+      FormBuilderAssist.setAttributeByName(this.inputs, 'category__parent', 'value', this.$route.params.category_parent_id)
+    } else if (this.localOptions.categoryCategoryId) {
+      FormBuilderAssist.setAttributeByName(this.inputs, 'category__parent', 'value', this.localOptions.categoryCategoryId)
+    }
+
+    if (this.localOptions.categoryFromQueryParams) {
+      FormBuilderAssist.setAttributeByName(this.inputs, 'category', 'value', this.$route.params.category_id)
+    } else if (this.localOptions.categoryId) {
       FormBuilderAssist.setAttributeByName(this.inputs, 'category', 'value', this.localOptions.categoryId)
     }
+
+    if (this.postCategoryId) {
+      this.getPostCategoryInfo(this.postCategoryId)
+    }
+  },
+  methods: {
+    getPostCategoryInfo (postCategoryId) {
+      this.postCategory.loading = true
+      APIGateway.postCategory.get({ data: { id: postCategoryId } })
+        .then((postCategory) => {
+          this.postCategory = new PostCategory(postCategory)
+          this.breadcrumbs.path.push({
+            label: this.postCategory.title,
+            to: { name: 'Public.PostCategory.Show', params: { category_id: postCategoryId } }
+          })
+          this.$store.commit('AppLayout/updateBreadcrumbs', this.breadcrumbs)
+          this.postCategory.loading = false
+        })
+        .catch(() => {
+          this.postCategory.loading = false
+        })
+    }
   }
 }
 </script>

src/components/Widgets/Post/PostShow/PostShow.vue

@@ -101,6 +101,20 @@ export default {
   emits: ['onloadn'],
   data () {
     return {
+      breadcrumbs: {
+        visible: true,
+        loading: false,
+        path: [
+          {
+            label: 'خانه',
+            to: { name: 'Public.Home' }
+          },
+          {
+            label: 'یادداشت ها و مقالات',
+            to: { name: 'Public.Post.List' }
+          }
+        ]
+      },
       defaultOptions: {
         profileMode: false
       },
@@ -114,24 +128,16 @@ export default {
     prefetchServerDataPromiseThen (post) {
       this.post = new Post(post)
       this.post.post = false
-      this.$store.commit('AppLayout/updateBreadcrumbs', {
-        visible: true,
-        loading: false,
-        path: [
-          {
-            label: 'خانه',
-            to: { name: 'Public.Home' }
-          },
-          {
-            label: 'یادداشت ها و مقالات',
-            to: { name: 'Public.Post.List' }
-          },
-          {
-            label: this.post.title,
-            to: { name: 'Public.Post.Show', params: { id: this.post.id } }
-          }
-        ]
+
+      this.breadcrumbs.path.push({
+        label: this.post.category_info.title,
+        to: { name: 'Public.PostCategory.Show', params: { category_id: this.post.category_info.id } }
+      })
+      this.breadcrumbs.path.push({
+        label: this.post.title,
+        to: { name: 'Public.Post.Show', params: { id: this.post.id } }
       })
+      this.$store.commit('AppLayout/updateBreadcrumbs', this.breadcrumbs)
       this.$emit('onloadn', this.post)
     },
     prefetchServerDataPromiseCatch () {

src/pages/Public/Post/ChildCategoryPostList.vue

@@ -0,0 +1,15 @@
+<template>
+  <q-page-builder v-model:sections="currenSections"
+                  v-model:options="pageConfig"
+                  :editable="pageBuilderEditable"
+                  :loading="pageBuilderLoading" />
+</template>
+
+<script>
+import { mixinSEO, mixinPageOptions, mixinPrefetchServerData } from 'src/mixin/Mixins.js'
+
+export default {
+  name: 'AdminPanel.Package.Show',
+  mixins: [mixinPrefetchServerData, mixinPageOptions, mixinSEO]
+}
+</script>

src/pages/Public/Post/Show.vue

@@ -6,18 +6,10 @@
 </template>
 
 <script>
-import { mixinPageOptions } from 'src/mixin/Mixins.js'
+import { mixinPageOptions, mixinPrefetchServerData, mixinSEO } from 'src/mixin/Mixins.js'
 
 export default {
   name: 'AdminPanel.Package.Show',
-  mixins: [mixinPageOptions],
-  data: () => {
-    return {
-      sections: [{ data: { rows: [{ cols: [{ widgets: [{ name: 'PostShow' }], options: { colNumber: 'col', style: { paddingTop: '', paddingBottom: '48px' }, boxShadows: [], backgrounds: { xs: { size: null, color: null, image: null, repeat: null, position: null, attachment: null }, sm: { size: null, color: null, image: null, repeat: null, position: null, attachment: null }, md: { size: null, color: null, image: null, repeat: null, position: null, attachment: null }, lg: { size: null, color: null, image: null, repeat: null, position: null, attachment: null }, xl: { size: null, color: null, image: null, repeat: null, position: null, attachment: null } }, responsiveOrder: { xs: null, sm: null, md: null, lg: null, xl: null }, borderStyle: { borderCssString: '', borderRadiusCssString: '' }, cssHoverEffects: { boxShadows: [], borderStyle: { borderCssString: '', borderRadiusCssString: '' }, transition: { time: 0 }, transform: { rotate: null, scaleX: null, scaleY: null, skewX: null, skewY: null, translateX: null, translateY: null } }, responsiveShow: { xl: true, lg: true, md: true, sm: true, xs: true }, className: '' } }], options: { className: '', height: 'auto', boxed: true, boxedWidth: 1200, gutterXSize: 'md', gutterYSize: 'md', absolute: 'none', paddingOfBoxedInFullWidth: '10px', alignment: { justifyContent: { global: null, xl: null, lg: null, md: null, sm: null, xs: null }, alignItems: { global: null, xl: null, lg: null, md: null, sm: null, xs: null }, alignContent: { global: null, xl: null, lg: null, md: null, sm: null, xs: null } }, style: { maxWidth: '1200px', width: '1200px' } } }] } }]
-    }
-  },
-  created() {
-    this.currenSections = this.sections
-  }
+  mixins: [mixinPrefetchServerData, mixinPageOptions, mixinSEO]
 }
 </script>

src/router/routes.js

@@ -95,6 +95,7 @@ const routes = [
               { path: ':id', name: 'Public.Post.Show', component: () => import('src/pages/Public/Post/Show.vue') }
             ]
           },
+          { path: 'post_category/:category_id', name: 'Public.PostCategory.Show', component: () => import('src/pages/Public/Post/ChildCategoryPostList.vue') },
           {
             name: 'Public.AllClassrooms',
             path: 'all-classrooms',