From 219a5a7d8981dabc7c11026ceab1ed918f003bc3 Mon Sep 17 00:00:00 2001
From: "min.jiang" <min.jiang02@weimob.com>
Date: Wed, 31 Jul 2024 07:31:01 +0800
Subject: [PATCH 1/2] update

---
 frontend/src/assets/styles/_variables.scss    |  2 +-
 frontend/src/assets/styles/inputs.scss        | 14 ++-
 frontend/src/components/EmptyContent.vue      | 28 ++++++
 frontend/src/components/SvgIcon.vue           |  5 +-
 frontend/src/footers/FooterGuest.vue          |  2 +-
 frontend/src/footers/FooterUser.vue           |  2 +-
 frontend/src/headers/HeaderGuest.vue          |  1 +
 frontend/src/headers/HeaderUser.vue           |  3 +-
 frontend/src/icons/back.svg                   |  1 +
 frontend/src/lang/en.js                       |  7 +-
 frontend/src/lang/index.js                    |  6 ++
 frontend/src/lang/zh.js                       |  7 +-
 frontend/src/pages/guest/FrontDoor.vue        |  2 +-
 .../pages/guest/SigninWithEmailAndCode.vue    | 71 ++++++++++---
 .../guest/SigninWithEmailAndPassword.vue      | 11 ++-
 frontend/src/pages/public/About.vue           | 12 ++-
 frontend/src/pages/user/workspace/Home.vue    |  3 +-
 .../user/workspace/projectIssue/Issue.vue     | 99 ++++++++++++++++++-
 frontend/src/plugins/router/router.js         | 43 ++++----
 frontend/src/utils/backend/workspace.js       | 40 ++++++++
 frontend/vite.config.js                       | 34 +++++--
 21 files changed, 326 insertions(+), 67 deletions(-)
 create mode 100644 frontend/src/components/EmptyContent.vue
 create mode 100644 frontend/src/icons/back.svg

diff --git a/frontend/src/assets/styles/_variables.scss b/frontend/src/assets/styles/_variables.scss
index a3e4d3e..3912ba3 100644
--- a/frontend/src/assets/styles/_variables.scss
+++ b/frontend/src/assets/styles/_variables.scss
@@ -45,7 +45,7 @@ $footer-height: 110px;
 $body-height: calc(100vh - $header-height - $footer-height);
 $body-width: 1288px;
 
-$accordion-icon-width: 1rem;
+$accordion-icon-width: 12px;
 $accordion-button-icon: url("data:image/svg+xml,<svg viewBox='0 0 1331 1024' xmlns='http://www.w3.org/2000/svg' width='64' height='64'><path d='M552.5504 896.512L45.1584 244.1216A102.4 102.4 0 0 1 125.952 78.848h1014.784a102.4 102.4 0 0 1 80.896 165.2736l-507.4944 652.288a102.4 102.4 0 0 1-161.6896 0z'></path></svg>");
 $accordion-button-active-icon: url("data:image/svg+xml,<svg viewBox='0 0 1331 1024' xmlns='http://www.w3.org/2000/svg' width='64' height='64'><path d='M552.5504 896.512L45.1584 244.1216A102.4 102.4 0 0 1 125.952 78.848h1014.784a102.4 102.4 0 0 1 80.896 165.2736l-507.4944 652.288a102.4 102.4 0 0 1-161.6896 0z'></path></svg>");
 // $default-font: "Lato", Verdana, Arial, sans-serif;
diff --git a/frontend/src/assets/styles/inputs.scss b/frontend/src/assets/styles/inputs.scss
index 0638b85..ef21bca 100644
--- a/frontend/src/assets/styles/inputs.scss
+++ b/frontend/src/assets/styles/inputs.scss
@@ -6,6 +6,14 @@
   @extend .form-control;
 }
 
