Manage ResearcherProfile

frontend/src/Apps/ScientificPublications/FilterComponent.vue

@@ -7,7 +7,6 @@
 <script setup>
 import { ref } from "vue";
 import {onClickOutside} from '@vueuse/core'
-import {w} from "../../../dist/assets/_plugin-vue_export-helper-Bvj9NrzX.js";
 let checked = ref([])
 const yearList = ref([])
 const monthList = ref([])

frontend/src/Apps/ScientificPublications/ManageResearcherProfile.vue

@@ -94,8 +94,8 @@ function confirmChanges(){
 
 <template> <div class="body"><div id="main">
     <FilterComponent :isOpen="isFilterOpened" :allArticles="researchList" @modal-close="closeFilter" @submit="submitFilters()"></FilterComponent>
-    <ArticleComponent :article="articleToDisplay" :isOpen="isResearchOpened" :manage=true @modal-close="closeResearch"></ArticleComponent>
+    <ArticleComponent :article="articleToDisplay" :isOpen="isResearchOpened" :manage="true" @modal-close="closeResearch"></ArticleComponent>
-    <ResearchPostComponent :researcher="researcher" :isOpen="isPostResearchOpened"></ResearchPostComponent>
+    <ResearchPostComponent :researcher="researcher" :isOpen="isPostResearchOpened" @modal-close="isPostResearchOpened = false"></ResearchPostComponent>
     <div id="profilePicture">
       <img src="/Clyde.png" />
     </div>
@@ -124,7 +124,7 @@ function confirmChanges(){
       </div>
     </div>
     <div class="postArticle" style="text-align: center">
-     <button class="modifyButton" @click="post">Post a Research</button>
+     <button class="modifyButton" @click="openPostResearch">Post a Research</button>
 
 
     </div>

frontend/src/Apps/ScientificPublications/ResearchComponent.vue

@@ -79,7 +79,7 @@ function deleteThisArticle(){
               <li>Summary : <input v-model="toModify.summary"></li>
               <li>Domain : <input v-model="toModify.domain"></li>
               <li>Access :
-                <select @change="update()" id="classed-select" v-model="toModify.access">
+                <select id="classed-select" v-model="toModify.access">
                   <option value="OpenSource">OpenSource</option>
                   <option value="Restricted">Restricted</option>
                   <option value="Private">Private</option>

frontend/src/Apps/ScientificPublications/ResearchPostComponent.vue

@@ -1,11 +1,174 @@
 <script setup>
 
+import { ref } from "vue";
+import {onClickOutside} from '@vueuse/core'
+import {uploadPdf, uploadBibTex,postResearch} from "@/rest/ScientificPublications/ManageResearch.js";
+import i18n from "@/i18n.js";
+let toPost = Object.assign({}, {});
+
+const props = defineProps({
+  isOpen: Boolean,
+  researcher: ref(Object)
+});
+
+
+async function uploadResearchPdf(pdf){
+  const data = await uploadPdf(pdf);
+  toPost.pdfLocation = data.url;
+}
+async function uploadResearchBibTexPdf(pdf){
+  const data = await uploadPdf(pdf);
+  toPost.pdfLocation = data.url;
+}
+
+// Date when sent!!
+
+function postNewResearch(){
+  toPost.releaseDate = new Date()
+  toPost.author = props.researcher
+  //the Pdf is required and a title
+  console.log(!toPost.pdfLocation == null|| toPost.title == null || toPost.title === "")
+  if (toPost.pdfLocation == null || toPost.title == null || toPost.title === "") {
+    emit("modal-close")
+    return;
+  }
+  postResearch(toPost)
+  toPost = Object.assign({}, {});
+  emit("modal-close")
+}
+
+function cancelPost(){
+  emit("modal-close")
+  toPost = Object.assign({}, {});
+}
+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">
+        <div ><ul>
+
+          <li>Title : <input v-model="toPost.title"></li>
+          <li>Summary : <input v-model="toPost.summary"></li>
+          <li>Language : <input v-model="toPost.language"></li>
+          <li>Domain : <input v-model="toPost.domain"></li>
+          <li>PaperType :  <select  id="classed-select" v-model="toPost.paperType">
+            <option value="Article">Article</option>
+            <option value="Book">Book</option>
+            <option value="BookChapter">Book Chapter</option>
+            <option value="Paper">Paper</option>
+          </select></li>
+          <li>Access : <select  id="classed-select" v-model="toPost.access">
+            <option value="OpenSource">OpenSource</option>
+            <option value="Restricted">Restricted</option>
+            <option value="Private">Private</option>
+          </select></li>
+          <li> Research Pdf :
+            <form novalidate enctype="multipart/form-data" class="inputBox">
+            <input type="file" @change="uploadResearchPdf($event.target.files);" accept="application/pdf">
+          </form></li>
+          <li> Research BibTex :
+          <form novalidate enctype="multipart/form-data" class="inputBox">
+            <input type="file" @change="uploadBibTex($event.target.files);" accept=".bib">
+          </form></li>
+        </ul>
+        </div>
+        <div>
+          <button id="confirmButton" @click="postNewResearch">Confirm Publish</button>
+          <button id="cancelButton" @click="cancelPost">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 {
+  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);
+}
+
+#deleteButton{
+  margin-left: 80%;
+  align-self: center;
+  text-align: center;
+  border: 2px solid black;
+  color: white;
+  font-size: 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>

frontend/src/Apps/ScientificPublications/ResearcherProfile.vue

@@ -131,7 +131,7 @@ function update(){
 <template>
   <div id="main">
     <FilterComponent :isOpen="isFilterOpened" :allArticles="researchList" @modal-close="closeFilter" @submit="submitFilters()"></FilterComponent>
-    <ArticleComponent :article="articleToDisplay" :isOpen="isResearchOpened" @modal-close="closeResearch" @downloadPdf="downloadArticle(articleToDisplay)" @downloadBibTex="downloadBibTex(articleToDisplay)"></ArticleComponent>
+    <ArticleComponent :article="articleToDisplay" :isOpen="isResearchOpened" :manage="false" @modal-close="closeResearch" @downloadPdf="downloadArticle(articleToDisplay)" @downloadBibTex="downloadBibTex(articleToDisplay)"></ArticleComponent>
     <div id="profilePicture">
       <img src="/Clyde.png" />
     </div>

frontend/src/rest/ScientificPublications/ManageResearch.js

@@ -1,4 +1,4 @@
-import { restGet, restPost, restDelete, restPatch } from '../restConsumer.js'
+import {restGet, restPost, restDelete, restPatch, restPostFile} from '../restConsumer.js'
 
 export async function deleteArticle(id){
     await restDelete("/research/" + id)
@@ -6,3 +6,19 @@ export async function deleteArticle(id){
 export async function patchArticle(id, data){
     await restPatch("/research/" + id, data)
 }
+export async function uploadPdf(file){
+    const formData = new FormData();
+    formData.append("file", file[0]);
+
+    return restPostFile("/upload/Research", formData);
+}
+export async function uploadBibTex(file){
+    const formData = new FormData();
+    formData.append("file", file[0]);
+
+    return restPostFile("/upload/Research", formData);
+}
+
+export async function postResearch(data){
+    return restPost("/research", data)
+}