From 235e8378b92e279e42063b91901cfa839f1592c9 Mon Sep 17 00:00:00 2001
From: Jet Li <jetli@freeleaps.com>
Date: Tue, 30 Jul 2024 22:15:52 -0700
Subject: [PATCH] Frontend code for letting supplier attach files when making
 proposal

---
 frontend/src/pages/user/requests/Propose.vue  | 199 +++++-------------
 .../user/workspace/requestIssue/Issue.vue     | 119 +++--------
 2 files changed, 80 insertions(+), 238 deletions(-)

diff --git a/frontend/src/pages/user/requests/Propose.vue b/frontend/src/pages/user/requests/Propose.vue
index 45728cd..4befa8b 100644
--- a/frontend/src/pages/user/requests/Propose.vue
+++ b/frontend/src/pages/user/requests/Propose.vue
@@ -1,106 +1,57 @@
 <template>
   <div class="making-proposal-container offcanvas-parent">
     <div class="making-proposal-content">
-      <div
-        class="offcanvas offcanvas-end offcanvas-container"
-        tabindex="-1"
-        id="offcanvas-copy-existing"
-        aria-labelledby="offcanvas-copy-existing"
-      >
+      <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-copy-existing"
+        aria-labelledby="offcanvas-copy-existing">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvas-copy-existing">
             {{ $t('Copy from existing proposals') }}
           </h5>
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="offcanvas"
-            aria-label="Close"
-          ></button>
+          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
         </div>
         <div class="offcanvas-body">
           <div class="accordion" id="existing-proposal-item-container">
-            <div
-              v-for="(existingProposal, index) in existingProposals"
-              :key="index"
-              :id="'existing-proposal' + index"
-              class="accordion-item"
-            >
+            <div v-for="(existingProposal, index) in existingProposals" :key="index" :id="'existing-proposal' + index"
+              class="accordion-item">
               <h2 class="accordion-header" :id="'existing-heading' + index">
-                <button
-                  class="accordion-button collapsed"
-                  type="button"
-                  data-bs-toggle="collapse"
-                  :data-bs-target="'#' + 'existing-proposal-collapse' + index"
-                  aria-expanded="false"
-                  :aria-controls="'collapse' + index"
-                >
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                  :data-bs-target="'#' + 'existing-proposal-collapse' + index" aria-expanded="false"
+                  :aria-controls="'collapse' + index">
                   <span class="dashed-container">{{ existingProposal.request.title }}</span>
                 </button>
               </h2>
-              <div
-                :id="'existing-proposal-collapse' + index"
-                class="accordion-collapse collapse"
-                :aria-labelledby="'existing-heading' + index"
-                data-bs-parent="#existing-proposal-item-container"
-              >
+              <div :id="'existing-proposal-collapse' + index" class="accordion-collapse collapse"
+                :aria-labelledby="'existing-heading' + index" data-bs-parent="#existing-proposal-item-container">
                 <div class="accordion-body">
                   <button class="copy-existing-button" @click="copyProposal(existingProposal)">
                     {{ $t('Copy') }}
                   </button>
-                  <div
-                    class="existing-request-content-text"
-                    v-html="existingProposal.content"
-                  ></div>
+                  <div class="existing-request-content-text" v-html="existingProposal.content"></div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div
-        class="offcanvas offcanvas-end offcanvas-container"
-        tabindex="-1"
-        id="offcanvas-template"
-        aria-labelledby="offcanvas-template"
-      >
+      <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-template"
+        aria-labelledby="offcanvas-template">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvas-template">
             {{ $t('Apply proposal template') }}
           </h5>
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="offcanvas"
-            aria-label="Close"
-          ></button>
+          <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
-              v-for="(template, index) in templates"
-              :key="index"
-              :id="'template' + index"
-              class="accordion-item"
-            >
+            <div v-for="(template, index) in templates" :key="index" :id="'template' + index" class="accordion-item">
               <h2 class="accordion-header" :id="'heading' + index">
-                <button
-                  class="accordion-button collapsed"
-                  type="button"
-                  data-bs-toggle="collapse"
-                  :data-bs-target="'#' + 'collapse' + index"
-                  aria-expanded="false"
-                  :aria-controls="'collapse' + index"
-                >
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                  :data-bs-target="'#' + 'collapse' + index" aria-expanded="false" :aria-controls="'collapse' + index">
                   <span class="dashed-container">{{ template.title }}</span>
                 </button>
               </h2>
