Clyde/frontend/src/Apps/ScientificPublications/ResearchComponent.vue

<!----------------------------------------------------
	File:  ResearchComponent.vue
	Author: Maxime Bartha
	Scope: Extension Publicatons scientifiquess
	Description: Pop Up summarizing
----------------------------------------------------->

<script setup>
import {ref } from "vue";
import {onClickOutside} from '@vueuse/core'

const props = defineProps({
  isOpen: Boolean,
  article: ref(Object)
});
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)
onClickOutside(target, ()=>emit('modal-close'))

</script>

<template>
  <div v-if="isOpen" class="modal-mask">
    <div class="modal-wrapper">
      <div class="modal-container" ref="target">
       <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>
      </div>
    </div>
  </div>
</template>

<style scoped>
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-container {
  width: 70%;
  margin: 150px auto;
  padding: 20px 30px;
  background: rgba(157, 99, 205);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
}

.modal-container ul{
  margin-top: 9px;
}


#downloads {
  text-align: end;
}
#downloads button {
  align-self: center;
  margin-left: 2px;
  font-size: large;
  color: white;
  background: rgba(191, 64, 191,0.5);
  border:2px solid black;
  border-radius: 5px;
}
#downloads button:hover{
  background: rgba(191, 64, 191);
}

</style>