patch Researcher Profile and researches

frontend/src/Apps/ScientificPublications/ResearchComponent.vue

@@ -5,13 +5,15 @@
 	Description: Pop Up summarizing
 ----------------------------------------------------->
 
-<script setup>
+<script setup xmlns="http://www.w3.org/1999/html">
 import {ref } from "vue";
 import {onClickOutside} from '@vueuse/core'
+import {patchArticle, deleteArticle} from "@/rest/ScientificPublications/ManageResearch.js";
 
 const props = defineProps({
   isOpen: Boolean,
-  article: ref(Object)
+  article: ref(Object),
+  manage:Boolean,
 });
 function format(date){
   let split = date.split("-")
@@ -21,33 +23,72 @@ function format(date){
   return day +"/"+ month +"/"+ year
 }
 
-
 const emit = defineEmits(["modal-close","downloadPdf","downloadBibTex"]);
 
 const target = ref(null)
 onClickOutside(target, ()=>emit('modal-close'))
 
+let toModify= Object.assign({}, {});
+
+function cancelChanges(){
+  toModify= Object.assign({}, {});
+  emit('modal-close')
+}
+function confirmChanges(){
+  patchArticle(props.article.id, toModify)
+  toModify= Object.assign({}, {});
+  emit('modal-close')
+}
+
+function deleteThisArticle(){
+  deleteArticle(props.article.id)
+  emit('modal-close')
+}
+
+
 </script>
 
 <template>
   <div v-if="isOpen" class="modal-mask">
     <div class="modal-wrapper">
       <div class="modal-container" ref="target">
-       <ul>
-         <li>Article Id : {{article.id}}</li>
-         <li>Title : {{article.title}}</li>
-         <li>Author : {{article.researcher.user.lastName + " " + article.researcher.user.firstName}}</li>
-         <li>Summary : {{article.summary}}</li>
-         <li>ReleaseDate: {{format(article.releaseDate)}}</li>
-         <li>Language : {{article.language}}</li>
-         <li>PaperType : {{article.paperType}}</li>
-         <li>Domain : {{article.domain}}</li>
-         <li>Views : {{article.views}}</li>
-         <li>Access : {{article.access}}</li>
-       </ul>
-        <div id="downloads" v-if="article.pdfLocation !== null">
-          <button @click.stop="emit('downloadBibTex')">Download BibTex</button>
-          <button @click.stop="emit('downloadPdf')">Download Research</button>
+        <div ><ul>
+
+          <li>Article Id : {{article.id}}</li>
+          <li>Title : {{article.title}}</li>
+          <li>Author : {{article.researcher.user.lastName + " " + article.researcher.user.firstName}}</li>
+          <li>Summary : {{article.summary}}</li>
+          <li>ReleaseDate: {{format(article.releaseDate)}}</li>
+          <li>Language : {{article.language}}</li>
+          <li>PaperType : {{article.paperType}}</li>
+          <li>Domain : {{article.domain}}</li>
+          <li>Views : {{article.views}}</li>
+          <li>Access : {{article.access}}</li>
+        </ul>
+          <div id="downloads" v-if="article.pdfLocation !== null">
+            <button @click.stop="emit('downloadBibTex')">Download BibTex</button>
+            <button @click.stop="emit('downloadPdf')">Download Research</button>
+          </div>
+
+        </div>
+        <div v-if="manage">
+          <div>
+            <ul>
+              <li>Title : <input v-model="toModify.title"></li>
+              <li>Language : <input v-model="toModify.language"></li>
+              <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">
+                  <option value="OpenSource">OpenSource</option>
+                  <option value="Restricted">Restricted</option>
+                  <option value="Private">Private</option>
+                </select></li>
+            </ul>
+          </div>
+          <button id="confirmButton" @click="confirmChanges">Confirm Changes</button>
+          <button id="cancelButton" @click="cancelChanges">Cancel Changes</button>
+          <button id="deleteButton" @click="deleteThisArticle">Delete Research </button>
         </div>
       </div>
     </div>
@@ -95,4 +136,44 @@ onClickOutside(target, ()=>emit('modal-close'))
   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>