-              <div
-                :id="'collapse' + index"
-                class="accordion-collapse collapse"
-                :aria-labelledby="'heading' + index"
-                data-bs-parent="#template-item-container"
-              >
+              <div :id="'collapse' + index" class="accordion-collapse collapse" :aria-labelledby="'heading' + index"
+                data-bs-parent="#template-item-container">
                 <div class="accordion-body">
                   <button class="load-template-button" @click="applyTemplate(template)">
                     {{ $t('Apply') }}
@@ -116,22 +67,14 @@
         <div class="accordion accordion-list" id="accordion-request-container">
           <div class="accordion-item">
             <h2 class="accordion-header">
-              <button
-                class="accordion-button"
-                type="button"
-                data-bs-toggle="collapse"
-                data-bs-target="#collapse-request-content"
-                aria-expanded="false"
-                aria-controls="collapse-request-content"
-              >
+              <button class="accordion-button" type="button" data-bs-toggle="collapse"
+                data-bs-target="#collapse-request-content" aria-expanded="false"
+                aria-controls="collapse-request-content">
                 <span class="dashed-container">{{ request.title }}</span>
               </button>
             </h2>
-            <div
-              id="collapse-request-content"
-              class="accordion-collapse collapse"
-              data-bs-parent="#accordion-request-container"
-            >
+            <div id="collapse-request-content" class="accordion-collapse collapse"
+              data-bs-parent="#accordion-request-container">
               <div class="accordion-body">
                 <div class="request-content" v-html="request.content"></div>
               </div>
@@ -143,23 +86,13 @@
         <div class="proposal-header-container">
           <label class="proposal-label">{{ $t('Proposal') }}:</label>
           <div class="header-bar">
-            <button
-              class="btn btn-link"
-              type="button"
-              data-bs-toggle="offcanvas"
-              data-bs-target="#offcanvas-template"
-              aria-controls="offcanvas-template"
-            >
+            <button class="btn btn-link" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-template"
+              aria-controls="offcanvas-template">
               <svg-icon icon="btn-templates" />
               {{ $t('Templates') }}
             </button>
-            <button
-              class="btn btn-link"
-              type="button"
-              data-bs-toggle="offcanvas"
-              data-bs-target="#offcanvas-copy-existing"
-              aria-controls="offcanvas-copy-existing"
-            >
+            <button class="btn btn-link" type="button" data-bs-toggle="offcanvas"
+              data-bs-target="#offcanvas-copy-existing" aria-controls="offcanvas-copy-existing">
               <svg-icon icon="btn-history" />
               {{ $t('Copy') }}
             </button>
@@ -175,12 +108,8 @@
               <div class="form-group">
                 <div class="input-group-container">
                   <div class="form-floating">
-                    <input
-                      class="input-email"
-                      :id="`stage-payment-content-${index}`"
-                      type="number"
-                      v-model="stage.payment"
-                    />
+                    <input class="input-email" :id="`stage-payment-content-${index}`" type="number"
+                      v-model="stage.payment" />
                     <label :for="`stage-payment-content-${index}`">{{ $t('Payment') }}</label>
                   </div>
                   <span class="btn-start">{{ stage.currency }}</span>
@@ -191,12 +120,8 @@
               <div class="form-group">
                 <div class="input-group-container">
                   <div class="form-floating">
-                    <input
-                      class="input-email"
-                      :id="`stage-duration-content-${index}`"
-                      type="number"
-                      v-model="stage.duration_in_days"
-                    />
+                    <input class="input-email" :id="`stage-duration-content-${index}`" type="number"
+                      v-model="stage.duration_in_days" />
                     <label :for="`stage-duration-content-${index}`">{{ $t('Duration') }}</label>
                   </div>
                   <span class="btn-start">{{ $t('day(s)') }}</span>
@@ -207,12 +132,7 @@
               <div class="form-group">
                 <div class="input-group-container">
                   <div class="form-floating">
-                    <input
-                      class="input-email"
-                      :id="`stage-note-content-${index}`"
-                      type="text"
-                      v-model="stage.note"
-                    />
+                    <input class="input-email" :id="`stage-note-content-${index}`" type="text" v-model="stage.note" />
                     <label :for="`stage-note-content-${index}`">{{ $t('Notes') }}</label>
                   </div>
                 </div>
@@ -247,12 +167,7 @@
               <span v-if="uploadFile">{{ uploadFile.name }}</span>
               <input type="file" hidden @change="handleFileUpload" />
             </label>
