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

<!----------------------------------------------------
	File:  ResearchPostComponent.vue
	Author: Maxime Bartha
	Scope: Extension Publicatons scientifiquess
	Description: pop up for posting a research
----------------------------------------------------->
<script setup>

import { ref } from "vue";
import {onClickOutside} from '@vueuse/core'
import {uploadFile, postResearch} from "@/rest/ScientificPublications/ManageResearch.js";
import i18n from "../../i18n.js";
const coAuthors = ref([])

let toPost = Object.assign({}, {coAuthors:[]});


const props = defineProps({
  isOpen: Boolean,
  researcher: ref(Object),
  allResearcher:ref()
});


async function uploadResearchPdf(pdf){
  const data = await uploadFile(pdf);
  toPost.pdfLocation = data.url;
}
async function uploadBibTex(pdf){
  const data = await uploadFile(pdf);
  toPost.bibTexLocation = data.url;
}


async function postNewResearch(){
  toPost.releaseDate = new Date()
  toPost.author = props.researcher
  toPost.coAuthors = coAuthors.value
  //the Pdf and a title are required
  if (toPost.pdfLocation == null || toPost.title == null || toPost.title === "") {
    emit("modal-close")
    return;
  }
  await postResearch(toPost)
  toPost = Object.assign({}, {});
  coAuthors.value = []
  emit("modal-close")
  emit("posted")
}

function cancelPost(){
  emit("modal-close")
  toPost = Object.assign({}, {});
}
const emit = defineEmits(["modal-close","posted"]);

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">
        <div ><ul>

          <li>{{i18n("Title")}} : <input v-model="toPost.title"></li>
          <li>{{i18n("Summary")}} : <input v-model="toPost.summary"></li>
          <li>{{i18n("Language")}} : <input v-model="toPost.language"></li>
          <li>{{i18n("Domain")}} : <input v-model="toPost.domain"></li>
          <li>{{i18n("PaperType")}} :  <select  id="classed-select" v-model="toPost.paperType">
            <option value="Article">{{i18n("PaperType.Article")}}</option>
            <option value="Book">{{i18n("PaperType.Book")}}</option>
            <option value="BookChapter">{{i18n("PaperType.Book.Chapter")}}</option>
            <option value="Paper">{{i18n("PaperType.Paper")}}Paper</option>
          </select></li>
          <li>{{i18n("Access")}} : <select  id="classed-select" v-model="toPost.access">
            <option value="OpenSource">{{i18n("Access.OpenSource")}}</option>
            <option value="Restricted">{{i18n("Access.Restricted")}}</option>
            <option value="Private">{{i18n("Access.Private")}}</option>
          </select></li>


          <li> {{i18n("Research.Pdf")}} :
            <form novalidate enctype="multipart/form-data" class="inputBox">
            <input type="file" @change="uploadResearchPdf($event.target.files);" accept="application/pdf">
          </form></li>
          <li> {{i18n("BibTex.Pdf")}}
          <form novalidate enctype="multipart/form-data" class="inputBox">
            <input type="file" @change="uploadBibTex($event.target.files);" accept=".bib">
          </form></li>
        </ul>
        </div>
        <div id="CoAuthorList"> {{i18n("CoAuthors.List")}} :
        <ul style="list-style-type: none;" v-for="n in props.allResearcher">
          <li v-if="n.id !== props.researcher.id"> <input type="checkbox" :value=n v-model="coAuthors"> {{n.id}} : {{n.user.firstName}} {{n.user.lastName}}</li>
        </ul>

      </div>
        <div></div>
        <div>
          <button id="confirmButton" @click="postNewResearch">{{i18n("Confirm.Publish")}}</button>
          <button id="cancelButton" @click="cancelPost">{{i18n("Cancel.Publish")}}</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 {
  display: grid;
  grid-template-columns: 40% 60%;
  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 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);
}


#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>