Amp 3219 formdata

package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@vue/cli": "^5.0.8",
     "@vuejs-community/vue-filter-date-format": "^1.6.3",
-    "axios": "^1.6.8",
+    "axios": "^1.7.2",
     "bootstrap": "^5.3.3",
     "bootstrap-vue": "^2.23.1",
     "chart.js": "^4.4.2",

src/components/account/Login.vue

@@ -93,7 +93,6 @@ export default {
         pswd_error: "",
         other_errors: [],
       },
-      formData: new FormData(),
       email: null,
       pswd: null,
       auth_status: false,

src/components/dashboard/Dashboard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="collections w-100">
+  <div class="collections w-100 px-0">
     <div
       class="container-fluid"
       :class="{
@@ -21,15 +21,15 @@
                   'mb-0': parent === 'NewTest' || parent === 'TestResults',
                 }"
               >
-                <div class="card-body">
+                <div class="card-body px-2">
                   <h1
                     v-if="parent !== 'NewTest' && parent !== 'TestResults'"
                     class="card-title pb-3"
                   >
                     AMP Dashboard
                   </h1>
                   <div v-if="filterCount > 0">
-                    <div class="col d-flex flex-wrap">
+                    <div class="col d-flex flex-wrap px-0">
                       <div class="col-sm-2 label-bold">
                         CURRENTLY FILTERED BY
                       </div>
@@ -540,7 +540,7 @@
                     </div>
                   </div>
 
-                  <div class="col d-flex flex-wrap filter-btns">
+                  <div class="col d-flex flex-wrap filter-btns px-0">
                     <DateFilter
                       :parent="parent"
                       v-if="parent === 'TestResults'"
@@ -615,38 +615,34 @@
                       @click="onOpenModal('status')"
                       >Status</b-button
                     >
-                  </div>   
-                  <div class="col d-flex flex-wrap py-2">
                     <search-filter
                       v-if="parent !== 'Deliverables'"
                       :parent="parent"
-                      class="col-xl-3 col-md-3 col-sm-12 col-xs-12 px-2 my-0"
-                    />                        
-                    <span
+                      class="px-2 my-1"
+                    />                 
+                    <span 
                       v-if="parent !== 'NewTest' && parent !== 'TestResults'"
-                      class="relevant-togggle"
-                      >
-                      <span class="txt-v pr-2"
-                        >Show Relevant Results Only</span
-                      >
+                      class="px-2 my-2"
+                    >
+                      <span class="txt-v px-1 py-2">
+                        Show Relevant Results Only
+                      </span>
                       <label class="switch my-0" title="Relevant Result">
                         <span class="sr-only">Relevant Result</span>
                         <input
                           type="checkbox"
-                          v-model="
-                            workflowDashboard.searchQuery.filterByRelevant
-                          "
+                          v-model="workflowDashboard.searchQuery.filterByRelevant"
                         />
                         <span class="slider round"></span>
                       </label>
                     </span>
-                    <div
+                    <span
                       v-if="
                         parent !== 'NewTest' &&
                           parent !== 'TestResults' &&
                           parent !== 'Deliverables'
                         "
-                        class="export-row ml-auto px-2"
+                        class="ml-auto px-2 my-2"
                       >
                       <input
                         id="export-results"
@@ -655,7 +651,7 @@
                         v-on:click="exportResults"
                         value="Export to CSV"
                       />
-                    </div>
+                    </span>
                   </div>                        
 
                   <DashboardTable
@@ -669,7 +665,7 @@
                       <div
                         v-if="parent !== 'NewTest' && parent !== 'Deliverables'"
                         id="btn-show-hide"
-                        class="dropdown mt-2"
+                        class="dropdown mb-2"
                       >
                         <b-dropdown id="dropdown-form">
                             <template #button-content>
@@ -1321,10 +1317,6 @@ export default {
   border-color: #17a2b8 !important;
 }
 
-.relevant-togggle {
-  margin-right: 0;
-}
-
 .filter-gap {
   height: 18px !important;
 }

src/components/dashboard/DashboardFilters/SearchFilter.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="myTable_filter" class="dataTables_filter">
-      <form
+  <span id="myTable_filter" class="dataTables_filter">
+    <form
       @submit="
         $event.preventDefault();
         onSearchChange();
@@ -13,7 +13,7 @@
         class="form-control customSearchWidth"
       />
     </form>
-  </div>
+  </span>
 </template>
 
 <script>
@@ -99,12 +99,6 @@ export default {
 #search-input {
   display: inline;
 }
