added patch coAuthors

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;
 }