-            <svg-icon
-              v-if="uploadFile"
-              icon="delete"
-              class-name="delete-icon"
-              @click.stop="clearFile"
-            />
+            <svg-icon v-if="uploadFile" icon="delete" class-name="delete-icon" @click.stop="clearFile" />
           </div>
           <!-- <label for="file-upload" class="file-upload-label">Upload File:</label>
           <input type="file" id="file-upload" class="file-upload-input" @change="handleFileUpload" /> -->
@@ -279,6 +194,7 @@ import {
 } from '@/types/index'
 import SvgIcon from '@/components/SvgIcon.vue'
 import FreeleapsEditor from '@/components/FreeleapsEditor.vue'
+import { WorksapceApi } from '../../../utils';
 export default {
   name: 'MakeProposal',
   components: { SvgIcon, FreeleapsEditor },
@@ -335,40 +251,33 @@ export default {
     coverLetterDone(event) {
       this.proposal.content = event.target.innerHTML
     },
-    submit() {
+    attachFile() {
       if (this.uploadFile) {
-        DocumentApi.upload(this.uploadFile)
+        WorksapceApi.attachFileToRequest(this.requestId, this.uploadFile)
           .then((response) => {
-            return RequestHubApi.makeProposalForRequest(
-              this.requestId,
-              this.proposal.content,
-              this.proposal.stages,
-              response.data.document_id
-            )
-          })
-          .then((response) => {
-            this.proposal_id = response.data.proposal_id
-            this.mnx_navToRequestSubmitted(this.proposal_id)
-          })
-          .catch((error) => {
-            this.mnx_backendErrorHandler(error)
-          })
-      } else {
-        RequestHubApi.makeProposalForRequest(
-          this.requestId,
-          this.proposal.content,
-          this.proposal.stages,
-          null
-        )
-          .then((response) => {
-            let proposal_id = response.data
-            this.mnx_navToProposalSubmitted(proposal_id)
+            this.mnx_navToProposalSubmitted(this.requestId)
           })
           .catch((error) => {
             this.mnx_backendErrorHandler(error)
           })
       }
     },
+    submit() {
+      RequestHubApi.makeProposalForRequest(
+        this.requestId,
+        this.proposal.content,
+        this.proposal.stages,
+        null
+      ).then((response) => {
+        if (this.uploadFile) {
+          this.attachFile()
+        } else {
+          this.mnx_navToRequestSubmitted(this.requestId)
+        }
+      }).catch((error) => {
+        this.mnx_backendErrorHandler(error)
+      })
+    },
     loadFrom() {
       switch (Number.parseInt(this.loadingMode, 10)) {
         case proposingModelEnum.NO_LOADING: {
diff --git a/frontend/src/pages/user/workspace/requestIssue/Issue.vue b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
index 8481899..de42e51 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
@@ -1,48 +1,26 @@
 <template>
   <div class="request-issue-container offcanvas-parent">
-    <div
-      class="offcanvas offcanvas-end offcanvas-container"
-      tabindex="-1"
-      id="offcanvas-copy-existing"
-      aria-labelledby="offcanvas-copy-existing"
-    >
+    <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-copy-existing"
+      aria-labelledby="offcanvas-copy-existing">
       <div class="offcanvas-header">
         <h5 class="offcanvas-title" id="offcanvas-copy-existing">
           {{ $t('Copy from existing request') }}
         </h5>
-        <button
-          type="button"
-          class="btn-close"
-          data-bs-dismiss="offcanvas"
-          aria-label="Close"
-        ></button>
+        <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
-            v-for="(existingRequest, index) in existingRequests"
-            :key="index"
-            :id="'existing-request' + index"
-            class="accordion-item"
-          >
+          <div v-for="(existingRequest, index) in existingRequests" :key="index" :id="'existing-request' + index"
+            class="accordion-item">
             <h2 class="accordion-header" :id="'existing-heading' + index">
-              <button
-                class="accordion-button collapsed"
-                type="button"
-                data-bs-toggle="collapse"
-                :data-bs-target="'#' + 'existing-request-collapse' + index"
-                aria-expanded="false"
-                :aria-controls="'collapse' + index"
-              >
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                :data-bs-target="'#' + 'existing-request-collapse' + index" aria-expanded="false"
+                :aria-controls="'collapse' + index">
                 <span class="dashed-container">{{ existingRequest.title }}</span>
               </button>
             </h2>
-            <div
-              :id="'existing-request-collapse' + index"
-              class="accordion-collapse collapse"
-              :aria-labelledby="'existing-heading' + index"
-              data-bs-parent="#existing-request-item-container"
-            >
+            <div :id="'existing-request-collapse' + index" class="accordion-collapse collapse"
+              :aria-labelledby="'existing-heading' + index" data-bs-parent="#existing-request-item-container">
               <div class="accordion-body">
                 <button class="btn btn-link" @click="copyRequest(existingRequest)">
                   {{ $t('Copy') }}
@@ -54,52 +32,26 @@
         </div>
       </div>
     </div>
-    <div
-      class="offcanvas offcanvas-end offcanvas-container"
-      tabindex="-1"
-      id="offcanvas-template"
-      aria-labelledby="offcanvas-template"
-    >
+    <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-template"
+      aria-labelledby="offcanvas-template">
       <div class="offcanvas-header">
         <h5 class="offcanvas-title" id="offcanvas-template">{{ $t('Apply request template') }}</h5>
-        <button
-          type="button"
-          class="btn-close"
-          data-bs-dismiss="offcanvas"
-          aria-label="Close"
-        ></button>
+        <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
-            v-for="(template, index) in availableTemplates"
-            :key="index"
-            :id="'template' + index"
-            class="accordion-item"
-          >
+          <div v-for="(template, index) in availableTemplates" :key="index" :id="'template' + index"
+            class="accordion-item">
             <h2 class="accordion-header" :id="'heading' + index">
-              <button
-                class="accordion-button collapsed"
-                type="button"
-                data-bs-toggle="collapse"
-                :data-bs-target="'#' + 'collapse' + index"
-                aria-expanded="false"
-                :aria-controls="'collapse' + index"
-              >
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                :data-bs-target="'#' + 'collapse' + index" aria-expanded="false" :aria-controls="'collapse' + index">
                 <span class="dashed-container">{{ template.title }}</span>
               </button>
             </h2>
-            <div
-              :id="'collapse' + index"
-              class="accordion-collapse collapse"
-              :aria-labelledby="'heading' + index"
-              data-bs-parent="#template-item-container"
-            >
+            <div :id="'collapse' + index" class="accordion-collapse collapse" :aria-labelledby="'heading' + index"
+              data-bs-parent="#template-item-container">
               <div class="accordion-body">
-                <button
-                  class="select-template-button btn btn-link"
-                  @click="selectTemplate(template)"
-                >
+                <button class="select-template-button btn btn-link" @click="selectTemplate(template)">
                   {{ $t('Apply') }}
                 </button>
                 <div class="template-content-textarea" v-html="template.content"></div>
@@ -110,42 +62,23 @@
       </div>
     </div>
     <div class="action-bar">
-      <input-selector
-        :select-list="products"
-        :selected="selectedProduct"
-        @selectedChange="selectedChange"
-      />
+      <input-selector :select-list="products" :selected="selectedProduct" @selectedChange="selectedChange" />
       <div class="upload-contianer">
         <label class="btn btn-link">
           <span v-if="!uploadFile">{{ $t('Upload file') }}</span>
           <span v-if="uploadFile">{{ uploadFile.name }}</span>
           <input type="file" hidden @change="handleFileUpload" />
         </label>
-        <svg-icon
-          v-if="uploadFile"
-          icon="delete"
-          class-name="delete-icon"
-          @click.stop="clearFile"
-        />
+        <svg-icon v-if="uploadFile" icon="delete" class-name="delete-icon" @click.stop="clearFile" />
       </div>
       <div class="flex-1" />
-      <button
-        class="action-button btn btn-link"
-        type="button"
-        data-bs-toggle="offcanvas"
-        data-bs-target="#offcanvas-template"
-        aria-controls="offcanvas-template"
-      >
+      <button class="action-button btn btn-link" type="button" data-bs-toggle="offcanvas"
+        data-bs-target="#offcanvas-template" aria-controls="offcanvas-template">
         <svg-icon icon="btn-templates" />
         {{ $t('Templates') }}
       </button>
-      <button
-        class="action-button btn btn-link"
-        type="button"
-        data-bs-toggle="offcanvas"
-        data-bs-target="#offcanvas-copy-existing"
-        aria-controls="offcanvas-copy-existing"
-      >
+      <button class="action-button btn btn-link" type="button" data-bs-toggle="offcanvas"
+        data-bs-target="#offcanvas-copy-existing" aria-controls="offcanvas-copy-existing">
         <svg-icon icon="btn-history" />
         {{ $t('Copy') }}
       </button>