fixed #18

src/boot/routesLayoutConfigs.js

@@ -4,6 +4,9 @@ import helper from 'quasar-template-builder/src/helper.js'
 const { getRouteWithParent, createLayoutConfigArray } = helper
 export default boot(({ router, store }) => {
   router.beforeEach((to) => {
+    if (to.meta.breadcrumbs) {
+      store.commit('AppLayout/updateBreadcrumbs', to.meta.breadcrumbs)
+    }
     const routeWithParent = getRouteWithParent({ children: router.options.routes }, to.name, store)
     const layoutArray = createLayoutConfigArray(routeWithParent)
     layoutArray.forEach(config => {

src/components/Widgets/Breadcrumbs/Breadcrumbs.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="Breadcrumbs"
+       :style="localOptions.style">
+    <q-breadcrumbs v-if="breadcrumbs.visible">
+      <template v-slot:separator>
+        <q-icon name="chevron_right"
+                color="gray" />
+      </template>
+      <q-breadcrumbs-el v-for="(el, elIndex) in breadcrumbs.path"
+                        :key="elIndex"
+                        :to="el.to"
+                        :label="el.label" />
+    </q-breadcrumbs>
+  </div>
+</template>
+
+<script>
+import { mixinWidget } from 'src/mixin/Mixins.js'
+
+export default {
+  name: 'Breadcrumbs',
+  mixins: [mixinWidget],
+  computed: {
+    breadcrumbs () {
+      return this.$store.getters['AppLayout/breadcrumbs']
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.Breadcrumbs {
+
+}
+</style>

src/components/Widgets/Breadcrumbs/OptionPanel.vue

@@ -0,0 +1,21 @@
+<template>
+  <option-panel-tabs v-model:options="localOptions">
+    <template #main-tab>
+      ...
+    </template>
+  </option-panel-tabs>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { mixinOptionPanel } from 'quasar-ui-q-page-builder'
+import OptionPanelTabs from 'quasar-ui-q-page-builder/src/components/OptionPanelComponents/OptionPanelTabs.vue'
+
+export default defineComponent({
+  name: 'OptionPanel',
+  components: {
+    OptionPanelTabs
+  },
+  mixins: [mixinOptionPanel]
+})
+</script>

src/components/Widgets/Other/ShowClassroomInfo/ShowClassroomInfo.vue

@@ -340,6 +340,7 @@ export default {
       }
     }
   },
+  emits: ['onloadn'],
   data: () => ({
     defaultOptions: {
       profileMode: false
@@ -433,6 +434,7 @@ export default {
         .then(classroom => {
           this.classroom = new Classroom(classroom)
           this.loading = false
+          this.$emit('onloadn', this.classroom)
         })
         .catch(() => {
           this.loading = false

src/layouts/MainLayout.vue

@@ -67,8 +67,8 @@ import FloatingActionButton from 'components/Template/FloatingActionButton/Float
 
 export default {
   components: {
-    AuthLogin,
     Router,
+    AuthLogin,
     FooterTemplate,
     templateHeader,
     TemplateSideBar,

src/pages/User/Invoice/Show.vue

@@ -13,7 +13,7 @@ export default {
   mixins: [mixinPageOptions],
   data: () => {
     return {
-      sections: [{ data: { rows: [{ cols: [{ widgets: [{ name: 'InvoiceShow' }], options: { style: { paddingTop: '124px' } } }], options: { className: '', height: 'auto', boxed: true, boxedWidth: 1200, gutterXSize: 'md', gutterYSize: 'md', absolute: 'none', paddingOfBoxedInFullWidth: '30px', style: { maxWidth: '1200px', width: '1200px' } } }] } }]
+      sections: [{ data: { rows: [{ cols: [{ widgets: [{ name: 'Breadcrumbs', options: { style: { marginTop: '29px', marginBottom: '' } } }, { name: 'InvoiceShow' }], options: { style: { paddingTop: '', paddingBottom: '100px' } } }], options: { className: '', height: 'auto', boxed: true, boxedWidth: 1200, gutterXSize: 'md', gutterYSize: 'md', absolute: 'none', paddingOfBoxedInFullWidth: '30px', style: { maxWidth: '1200px', width: '1200px' } } }] } }]
     }
   },
   created() {

src/pages/User/Payment/Show.vue

@@ -13,7 +13,7 @@ export default {
   mixins: [mixinPageOptions],
   data: () => {
     return {
-      sections: [{ data: { rows: [{ cols: [{ widgets: [{ name: 'PaymentShow' }], options: { style: { paddingTop: '124px' } } }], options: { className: '', height: 'auto', boxed: true, boxedWidth: 1200, gutterXSize: 'md', gutterYSize: 'md', absolute: 'none', paddingOfBoxedInFullWidth: '30px', style: { maxWidth: '1200px', width: '1200px' } } }] } }]
+      sections: [{ data: { rows: [{ cols: [{ widgets: [{ name: 'Breadcrumbs', options: { style: { marginTop: '29px', marginBottom: '49px' } } }, { name: 'PaymentShow' }], options: { style: { paddingTop: '' } } }], options: { className: '', height: 'auto', boxed: true, boxedWidth: 1200, gutterXSize: 'md', gutterYSize: 'md', absolute: 'none', paddingOfBoxedInFullWidth: '30px', style: { maxWidth: '1200px', width: '1200px' } } }] } }]
     }
   },
   created() {

src/pages/User/Profile/classroomInfo.vue

@@ -1,4 +1,5 @@
 <template>
+  <breadcrumbs style="margin-top: 29px; margin-bottom: 19px;" />
   <q-card>
     <q-tabs v-model="tab"
             dense
@@ -24,7 +25,8 @@
     <q-tab-panels v-model="tab"
                   animated>
       <q-tab-panel name="classroomInfo">
-        <show-classroom-info :options="{ profileMode: true }" />
+        <show-classroom-info :options="{ profileMode: true }"
+                             @onloadn="onloadnClassroom" />
       </q-tab-panel>
 
       <q-tab-panel name="educations">
@@ -83,13 +85,16 @@ import { EntityIndex } from 'quasar-crud'
 import Enums from 'src/assets/Enums/Enums.js'
 import ShamsiDate from 'src/assets/ShamsiDate.js'
 import { APIGateway } from 'src/api/APIGateway.js'
+import { Classroom } from 'src/models/Classroom.js'
 import EntityIndexGridItem from 'src/components/EntityIndexGridItem.vue'
+import Breadcrumbs from 'src/components/Widgets/Breadcrumbs/Breadcrumbs.vue'
 import ShowClassroomInfo from 'src/components/Widgets/Other/ShowClassroomInfo/ShowClassroomInfo.vue'
 
 export default {
   name: 'UserPanel.Profile.ClassroomInfo',
   components: {
     EntityIndex,
+    Breadcrumbs,
     ShowClassroomInfo,
     EntityIndexGridItem
   },
@@ -99,6 +104,7 @@ export default {
       tab: 'classroomInfo',
       inputs: [],
       api: null,
+      classroom: new Classroom(),
       table: {
         columns: [
           {
@@ -164,6 +170,23 @@ export default {
     this.mounted = true
   },
   methods: {
+    onloadnClassroom (classroom) {
+      this.classroom = new Classroom(classroom)
+      this.$store.commit('AppLayout/updateBreadcrumbs', {
+        visible: true,
+        loading: false,
+        path: [
+          {
+            label: 'دوره های من',
+            to: { name: 'UserPanel.Profile.AllClassrooms' }
+          },
+          {
+            label: this.classroom.title,
+            to: { name: 'UserPanel.Profile.ClassroomInfo', params: { id: this.classroom.id } }
+          }
+        ]
+      })
+    },
     search () {
       this.$refs.entityIndex.search()
     },

src/pages/User/Profile/classrooms.vue

@@ -1,4 +1,5 @@
 <template>
+  <breadcrumbs style="margin-top: 29px; margin-bottom: 19px;" />
   <entity-index ref="entityIndex"
                 v-model:value="inputs"
                 title="لیست دوره ها"
@@ -43,6 +44,7 @@ import ShamsiDate from 'src/assets/ShamsiDate.js'
 import { APIGateway } from 'src/api/APIGateway.js'
 import BtnControl from 'src/components/Control/btn.vue'
 import EntityIndexGridItem from 'src/components/EntityIndexGridItem.vue'
+import Breadcrumbs from 'src/components/Widgets/Breadcrumbs/Breadcrumbs.vue'
 
 const BtnControlComp = shallowRef(BtnControl)
 
@@ -50,6 +52,7 @@ export default {
   name: 'UserPanel.Profile.AllClassrooms',
   components: {
     EntityIndex,
+    Breadcrumbs,
     EntityIndexGridItem
   },
   data () {

src/pages/User/Profile/sessionInfo.vue

@@ -1,4 +1,5 @@
 <template>
+  <breadcrumbs style="margin-top: 29px; margin-bottom: 19px;" />
   <div>
     <div class="flex justify-end">
       <q-btn flat
@@ -100,11 +101,13 @@
 import { EntityShow } from 'quasar-crud'
 import ShamsiDate from 'src/assets/ShamsiDate.js'
 import { APIGateway } from 'src/api/APIGateway.js'
+import Breadcrumbs from 'src/components/Widgets/Breadcrumbs/Breadcrumbs.vue'
 
 export default {
   name: 'UserPanel.Profile.ClassroomInfo',
   components: {
-    EntityShow
+    EntityShow,
+    Breadcrumbs
   },
   data () {
     return {
@@ -149,6 +152,24 @@ export default {
   },
   created () {
     this.api = APIGateway.session.APIAdresses.byId(this.$route.params.id)
+    this.$store.commit('AppLayout/updateBreadcrumbs', {
+      visible: true,
+      loading: false,
+      path: [
+        {
+          label: 'دوره های من',
+          to: { name: 'UserPanel.Profile.AllClassrooms' }
+        },
+        // {
+        //   label: this.classroom.title,
+        //   to: { name: 'UserPanel.Profile.ClassroomInfo', params: { id: this.classroom.id } }
+        // },
+        {
+          label: 'جزییات جلسه',
+          to: { name: 'UserPanel.Profile.SessionInfo', params: { id: this.$route.params.id } }
+        }
+      ]
+    })
   },
   methods: {
     getInputValue (name) {

src/pages/User/Ticket/Show.vue

@@ -13,7 +13,7 @@ export default {
   mixins: [mixinPageOptions],
   data: () => {
     return {
-      sections: [{ data: { rows: [{ cols: [{ widgets: [{ name: 'TicketShow' }], options: { style: { paddingTop: '124px', paddingBottom: '100px' } } }], options: { className: '', height: 'auto', boxed: true, boxedWidth: 1200, gutterXSize: 'md', gutterYSize: 'md', absolute: 'none', paddingOfBoxedInFullWidth: '30px', style: { maxWidth: '1200px', width: '1200px' } } }] } }]
+      sections: [{ data: { rows: [{ cols: [{ widgets: [{ name: 'Breadcrumbs', options: { style: { marginTop: '29px', marginBottom: '49px' } } }, { name: 'TicketShow' }], options: { style: { paddingTop: '', paddingBottom: '100px' } } }], options: { className: '', height: 'auto', boxed: true, boxedWidth: 1200, gutterXSize: 'md', gutterYSize: 'md', absolute: 'none', paddingOfBoxedInFullWidth: '30px', style: { maxWidth: '1200px', width: '1200px' } } }] } }]
     }
   },
   created() {

src/router/routes.js

@@ -33,6 +33,9 @@ const routes = [
       layoutPageContainerCustomClass: 'main-layout-container'
     },
     component: () => import('layouts/MainLayout.vue'),
+    meta: {
+      hasDynamicSetting: true
+    },
     children: [
       {
         path: '/auth',
@@ -164,7 +167,23 @@ const routes = [
             component: () => import('src/layouts/UserPanelLayout.vue'),
             meta: { middlewares: [Authenticated] },
             children: [
-              { name: 'UserPanel.Profile.AllClassrooms', path: 'all-classrooms', component: () => import('src/pages/User/Profile/classrooms.vue') },
+              {
+                name: 'UserPanel.Profile.AllClassrooms',
+                path: 'all-classrooms',
+                component: () => import('src/pages/User/Profile/classrooms.vue'),
+                meta: {
+                  breadcrumbs: {
+                    visible: true,
+                    loading: false,
+                    path: [
+                      {
+                        label: 'دوره های من',
+                        to: { name: 'UserPanel.Profile.AllClassrooms' }
+                      }
+                    ]
+                  }
+                }
+              },
               { name: 'UserPanel.Profile.ClassroomInfo', path: 'classroom/:id', component: () => import('src/pages/User/Profile/classroomInfo.vue') },
               { name: 'UserPanel.Profile.SessionInfo', path: 'session/:id', component: () => import('src/pages/User/Profile/sessionInfo.vue') },
               { name: 'UserPanel.Profile.UserInfo', path: 'user-info', component: () => import('src/pages/User/Profile/profile.vue') }
@@ -188,6 +207,21 @@ const routes = [
               {
                 path: ':id',
                 name: 'UserPanel.Invoice.Show',
+                meta: {
+                  breadcrumbs: {
+                    visible: true,
+                    loading: false,
+                    path: [
+                      {
+                        label: 'صورتحساب ها',
+                        to: { name: 'UserPanel.Invoice.List' }
+                      },
+                      {
+                        label: 'جزییات صورتحساب'
+                      }
+                    ]
+                  }
+                },
                 component: () => import('src/pages/User/Invoice/Show.vue')
               },
               {
@@ -227,6 +261,21 @@ const routes = [
               {
                 path: ':id',
                 name: 'UserPanel.Ticket.Show',
+                meta: {
+                  breadcrumbs: {
+                    visible: true,
+                    loading: false,
+                    path: [
+                      {
+                        label: 'درخواست ها',
+                        to: { name: 'UserPanel.Ticket.List' }
+                      },
+                      {
+                        label: 'جزییات درخواست'
+                      }
+                    ]
+                  }
+                },
                 component: () => import('src/pages/User/Ticket/Show.vue')
               },
               {
@@ -242,7 +291,26 @@ const routes = [
             name: 'UserPanel.Payment',
             component: () => import('src/layouts/bareLayout.vue'),
             children: [
-              { name: 'UserPanel.Payment.Show', path: ':id', component: () => import('src/pages/User/Payment/Show.vue'), breadcrumbs: { title: 'اطلاعات کاربری' } }
+              {
+                name: 'UserPanel.Payment.Show',
+                path: ':id',
+                component: () => import('src/pages/User/Payment/Show.vue'),
+                meta: {
+                  breadcrumbs: {
+                    visible: true,
+                    loading: false,
+                    path: [
+                      {
+                        label: 'کیف پول الکترونیک',
+                        to: { name: 'UserPanel.Wallet' }
+                      },
+                      {
+                        label: 'جزییات پرداخت'
+                      }
+                    ]
+                  }
+                }
+              }
             ]
           }
         ]