-.spacer {
-  height: 24px;
-}
-.submitter {
-  margin: 0.2rem;
-}
 .bootstrap-typeahead {
   height: calc(2.25rem + 1px);
   padding: 0rem 0rem;

src/components/dashboard/DashboardTable.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dataTables_wrapper no-footer">
     <loader :show="workflowDashboard.loading" />
-    <div v-if="parent !== 'Deliverables'" class="col d-flex flex-wrap justify-content-between">
+    <div v-if="parent !== 'Deliverables'" class="col d-flex flex-wrap px-0 justify-content-between">
       <div
         class="
           col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12
@@ -272,7 +272,7 @@
       </table>
     </div>     
 
-    <div v-if="parent !== 'Deliverables'" class="col d-flex flex-wrap">
+    <div v-if="parent !== 'Deliverables'" class="col d-flex flex-wrap justify-content-between">
       <label>{{ totalText }}</label>
       <b-pagination
         class="col-xl-6 col-lg-6 col-md-6 col-sm-12 w-100"
@@ -669,10 +669,6 @@ th {
   width: 200px;
   margin: 10px 0 10px 15px;
 }
-.export-row {
-  display: flex;
-  justify-content: flex-end;
-}
 .btn-blue:hover,
 .btn-blue:active,
 .btn-blue:visited {

src/components/evaluation/MGMevaluation.vue

@@ -6,7 +6,7 @@
         <div class="container-fluid p-0">
           <div class="row expand-h">
             <div class="col-12 p-0">
-              <main>
+              <main class="m-2">
                 <h1>MGM Evaluation</h1>
                 <b-overlay v-if="mgmCategoryId" rounded="sm" class="mt-4">
                   <div>
@@ -92,15 +92,18 @@
                       </b-navbar>
 
                       <dl
-                        class="d-flex col-12 mt-3 mb-0 pr-0"
+                        class="d-flex col-12 mt-3 mb-0 p-0"
                         v-if="selectedTab === 0"
                       >
                         <TestResults
                           :mgmCategory="mgmCategoryDetails"
                           :mgmCategoryId="mgmCategoryId"
                         />
                       </dl>
-                      <dl class="d-flex col-12 mt-3 mb-0 pr-0" v-else>
+                      <dl 
+                        class="d-flex col-12 mt-3 mb-0 pr-0" 
+                        v-else
+                      >
                         <div class="w-100 row div-test">
                           <NewTest
                             :mgmCategory="mgmCategoryDetails"

src/components/supplement/SupplementFile.vue

@@ -450,6 +450,7 @@ export default {
     filesChange(e) {
       const self = this;
       self.supplement["files"] = e.target.files || e.dataTransfer.files;
+      console.log("SupplementFile.filesChange -----  files.length = " + self.supplement["files"].length);
       self.supplement[
         "allCategories"
       ] = this.configProperties.supplementCategories;
@@ -458,10 +459,9 @@ export default {
       );
       const uploadDetailsBody = document.getElementById("upload-details-body");
       uploadDetailsBody.style.display = "block";
-
       self.supplement.fileDetails.file = self.supplement.files[0];
-      self.supplement.fileDetails.originalFilename =
-        self.supplement.files[0].name;
+      self.supplement.fileDetails.originalFilename = self.supplement.files[0].name;
+      console.log("SupplementFile.filesChange -----  file.size = " + self.supplement.fileDetails.file.size);
     },
 
     async onInputChange(type, directCall = false) {

src/helpers/request-options.js

@@ -11,10 +11,10 @@ export const requestOptions = {
             ...tokenHeaders(editorInput)
         };
     },
-    post() {
+    post(formData = false) {
         return {
             method: 'POST',
-            ...headers()
+            ...headers(formData)
         };
     },
     postToken(editorInput) {
@@ -44,16 +44,18 @@ export const requestOptions = {
     }
 }
 
-function headers() {
+function headers(formData = false) {
     const currentUser = accountService.currentUserValue || {};
-    const authHeader = currentUser && currentUser.token ? { 'Authorization': 'Bearer ' + currentUser.token  } : {}
+    const authHeader = currentUser && currentUser.token ? { 'Authorization': 'Bearer ' + currentUser.token  } : {};
+    const ctHeader = formData ? 'multipart/form-data' : 'application/json';
     return {
         headers: {
             ...authHeader,
-            'Content-Type': 'application/json'
+            'Content-Type': ctHeader    // not necessary, but keep it for now
         }
-    };
+    };    
 }
+
 function tokenHeaders(editorInput) {
     const authString = localStorage.getItem(editorInput);
     console.log("Auth String: " + authString);
@@ -62,7 +64,7 @@ function tokenHeaders(editorInput) {
         return {
             headers: {
                 ...authHeader,
-                'Content-Type': 'application/json'
+                'Content-Type': 'application/json'    // not necessary, but keep it for now
             }
         };
     }

src/service/base-service.js

@@ -44,8 +44,10 @@ export default class BaseService{
     }
 
     post_auth(url, body){
-        console.log("BaseService: sending post to " + this.API_URL + url);
-        return this.axiosInstance.post(this.API_URL + url, body, requestOptions.post());
+        let isForm = body instanceof FormData;
+        let isFormStr = isForm ? " for multi-part-form data" : "";
+        console.log("BaseService: sending post" + isFormStr + " to " + this.API_URL + url);
+        return this.axiosInstance.post(this.API_URL + url, body, requestOptions.post(isForm));
     }
 
     post_token_auth(url, body, input_dataset){