+.form-input-back { display: flex; align-items: center; height: 32px; overflow: hidden; cursor: pointer; margin-bottom: 5px; color: $primary;
+  .input-back-icon {font-size: 32px;}
+  p {margin: 0; font-weight: 500;}
+  &:hover {
+    .input-back-icon {font-size: 35px;}
+  }
+}
+
 .input-container {
   width: 460px;
   height: 62px;
@@ -30,8 +38,9 @@
     @extend .ms-1;
     margin: 8px !important;
     border-radius: 12px !important;
-    font-weight: 500;
-    font-size: 16px;
+    font-weight: 600;
+    font-size: 14px;
+    padding: 4px 12px;
     color: #f8f8f9;
   }
   .error-msg {
@@ -40,5 +49,6 @@
     color: #9ea2af;
     font-size: 18px;
     margin: 0;
+    white-space: nowrap;
   }
 }
diff --git a/frontend/src/components/EmptyContent.vue b/frontend/src/components/EmptyContent.vue
new file mode 100644
index 0000000..951b5fa
--- /dev/null
+++ b/frontend/src/components/EmptyContent.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="empty-content-container" :class="{autoFit : 'auto-fit'}">
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EmptyContent',
+  props: {
+    autoFit: { type: Boolean, default: false }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.empty-content-container {
+  height: calc(100vh - 88px - 110px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &.auto-fit {
+    width: 100%; 
+    height: 100%;
+  }
+}
+</style>
diff --git a/frontend/src/components/SvgIcon.vue b/frontend/src/components/SvgIcon.vue
index 000f126..5f23ab8 100644
--- a/frontend/src/components/SvgIcon.vue
+++ b/frontend/src/components/SvgIcon.vue
@@ -34,10 +34,11 @@ export default {
 
 <style scoped>
 .svg-icon {
-  width: 1rem;
-  height: 1rem;
+  width: 1em;
+  height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
+  font-size: 16px;
 }
 </style>
diff --git a/frontend/src/footers/FooterGuest.vue b/frontend/src/footers/FooterGuest.vue
index cf31e95..b341351 100644
--- a/frontend/src/footers/FooterGuest.vue
+++ b/frontend/src/footers/FooterGuest.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex-colum-container bottom-container">
     <img class="company-logo" alt="freeleaps logo" src="@/assets/freeleaps.png" />
-    <p class="bottom-text">2022 Freeleaps, LLC, All rights reserved</p>
+    <p class="bottom-text">© All rights reserved to Freeleaps LLC</p>
   </div>
 </template>
 <script>
diff --git a/frontend/src/footers/FooterUser.vue b/frontend/src/footers/FooterUser.vue
index 7b6f673..d87a96d 100644
--- a/frontend/src/footers/FooterUser.vue
+++ b/frontend/src/footers/FooterUser.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex-colum-container">
     <div class="bottom-div">
-      <p class="bottom-text">2022 Freeleaps, LLC, All rights reserved</p>
+      <p class="bottom-text">© All rights reserved to Freeleaps LLC</p>
     </div>
   </div>
 </template>
diff --git a/frontend/src/headers/HeaderGuest.vue b/frontend/src/headers/HeaderGuest.vue
index fc6a2ef..c9f218f 100644
--- a/frontend/src/headers/HeaderGuest.vue
+++ b/frontend/src/headers/HeaderGuest.vue
@@ -112,6 +112,7 @@ export default {
     @extend .btn-link;
     color: black;
     font-size: 16px;
+    margin-right: 15px;
     text-decoration: none;
   }
 }
diff --git a/frontend/src/headers/HeaderUser.vue b/frontend/src/headers/HeaderUser.vue
index a882022..b1834c1 100644
--- a/frontend/src/headers/HeaderUser.vue
+++ b/frontend/src/headers/HeaderUser.vue
@@ -7,7 +7,7 @@
         @click="gotoMessages"
         :class="{ active: activePath == 'message', unread: unreadConversationCount > 0 }"
       >
-        <img alt="freeleaps logo" src="@/assets/message.png" />
+        <img alt="freeleaps message" src="@/assets/message.png" />
       </div>
       <div class="navigation-container" role="navigation">
         <button
@@ -271,6 +271,7 @@ export default {
     color: #6e7387;
     text-decoration: none;
     margin: 0 30px;
+    white-space: nowrap;
     position: relative;
 
     &.badge::after {
diff --git a/frontend/src/icons/back.svg b/frontend/src/icons/back.svg
new file mode 100644
index 0000000..199b233
--- /dev/null
+++ b/frontend/src/icons/back.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="64" height="64"><path d="M442.4 256L192 512l250.4 256 53.12-54.304-161.856-165.504H832v-72.416H333.664l161.888-165.44L442.4 256z"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 1aa74fd..b2e0700 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -48,7 +48,7 @@ export default {
   fd_3: 'One stop platform',
   fd_4: 'for hiring the best',
   fd_5: 'freelance software development talent',
-  'Email address': 'Email address',
+  'Enter email address to start': 'Enter email address to start',
   'GET STARTED': 'GET STARTED',
   'Please type in your email': 'Please type in your email',
   'Your Freeleaps User ID': 'Your Freeleaps User ID',
@@ -212,5 +212,8 @@ export default {
   'Issues management': 'Issues management',
   'Payment progress': 'Payment progress',
   Goal: 'Goal',
-  Message: 'Message'
+  Message: 'Message',
+  'Upload attachment': 'Upload attachment',
+  'Didn\'t get the email? Check junk folder or': 'Didn\'t get the email? Check junk folder or ',
+  'send again': 'send again'
 }
diff --git a/frontend/src/lang/index.js b/frontend/src/lang/index.js
index cbf0b71..9f68c85 100644
--- a/frontend/src/lang/index.js
+++ b/frontend/src/lang/index.js
@@ -8,6 +8,12 @@ const getDefaultLocale = () => {
   if (defaultLanguage) {
     return defaultLanguage
   }
+  const host = window.location.host
+  if (host.endsWith('.com')) {
+    return 'en'
+  } else if (host.endsWith('.cn')) {
+    return 'zh'
+  }
   const lan = (navigator.browserLanguage || navigator.language).toLowerCase()
   if (lan.indexOf('zh') > -1) {
     defaultLanguage = 'zh'
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 5c07a24..18191c2 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -48,7 +48,7 @@ export default {
   fd_3: '一站式服务',
   fd_4: '只为追求更好',
   fd_5: '软件开发人才',
-  'Email address': '电子邮箱',
+  'Enter email address to start': '电子邮箱',
   'GET STARTED': '开始',
   'Please type in your email': '请填写你的邮箱地址',
   'Your Freeleaps User ID': '设置你的用户ID',
@@ -205,5 +205,8 @@ export default {
   'Issued request': '项目请求总数',
   'Open requests': '待处理的项目请求',
   'Lines of code per week': '每周代码产量',
-  Message: '消息'
+  Message: '消息',
+  'Upload attachment': '上传附件',
+  'Didn\'t get the email? Check junk folder or': '没收到邮件？检查垃圾文件夹或',
+  'send again': '重新发送'
 }
diff --git a/frontend/src/pages/guest/FrontDoor.vue b/frontend/src/pages/guest/FrontDoor.vue
index 2e31380..c899907 100644
--- a/frontend/src/pages/guest/FrontDoor.vue
+++ b/frontend/src/pages/guest/FrontDoor.vue
@@ -15,7 +15,7 @@
               placeholder="name@example.com"
               v-model="email"
             />
-            <label for="inputEmail">{{ $t('Email address') }}</label>
+            <label for="inputEmail">{{ $t('Enter email address to start') }}</label>
           </div>
           <button class="btn-start" ref="submitButton" @click="trySigninWithEmail()">
             {{ $t('GET STARTED') }}
diff --git a/frontend/src/pages/guest/SigninWithEmailAndCode.vue b/frontend/src/pages/guest/SigninWithEmailAndCode.vue
index db4d0ec..f1a17f3 100644
--- a/frontend/src/pages/guest/SigninWithEmailAndCode.vue
+++ b/frontend/src/pages/guest/SigninWithEmailAndCode.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="flex-row-container flex-all-center full-height">
     <form @submit.prevent="signinWithCode">
+      <div class="form-input-back" @click="frontPage">
+        <svg-icon icon="back" class-name="input-back-icon" />
+        <p>{{email}}</p>
+      </div>
       <div class="input-container">
         <div class="form-group">
           <div class="input-group-container">
@@ -11,6 +15,7 @@
                 type="text"
                 :placeholder="'Code sent to your email'"
                 v-model="code"
+                @focus="inputFocus"
               />
               <label for="inputCode">{{ $t('Authenticaion Code Sent To Your Email') }}</label>
             </div>
@@ -18,16 +23,23 @@
           </div>
         </div>
         <p class="error-msg" v-if="message != null">{{ message }}</p>
+        <p class="error-msg" v-if="!message">
+          <span>{{$t('Didn\'t get the email? Check junk folder or')}}</span>
+          <button class="btn btn-link resend-btn" :disabled="countdown !== 0" type="button" @click="trySigninWithEmail">send again</button>
+          <span v-if="countdown !== 0" class="countdown">({{countdown}})</span>
+        </p>
       </div>
     </form>
   </div>
 </template>
 
 <script>
+import SvgIcon from '@/components/SvgIcon.vue'
 import { signinActionEnum } from '@/types'
 import { UserAuthApi } from '@/utils/index'
 export default {
   name: 'SigninWithEmailAndCode',
+  components: { SvgIcon },
   props: {
     email: {
       required: true,
@@ -39,19 +51,51 @@ export default {
     return {
       code: null,
       message: null,
-      preferred_region: null
+      preferred_region: null,
+      countdown: 0,
+      timer: null
     }
   },
 
-  components: {},
-
   created() {},
   mounted() {
     if (this.mnx_IsKeepUserSignedIn() && this.mnx_isUserAuthenticated()) {
       this.mnx_navAfterSignedin()
     }
+    this.startCountdown()
+  },
+  unmounted() {
+    if (this.timer) {
+      clearInterval(this.timer)
+    }
   },
   methods: {
+    frontPage() {
+      window.history.go(-1)
+    },
+    inputFocus() {
+      this.message = null
+    },
+    startCountdown() {
+      this.countdown = 60
+      this.timer = setInterval(() => {
+        if (this.countdown <= 0) {
+          clearInterval(this.timer)
+          this.timer = null
+          return
+        }
+        this.countdown = this.countdown - 1
+      }, 1000)
+    },
+    trySigninWithEmail() {
+      UserAuthApi.trySigninWithEmail(this.email, window.location.host)
+        .then(() => {
+          this.startCountdown()
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
     signinWithCode() {
       this.message = null
       if (this.code === null || this.code.length < 1) {
@@ -97,13 +141,16 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-// .input-code {
-//   @extend .input-control-item;
-//   @extend .me-1;
-// }
-
-// .btn-start {
-//   @extend .proceed-button;
-//   @extend .ms-1;
-// }
+.resend-btn {
+  font-weight: 500;
+  padding: 0;
+  font-size: 18px;
+  &:disabled {
+    color: $primary;
+    opacity: .78;
+  }
+}
+.countdown {
+  color: $primary;
+}
 </style>
diff --git a/frontend/src/pages/guest/SigninWithEmailAndPassword.vue b/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
index d33c621..270edea 100644
--- a/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
+++ b/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="flex-row-container flex-all-center full-height">
     <form @submit.prevent="signinWithPassword">
+      <div class="form-input-back" @click="frontPage">
+        <svg-icon icon="back" class-name="input-back-icon" />
+        <p>{{email}}</p>
+      </div>
       <div class="input-container">
         <div class="form-group">
           <div class="input-group-container">
@@ -30,6 +34,7 @@
 </template>
 
 <script>
+import SvgIcon from '@/components/SvgIcon.vue'
 import { signinActionEnum } from '@/types'
 import { UserAuthApi } from '@/utils/index'
 export default {
@@ -48,7 +53,7 @@ export default {
     }
   },
 
-  components: {},
+  components: { SvgIcon },
 
   created() {},
   mounted() {
@@ -57,6 +62,9 @@ export default {
     }
   },
   methods: {
+    frontPage() {
+      window.history.go(-1)
+    },
     signinWithPassword() {
       this.message = null
       if (this.password === null || this.password.length < 1) {
@@ -124,6 +132,7 @@ export default {
   @extend .btn-link;
   padding: 0;
   font-size: 16px;
+  font-weight: 500;
   margin-left: 15px;
 }
 </style>
diff --git a/frontend/src/pages/public/About.vue b/frontend/src/pages/public/About.vue
index 41cf6ee..b0430a8 100644
--- a/frontend/src/pages/public/About.vue
+++ b/frontend/src/pages/public/About.vue
@@ -4,7 +4,6 @@
       class="directory_container"
       v-for="(directory, index) in directories"
       :key="index"
-      @click="view_link(directory)"
     >
       <div
         class="directory_cover_image"
@@ -12,7 +11,7 @@
       />
       <p class="directory-title">{{ directory.title_text }}</p>
       <p class="directory-subtitle">{{ directory.summary_text }}</p>
-      <button class="btn btn-link">{{ $t('Read More') }}</button>
+      <button class="btn btn-link directory-btn" @click="view_link(directory)">{{ $t('Read More') }}</button>
     </div>
   </div>
 </template>
@@ -56,7 +55,6 @@ export default {
 .directory_container {
   @extend .container;
   padding: 0;
-  cursor: pointer;
   text-align: left;
 
   .btn-link {
@@ -78,13 +76,17 @@ export default {
 
 .directory-title {
   font-size: 48px;
-  // font-weight: bold;
+  font-weight: 600;
   color: #18181a;
-  margin-bottom: 5px;
+  margin-bottom: 0;
 }
 
 .directory-subtitle {
   font-size: 14px;
   color: #666666;
+  margin-bottom: 5px;
+}
+.directory-btn {
+  font-weight: 600;
 }
 </style>
diff --git a/frontend/src/pages/user/workspace/Home.vue b/frontend/src/pages/user/workspace/Home.vue
index c1e8c70..cb6ce3d 100644
--- a/frontend/src/pages/user/workspace/Home.vue
+++ b/frontend/src/pages/user/workspace/Home.vue
@@ -2,8 +2,7 @@
   <div class="workspace-container">
     <!-- <div class="workspace-header"></div> -->
     <div class="workspace-body">
-      <div class="accordion accordion-list" v-for="(project, project_index) in projects" :key="project_index"
-        :id="project.id">
+      <div class="accordion accordion-list" v-for="(project, project_index) in projects" :key="project_index" :id="project.id">
         <div class="accordion-item">
           <h2 class="accordion-header">
             <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
diff --git a/frontend/src/pages/user/workspace/projectIssue/Issue.vue b/frontend/src/pages/user/workspace/projectIssue/Issue.vue
index b6b1ab4..a7bc3e1 100644
--- a/frontend/src/pages/user/workspace/projectIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/projectIssue/Issue.vue
@@ -123,8 +123,15 @@
                     :data-bs-parent="'#collapse-project-issue-details' + issue_index"
                   >
                     <div class="project-issue-description-container">
-                      <div class="project-issue-description">
+                      <div v-if="!updatingIssue || updatingIssue.issue_id !== issue.id" class="project-issue-description">
                         <label class="project-item-label">{{ $t('Issue description') }}</label>
+                        <button
+                          :hidden="!showIssueActionButton(project.project, issue, 'Edit')"
+                          class="project-issue-description-btn"
+                          @click="editIssue(issue)"
+                        >
+                          {{ $t('Edit') }}
+                        </button>
                         <button
                           :hidden="!showIssueActionButton(project.project, issue, 'Resolve')"
                           class="project-issue-description-btn"
@@ -147,7 +154,44 @@
                           {{ $t('Reopen') }}
                         </button>
                       </div>
-                      <p class="project-item-text">{{ issue.description }}</p>
+                      <p v-if="!updatingIssue || updatingIssue.issue_id !== issue.id" class="project-item-text">{{ issue.description }}</p>
+                      <div v-if="updatingIssue && updatingIssue.issue_id === issue.id" class="project-issue-description-container">
+                        <div class="project-issue-description">
+                          <label class="project-item-label">{{ $t('Issue title') }}</label>
+                          <button
+                            class="project-issue-description-btn"
+                            @click="updateIssueCancel"
+                          >
+                            {{ $t('Cancel') }}
+                          </button>
+                          <button
+                            class="project-issue-description-btn"
+                            @click="updateIssue"
+                          >
+                            {{ $t('Update') }}
+                          </button>
+                        </div>
+                        <input type="text" v-model="updatingIssue.issue_title">
+                        <div class="project-issue-description">
+                          <label class="project-item-label">{{ $t('Issue description') }}</label>
+                        </div>
+                        <textarea type="text" v-model="updatingIssue.issue_description" />
+                        <div class="file-upload-container">
+                          <div class="upload-contianer">
+                            <label class="btn btn-link">
+                              <span v-if="!updatingIssue.issue_attachment">{{ $t('Upload attachment') }}</span>
+                              <span v-if="updatingIssue.issue_attachment">{{ updatingIssue.issue_attachment.name }}</span>
+                              <input type="file" hidden @change="handleFileUpload" />
+                            </label>
+                            <svg-icon
+                              v-if="updatingIssue.issue_attachment"
+                              icon="delete"
+                              class-name="delete-icon"
+                              @click.stop="clearFile"
+                            />
+                          </div>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -177,7 +221,9 @@ export default {
   data() {
     return {
       project: {},
-      newIssueDescriptions: ''
+      newIssueDescriptions: '',
+      updatingIssue: null,
+      uploadFile: null
     }
   },
   mounted() {
@@ -232,15 +278,47 @@ export default {
           this.mnx_backendErrorHandler(error)
         })
     },
+    editIssue(issue) {
+      console.log('edit issue', issue)
+      this.updatingIssue = {
+        issue_id: issue.id,
+        issue_title: issue.title,
+        issue_description: issue.description,
+        issue_attachment: issue.attachment
+      }
+    },
+    updateIssue() {
+      // console.log('updateIssue', this.updatingIssue)
+      WorksapceApi.updateIssueForProduct(this.updatingIssue)
+        .then(() => {
+          // this.$refs.issueBtn.blur()
+          // this.$refs.issueAddBtn.click()
+          this.fetchView()
+          this.updatingIssue = null
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
+    },
+    updateIssueCancel() {
+      this.updatingIssue = null
+    },
+    handleFileUpload(event) {
+      this.updatingIssue.issue_attachment = event.target.files[0]
+    },
+    clearFile() {
+      this.updatingIssue.issue_attachment = null
+    },
     showIssueActionButton(project, issue, button_text) {
+      if (button_text === 'Edit') return true
       switch (issue.status) {
         case projectIssueStatusEnum.OPEN:
-          if (button_text === 'Resolve') {
+          if (button_text === 'Resolve' || button_text === 'Edit') {
             return project.providers.includes(project.current_user_id)
           }
           break
         case 1:
-          if (button_text === 'Reopen' || button_text === 'Confirm') {
+          if (button_text === 'Reopen' || button_text === 'Confirm' || button_text === 'Edit') {
             return project.issuers.includes(project.current_user_id)
           }
           break
@@ -399,6 +477,7 @@ export default {
 
 .project-issue-description-container {
   padding: 12px;
+  text-align: left;
 
   textarea {
     padding: 12px;
@@ -410,6 +489,16 @@ export default {
     width: 100%;
     margin-bottom: 12px;
   }
+
+  input {
+    padding: 5px 12px;
+    border-radius: 12px;
+    border: 1px solid #e1e1e1;
+    box-shadow: none;
+    outline: none;
+    width: 280px;
+    margin-bottom: 12px;
+  }
 }
 
 .project-issue-description {
diff --git a/frontend/src/plugins/router/router.js b/frontend/src/plugins/router/router.js
index 8243c2b..02f1dd9 100644
--- a/frontend/src/plugins/router/router.js
+++ b/frontend/src/plugins/router/router.js
@@ -46,7 +46,6 @@ import UserHistory from '@/pages/user/account/UserHistory.vue'
 import Workspace from '@/pages/user/workspace/Home.vue'
 
 import FooterGuest from '@/footers/FooterGuest.vue'
-import FooterUser from '@/footers/FooterUser.vue'
 
 import HeaderGuest from '@/headers/HeaderGuest.vue'
 import HeaderUser from '@/headers/HeaderUser.vue'
@@ -152,14 +151,14 @@ const router = createRouter({
       name: 'my-workspace-requests',
       path: '/my-workspace-requests',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MyWorkspaceRequests, footer: FooterUser, header: HeaderUser },
+      components: { default: MyWorkspaceRequests, footer: FooterGuest, header: HeaderUser },
       props: false
     },
     {
       name: 'request-issue',
       path: '/request-issue/:loadFrom',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Post' },
-      components: { default: IssueRequest, footer: FooterUser, header: HeaderUser },
+      components: { default: IssueRequest, footer: FooterGuest, header: HeaderUser },
       props: (route) => {
         /**
          * This would preserve the other route.params object properties overriding only
@@ -176,14 +175,14 @@ const router = createRouter({
       name: 'project-issue',
       path: '/project-issue/:project_id',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: ProjectIssue, footer: FooterUser, header: HeaderUser },
+      components: { default: ProjectIssue, footer: FooterGuest, header: HeaderUser },
       props: true
     },
     {
       name: 'request-issue2',
       path: '/request-issue/:loadFrom/:requestId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: IssueRequest, footer: FooterUser, header: HeaderUser },
+      components: { default: IssueRequest, footer: FooterGuest, header: HeaderUser },
       props: (route) => {
         /**
          * This would preserve the other route.params object properties overriding only
@@ -200,14 +199,14 @@ const router = createRouter({
       name: 'request-submitted',
       path: '/request-submitted/:requestId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Post' },
-      components: { default: RequestSubmitted, footer: FooterUser, header: HeaderUser },
+      components: { default: RequestSubmitted, footer: FooterGuest, header: HeaderUser },
       props: true
     },
     {
       name: 'my-workspace-proposals',
       path: '/my-workspace-proposals',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MyWorkspaceProposals, footer: FooterUser, header: HeaderUser },
+      components: { default: MyWorkspaceProposals, footer: FooterGuest, header: HeaderUser },
       props: false
     },
     //message hub
@@ -215,34 +214,34 @@ const router = createRouter({
       name: 'message-hub',
       path: '/message-hub',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'message' },
-      components: { default: MessageHub, footer: FooterUser, header: HeaderUser }
+      components: { default: MessageHub, footer: FooterGuest, header: HeaderUser }
     },
     // provider hub
     {
       name: 'provider-hub',
       path: '/provider-hub',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Providers' },
-      components: { default: ProviderHub, footer: FooterUser, header: HeaderUser }
+      components: { default: ProviderHub, footer: FooterGuest, header: HeaderUser }
     },
     //request hub
     {
       name: 'request-hub',
       path: '/request-hub',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Requests' },
-      components: { default: RequestHub, footer: FooterUser, header: HeaderUser }
+      components: { default: RequestHub, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'make-proposal',
       path: '/make-proposal/:requestId/:loadingMode',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MakeProposal, footer: FooterUser, header: HeaderUser },
+      components: { default: MakeProposal, footer: FooterGuest, header: HeaderUser },
       props: true
     },
     {
       name: 'proposal-submitted',
       path: '/proposal-submitted/:proposalId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: ProposalSubmitted, footer: FooterUser, header: HeaderUser },
+      components: { default: ProposalSubmitted, footer: FooterGuest, header: HeaderUser },
       props: true
     },
 
@@ -250,7 +249,7 @@ const router = createRouter({
       name: 'request-manage',
       path: '/request-manage/:requestId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: RequestManage, footer: FooterUser, header: HeaderUser },
+      components: { default: RequestManage, footer: FooterGuest, header: HeaderUser },
       props: true
     },
     {
@@ -259,7 +258,7 @@ const router = createRouter({
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
       components: {
         default: ReviewProposalBeforeAccetance,
-        footer: FooterUser,
+        footer: FooterGuest,
         header: HeaderUser
       },
       props: true
@@ -269,49 +268,49 @@ const router = createRouter({
       name: 'user-profile',
       path: '/user-profile',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: UserProfile, footer: FooterUser, header: HeaderUser }
+      components: { default: UserProfile, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'user-history',
       path: '/user-history',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: UserHistory, footer: FooterUser, header: HeaderUser }
+      components: { default: UserHistory, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'work-space',
       path: '/work-space',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Workspace' },
-      components: { default: Workspace, footer: FooterUser, header: HeaderUser }
+      components: { default: Workspace, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'lab-home',
       path: '/lab-home',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: LabHome, footer: FooterUser, header: HeaderUser }
+      components: { default: LabHome, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'machine-translation',
       path: '/machine-translation',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: TranslationHome, footer: FooterUser, header: HeaderUser }
+      components: { default: TranslationHome, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'task-completion',
       path: '/task-completion',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: TaskCompletion, footer: FooterUser, header: HeaderUser }
+      components: { default: TaskCompletion, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'multiturn-chat',
       path: '/multiturn-chat',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MultiturnChat, footer: FooterUser, header: HeaderUser }
+      components: { default: MultiturnChat, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'image-generation',
       path: '/image-generation',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: ImageGeneration, footer: FooterUser, header: HeaderUser }
+      components: { default: ImageGeneration, footer: FooterGuest, header: HeaderUser }
     }
   ],
 
diff --git a/frontend/src/utils/backend/workspace.js b/frontend/src/utils/backend/workspace.js
index 208902f..6413866 100644
--- a/frontend/src/utils/backend/workspace.js
+++ b/frontend/src/utils/backend/workspace.js
@@ -126,6 +126,46 @@ class WorksapceApi {
     return request
   }
 
+  static updateIssueForProduct(data) {
+    let jwt = userUtils.getJwtToken()
+    const request = backendAxios.post(
+      '/api/workspace/product/update-issue-for-product',
+      data,
+      {
+        headers: { Authorization: `Bearer ${jwt}` }
+      }
+    )
+    return request
+  }
+
+  static fetchProductIssues(product_id) {
+    let jwt = userUtils.getJwtToken()
+    const request = backendAxios.post(
+      '/api/workspace/product/fetch-product-issues',
+      {
+        product_id: product_id
+      },
+      {
+        headers: { Authorization: `Bearer ${jwt}` }
+      }
+    )
+    return request
+  }
+
+  static fetchProductCodeDepot(product_id) {
+    let jwt = userUtils.getJwtToken()
+    const request = backendAxios.post(
+      '/api/workspace/product/fetch-product-code-depot',
+      {
+        product_id: product_id
+      },
+      {
+        headers: { Authorization: `Bearer ${jwt}` }
+      }
+    )
+    return request
+  }
+
   static setProductIssueStatus(issue_id, status) {
     let jwt = userUtils.getJwtToken()
     const request = backendAxios.post(
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index d8f3457..c09bdd2 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -34,23 +34,19 @@ export default defineConfig(({ command, mode }) => {
       createSvgIconsPlugin({
         iconDirs: [resolve('src/icons')],
         symbolId: 'icon-[name]'
-      }),
+      })
     ],
     resolve: {
       root: resolve('src'),
       alias: {
         '@': fileURLToPath(new URL('./src', import.meta.url)),
-        '~bootstrap': resolve('node_modules/bootstrap'),
-        '~quill': resolve('node_modules/quill'),
+        '~bootstrap': resolve('node_modules/bootstrap')
       }
     },
     css: {
       preprocessorOptions: {
         scss: {
           additionalData: `@import "@/assets/styles/main.scss";`
-        },
-        styl: {
-          additionalData: ` @import '~quill/dist/quill.core.css';'~quill/dist/quill.bubble.css';'~quill/dist/quill.snow.css';`
         }
       }
     },
@@ -80,7 +76,31 @@ export default defineConfig(({ command, mode }) => {
       supported: {
         'top-level-await': true //browsers can handle top-level-await features
       },
-    }
+    },
+    // build: {
+    //   chunkSizeWarningLimit: 1500,
+    //   rollupOptions: {
+    //     output: {
+    //       manualChunks(id) {
+    //         if (id.includes("node_modules")) {
+    //           return id.toString().split("node_modules/")[1].split("/")[0].toString()
+    //         }
+    //       },
+    //       entryFileNames: 'js/[name].[hash].js',
+    //       assetFileNames: (assetInfo) => {
+    //         if (assetInfo.name.endsWith(".css")) {
+    //           return "css/[name]-[hash].css";
+    //         }
+    //         return "assets/[name]-[hash].[ext]";
+    //       },
+    //       chunkFileNames: (chunkInfo) => {
+    //         const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : [];
+    //         const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]';
+    //         return `js/${fileName}/[name].[hash].js`;
+    //       },
+    //     }
+    //   }
+    // }
   }
 }
 )

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 2/2] 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>