nirf data menu

src/components/MainMenu.vue

@@ -392,6 +392,16 @@
                     >NAAC</router-link
                   >
                 </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/nirf-data"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >NIRF Data</router-link
+                  >
+                </MenuItem>
                 <MenuItem v-slot="{ active }">
                   <router-link
                     to="/aqar"

src/pages/[id].vue

@@ -1,10 +1,22 @@
 <template>
-<div class="container-fluid bg-white mx-auto mt-3  p-0">
+    <div class="container bg-white mx-auto mt-3  p-4">
         <div v-if="isLoading">
-        <h2 class="ml-28 text-4xl">Loading ...</h2>
+            <h2>Loading ...</h2>
         </div>
         <div v-else>
-        <div v-html="page[0].content" class="container mx-auto">
+            <!-- <h2>{{page[0].title}}</h2> -->
+            <div v-html="page[0].content" ></div>
+            <div v-if="fileAttached">
+                <h2>Attachments.</h2>
+                <ul>
+                    <li v-for="(file, index) in files">
+                        {{index+1}}. 
+                        <a class="text-blue-600" :href="`https://api8.siliconpin.com/assets/` + file.id+'?download' "  :download="file.filename_download">
+                          {{ file.filename_download }}
+                        </a>
+                    </li>
+
+                </ul>
 
             </div>
         </div>
@@ -16,18 +28,62 @@ export default {
     data() {
         return {
             page: null,
+            fileAttached:false,
+            files: [],
             isLoading: true
         }
     },
     mounted: function () {
         fetch('https://api8.siliconpin.com/items/scc22?filter[slug][_eq]=' + this.$route.params.id)
-        // fetch('https://api8.siliconpin.com/items/scc22?slug=about-us')
-            .then(response => response.json())
-            .then(data => {
-          this.page = data.data
-          console.log(data)
-          this.isLoading = false
+        .then((response) => {
+            if (response.ok) {
+                return response.json();
+            }
+            throw new Error('Something went wrong');
             })
+            .then(jsonPageData => {
+                this.page = jsonPageData.data
+                console.log(this.page)
+                this.isLoading = false
+                return jsonPageData.data[0].id
+                }
+            )
+            .then((pageID) => {
+                fetch('https://api8.siliconpin.com/items/scc22_files_1?filter[scc22_id][_in]=' + pageID)
+                .then(resp => resp.json())
+                    .then(file => {
+                            let attIDs = ''
+                            let t = 0
+                            file.data.forEach(ids => {
+                                if (t == 0) attIDs = ids.directus_files_id
+                                else attIDs = attIDs + ',' + ids.directus_files_id
+                                t++
+                            });
+                            if(t>0) this.fileAttached=true
+                        return attIDs
+                    })
+                        .then((attIDs) => {
+                            fetch('https://api8.siliconpin.com/files?filter[id][_in]=' + attIDs)
+                            .then(resp => resp.json())
+                                .then(file => {
+                                    this.files = file.data
+                                })
+                        })
+            })
+            .catch((error) => {
+                console.log(error)
+                });
+    },
+    methods: {
+        // getAttachments(att) {
+
+        //     console.log(att)
+        //     // fetch('https://api8.siliconpin.com/items/ecom55?filter[slug][_eq]=' + this.$route.params.id)
+        //     //     .then(response => response.json())
+        //     //     .then(data => this.itemByCategory = data)
+        //     // console.log(this.itemByCategory)
+
+        // }
     }
 }
 </script>