junction front - back

frontend/src/Apps/ScientificPublications/ResearchComponent.vue

@@ -8,16 +8,20 @@
 <script setup>
 import {ref } from "vue";
 import {onClickOutside} from '@vueuse/core'
-let checked = ref([])
 
 const props = defineProps({
   isOpen: Boolean,
+  article: ref(Object)
 });
-const example = ["Title","Author",["Co-author1", "co-Authors2"],
-  " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum ex tempor leo pulvinar, vitae imperdiet leo pellentesque. Aenean aliquam, ante at tempus sagittis, lorem leo feugiat felis, eget vestibulum tortor est nec libero. Cras sit amet venenatis velit, at rhoncus est. Cras id sem placerat, cursus sem et, aliquam felis. Nullam mi nunc, laoreet eget rutrum ac, blandit nec lorem. Duis fermentum aliquet tortor ac tristique. Aenean ac sagittis nulla, at auctor dolor. Vivamus et neque sodales, vestibulum dolor et, posuere urna. Pellentesque ut elit metus. Cras velit lectus, luctus auctor interdum eu, aliquam nec est. Donec elementum nisl sit amet nibh aliquam ultricies. Nullam felis orci, suscipit eu tincidunt pretium, euismod vel sem. Duis eget vehicula neque, nec gravida leo. Cras pellentesque arcu quis justo lobortis, ut semper massa rhoncus. Quisque sagittis dignissim congue. Nullam tortor ligula, mattis vel cursus id, pretium non lacus.",
-  "language",
-    "access",
-]
+function format(date){
+  let split = date.split("-")
+  let month = split[1]
+  let day = split[2].split("T")[0]
+  let year = split[0]
+  return day +"/"+ month +"/"+ year
+}
+
+
 const emit = defineEmits(["modal-close"]);
 
 const target = ref(null)
@@ -29,8 +33,19 @@ onClickOutside(target, ()=>emit('modal-close'))
   <div v-if="isOpen" class="modal-mask">
     <div class="modal-wrapper">
       <div class="modal-container" ref="target">
-       <ul v-for="n in example"><li>{{n}}</li></ul>
-        <div id="downloads">
+       <ul>
+         <li>Article Id : {{article.id}}</li>
+         <li>Title : {{article.title}}</li>
+         <li>Author : {{article.researcher.user.lastName + " " + article.researcher.user.firstName}}</li>
+         <li>Summary : {{article.summary}}</li>
+         <li>ReleaseDate: {{format(article.releaseDate)}}</li>
+         <li>Language : {{article.language}}</li>
+         <li>PaperType : {{article.paperType}}</li>
+         <li>Domain : {{article.domain}}</li>
+         <li>Access : {{article.access}}</li>
+
+       </ul>
+        <div id="downloads" v-if="article.pdfLocation !== null">
           <button @click.stop="emit('modal-close')">Download BibTex</button>
           <button @click.stop="emit('modal-close')">Download Research</button>
         </div>
@@ -59,6 +74,10 @@ onClickOutside(target, ()=>emit('modal-close'))
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
 }
 
+.modal-container ul{
+  margin-top: 9px;
+}
+
 
 #downloads {
   text-align: end;