Improve message user experience

frontend/src/assets/styles/inputs.scss

@@ -6,11 +6,25 @@
   @extend .form-control;
 }
 
-.form-input-back { display: flex; align-items: center; height: 32px; overflow: hidden; cursor: pointer; margin-bottom: 5px; color: $primary;
+.form-input-back {
-  .input-back-icon {font-size: 32px;}
+  display: flex;
-  p {margin: 0; font-weight: 500;}
+  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-back-icon {
+      font-size: 35px;
+    }
   }
 }
 

frontend/src/components/EmptyContent.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="loading || empty" class="empty-content-container" :class="{ autoFit: 'auto-fit' }">
-    <img v-if="loading" src="@/assets/images/loading.gif" class="loading-big" alt="">
+    <img v-if="loading" src="@/assets/images/loading.gif" class="loading-big" alt="" />
-    <img v-if="empty && !loading" src="@/assets/images/no_content.jpg" class="empty-img" alt="">
+    <img v-if="empty && !loading" src="@/assets/images/no_content.jpg" class="empty-img" alt="" />
     <span v-if="empty && !loading" class="empty-text">No content yet</span>
   </div>
 </template>
@@ -30,8 +30,18 @@ export default {
     height: 100%;
   }
 
-  .loading-big {width: 188px; height: 188px;}
+  .loading-big {
-  .empty-img {width: 188px; height: 188px; margin-bottom: 15px;}
+    width: 188px;
-  .empty-text {font-size: 26px; color: #6E7387;}
+    height: 188px;
+  }
+  .empty-img {
+    width: 188px;
+    height: 188px;
+    margin-bottom: 15px;
+  }
+  .empty-text {
+    font-size: 26px;
+    color: #6e7387;
+  }
 }
 </style>

frontend/src/lang/en.js

