From a79f23fed0dfe0a755cf4762bd29514a51183424 Mon Sep 17 00:00:00 2001
From: Bartha Maxime <231026@umons.ac.be>
Date: Sun, 21 Apr 2024 15:10:17 +0200
Subject: [PATCH] added patch coAuthors

---
 .../ScientificPublications/ListResearches.vue |  5 +-
 .../ManageResearcherProfile.vue               |  6 +-
 .../ResearchComponent.vue                     | 57 +++++++++++++++----
 .../ResearchPostComponent.vue                 | 10 ++--
 4 files changed, 57 insertions(+), 21 deletions(-)

diff --git a/frontend/src/Apps/ScientificPublications/ListResearches.vue b/frontend/src/Apps/ScientificPublications/ListResearches.vue
index f35e349..d056f72 100644
--- a/frontend/src/Apps/ScientificPublications/ListResearches.vue
+++ b/frontend/src/Apps/ScientificPublications/ListResearches.vue
@@ -21,7 +21,8 @@ const researchList = ref(await fetchAllResearches())
 
 const props = defineProps({
   researchList:ref(),
-  manage:Boolean
+  manage:Boolean,
+  allResearcher:ref()
 });
 
 if (typeof props.researchList !== 'undefined'){
@@ -111,7 +112,7 @@ const emit = defineEmits(["modified"]);
 <template>
 <div id="researches">
   <FilterComponent :isOpen="isFilterOpened" :allArticles="researchList" @modal-close="closeFilter" @submit="submitFilters"></FilterComponent>
-  <ArticleComponent :article="articleToDisplay" :isOpen="isResearchOpened" :manage="props.manage" @modal-close="closeResearch" @modified="emit('modified')"></ArticleComponent>
+  <ArticleComponent :allResearcher="allResearcher" :article="articleToDisplay" :isOpen="isResearchOpened" :manage="props.manage" @modal-close="closeResearch" @modified="emit('modified')"></ArticleComponent>
   <div id="search">
     <input v-if="!isResearcher" type="text" id="search-input" :placeholder="i18n('Search.Researches')"  v-model="input"/>
     <input v-else type="text" id="search-input" :placeholder="i18n('Search.Researchers')" v-model="input"/>
diff --git a/frontend/src/Apps/ScientificPublications/ManageResearcherProfile.vue b/frontend/src/Apps/ScientificPublications/ManageResearcherProfile.vue
index 3aff271..e9ff8aa 100644
--- a/frontend/src/Apps/ScientificPublications/ManageResearcherProfile.vue
+++ b/frontend/src/Apps/ScientificPublications/ManageResearcherProfile.vue
@@ -11,6 +11,7 @@ import {getSelf, patchProfile} from "@/rest/ScientificPublications/ManageResearc
 import ResearchPostComponent from "@/Apps/ScientificPublications/ResearchPostComponent.vue";
 import ListResearches from "@/Apps/ScientificPublications/ListResearches.vue";
 import i18n from "../../i18n.js";
+import {fetchAllResearchers} from "@/rest/ScientificPublications/ManageResearch.js";
 const input = ref("");
 const isPostResearchOpened = ref(false);
 const changing = ref(false);
@@ -19,6 +20,7 @@ let toModify= Object.assign({}, {});
 
 const researcher = ref(await getSelf());
 const researchList = ref(await fetchResearches(researcher.value.id));
+const allResearcher = ref(await fetchAllResearchers())
 function openPostResearch(){
   isPostResearchOpened.value = true
 }
@@ -41,7 +43,7 @@ async function modifiedResearch(){
 </script>
 
 <template> <div class="body"><div id="main">
-    <ResearchPostComponent :researcher="researcher" :isOpen="isPostResearchOpened" @modal-close="isPostResearchOpened = false" @posted="modifiedResearch"></ResearchPostComponent>
+    <ResearchPostComponent :allResearcher="allResearcher" :researcher="researcher" :isOpen="isPostResearchOpened" @modal-close="isPostResearchOpened = false" @posted="modifiedResearch"></ResearchPostComponent>
     <div id="profilePicture">
       <img src="/Clyde.png" />
     </div>
@@ -74,7 +76,7 @@ async function modifiedResearch(){
 
 
     </div>
-    <div> <ListResearches :research-list="researchList" :manage="true" @modified="modifiedResearch"></ListResearches> </div>
+    <div> <ListResearches :allResearcher="allResearcher" :research-list="researchList" :manage="true" @modified="modifiedResearch"></ListResearches> </div>
   </div>
 </div>
 </template>
diff --git a/frontend/src/Apps/ScientificPublications/ResearchComponent.vue b/frontend/src/Apps/ScientificPublications/ResearchComponent.vue
index 7a73368..bdec01f 100644
--- a/frontend/src/Apps/ScientificPublications/ResearchComponent.vue
+++ b/frontend/src/Apps/ScientificPublications/ResearchComponent.vue
@@ -6,19 +6,33 @@
 ----------------------------------------------------->
 
 <script setup xmlns="http://www.w3.org/1999/html">
-import {ref } from "vue";
+import {ref, watch} from "vue";
 import {onClickOutside} from '@vueuse/core'
-import {patchArticle, deleteArticle, addView} from "@/rest/ScientificPublications/ManageResearch.js";
+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]
@@ -30,7 +44,7 @@ function format(date){
 const emit = defineEmits(["modal-close","modified"]);
 
 const target = ref(null)
-onClickOutside(target, ()=>emit('modal-close'))
+onClickOutside(target, ()=>{emit('modal-close'); })
 
 let toModify= Object.assign({}, {});
 
@@ -40,6 +54,9 @@ function cancelChanges(){
 }
 
 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')
@@ -71,7 +88,7 @@ async function articleClicked(){
   <div v-if="isOpen" class="modal-mask">
     <div class="modal-wrapper">
       <div class="modal-container" ref="target">
-        <div ><ul>
+        <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>
@@ -88,7 +105,7 @@ async function articleClicked(){
             <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("See.BibTex")}}</a> </div>
         </div>
-        <div v-if="manage">
+        <div v-if="manage" id="manage">
           <div>
             <ul>
               <li>{{i18n("Title")}} : <input v-model="toModify.title"></li>
@@ -103,9 +120,19 @@ async function articleClicked(){
                 </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>
-          <button id="deleteButton" @click="deleteThisArticle">{{i18n("Delete.Research")}} </button>
+          </div>
+          <div style="text-align: end">
+            <button id="deleteButton" @click="deleteThisArticle">{{i18n("Delete.Research")}} </button>
+          </div>
         </div>
       </div>
     </div>
@@ -135,6 +162,10 @@ async function articleClicked(){
 .modal-container ul{
   margin-top: 9px;
 }
+#manage{
+  display: grid;
+  grid-template-columns: auto auto;
+}
 
 #coAuthors{
   list-style: none;
@@ -149,6 +180,11 @@ async function articleClicked(){
 #downloads {
   text-align: end;
 }
+
+#coAuthorListUl{
+  overflow: scroll;
+}
+
 #downloads a {
   align-self: center;
   margin-left: 2px;
@@ -165,12 +201,11 @@ async function articleClicked(){
 }
 
 #deleteButton{
-  margin-left: 80%;
-  align-self: center;
-  text-align: center;
+  align-self: end;
+  text-align: end;
   border: 2px solid black;
   color: white;
-  font-size: large;
+  font-size: x-large;
   border-radius: 20px;
   background-color: red;
 }
diff --git a/frontend/src/Apps/ScientificPublications/ResearchPostComponent.vue b/frontend/src/Apps/ScientificPublications/ResearchPostComponent.vue
index 717c8ec..d055f00 100644
--- a/frontend/src/Apps/ScientificPublications/ResearchPostComponent.vue
+++ b/frontend/src/Apps/ScientificPublications/ResearchPostComponent.vue
@@ -8,10 +8,8 @@
 
 import { ref } from "vue";
 import {onClickOutside} from '@vueuse/core'
-import {uploadFile, postResearch, fetchAllResearchers} from "@/rest/ScientificPublications/ManageResearch.js";
+import {uploadFile, postResearch} from "@/rest/ScientificPublications/ManageResearch.js";
 import i18n from "../../i18n.js";
-const allResearcher = ref(await fetchAllResearchers())
-
 const coAuthors = ref([])
 
 let toPost = Object.assign({}, {coAuthors:[]});
@@ -19,7 +17,8 @@ let toPost = Object.assign({}, {coAuthors:[]});
 
 const props = defineProps({
   isOpen: Boolean,
-  researcher: ref(Object)
+  researcher: ref(Object),
+  allResearcher:ref()
 });
 
 
@@ -37,7 +36,6 @@ async function postNewResearch(){
   toPost.releaseDate = new Date()
   toPost.author = props.researcher
   toPost.coAuthors = coAuthors.value
-  console.log()
   //the Pdf and a title are required
   if (toPost.pdfLocation == null || toPost.title == null || toPost.title === "") {
     emit("modal-close")
@@ -96,7 +94,7 @@ onClickOutside(target, ()=>emit('modal-close'))
         </ul>
         </div>
         <div id="CoAuthorList"> {{i18n("CoAuthors.List")}} :
-        <ul style="list-style-type: none;" v-for="n in allResearcher">
+        <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>