refactor attaching file to request

frontend/src/pages/user/workspace/requestIssue/Issue.vue

@@ -1,46 +1,24 @@
 <template>
   <div class="request-issue-container offcanvas-parent">
-    <div
+    <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-copy-existing"
-      class="offcanvas offcanvas-end offcanvas-container"
+      aria-labelledby="offcanvas-copy-existing">
-      tabindex="-1"
-      id="offcanvas-copy-existing"
-      aria-labelledby="offcanvas-copy-existing"
-    >
       <div class="offcanvas-header">
         <h5 class="offcanvas-title" id="offcanvas-copy-existing">Copy from existing request</h5>
-        <button
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-          type="button"
-          class="btn-close"
-          data-bs-dismiss="offcanvas"
-          aria-label="Close"
-        ></button>
       </div>
       <div class="offcanvas-body">
         <div class="accordion" id="existing-request-item-container">
-          <div
+          <div v-for="(existingRequest, index) in existingRequests" :key="index" :id="'existing-request' + index"
-            v-for="(existingRequest, index) in existingRequests"
+            class="accordion-item">
-            :key="index"
-            :id="'existing-request' + index"
-            class="accordion-item"
-          >
             <h2 class="accordion-header" :id="'existing-heading' + index">
-              <button
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                class="accordion-button collapsed"
+                :data-bs-target="'#' + 'existing-request-collapse' + index" aria-expanded="false"
-                type="button"
+                :aria-controls="'collapse' + index">
-                data-bs-toggle="collapse"
-                :data-bs-target="'#' + 'existing-request-collapse' + index"
-                aria-expanded="false"
-                :aria-controls="'collapse' + index"
-              >
                 {{ existingRequest.title }}
               </button>
             </h2>
-            <div
+            <div :id="'existing-request-collapse' + index" class="accordion-collapse collapse"
-              :id="'existing-request-collapse' + index"
+              :aria-labelledby="'existing-heading' + index" data-bs-parent="#existing-request-item-container">
-              class="accordion-collapse collapse"
-              :aria-labelledby="'existing-heading' + index"
-              data-bs-parent="#existing-request-item-container"
-            >
               <div class="accordion-body">
                 <button class="copy-existing-button" @click="copyRequest(existingRequest)">
                   Copy
@@ -52,47 +30,24 @@
         </div>
       </div>
     </div>
-    <div
+    <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-template"
-      class="offcanvas offcanvas-end offcanvas-container"
+      aria-labelledby="offcanvas-template">
-      tabindex="-1"
-      id="offcanvas-template"
-      aria-labelledby="offcanvas-template"
-    >
       <div class="offcanvas-header">
         <h5 class="offcanvas-title" id="offcanvas-template">Apply request template</h5>
-        <button
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-          type="button"
-          class="btn-close"
-          data-bs-dismiss="offcanvas"
-          aria-label="Close"
-        ></button>
       </div>
       <div class="offcanvas-body">
         <div class="accordion" id="template-item-container">
-          <div
+          <div v-for="(template, index) in availableTemplates" :key="index" :id="'template' + index"
-            v-for="(template, index) in availableTemplates"
+            class="accordion-item">
-            :key="index"
-            :id="'template' + index"
-            class="accordion-item"
-          >
             <h2 class="accordion-header" :id="'heading' + index">
-              <button
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                class="accordion-button collapsed"
+                :data-bs-target="'#' + 'collapse' + index" aria-expanded="false" :aria-controls="'collapse' + index">
-                type="button"
-                data-bs-toggle="collapse"
-                :data-bs-target="'#' + 'collapse' + index"
-                aria-expanded="false"
-                :aria-controls="'collapse' + index"
-              >
                 {{ template.title }}
               </button>
             </h2>
-            <div
+            <div :id="'collapse' + index" class="accordion-collapse collapse" :aria-labelledby="'heading' + index"
-              :id="'collapse' + index"
+              data-bs-parent="#template-item-container">
-              class="accordion-collapse collapse"
-              :aria-labelledby="'heading' + index"
-              data-bs-parent="#template-item-container"
-            >
               <div class="accordion-body">
                 <button class="select-template-button" @click="selectTemplate(template)">
                   Apply
@@ -113,30 +68,15 @@
             {{ product.name }}
           </option>
         </select>
-        <input
+        <input v-if="selectedProduct === 'new'" type="text" class="product-input-box" v-model="newProduct"
-          v-if="selectedProduct === 'new'"
+          placeholder="Enter new product name" />
-          type="text"
-          class="product-input-box"
-          v-model="newProduct"
-          placeholder="Enter new product name"
-        />
       </div>
-      <button
+      <button class="action-button" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-template"
-        class="action-button"
+        aria-controls="offcanvas-template">
-        type="button"
-        data-bs-toggle="offcanvas"
-        data-bs-target="#offcanvas-template"
-        aria-controls="offcanvas-template"
-      >
         Templates...
       </button>
-      <button
+      <button class="action-button" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-copy-existing"
-        class="action-button"
+        aria-controls="offcanvas-copy-existing">
-        type="button"
-        data-bs-toggle="offcanvas"
-        data-bs-target="#offcanvas-copy-existing"
-        aria-controls="offcanvas-copy-existing"
-      >
         Copy...
       </button>
     </div>
