fixed #284

src/components/Widgets/TestSet/AdminTestSetShow/AdminTestSetShow.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="AdminTestShow"
        :style="localOptions.style">
+    <q-skeleton v-if="!unit.id || !testSet.id"
+                type="text"
+                width="200px" />
+    <breadcrumbs v-else
+                 style="margin-top: 29px; margin-bottom: 19px;" />
     <div class="flex justify-end">
       <q-btn flat
              color="grey"
@@ -28,10 +33,13 @@
 <script>
 import { shallowRef } from 'vue'
 import { EntityEdit } from 'quasar-crud'
+import { Unit } from 'src/models/Unit.js'
+import { TestSet } from 'src/models/TestSet.js'
 import { mixinWidget } from 'src/mixin/Mixins.js'
 import { APIGateway } from 'src/api/APIGateway.js'
 import { FormBuilderAssist } from 'quasar-form-builder'
 import BtnControl from 'src/components/Control/btn.vue'
+import Breadcrumbs from 'src/components/Widgets/Breadcrumbs/Breadcrumbs.vue'
 import QuestionsSelector from 'src/components/FormBuilderCustumComponents/QuestionsSelector/QuestionsSelector.vue'
 
 const BtnControlComp = shallowRef(BtnControl)
@@ -39,13 +47,15 @@ const QuestionsSelectorComp = shallowRef(QuestionsSelector)
 
 export default {
   name: 'AdminTestShow',
-  components: { EntityEdit },
+  components: { EntityEdit, Breadcrumbs },
   mixins: [mixinWidget],
   data () {
     const unitId = this.$route.params.unit_id
     const testSetId = this.$route.params.id
     return {
       mounted: false,
+      unit: new Unit(),
+      testSet: new TestSet(),
       entityLoading: false,
       api: APIGateway.testSet.APIAdresses.byId(testSetId),
       entityIdKey: 'id',
@@ -63,6 +73,15 @@ export default {
   mounted() {
     this.setActionBtn()
     this.mounted = true
+    Promise.all([
+      this.getUnit(),
+      this.getTestSet()
+    ])
+      .then(() => {
+        this.updateBreadcrumbs()
+      })
+      .catch(() => {
+      })
   },
   methods: {
     setActionBtn () {
@@ -78,6 +97,59 @@ export default {
         .catch(() => {
           this.entityLoading = false
         })
+    },
+    getUnit () {
+      return new Promise((resolve, reject) => {
+        this.unit.loading = true
+        APIGateway.unit.get(this.$route.params.unit_id)
+          .then((unit) => {
+            this.unit = new Unit(unit)
+            this.unit.loading = false
+            resolve()
+          })
+          .catch(() => {
+            this.unit.loading = false
+            reject()
+          })
+      })
+    },
+    getTestSet () {
+      return new Promise((resolve, reject) => {
+        this.testSet.loading = true
+        APIGateway.testSet.get(this.$route.params.id)
+          .then((testSet) => {
+            this.testSet = new TestSet(testSet)
+            this.testSet.loading = false
+            resolve()
+          })
+          .catch(() => {
+            this.testSet.loading = false
+            reject()
+          })
+      })
+    },
+    updateBreadcrumbs () {
+      this.$store.commit('AppLayout/updateBreadcrumbs', {
+        visible: true,
+        loading: false,
+        path: [
+          {
+            label: 'درس ها و چارت آموزشی',
+            to: { name: 'Admin.Category.Index' }
+          },
+          {
+            label: this.unit.category_info.title,
+            to: { name: 'Admin.Category.Show', params: { id: this.unit.category_info.id } }
+          },
+          {
+            label: this.unit.title,
+            to: { name: 'Admin.Unit.Show', params: { id: this.unit.id } }
+          },
+          {
+            label: this.testSet.title
+          }
+        ]
+      })
     }
   }
 }