Attachment

src/components/NoticeIDPage.vue

@@ -0,0 +1,102 @@
+<template>
+    <div class="container mx-auto px-4 text-justify">
+        <!-- <div v-for="files in file" :key="file.id">
+            <a :href="'https://api8.siliconpin.com/assets/'+files[0]">wsrvfsgv</a>
+        </div> -->
+        <div v-if="isLoading" class="">
+            <div class="text-center text-2xl flex flex-col justify-center place-items-center">
+                <svg class="animate-spin delay-1000 mt-24" fill="#1068c6" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 26.349 26.35" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <circle cx="13.792" cy="3.082" r="3.082"></circle> <circle cx="13.792" cy="24.501" r="1.849"></circle> <circle cx="6.219" cy="6.218" r="2.774"></circle> <circle cx="21.365" cy="21.363" r="1.541"></circle> <circle cx="3.082" cy="13.792" r="2.465"></circle> <circle cx="24.501" cy="13.791" r="1.232"></circle> <path d="M4.694,19.84c-0.843,0.843-0.843,2.207,0,3.05c0.842,0.843,2.208,0.843,3.05,0c0.843-0.843,0.843-2.207,0-3.05 C6.902,18.996,5.537,18.988,4.694,19.84z"></path> <circle cx="21.364" cy="6.218" r="0.924"></circle> </g> </g> </g></svg>
+                Loading....
+            </div>
+        </div>
+        <div v-else="content" class="py-10">
+            <p class="text-center text-2xl font-bold pb-4 font-smooth underline">{{ page.title }}</p>
+            <div class="flex flex-col justify-center place-items-center w-[100%] " v-html="content"></div>
+        </div>
+        <div v-if="fileAttached">
+                <h2>Attachments.</h2>
+                <div>
+                    <div 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>
+                    </div>
+
+                </div>
+
+            </div>
+        
+    </div>
+</template>
+    
+<script>
+export default {
+    data() {
+        return {
+            page: null,
+            attachment:null,
+            fileAttached:false,
+            content:null,
+            isLoading: true,
+            fileAttached: false,
+            file: null,
+        }
+    },
+    mounted: function () {
+        let path=window.location.pathname.split('/');
+        // console.log(path[2]);
+
+        // fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&limit=-1')
+        let queryP='https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&filter[slug][_eq]='+path[2];
+        fetch(queryP)
+            .then(response => response.json())
+            .then(data => {
+          this.page = data.data[0]
+          this.content = this.page.content
+          this.file = this.page.attachments
+        //   console.log(this.file)
+          this.isLoading = false
+        });
+        fetch('https://api8.siliconpin.com/items/scc22?filter[slug][_eq]=' + path[2])
+        .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)
+                });
+    }
+}
+</script>