@@ -13,7 +13,7 @@ export default {
   Duration: 'Duration',
   days: 'days',
   Update: 'Update',
-  "Quote From": 'From',
+  'Quote From': 'From',
   reject: 'reject',
   accept: 'accept',
   Note: 'Note',
@@ -66,7 +66,7 @@ export default {
   'invalid code': 'invalid code',
   Password: 'Password',
   'Forget password': 'Forget password',
-  'Invalid password': 'Password doesn\'t match',
+  'Invalid password': "Password doesn't match",
   'Read More': 'Read More',
   'Total earning': 'Total earning',
   Payable: 'Payable',
@@ -214,6 +214,6 @@ export default {
   Goal: 'Goal',
   Message: 'Message',
   'Upload attachment': 'Upload attachment',
-  'Didn\'t get the email? Check junk folder or': 'Didn\'t get the email? Check junk folder or ',
+  "Didn't get the email? Check junk folder or": "Didn't get the email? Check junk folder or ",
   'send again': 'send again'
 }

frontend/src/lang/zh.js

@@ -13,7 +13,7 @@ export default {
   Duration: '工期',
   days: '天',
   Update: '更新',
-  "Quote From": '需求方',
+  'Quote From': '需求方',
   reject: '拒绝',
   accept: '接受',
   Note: '标注',
@@ -207,6 +207,6 @@ export default {
   'Lines of code per week': '每周代码产量',
   Message: '消息',
   'Upload attachment': '上传附件',
-  'Didn\'t get the email? Check junk folder or': '没收到邮件？检查垃圾文件夹或',
+  "Didn't get the email? Check junk folder or": '没收到邮件？检查垃圾文件夹或',
   'send again': '重新发送'
 }

frontend/src/pages/guest/FrontDoor.vue

@@ -36,7 +36,7 @@ const GET_USERS = gql`
       lastName
     }
   }
-`;
+`
 
 export default {
   name: 'FrontDoor',

frontend/src/pages/guest/SigninWithEmailAndCode.vue

@@ -9,8 +9,14 @@
         <div class="form-group">
           <div class="input-group-container">
             <div class="form-floating">
-              <input class="input-email" id="inputCode" type="text" :placeholder="'Code sent to your email'"
+              <input
-                v-model="code" @focus="inputFocus" />
+                class="input-email"
+                id="inputCode"
+                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>
             <button type="submit" class="btn-start">{{ $t('SIGN IN') }}</button>
@@ -18,9 +24,15 @@
         </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>
+          <span>{{ $t("Didn't get the email? Check junk folder or") }}</span>
-          <button class="btn btn-link resend-btn" :disabled="countdown !== 0" type="button"
+          <button
-            @click="trySigninWithEmail">{{ $t('send again') }}</button>
+            class="btn btn-link resend-btn"
+            :disabled="countdown !== 0"
+            type="button"
+            @click="trySigninWithEmail"
+          >
+            {{ $t('send again') }}
+          </button>
           <span v-if="countdown !== 0" class="countdown">({{ countdown }})</span>
         </p>
       </div>
@@ -143,7 +155,7 @@ export default {
 
   &:disabled {
     color: $primary;
-    opacity: .78;
+    opacity: 0.78;
   }
 }
 

frontend/src/pages/user/account/UserProfile.vue

@@ -1175,7 +1175,7 @@ export default {
         right: 0;
         bottom: 0;
         display: flex;
-        background-color: rgba(0,0,0,.3);
+        background-color: rgba(0, 0, 0, 0.3);
         justify-content: center;
         align-items: center;
       }

frontend/src/pages/user/messages/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="message-container">
+  <div class="message-container" ref="messagesContainer">
     <div class="message-hub-conainter">
       <template v-if="!receiver_id">
         <div v-if="conversations && conversations.length > 0" class="conversation-list-container">
@@ -17,7 +17,8 @@
                 }}</span>
               </div>
               <div class="conversation-summary-highlight-container">
-                {{ getSenderName(conversation.last_message) }} {{ conversation.last_message?.message_body }}
+                {{ getSenderName(conversation.last_message) }}
+                {{ conversation.last_message?.message_body }}
               </div>
             </div>
           </div>
@@ -27,7 +28,7 @@
         </div>
       </template>
       <div class="message-panel-container">
-        <div v-if="messages && messages.length > 0" class="message-thread-container">
+        <div v-if="messages && messages.length > 0" class="message-thread-container" ref="messageThreadContainer">
           <div v-for="(item, index) in messages" :key="index" class="message-item-container"
             :class="item.sender_id == userIdentityNote ? 'me' : ''">
             <div class="message-item-header-container">
@@ -118,6 +119,7 @@ export default {
         .then((response) => {
           this.messages = response?.data || []
           console.log('Received message for conversation:', conversation_id)
+          this.scrollToNewestMessageThread();
         })
         .catch((error) => {
           this.mnx_backendErrorHandler(error)
@@ -156,6 +158,10 @@ export default {
               sender_photo: new_message.sender_profile.photo
             })
             this.writtenMessage = null
+
+            // Scroll to the newest message
+            this.scrollToNewestMessage();
+            this.scrollToNewestMessageThread();
           })
           .catch((error) => {
             this.mnx_backendErrorHandler(error)
@@ -170,10 +176,24 @@ export default {
     getSenderName(message) {
       if (message != null) {
         if (message.sender_id == this.mnx_getUserIdentity()) {
-          return "You:"
+          return 'You:'
         }
       }
       return ''
+    },
+    scrollToNewestMessage() {
+      this.$nextTick(() => {
+        const messagesContainer = this.$refs.messagesContainer;
+        messagesContainer.scrollTop = messagesContainer.scrollHeight
+      });
+    },
+    scrollToNewestMessageThread() {
+      this.$nextTick(() => {
+        const messageThreadContainer = this.$refs.messageThreadContainer;
+        if (messageThreadContainer != null) {
+          messageThreadContainer.scrollTop = messageThreadContainer.scrollHeight
+        }
+      });
     }
   }
 }

frontend/src/pages/user/providers/Home.vue

@@ -19,7 +19,8 @@
                 </div>
                 <div class="provider-stay-on-freeleaps-container">
                   <label class="provider-stay-on-freeleaps-label" for="provider-stay-on-freeleaps">
-                    {{ $t('Stay on Freeleaps') }} </label>
+                    {{ $t('Stay on Freeleaps') }}
+                  </label>
                   <span class="provider-stay-on-freeleaps-span" id="provider-stay-on-freeleaps">
                     {{ provider.activeness_achievement.days_of_staying_on }}
                     {{ $t('day(s)') }}</span>
@@ -36,7 +37,9 @@
                     $t('Responding time')
                     }}</label>
                   <span class="provider-responding-time-span" id="provider-responding-time">
-                    {{ provider.provider_achievement.activities.responding_time_in_minutes ?? 'N/A' }}
+                    {{
+                      provider.provider_achievement.activities.responding_time_in_minutes ?? 'N/A'
+                    }}
                     {{ $t('min(s)') }}
                   </span>
                 </div>

frontend/src/pages/user/requests/Propose.vue

@@ -1,57 +1,106 @@
 <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"
+      <div
-        aria-labelledby="offcanvas-copy-existing">
+        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"
+            <div
-              class="accordion-item">
+              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"
+                <button
-                  :data-bs-target="'#' + 'existing-proposal-collapse' + index" aria-expanded="false"
+                  class="accordion-button collapsed"
-                  :aria-controls="'collapse' + index">
+                  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"
+              <div
-                :aria-labelledby="'existing-heading' + index" data-bs-parent="#existing-proposal-item-container">
+                :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"
+      <div
-        aria-labelledby="offcanvas-template">
+        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"
+                <button
-                  :data-bs-target="'#' + 'collapse' + index" aria-expanded="false" :aria-controls="'collapse' + index">
+                  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"
+              <div
-                data-bs-parent="#template-item-container">
+                :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') }}
@@ -67,14 +116,22 @@
         <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"
+              <button
-                data-bs-target="#collapse-request-content" aria-expanded="false"
+                class="accordion-button"
-                aria-controls="collapse-request-content">
+                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"
+            <div
-              data-bs-parent="#accordion-request-container">
+              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>
@@ -86,13 +143,23 @@
         <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"
+            <button
-              aria-controls="offcanvas-template">
+              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"
+            <button
-              data-bs-target="#offcanvas-copy-existing" aria-controls="offcanvas-copy-existing">
+              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>
@@ -108,8 +175,12 @@
               <div class="form-group">
                 <div class="input-group-container">
                   <div class="form-floating">
-                    <input class="input-email" :id="`stage-payment-content-${index}`" type="number"
+                    <input
-                      v-model="stage.payment" />
+                      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>
@@ -120,8 +191,12 @@
               <div class="form-group">
                 <div class="input-group-container">
                   <div class="form-floating">
-                    <input class="input-email" :id="`stage-duration-content-${index}`" type="number"
+                    <input
-                      v-model="stage.duration_in_days" />
+                      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>
@@ -132,7 +207,12 @@
               <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>
@@ -195,7 +275,7 @@ import {
 } from '@/types/index'
 import SvgIcon from '@/components/SvgIcon.vue'
 import FreeleapsEditor from '@/components/FreeleapsEditor.vue'
-import { WorksapceApi } from '../../../utils';
+import { WorksapceApi } from '../../../utils'
 export default {
   name: 'MakeProposal',
   components: { SvgIcon, FreeleapsEditor },
@@ -269,13 +349,15 @@ export default {
         this.proposal.content,
         this.proposal.stages,
         null
-      ).then((response) => {
+      )
+        .then((response) => {
           if (this.uploadFile) {
             this.attachFile()
           } else {
             this.mnx_navToRequestSubmitted(this.requestId)
           }
-      }).catch((error) => {
+        })
+        .catch((error) => {
           this.mnx_backendErrorHandler(error)
         })
     },

frontend/src/pages/user/workspace/Home.vue

@@ -2,13 +2,22 @@
   <empty-content :loading="loading" :empty="projects?.length === 0" />
   <div v-if="projects && projects.length > 0" class="workspace-container">
     <div class="workspace-body">
-      <div class="accordion accordion-list" v-for="(project, project_index) in projects" :key="project_index"
+      <div
-        :id="project.id">
+        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"
+            <button
-              :data-bs-target="'#collapse-' + project_index" aria-expanded="false"
+              class="accordion-button collapsed"
-              :aria-controls="'collapse-' + project_index">
+              type="button"
+              data-bs-toggle="collapse"
+              :data-bs-target="'#collapse-' + project_index"
+              aria-expanded="false"
+              :aria-controls="'collapse-' + project_index"
+            >
               <div class="workspace-item-bar dashed-container">
                 <div class="workspace-item-bar-left">
                   <div class="project-item-title-container">
@@ -35,7 +44,11 @@
               </div>
             </button>
           </h2>
-          <div :id="'collapse-' + project_index" class="accordion-collapse collapse" :data-bs-parent="'#' + project.id">
+          <div
+            :id="'collapse-' + project_index"
+            class="accordion-collapse collapse"
+            :data-bs-parent="'#' + project.id"
+          >
             <div class="accordion-body" v-if="isOpenRequest(project)">
               <div class="float-action-container">
                 <button class="request-action-withdraw" @click="withdrawAndEditRequest(project)">
@@ -43,21 +56,36 @@
                 </button>
               </div>
               <div class="project-request-container">
-                <div class="project-request-content" v-html="project.request.content" @keyup="textAreaAdjust($event)"
+                <div
-                  contenteditable="false"></div>
+                  class="project-request-content"
+                  v-html="project.request.content"
+                  @keyup="textAreaAdjust($event)"
+                  contenteditable="false"
+                ></div>
               </div>
               <div class="project-request-proposals-container">
-                <div class="accordion" v-for="(proposal, proposal_index) in project.proposals" :key="proposal_index"
+                <div
-                  :id="proposal.id">
+                  class="accordion"
+                  v-for="(proposal, proposal_index) in project.proposals"
+                  :key="proposal_index"
+                  :id="proposal.id"
+                >
                   <div class="accordion-item">
                     <h2 class="accordion-header">
-                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                      <button
-                        :data-bs-target="'#collapse-request-proposal' + proposal_index" aria-expanded="false"
+                        class="accordion-button collapsed"
-                        :aria-controls="'collapse-request-proposal' + proposal_index">
+                        type="button"
+                        data-bs-toggle="collapse"
+                        :data-bs-target="'#collapse-request-proposal' + proposal_index"
+                        aria-expanded="false"
+                        :aria-controls="'collapse-request-proposal' + proposal_index"
+                      >
                         <div class="project-request-proposal-bar-container">
                           <div class="project-request-proposal-quote-container">
                             <label class="project-item-label">{{ $t('Quote') }}</label>
-                            <p class="project-item-text">{{ proposal.total_amount }} {{ proposal.currency }}</p>
+                            <p class="project-item-text">
+                              {{ proposal.total_amount }} {{ proposal.currency }}
+                            </p>
                           </div>
                           <div class="project-request-proposal-payment-type-container">
                             <label class="project-item-label">{{ $t('Payment') }}</label>
@@ -86,16 +114,23 @@
                         </div>
                       </button>
                     </h2>
-                    <div :id="'collapse-request-proposal' + proposal_index" class="accordion-collapse collapse"
+                    <div
-                      :data-bs-parent="'#' + proposal.id">
+                      :id="'collapse-request-proposal' + proposal_index"
+                      class="accordion-collapse collapse"
+                      :data-bs-parent="'#' + proposal.id"
+                    >
                       <div class="accordion-body">
                         <div class="request-proposal-action-container">
-                          <button class="request-proposal-action-reject"
+                          <button
-                            @click="rejectProposal(project, proposal_index)">
+                            class="request-proposal-action-reject"
+                            @click="rejectProposal(project, proposal_index)"
+                          >
                             {{ $t('reject') }}
                           </button>
-                          <button class="request-proposal-action-accept"
+                          <button
-                            @click="acceptProposal(project, proposal_index)">
+                            class="request-proposal-action-accept"
+                            @click="acceptProposal(project, proposal_index)"
+                          >
                             {{ $t('accept') }}
                           </button>
                         </div>
@@ -103,9 +138,12 @@
                           <div class="request-proposal-content" v-html="proposal.content" />
                         </div>
                         <div class="request-proposal-payment-plan">
-                          <div class="request-proposal-payment-plan-stage-container"
+                          <div
-                            v-for="(stage, stage_index) in proposal.payment_plan.stages" :key="stage_index"
+                            class="request-proposal-payment-plan-stage-container"
-                            :id="'payment-stage-' + stage_index">
+                            v-for="(stage, stage_index) in proposal.payment_plan.stages"
+                            :key="stage_index"
+                            :id="'payment-stage-' + stage_index"
+                          >
                             <div class="project-request-proposal-stage-payment-container">
                               <label class="project-item-label">{{ $t('Payment') }}</label>
                               <p class="project-item-text">
@@ -140,9 +178,12 @@
                 <div class="request-proposal-content" v-html="project.proposal.content" />
               </div>
               <div class="request-proposal-payment-plan">
-                <div class="request-proposal-payment-plan-stage-container"
+                <div
-                  v-for="(stage, stage_index) in project.proposal.payment_plan.stages" :key="stage_index"
+                  class="request-proposal-payment-plan-stage-container"
-                  :id="'payment-stage-' + stage_index">
+                  v-for="(stage, stage_index) in project.proposal.payment_plan.stages"
+                  :key="stage_index"
+                  :id="'payment-stage-' + stage_index"
+                >
                   <div class="project-request-proposal-stage-payment-container">
                     <label class="project-item-label">{{ $t('Payment') }}</label>
                     <p class="project-item-text">{{ stage.amount }} {{ stage.currency }}</p>
@@ -160,24 +201,40 @@
                 </div>
               </div>
               <div class="project-request-container">
-                <div class="project-request-content" v-html="project.request.content" @keyup="textAreaAdjust($event)"
+                <div
-                  contenteditable="false"></div>
+                  class="project-request-content"
+                  v-html="project.request.content"
+                  @keyup="textAreaAdjust($event)"
+                  contenteditable="false"
+                ></div>
               </div>
             </div>
             <div class="accordion-body inline-accordion-body" v-if="isOngoingProject(project)">
               <div class="project-invite-collaborator-containter">
-                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                <button
-                  data-bs-target="#collapse-project-invite-collaborator" aria-expanded="false"
+                  class="accordion-button collapsed"
-                  aria-controls="collapse-project-invite-collaborator">
+                  type="button"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#collapse-project-invite-collaborator"
+                  aria-expanded="false"
+                  aria-controls="collapse-project-invite-collaborator"
+                >
                   <div class="project-invite-collaborator">+ {{ $t('Invite') }}</div>
                 </button>
-                <div id="collapse-project-invite-collaborator" class="accordion-collapse collapse"
+                <div
-                  data-bs-parent="#collapse-project-invite-collaborator">
+                  id="collapse-project-invite-collaborator"
+                  class="accordion-collapse collapse"
+                  data-bs-parent="#collapse-project-invite-collaborator"
+                >
                   <div class="project-invite-collaborator-form-container">
-                    <input type="text" v-model="newInviteCollaborator[project_index]"
+                    <input
-                      :placeholder="$t('Input E-mail to invite other')" @keydown.enter="
+                      type="text"
+                      v-model="newInviteCollaborator[project_index]"
+                      :placeholder="$t('Input E-mail to invite other')"
+                      @keydown.enter="
                         inviteCollaborator(project.project_id, newInviteCollaborator[project_index])
-                        " />
+                      "
+                    />
                     <svg-icon icon="msg-enter" class-name="project-invite-enter" />
                   </div>
                 </div>
@@ -185,9 +242,14 @@
               <div class="accordion" id="workspace-project-accordion">
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    <button
-                      data-bs-target="#collapse-project-milestone" aria-expanded="false"
+                      class="accordion-button collapsed"
-                      aria-controls="collapse-project-milestone">
+                      type="button"
+                      data-bs-toggle="collapse"
+                      data-bs-target="#collapse-project-milestone"
+                      aria-expanded="false"
+                      aria-controls="collapse-project-milestone"
+                    >
                       <div class="project-milestone-bar-container dashed-container">
                         <div class="project-milestone-bar-progress">
                           <label class="project-item-label">{{ $t('Progress') }}</label>
@@ -223,11 +285,17 @@
                       </div>
                     </button>
                   </h2>
-                  <div id="collapse-project-milestone" class="accordion-collapse collapse"
+                  <div
-                    data-bs-parent="#collapse-project-milestone">
+                    id="collapse-project-milestone"
+                    class="accordion-collapse collapse"
+                    data-bs-parent="#collapse-project-milestone"
+                  >
                     <table class="project-milestones-table">
-                      <tbody v-for="milestone in project.project.progress.milestones" :key="milestone.index"
+                      <tbody
-                        :id="'project-milestone-' + milestone.index">
+                        v-for="milestone in project.project.progress.milestones"
+                        :key="milestone.index"
+                        :id="'project-milestone-' + milestone.index"
+                      >
                         <tr>
                           <td>
                             <div class="project-milestones-table-content">
@@ -261,7 +329,12 @@
                                 $t('Payment')
                               }}</span>
                               <span class="project-milestones-table-span">
-                                {{ milestone.status == 3 ? milestone.expected_payment : milestone.actual_paid }} / {{ milestone.expected_payment }}
+                                {{
+                                  milestone.status == 3
+                                    ? milestone.expected_payment
+                                    : milestone.actual_paid
+                                }}
+                                / {{ milestone.expected_payment }}
                                 {{ project.project.progress.payment_currency }}
                               </span>
                             </div>
@@ -277,9 +350,14 @@
                           <td>
                             <div class="project-milestones-table-content">
                               <span class="project-milestones-table-label">{{ $t('Action') }}</span>
-                              <button class="project-milestones-table-btn" :disabled="isMilestoneActionButtonDisabled(project.project, milestone)
+                              <button
-                                " :hidden="isMilestoneActionButtonHidden(project.project, milestone)"
+                                class="project-milestones-table-btn"
-                                @click="handleMilestoneAction(project.project, milestone)">
+                                :disabled="
+                                  isMilestoneActionButtonDisabled(project.project, milestone)
+                                "
+                                :hidden="isMilestoneActionButtonHidden(project.project, milestone)"
+                                @click="handleMilestoneAction(project.project, milestone)"
+                              >
                                 {{ fetchMilestoneActionButtonText(project.project, milestone) }}
                               </button>
                               <!-- <span class="project-milestones-table-span">{{ getDateFromFulltimeString(milestone.update_time) }}</span> -->
@@ -290,8 +368,10 @@
                           <td colspan="6">
                             <div class="project-milestones-qrcode-content">
                               <img :src="this.qrCode.imageUrl" alt="freeleaps" />
-                              <button class="project-milestones-qrcode-button"
+                              <button
-                                @click="handlePaymentAction(project.project, milestone)">
+                                class="project-milestones-qrcode-button"
+                                @click="handlePaymentAction(project.project, milestone)"
+                              >
                                 {{ $t('Mark As Paid') }}
                               </button>
                             </div>
@@ -303,9 +383,14 @@
                 </div>
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    <button
-                      data-bs-target="#collapse-project-code" aria-expanded="false"
+                      class="accordion-button collapsed"
-                      aria-controls="collapse-project-code">
+                      type="button"
+                      data-bs-toggle="collapse"
+                      data-bs-target="#collapse-project-code"
+                      aria-expanded="false"
+                      aria-controls="collapse-project-code"
+                    >
                       <div class="project-code-bar-container dashed-container">
                         <div class="project-code-git-status">
                           <label class="project-item-label">{{ $t('Code Depot') }}</label>
@@ -328,13 +413,22 @@
                       </div>
                     </button>
                   </h2>
-                  <div id="collapse-project-code" class="accordion-collapse collapse"
+                  <div
-                    data-bs-parent="#collapse-project-code">
+                    id="collapse-project-code"
+                    class="accordion-collapse collapse"
+                    data-bs-parent="#collapse-project-code"
+                  >
                     <div class="project-code-details-container">
                       <div class="project-code-git-url-container">
-                        <button v-if="project.project.code?.git_url" class="project-code-copy-git-url"
+                        <button
-                          @click="copyCodeGit(project)" v-tooltip title="Copied" trigger="click"
+                          v-if="project.project.code?.git_url"
-                          delay='{"show":"500", "hide":"100"}'>
+                          class="project-code-copy-git-url"
+                          @click="copyCodeGit(project)"
+                          v-tooltip
+                          title="Copied"
+                          trigger="click"
+                          delay='{"show":"500", "hide":"100"}'
+                        >
                           {{ $t('copy git url') }}
                         </button>
                       </div>
@@ -350,9 +444,14 @@
                 </div>
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    <button
-                      data-bs-target="#collapse-project-issue" aria-expanded="false"
+                      class="accordion-button collapsed"
-                      aria-controls="collapse-project-issue">
+                      type="button"
+                      data-bs-toggle="collapse"
+                      data-bs-target="#collapse-project-issue"
+                      aria-expanded="false"
+                      aria-controls="collapse-project-issue"
+                    >
                       <div class="project-issue-bar-container dashed-container">
                         <div class="project-issue-open-issues">
                           <label class="project-item-label">{{ $t('Open issues') }}</label>
@@ -375,8 +474,11 @@
                       </div>
                     </button>
                   </h2>
-                  <div id="collapse-project-issue" class="accordion-collapse collapse"
+                  <div
-                    data-bs-parent="#collapse-project-issue">
+                    id="collapse-project-issue"
+                    class="accordion-collapse collapse"
+                    data-bs-parent="#collapse-project-issue"
+                  >
                     <div class="project-code-git-url-container">
                       <button class="project-code-copy-git-url" @click="gotoIssueManage(project)">
                         {{ $t('Issues management') }}

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

@@ -109,8 +109,9 @@
                           {{ $t('Reopen') }}
                         </button>
                       </div>
-                      <p v-if="!updatingIssue || updatingIssue.issue_id !== issue.id" class="project-item-text">{{
+                      <p v-if="!updatingIssue || updatingIssue.issue_id !== issue.id" class="project-item-text">
-                        issue.description }}</p>
+                        {{ issue.description }}
+                      </p>
                       <div v-if="updatingIssue && updatingIssue.issue_id === issue.id"
                         class="project-issue-description-container">
                         <div class="project-issue-description">
@@ -122,7 +123,7 @@
                             {{ $t('Update') }}
                           </button>
                         </div>
-                        <input type="text" v-model="updatingIssue.issue_title">
+                        <input type="text" v-model="updatingIssue.issue_title" />
                         <div class="project-issue-description">
                           <label class="project-item-label">{{ $t('Issue description') }}</label>
                         </div>
@@ -130,8 +131,11 @@
                         <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">{{
-                              <span v-if="updatingIssue.issue_attachment">{{ updatingIssue.issue_attachment.name
+                                $t('Upload attachment')
+                                }}</span>
+                              <span v-if="updatingIssue.issue_attachment">{{
+                                updatingIssue.issue_attachment.name
                                 }}</span>
                               <input type="file" hidden @change="handleFileUpload" />
                             </label>

frontend/src/plugins/store/basic.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-prototype-builtins */
 import { i18n } from '@/lang'
-import { debounce } from 'lodash';
+import { debounce } from 'lodash'
 import { WsConnectionFactory } from '@/utils/backend/websocket'
 import { MessageHubApi } from '@/utils/backend/messageHub'
 
@@ -61,8 +61,8 @@ const updateConversations = debounce((state, { token, cb }, data) => {
       if (cb && cb instanceof Function) {
         cb(err)
       }
-    });
+    })
-}, 300);
+}, 300)
 
 const basicStore = {
   namespaced: true,

frontend/src/utils/backend/workspace.js

@@ -128,13 +128,9 @@ class WorksapceApi {
 
   static updateIssueForProduct(data) {
     let jwt = userUtils.getJwtToken()
-    const request = backendAxios.post(
+    const request = backendAxios.post('/api/workspace/product/update-issue-for-product', data, {
-      '/api/workspace/product/update-issue-for-product',
-      data,
-      {
       headers: { Authorization: `Bearer ${jwt}` }
-      }
+    })
-    )
     return request
   }