update Breadcrumbs

src/components/Widgets/Breadcrumbs/Breadcrumbs.vue

@@ -2,10 +2,10 @@
   <div class="Breadcrumbs"
        :style="localOptions.style">
     <q-breadcrumbs v-if="breadcrumbs.visible">
-      <template v-slot:separator>
-        <q-icon name="chevron_right"
-                color="gray" />
-      </template>
+      <!--      <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"

src/models/Classroom.js

@@ -84,6 +84,10 @@ class Classroom extends Model {
     ]
 
     this.loadStatusInfo()
+
+    if (!this.thumbnail) {
+      this.thumbnail = '/assets/images/web/sample-class-thumbnail.jpg'
+    }
   }
 
   loadStatusInfo () {

src/pages/User/Invoice/List.vue

@@ -13,7 +13,7 @@ export default {
   mixins: [mixinPageOptions],
   data: () => {
     return {
-      sections: [{ data: { rows: [{ cols: [{ widgets: [{ name: 'InvoiceList' }], options: { style: { paddingTop: '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: 'InvoiceList' }], options: { style: { paddingTop: '' } } }], 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', paddingLeft: '', paddingRight: '' } } }] } }]
     }
   },
   created() {

src/pages/User/Profile/sessionInfo.vue

@@ -1,6 +1,10 @@
 <template>
-  <breadcrumbs style="margin-top: 29px; margin-bottom: 19px;" />
   <div>
+    <q-skeleton v-if="classroom.loading"
+                type="text"
+                width="200px" />
+    <breadcrumbs v-else
+                 style="margin-top: 29px; margin-bottom: 19px;" />
     <div class="flex justify-end">
       <q-btn flat
              color="grey"
@@ -9,15 +13,15 @@
         >
       </q-btn>
     </div>
-    <entity-show v-model:value="inputs"
+    <entity-show v-if="mounted"
+                 v-model:value="inputs"
                  title="جزییات جلسه"
                  :api="api"
-                 :entity-id-key="entityIdKey"
-                 :entity-param-key="entityParamKey"
                  :show-expand-button="false"
                  :show-edit-button="false"
                  :show-index-button="false"
-                 :show-reload-button="false">
+                 :show-reload-button="false"
+                 :before-load-input-data="beforeLoadInputData">
       <template #before-form-builder>
         <div class="session-title-and-time-row">
           <div class="item">
@@ -80,41 +84,30 @@
           </div>
         </div>
       </template>
-      <template #after-form-builder>
-        <q-banner v-if="afterFormBuilder"
-                  inline-actions
-                  rounded
-                  class="bg-orange text-white q-ma-md">
-          after form builder
-          <template v-slot:action>
-            <q-btn flat
-                   label="Dismiss"
-                   @click="afterFormBuilder = false" />
-          </template>
-        </q-banner>
-      </template>
     </entity-show>
   </div>
 </template>
 
 <script>
 import { EntityShow } from 'quasar-crud'
+import { Session } from 'src/models/Session.js'
 import ShamsiDate from 'src/assets/ShamsiDate.js'
 import { APIGateway } from 'src/api/APIGateway.js'
+import { Classroom } from 'src/models/Classroom.js'
 import Breadcrumbs from 'src/components/Widgets/Breadcrumbs/Breadcrumbs.vue'
 
 export default {
-  name: 'UserPanel.Profile.ClassroomInfo',
+  name: 'UserPanel.Profile.SessionInfo',
   components: {
     EntityShow,
     Breadcrumbs
   },
   data () {
     return {
+      classroom: new Classroom(),
+      session: new Session(),
+      mounted: false,
       api: null,
-      entityIdKey: 'id',
-      entityParamKey: 'id',
-      showRouteName: 'UserPanel.Profile.SessionInfo',
       inputs: [
         { type: 'inputEditor', name: 'description', responseKey: 'description', label: 'توضیحات', col: 'col-md-12' },
         { type: 'separator', name: 'space', size: '1px', col: 'col-md-12' },
@@ -150,30 +143,50 @@ export default {
       return ShamsiDate.getDateTime(data)
     }
   },
-  created () {
+  mounted() {
     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 } }
-        }
-      ]
-    })
+    this.mounted = true
   },
   methods: {
+    updateBreadcrumbs () {
+      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 } }
+          }
+        ]
+      })
+    },
     getInputValue (name) {
       return this.inputs.find(input => input.name === name).value
+    },
+    beforeLoadInputData (data) {
+      this.session = new Session(data)
+      this.classroom.loading = true
+      this.getClassInfo(this.session.classroom)
+    },
+    getClassInfo (classroomId) {
+      this.classroom.loading = true
+      APIGateway.classroom.get(classroomId)
+        .then(classroom => {
+          this.classroom = new Classroom(classroom)
+          this.updateBreadcrumbs()
+          this.classroom.loading = false
+        })
+        .catch(() => {
+          this.classroom.loading = false
+        })
     }
   }
 }

