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

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

<script setup xmlns="http://www.w3.org/1999/html">
import {ref, watch} from "vue";
import {onClickOutside} from '@vueuse/core'
import {
  patchArticle,
  deleteArticle,
  addView,
} from "@/rest/ScientificPublications/ManageResearch.js";
import i18n from "../../i18n.js";
const coAuthors = ref()
const restURL = import.meta.env.VITE_CLYDE_MODE === 'container' ? "http://localhost:8000": import.meta.env.DEV ? "http://localhost:5173" : "https://clyde.herisson.ovh/api"
const props = defineProps({
  isOpen: Boolean,
  article: ref(Object),
  manage:Boolean,
  allResearcher: ref()
});


watch(
    () => props.article,
    (newValue) => {
      if (newValue !== null)
        coAuthors.value = newValue.coAuthors
    }
);


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","modified"]);

const target = ref(null)
onClickOutside(target, ()=>{emit('modal-close'); })

let toModify= Object.assign({}, {});

function cancelChanges(){
  toModify= Object.assign({}, {});
  emit('modal-close')
}

async function confirmChanges(){
  let coAuthorsId =[]
  coAuthors.value.forEach(n => (coAuthorsId.push(n.id)))
  toModify.coAuthors = coAuthorsId
  await patchArticle(props.article.id, toModify)
  toModify= Object.assign({}, {});
  emit('modal-close')
  emit("modified")
}

async function deleteThisArticle(){
  await deleteArticle(props.article.id)
  emit('modal-close')
  emit("modified")
}
function downloadPdf(){
  return (restURL + "/" + props.article.pdfLocation)
}

function downloadBibTex(){
  return (restURL + "/" + props.article.bibTexLocation)
}

async function articleClicked(){
  await addView(props.article.pdfLocation)
  emit('modal-close')
  emit('modified')
}

</script>

<template>
  <div v-if="isOpen" class="modal-mask">
    <div class="modal-wrapper">
      <div class="modal-container" ref="target">
        <div><ul>
          <li>{{i18n("Article.Id")}} : {{article.id}}</li>
          <li>{{i18n("Title")}} : {{article.title}}</li>
          <li>{{i18n("Author")}} : {{article.researcher.user.lastName + " " + article.researcher.user.firstName}}</li>
          <li>{{i18n("CoAuthors")}} : <ul id="coAuthors" v-for="n in article.coAuthors"> <li id="coAuthorsLi">  {{n.user.firstName}} {{n.user.lastName}}, </li></ul></li>
          <li>{{i18n("Summary")}} : {{article.summary}}</li>
          <li>{{i18n("ReleaseDate")}} : {{format(article.releaseDate)}}</li>
          <li>{{i18n("Language")}} : {{article.language}}</li>
          <li>{{i18n("PaperType")}} : {{article.paperType}}</li>
          <li>{{i18n("Domain")}} : {{article.domain}}</li>
          <li>{{i18n("Views")}} : {{article.views}}</li>
          <li>{{i18n("Access")}} : {{i18n("Access."+article.access)}}</li>
        </ul>
          <div id="downloads" v-if="article.pdfLocation !== null && !manage">
            <a :href=downloadPdf() @click.stop="articleClicked" target="_blank">{{i18n("See.Research")}}</a>
            <a v-if="article.bibTexLocation !== null" :href=downloadBibTex() @click.stop="emit('modal-close')"  target="_blank">{{i18n("SeeBibTex")}}</a> </div>
        </div>
        <div v-if="manage" id="manage">
          <div>
            <ul>
              <li>{{i18n("Title")}} : <input v-model="toModify.title"></li>
              <li>{{i18n("Language")}} : <input v-model="toModify.language"></li>
              <li>{{i18n("Summary")}} : <input v-model="toModify.summary"></li>
              <li>{{i18n("Domain")}} : <input v-model="toModify.domain"></li>
              <li>{{i18n("Access")}} :
                <select id="classed-select" v-model="toModify.access">
                  <option value="OpenSource">{{i18n("Access.OpenSource")}}</option>
                  <option value="Restricted">{{i18n("Access.Restricted")}}</option>
                  <option value="Private">{{i18n("Access.Private")}}</option>
                </select></li>
            </ul>
          </div>
          <div> {{i18n("CoAuthors.List")}} :
            <ul id="coAuthorListUl" style="list-style-type: none;" v-for="n in props.allResearcher">
              <li v-if="n.id !== props.article.researcher.id"> <input type="checkbox" :value=n v-model="coAuthors"> {{n.id}} : {{n.user.firstName}} {{n.user.lastName}}</li>
            </ul>

          </div>
          <div>
          <button id="confirmButton" @click="confirmChanges"> {{i18n("Confirm.Changes")}}</button>
          <button id="cancelButton" @click="cancelChanges">{{i18n("Cancel.Changes")}}</button>
          </div>
          <div style="text-align: end">
            <button id="deleteButton" @click="deleteThisArticle">{{i18n("Delete.Research")}} </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  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;
}
#manage{
  display: grid;
  grid-template-columns: auto auto;
}

#coAuthors{
  list-style: none;
  display: inline;
  padding: 0;
}
#coAuthorsLi{
  display: inline;
  margin-right: 2px;
}

#downloads {
  text-align: end;
}

#coAuthorListUl{
  overflow: scroll;
}

#downloads a {
  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;
  text-underline-mode: none;
  text-decoration: none;
}
#downloads button:hover{
  background: rgba(191, 64, 191);
}

#deleteButton{
  align-self: end;
  text-align: end;
  border: 2px solid black;
  color: white;
  font-size: x-large;
  border-radius: 20px;
  background-color: red;
}

#deleteButton:hover{
  background: #ff2d55;
}

#cancelButton{
  align-self: center;
  text-align: center;
  border: 2px solid black;
  color: white;
  font-size: x-large;
  background-color:rgba(191, 64, 191,0.5);
  border-radius: 20px;
}
#cancelButton:hover{
  background:rgba(191,64,191)
}

#confirmButton{
  align-self: center;
  text-align: center;
  border: 2px solid black;
  color: white;
  font-size: x-large;
  background-color: #07bc0c;
  border-radius: 20px;
}
#confirmButton:hover{
  background: #4cd964;
}
</style>