@@ -167,8 +107,7 @@
 import {
   WorksapceApi,
   textAreaAujuster,
-  requestIssueUtils,
+  requestIssueUtils
-  DocumentApi
 } from '../../../../utils/index'
 import { requestIssuingModelEnum } from '../../../../types/index'
 import VueQuill from '@/components/VueQuill.vue'
@@ -282,6 +221,16 @@ export default {
     back() {
       this.mnx_goBack()
     },
+    attachFile() {
+      if (this.uploadFile) {
+        WorksapceApi.attachFileToRequest(this.uploadFile)
+          .then((response) => {
+            this.mnx_navToRequestSubmitted(this.request_id)
+          }).catch((error) => {
+            this.mnx_backendErrorHandler(error)
+          })
+      }
+    },
     submit() {
       var product = this.selectedProduct
       if (this.selectedProduct === 'new') {
@@ -293,33 +242,25 @@ export default {
         return
       }
 
+      //TODO: need to move to validator module
       if (!/^[a-zA-Z0-9-]+$/.test(product)) {
         alert('Product name should only contain letters, numbers, or dashes')
         return
       }
 
+      WorksapceApi.postRequest(this.content, product)
+        .then((response) => {
+          this.request_id = response.data.request_id
           if (this.uploadFile) {
-        DocumentApi.upload(this.uploadFile)
+            this.attachFile()
-          .then((response) => {
-            return WorksapceApi.postRequest(this.content, product, response.data.document_id)
-          })
-          .then((response) => {
-            this.request_id = response.data.request_id
-            this.mnx_navToRequestSubmitted(this.request_id)
-          })
-          .catch((error) => {
-            this.mnx_backendErrorHandler(error)
-          })
-      } else {
-        WorksapceApi.postRequest(this.content, product, null)
-          .then((response) => {
-            this.request_id = response.data.request_id
-            this.mnx_navToRequestSubmitted(this.request_id)
-          })
-          .catch((error) => {
-            this.mnx_backendErrorHandler(error)
-          })
           }
+          else {
+            this.mnx_navToRequestSubmitted(this.request_id)
+          }
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
     }
   }
 }

frontend/src/utils/backend/document.js

@@ -1,31 +0,0 @@
-import { backendAxios } from './axios'
-import { userUtils } from '../store/index'
-
-class DocumentApi {
-  static upload(file) {
-    let jwt = userUtils.getJwtToken()
-    const formData = new FormData()
-    formData.append('file', file)
-
-    const request = backendAxios.post('/api/document/upload', formData, {
-      headers: {
-        'Content-Type': 'multipart/form-data',
-        Authorization: `Bearer ${jwt}`
-      }
-    })
-    return request
-  }
-
-  static download(document_id) {
-    let jwt = userUtils.getJwtToken()
-    const request = backendAxios.get(`/api/document/download/${document_id}`, {
-      headers: {
-        Authorization: `Bearer ${jwt}`
-      },
-      responseType: 'blob'
-    })
-    return request
-  }
-}
-
-export { DocumentApi }

frontend/src/utils/backend/index.js

@@ -4,6 +4,5 @@ export { WorksapceApi } from './workspace'
 export { RequestHubApi } from './requestHub'
 export { ProviderHubApi } from './providerHub'
 export { MessageHubApi } from './messageHub'
-export { DocumentApi } from './document'
 export { HistoryApi } from './history'
 export { ContentApi } from './content'

frontend/src/utils/backend/workspace.js

@@ -153,41 +153,19 @@ class WorksapceApi {
     return request
   }
 
-  static postRequest(content, product, document_id) {
+  static postRequest(content, product) {
     let jwt = userUtils.getJwtToken()
     const requestData = {
       content: content,
       product: product
     }
 
-    if (document_id) {
-      requestData.document_id = document_id
-    }
-
     const request = backendAxios.post('/api/workspace/request/post-request', requestData, {
       headers: { Authorization: `Bearer ${jwt}` }
     })
     return request
   }
 
-  static postRequestWithFile(content, product, file) {
-    let jwt = userUtils.getJwtToken()
-    const formData = new FormData()
-    formData.append('content', content)
-    formData.append('product', product)
-    if (file) {
-      formData.append('file', file)
-    }
-
-    const request = backendAxios.post('/api/workspace/request/post-request', formData, {
-      headers: {
-        'Content-Type': 'multipart/form-data',
-        Authorization: `Bearer ${jwt}`
-      }
-    })
-    return request
-  }
-
   static withdrawRequest(id) {
     let jwt = userUtils.getJwtToken()
     const request = backendAxios.post(
@@ -327,6 +305,25 @@ class WorksapceApi {
     )
     return request
   }
+  static attachFileToRequest(request_id, file) {
+    let jwt = userUtils.getJwtToken()
+    const formData = new FormData()
+    formData.append('file', file)
+
+    const request = backendAxios.post(
+      '/api/document/upload',
+      {
+        request_id: request_id
+      },
+      formData,
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          Authorization: `Bearer ${jwt}`
+        }
+      })
+    return request
+  }
 }
 
 export { WorksapceApi }

frontend/src/utils/index.js

@@ -5,7 +5,6 @@ export {
   RequestHubApi,
   ProviderHubApi,
   MessageHubApi,
-  DocumentApi,
   HistoryApi,
   ContentApi
 } from './backend/index'