src/pages/User/Ticket/List.vue

@@ -13,7 +13,7 @@ export default {
   mixins: [mixinPageOptions],
   data: () => {
     return {
-      sections: [{ data: { rows: [{ cols: [{ widgets: [{ name: 'TicketList' }], 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: 'TicketList' }], options: { style: { paddingTop: '' } } }], 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', paddingLeft: '', paddingRight: '' } } }] } }]
     }
   },
   created() {

src/pages/User/Ticket/Show.vue

@@ -13,7 +13,7 @@ export default {
   mixins: [mixinPageOptions],
   data: () => {
     return {
-      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' } } }] } }]
+      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: '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() {

src/pages/User/Wallet/Show.vue

@@ -13,7 +13,7 @@ export default {
   mixins: [mixinPageOptions],
   data: () => {
     return {
-      sections: [{ data: { rows: [{ cols: [{ widgets: [{ name: 'MyWallet' }, { name: 'PaymentList', options: { style: { marginTop: '40px', marginBottom: '100px' } } }], 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: 'MyWallet' }, { name: 'PaymentList', options: { style: { marginTop: '40px', marginBottom: '100px' } } }], options: { style: { paddingTop: '' } } }], 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', paddingLeft: '', paddingRight: '' } } }] } }]
     }
   },
   created() {

src/router/routes.js

@@ -34,7 +34,7 @@ const routes = [
     },
     component: () => import('layouts/MainLayout.vue'),
     meta: {
-      // hasDynamicSetting: true
+      hasDynamicSetting: true
     },
     children: [
       {
@@ -214,6 +214,21 @@ const routes = [
               {
                 path: '',
                 name: 'UserPanel.Invoice.List',
+                meta: {
+                  breadcrumbs: {
+                    visible: true,
+                    loading: false,
+                    path: [
+                      {
+                        label: 'بخش مالی'
+                      },
+                      {
+                        label: 'صورتحساب ها',
+                        to: { name: 'UserPanel.Invoice.List' }
+                      }
+                    ]
+                  }
+                },
                 component: () => import('src/pages/User/Invoice/List.vue')
               },
               {
@@ -229,6 +244,9 @@ const routes = [
                     visible: true,
                     loading: false,
                     path: [
+                      {
+                        label: 'بخش مالی'
+                      },
                       {
                         label: 'صورتحساب ها',
                         to: { name: 'UserPanel.Invoice.List' }
@@ -302,7 +320,26 @@ const routes = [
               }
             ]
           },
-          { path: 'wallet', name: 'UserPanel.Wallet', component: () => import('src/pages/User/Wallet/Show.vue') },
+          {
+            path: 'wallet',
+            name: 'UserPanel.Wallet',
+            component: () => import('src/pages/User/Wallet/Show.vue'),
+            meta: {
+              breadcrumbs: {
+                visible: true,
+                loading: false,
+                path: [
+                  {
+                    label: 'بخش مالی'
+                  },
+                  {
+                    label: 'کیف پول الکترونیک',
+                    to: { name: 'UserPanel.Wallet' }
+                  }
+                ]
+              }
+            }
+          },
           {
             path: 'payment',
             name: 'UserPanel.Payment',