Merge branch 'main' of https://dev.azure.com/freeleaps/freeleaps2-frontend/_git/freeleaps2-frontend into graphql_work

env.sh

@@ -1,14 +1,25 @@
 INT_DIR="@/freeleaps-int/sites/freeleaps/deploy"
 DEPLOY_DIR="deploy"
+DEV_BOX_DIR="../devbox"
+DEV_ENV="$DEPLOY_DIR/.dev.env"
 FE_ENV="$DEPLOY_DIR/.fe.env"
+
 if  [ -d "$INT_DIR" ];  then
-    cp $INT_DIR/. deploy -r -u
+    cp $INT_DIR/. $DEPLOY_DIR -r -u
+fi
+if  [ -d "$DEV_BOX_DIR" ];  then
+    cp $DEV_BOX_DIR/. $DEPLOY_DIR -r -u
+    source $DEV_ENV
 fi
 
 if [ -f $FE_ENV ]
 then
-    export $(cat $FE_ENV | sed 's/#.*//g' | xargs)
+    source $FE_ENV
 fi
 
+sudo npm cache clean -f
+sudo npm install -g n
+sudo n stable
+hash -r 
 npm config set "@fortawesome:registry" https://npm.fontawesome.com/
 npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_AUTH_TOKEN

frontend/src/headers/HeaderUser.vue

@@ -45,8 +45,8 @@
       </div>
       <div class="profile-container">
         <img alt="freeleaps logo" data-bs-toggle="dropdown" aria-expanded="false" id="accountButton" :src="userProfile?.account?.basic?.photo?.base64
-          ? userProfile?.account?.basic?.photo?.base64
+            ? userProfile?.account?.basic?.photo?.base64
-          : profileUrl
+            : profileUrl
           " />
         <ul class="dropdown-menu" aria-labelledby="accountButton">
           <li>

frontend/src/lang/en.js

@@ -26,7 +26,7 @@ export default {
   Milestone: 'Milestone',
   Description: 'Description',
   'Mark As Paid': 'Mark As Paid',
-  'Code Depot': 'Code Depot',
+  'Code Depot': 'Git Repo',
   Commits: 'Commits',
   'Last committer': 'Last committer',
   'copy git url': 'copy git url',
@@ -113,6 +113,7 @@ export default {
   Apply: 'Apply',
   'Empty conversation': 'Empty conversation',
   'Please choose conversation': 'Please choose conversation',
+  'Please input message': 'Please input message',
   Name: 'Name',
   'Stay on Freeleaps': 'Stay on Freeleaps',
   'Delivered projects': 'Delivered projects',
@@ -210,5 +211,6 @@ export default {
   'line(s)': 'line(s)',
   'Issues management': 'Issues management',
   'Payment progress': 'Payment progress',
-  Goal: 'Goal'
+  Goal: 'Goal',
+  Message: 'Message'
 }

frontend/src/lang/zh.js

@@ -3,27 +3,27 @@ export default {
   Contact: '联系我们',
   Blogs: '日志博客',
   Career: '工作机会',
-  Summary: '总结',
+  Summary: '项目',
-  Status: '进展状况',
+  Status: '进展情况',
-  Date: '日期',
+  Date: '发布时间',
-  withdraw: '撤销',
+  withdraw: '取消申请',
   edit: '编辑',
   Quote: '报价',
   Payment: '支付',
-  Duration: '历时',
+  Duration: '工期',
   days: '天',
   Update: '更新',
-  From: '自从',
+  From: '需求方',
   reject: '拒绝',
   accept: '接受',
   Note: '标注',
   Invite: '邀请',
   'Input E-mail to invite other': '输入电子邮件邀请他人',
   Submit: '提交',
-  Progress: '进程',
+  Progress: '项目进程',
   'Milestone(s)': '里程碑',
-  Paid: '已付',
+  Paid: '已付款',
-  Milestone: '里程碑',
+  Milestone: '项目阶段',
   Description: '描述',
   'Mark As Paid': '确认支付',
   'Code Depot': '代码库',
@@ -35,7 +35,7 @@ export default {
   'Open issues': '待解决问题',
   'Resolved issues': '已解决问题',
   'Closed issues': '已关闭问题',
-  'Add Issue': '添加问题',
+  'Add Issue': '添加新问题',
   'New issue description': '新问题描述',
   'Issue title': '问题标题',
   'Last updated': '最近更新',
@@ -58,7 +58,7 @@ export default {
   'Repeat password': '重复密码',
   'SIGN UP': '注册',
   'Please type in your password': '请输入你的密码',
-  'The two passwords are not matched': '两次密码不一致',
+  'The two passwords are not matched': '密码不符合要求，两次密码不同',
   'Authenticaion Code Sent To Your Email': '验证码已发至你的邮箱',
   'SIGN IN': '登入',
   'Please type in the code sent to your email': '请输入发至你邮箱的验证码',
@@ -66,39 +66,39 @@ export default {
   'invalid code': '验证码不正确',
   Password: '密码',
   'Forget password': '忘记密码',
-  'Invalid password': '密码错误',
+  'Invalid password': '密码或者用户名不匹配',
   'Read More': '了解更多',
   'Total earning': '总收入',
   Payable: '应付',
   'Total spending': '总开销',
-  Deposit: '预存',
+  Deposit: '预付款额度',
   Spending: '开销',
   Updated: '更新',
   Earining: '收入',
-  Login: '登入',
+  Login: '登录信息',
   'User ID': '用户名',
   Email: '电子邮箱',
   Mobile: '手机',
-  Personal: '个人',
+  Personal: '个人信息',
   'Full name': '全名',
-  Portrait: '个人信息',
+  Portrait: '用户头像',
   'Self-intro': '个人介绍',
   'Earning now': '开始赚钱',
   Edit: '编辑',
   Templates: '模版',
   Cancel: '取消',
-  'I want to be a service provider and earn money': '我要提供技术服务并且开始赚钱',
+  'I want to be a service provider and earn money': '开始接活赚钱',
   'Stripe account onboarding is not completed.': 'Stripe账户未绑定.',
   'Upload QR code to receive payment': '上传二维码开始收款',
   'Have you linked your strip account?': '你是否已经绑定Stripe账户？',
   'Visit Stripe': '访问Stripe',
   'You are a service provider now. Please review your self-intro to reflect your skills to deliver projects.':
     '你已经成为技术服务提供者。请更新个人信息以反映你的最新技能',
-  Achievement: '成就',
+  Achievement: '成长记录',
   'On Freeleaps': '在Freeleaps',
-  Connections: '联系',
+  Connections: '联系人总数',
-  Messages: '消息',
+  Messages: '消息发送数量',
-  Credit: '信用',
+  Credit: '信用分数',
   '12-month spending': '过去12个月的开销',
   '3-month spending': '过去3个月的开销',
   Posted: '已发布',
@@ -112,32 +112,33 @@ export default {
   Apply: '应用',
   'Empty conversation': '空对话',
   'Please choose conversation': '请选择对话',
+  'Please input message': '请输入消息',
   Name: '名字',
   'Stay on Freeleaps': 'Freeleaps注册时长',
   'Delivered projects': '已交付项目',
   'Responding time': '响应时间',
   'Credit score': '信用分数',
   'Self intro': '个人简介',
-  Profile: '个人资料',
+  Profile: '个人信息',
   'Project delivering time': '项目交付时间',
   'Top programming languages': '最常用编程语言',
   'Weekly produced code': '每周产出代码',
-  'Ongoing projects': '进行中的项目',
+  'Ongoing projects': '推进中的项目',
-  'Invitations to requests': '发送邀请申请',
+  'Invitations to requests': '待处理的项目邀请',
-  'Active proposals': '活跃中的申请',
+  'Active proposals': '待处理的报价',
   'Expected hourly rate': '期待的小时收入',
   'Code issue rate': '代码问题百分率',
-  'Online issue rate': '在线问题百分率',
+  'Online issue rate': '上线问题百分率',
-  'Issue fixing rate': '问题解决百分率',
+  'Issue fixing rate': '问题修复百分率',
-  'Issue fixing time': '问题修复时间',
+  'Issue fixing time': '问题修复时长',
   'Action panel': '活跃面板',
-  'to my open requests': '进入我的开放请求',
+  'to my open requests': '打开我的项目请求',
   'Once the request is selected, the provider will be invited to see the request.':
     '一旦请求被选中，服务提供者将会被邀请并看到全部请求详情',
   Issuer: '发布者',
-  Request: '请求',
+  Request: '项目请求',
   Score: '分数',
-  Propose: '提议',
+  Propose: '报价',
   Preview: '预览',
   Download: '下载',
   'Total payment': '总付款',
@@ -147,12 +148,12 @@ export default {
   'Copy from existing proposals': '从现有提案中拷贝',
   Copy: '拷贝',
   'Apply proposal template': '应用提案模版',
-  Proposal: '提案',
+  Proposal: '报价',
-  Milestones: '里程碑',
+  Milestones: '项目阶段',
   Notes: '标注',
-  'Add Milestones': '添加里程碑',
+  'Add Milestones': '添加项目阶段',
-  'Total milestones': '总里程碑',
+  'Total milestones': '总项目阶段',
-  'Total duration': '总历时',
+  'Total duration': '总工期',
   'Upload file': '上传文件',
   Back: '后退',
   'Issue Request': '问题请求',
@@ -163,7 +164,7 @@ export default {
   'pm-4': ', though the transition does limit overflow.',
   'Copy from existing request': '从现有请求拷贝',
   'Apply request template': '应用请求模版',
-  '(Re)Submit': '（再）提交',
+  '(Re)Submit': '（重新）发布',
   'The request has been submitted!': '请求已提交',
   'You can find it in': '你可以在这里找到：',
   'Review your request and the associated proposals': '核对你的请求和相关提议',
@@ -193,5 +194,16 @@ export default {
   'line(s)': '每周产出代码',
   'Issues management': '问题管理',
   'Payment progress': '付款进度',
-  Goal: '项目目标'
+  Goal: '项目目标',
+  Information: '项目信息',
+  'Quote from': '报价方',
+  'Days on Freeleaps': '用户活跃天数',
+  'Number of projects fulfilled': '完成项目总数',
+  'Gross trading value': '完成项目总金额',
+  'Delivery time per project': '项目平均交付时长',
+  Logins: '总登录次数',
+  'Issued request': '项目请求总数',
+  'Open requests': '待处理的项目请求',
+  'Lines of code per week': '每周代码产量',
+  Message: '消息'
 }

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

@@ -7,13 +7,8 @@
           <span v-if="accountNeedAttention">!</span>
         </div>
         <div class="panel-content-container" id="account-summary">
-          <button
+          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-user-id"
-            class="panel-item-container"
+            aria-expanded="false" aria-controls="collapse-user-id">
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-user-id"
-            aria-expanded="false"
-            aria-controls="collapse-user-id"
-          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-user-id">{{
                 $t('User ID')
@@ -23,13 +18,8 @@
               </span>
             </div>
           </button>
-          <button
+          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-password"
-            class="panel-item-container"
+            aria-expanded="false" aria-controls="collapse-password">
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-password"
-            aria-expanded="false"
-            aria-controls="collapse-password"
-          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-password">{{
                 $t('Password')
@@ -37,13 +27,8 @@
               <span class="profile-item-span" id="account-summary-password"> ******** </span>
             </div>
           </button>
-          <button
+          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-user-email"
-            class="panel-item-container"
+            aria-expanded="false" aria-controls="collapse-user-email">
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-user-email"
-            aria-expanded="false"
-            aria-controls="collapse-user-email"
-          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-email">{{
                 $t('Email')
@@ -53,13 +38,8 @@
               </span>
             </div>
           </button>
-          <button
+          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-user-mobile"
-            class="panel-item-container"
+            aria-expanded="false" aria-controls="collapse-user-mobile">
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-user-mobile"
-            aria-expanded="false"
-            aria-controls="collapse-user-mobile"
-          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-mobile">{{
                 $t('Mobile')
@@ -71,61 +51,29 @@
           </button>
         </div>
       </div>
-      <div
+      <div class="collapse collapse-content-container" id="collapse-user-id" aria-labelledby="account-summary"
-        class="collapse collapse-content-container"
+        data-bs-parent="#account-panel">
-        id="collapse-user-id"
-        aria-labelledby="account-summary"
-        data-bs-parent="#account-panel"
-      >
         <div class="collapse-item-container">
           <div class="collapse-item-input">
-            <input
+            <input type="text" v-model="userProfile.account.basic.FLID.identity" readonly="true" v-tooltip
-              type="text"
+              title="Generated automatically" delay='{"show":"500", "hide":"100"}' />
-              v-model="userProfile.account.basic.FLID.identity"
-              readonly="true"
-              v-tooltip
-              title="Generated automatically"
-              delay='{"show":"500", "hide":"100"}'
-            />
           </div>
         </div>
       </div>
-      <div
+      <div class="collapse collapse-content-container" id="collapse-password" aria-labelledby="account-summary"
-        class="collapse collapse-content-container"
+        data-bs-parent="#account-panel">
-        id="collapse-password"
-        aria-labelledby="account-summary"
-        data-bs-parent="#account-panel"
-      >
         <div class="collapse-item-container">
           <div class="collapse-item-input">
-            <input
+            <input type="password" v-model="passwordOperation.password" :placeholder="passwordOperation.placeholder"
-              type="password"
+              readonly="true" v-tooltip title="Click to edit" delay='{"show":"500", "hide":"100"}'
-              v-model="passwordOperation.password"
+              @click="edittingPassword($event)" @blur="stopEdittingPassword($event)" @keyup.enter="blurInput($event)" />
-              :placeholder="passwordOperation.placeholder"
-              readonly="true"
-              v-tooltip
-              title="Click to edit"
-              delay='{"show":"500", "hide":"100"}'
-              @click="edittingPassword($event)"
-              @blur="stopEdittingPassword($event)"
-              @keyup.enter="blurInput($event)"
-            />
             <svg-icon icon="msg-enter" class-name="enter-icon" />
           </div>
           <div class="collapse-item-input">
-            <input
+            <input type="password" v-model="passwordOperation.password2" :placeholder="passwordOperation.placeholder2"
-              type="password"
+              readonly=" true" v-tooltip title="Click to edit" delay='{"show":"500", "hide":"100"}'
-              v-model="passwordOperation.password2"
+              @click="edittingPassword2($event)" @blur="stopEdittingPassword2($event)" @keyup.enter="blurInput($event)"
-              :placeholder="passwordOperation.placeholder2"
+              ref="password2Input" />
-              readonly=" true"
-              v-tooltip
-              title="Click to edit"
-              delay='{"show":"500", "hide":"100"}'
-              @click="edittingPassword2($event)"
-              @blur="stopEdittingPassword2($event)"
-              @keyup.enter="blurInput($event)"
-              ref="password2Input"
-            />
             <svg-icon icon="msg-enter" class-name="enter-icon" />
             <p v-if="passwordOperation.message" class="error-message">
               {{ passwordOperation.message }}
@@ -133,104 +81,51 @@
           </div>
         </div>
       </div>
-      <div
+      <div class="collapse collapse-content-container" id="collapse-user-email" aria-labelledby="account-summary"
-        class="collapse collapse-content-container"
+        data-bs-parent="#account-panel">
-        id="collapse-user-email"
-        aria-labelledby="account-summary"
-        data-bs-parent="#account-panel"
-      >
         <div class="collapse-item-container">
           <div class="collapse-item-input">
-            <input
+            <input type="text" v-model="emailOperation.email.address" readonly="true" v-tooltip title="Click to update"
-              type="text"
+              delay='{"show":"500", "hide":"100"}' @click="edittingEmail($event)" @blur="stopEdittingEmail($event)"
-              v-model="emailOperation.email.address"
+              @keyup.enter="blurInput($event)" />
-              readonly="true"
-              v-tooltip
-              title="Click to update"
-              delay='{"show":"500", "hide":"100"}'
-              @click="edittingEmail($event)"
-              @blur="stopEdittingEmail($event)"
-              @keyup.enter="blurInput($event)"
-            />
           </div>
           <div v-if="emailOperation.verifyingMode" class="collapse-item-input">
-            <input
+            <input type="text" v-model="emailOperation.verificationCode" placeholder="verification code" v-tooltip
-              type="text"
+              title="Put the verification code received in the email" delay='{"show":"500", "hide":"100"}'
-              v-model="emailOperation.verificationCode"
+              @blur="stopEdittingEmailVerificationCode($event)" @keyup.enter="blurInput($event)" />
-              placeholder="verification code"
-              v-tooltip
-              title="Put the verification code received in the email"
-              delay='{"show":"500", "hide":"100"}'
-              @blur="stopEdittingEmailVerificationCode($event)"
-              @keyup.enter="blurInput($event)"
-            />
             <svg-icon icon="msg-enter" class-name="enter-icon" />
             <p v-if="emailOperation.message" class="error-message">{{ emailOperation.message }}</p>
           </div>
 
-          <button
+          <button v-if="!emailOperation.verifyingMode" class="btn btn-link" :disabled="emailOperation.email.verified"
-            v-if="!emailOperation.verifyingMode"
+            @click="startVerifyingEmail()" v-tooltip :title="emailOperation.email.verified
-            class="btn btn-link"
-            :disabled="emailOperation.email.verified"
-            @click="startVerifyingEmail()"
-            v-tooltip
-            :title="
-              emailOperation.email.verified
                 ? 'The email has been verified'
                 : 'The email needs to be verify'
-            "
+              " delay='{"show":"500", "hide":"100"}'>
-            delay='{"show":"500", "hide":"100"}'
-          >
             {{ emailOperation.email.verified ? 'Verified' : 'Verify' }}
           </button>
         </div>
       </div>
-      <div
+      <div class="collapse collapse-content-container" id="collapse-user-mobile" aria-labelledby="account-summary"
-        class="collapse collapse-content-container"
+        data-bs-parent="#account-panel">
-        id="collapse-user-mobile"
-        aria-labelledby="account-summary"
-        data-bs-parent="#account-panel"
-      >
         <div class="collapse-item-container">
           <div class="collapse-item-input">
-            <input
+            <input type="text" v-model="mobileOperation.mobile.number" readonly="true" v-tooltip
-              type="text"
+              title="Click to update, be sure to prepend country code, i.e. +86 for China"
-              v-model="mobileOperation.mobile.number"
+              @click="edittingMobile($event)" @blur="stopEdittingMobile($event)" @keyup.enter="blurInput($event)" />
-              readonly="true"
-              v-tooltip
-              title="Click to update"
-              @click="edittingMobile($event)"
-              @blur="stopEdittingMobile($event)"
-              @keyup.enter="blurInput($event)"
-            />
           </div>
           <div v-if="mobileOperation.verifyingMode" class="collapse-item-input">
-            <input
+            <input type="text" v-model="mobileOperation.verificationCode" placeholder="verification code" v-tooltip
-              type="text"
+              title="Put the verification code received in the mobile number" delay='{"show":"500", "hide":"100"}'
-              v-model="mobileOperation.verificationCode"
+              @blur="stopEdittingMobileVerificationCode($event)" @keyup.enter="blurInput($event)" />
-              placeholder="verification code"
-              v-tooltip
-              title="Put the verification code received in the mobile number"
-              delay='{"show":"500", "hide":"100"}'
-              @blur="stopEdittingMobileVerificationCode($event)"
-              @keyup.enter="blurInput($event)"
-            />
             <svg-icon icon="msg-enter" class-name="enter-icon" />
             <p v-if="mobileOperation.message" class="error-input">{{ mobileOperation.message }}</p>
           </div>
-          <button
+          <button v-if="!mobileOperation.verifyingMode" class="btn btn-link" :disabled="mobileOperation.mobile.verified"
-            v-if="!mobileOperation.verifyingMode"
+            @click="startVerifyingMobile()" v-tooltip :title="mobileOperation.mobile.verified
-            class="btn btn-link"
-            :disabled="mobileOperation.mobile.verified"
-            @click="startVerifyingMobile()"
-            v-tooltip
-            :title="
-              mobileOperation.mobile.verified
                 ? 'The mobile number has been verified'
                 : 'The mobile number needs to be verify'
-            "
+              " delay='{"show":"500", "hide":"100"}'>
-            delay='{"show":"500", "hide":"100"}'
-          >
             {{ mobileOperation.mobile.verified ? 'Verified' : 'Verify' }}
           </button>
         </div>
@@ -242,13 +137,8 @@
           <label for="personal-summary">{{ $t('Personal') }}</label>
         </div>
         <div class="panel-content-container" id="personal-summary">
-          <button
+          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-user-identity"
-            class="panel-item-container"
+            aria-expanded="false" aria-controls="collapse-user-identity">
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-user-identity"
-            aria-expanded="false"
-            aria-controls="collapse-user-identity"
-          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-user-fullname">{{
                 $t('Full name')
@@ -259,36 +149,20 @@
               </span>
             </div>
           </button>
-          <button
+          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-personal-user-photo"
-            class="panel-item-container"
+            aria-expanded="false" aria-controls="collapse-personal-user-photo">
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-personal-user-photo"
-            aria-expanded="false"
-            aria-controls="collapse-personal-user-photo"
-          >
             <div class="profile-item-container profile-photo-container">
-              <img
+              <img class="profile-photo" alt="user portrait" id="personal-photo-operation-image" :src="userProfile.account.basic.photo.base64
-                class="profile-photo"
+                  ? userProfile.account.basic.photo.base64
-                alt="user portrait"
+                  : profileUrl
-                id="personal-photo-operation-image"
+                " />
-                :src="
-                  userProfile.account.basic.photo.base64
-                    ? userProfile.account.basic.photo.base64
-                    : profileUrl
-                "
-              />
               <label class="profile-item-label" for="personal-photo-operation-image">{{
                 $t('Portrait')
               }}</label>
             </div>
           </button>
-          <button
+          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-personal-user-intro"
-            class="panel-item-container"
+            aria-expanded="false" aria-controls="collapse-personal-user-intro">
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-personal-user-intro"
-            aria-expanded="false"
-            aria-controls="collapse-personal-user-intro"
-          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="personal-summary-self-intro">{{
                 $t('Self-intro')
@@ -298,13 +172,8 @@
               </span>
             </div>
           </button>
-          <button
+          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-personal-earning-now"
-            class="panel-item-container"
+            aria-expanded="false" aria-controls="collapse-personal-earning-now">
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-personal-earning-now"
-            aria-expanded="false"
-            aria-controls="collapse-personal-earning-now"
-          >
             <div class="profile-item-container">
               <label class="profile-item-label" for="personal-summary-earning-now">{{
                 $t('Earning now')
@@ -316,198 +185,102 @@
           </button>
         </div>
       </div>
-      <div
+      <div class="collapse collapse-content-container" id="collapse-user-identity" aria-labelledby="personal-summary"
-        class="collapse collapse-content-container"
+        data-bs-parent="#personal-panel">
-        id="collapse-user-identity"
-        aria-labelledby="personal-summary"
-        data-bs-parent="#personal-panel"
-      >
         <div class="collapse-item-container">
           <div class="collapse-item-input">
-            <input
+            <input type="text" v-model="identityOperation.first_name" placeholder="First Name" v-tooltip
-              type="text"
+              title="Click to edit" delay='{"show":"500", "hide":"100"}' readonly="true"
-              v-model="identityOperation.first_name"
+              @click="edittingFirstname($event)" @blur="stopEdittingFirstname($event)"
-              placeholder="First Name"
+              @keyup.enter="blurInput($event)" />
-              v-tooltip
-              title="Click to edit"
-              delay='{"show":"500", "hide":"100"}'
-              readonly="true"
-              @click="edittingFirstname($event)"
-              @blur="stopEdittingFirstname($event)"
-              @keyup.enter="blurInput($event)"
-            />
           </div>
           <div class="collapse-item-input">
-            <input
+            <input type="text" v-model="identityOperation.last_name" placeholder="Last Name" readonly="true"
-              type="text"
+              @click="edittingLastname($event)" @blur="stopEdittingLastname($event)" @keyup.enter="blurInput($event)"
-              v-model="identityOperation.last_name"
+              v-tooltip title="Click to edit" delay='{"show":"500", "hide":"100"}' />
-              placeholder="Last Name"
-              readonly="true"
-              @click="edittingLastname($event)"
-              @blur="stopEdittingLastname($event)"
-              @keyup.enter="blurInput($event)"
-              v-tooltip
-              title="Click to edit"
-              delay='{"show":"500", "hide":"100"}'
-            />
           </div>
         </div>
       </div>
 
-      <div
+      <div class="collapse collapse-content-container" id="collapse-personal-user-photo"
-        class="collapse collapse-content-container"
+        aria-labelledby="personal-summary" data-bs-parent="#personal-panel">
-        id="collapse-personal-user-photo"
-        aria-labelledby="personal-summary"
-        data-bs-parent="#personal-panel"
-      >
         <div class="collapse-item-container">
           <label class="btn btn-link" for="personal-photo-operation-image">
-            <img
+            <img class="user-portrait-img" id="personal-photo-operation-image" alt="user portrait" :src="userProfile.account.basic.photo.base64
-              class="user-portrait-img"
+                ? userProfile.account.basic.photo.base64
-              id="personal-photo-operation-image"
+                : profileUrl
-              alt="user portrait"
+              " v-tooltip title="Click to update" @click="selectUserPhoto()" />
-              :src="
-                userProfile.account.basic.photo.base64
-                  ? userProfile.account.basic.photo.base64
-                  : profileUrl
-              "
-              v-tooltip
-              title="Click to update"
-              @click="selectUserPhoto()"
-            />
           </label>
-          <input
+          <input ref="uploadUserPhotoInput" type="file" :accept="identityOperation.photo.acceptableType" hidden
-            ref="uploadUserPhotoInput"
+            @change="onUserPhotoChange($event)" />
-            type="file"
-            :accept="identityOperation.photo.acceptableType"
-            hidden
-            @change="onUserPhotoChange($event)"
-          />
         </div>
       </div>
-      <div
+      <div class="collapse collapse-content-container" id="collapse-personal-user-intro"
-        class="collapse collapse-content-container"
+        aria-labelledby="personal-summary" data-bs-parent="#personal-panel">
-        id="collapse-personal-user-intro"
-        aria-labelledby="personal-summary"
-        data-bs-parent="#personal-panel"
-      >
         <div class="collapse-item-container">
           <div class="collapse-item-editor">
-            <freeleaps-editor
+            <freeleaps-editor v-model:content="personalOperation.self_intro.content_html"
-              v-model:content="personalOperation.self_intro.content_html"
+              :disabled="!personalOperation.self_intro.is_editing" />
-              :disabled="!personalOperation.self_intro.is_editing"
-            />
             <div class="btn-group-container">
-              <button
+              <button v-if="!personalOperation.self_intro.is_editing" class="btn btn-link"
-                v-if="!personalOperation.self_intro.is_editing"
+                @click="personalOperation.self_intro.is_editing = true">
-                class="btn btn-link"
-                @click="personalOperation.self_intro.is_editing = true"
-              >
                 {{ $t('Edit') }}
               </button>
-              <button
+              <button v-if="personalOperation.self_intro.is_editing" class="btn btn-link" type="button"
-                v-if="personalOperation.self_intro.is_editing"
+                data-bs-toggle="offcanvas" data-bs-target="#offcanvas-template" aria-controls="offcanvas-template">
-                class="btn btn-link"
-                type="button"
-                data-bs-toggle="offcanvas"
-                data-bs-target="#offcanvas-template"
-                aria-controls="offcanvas-template"
-              >
                 {{ $t('Templates') }}
               </button>
-              <button
+              <button v-if="personalOperation.self_intro.is_editing" @click="updateSelfIntro()" class="btn btn-link">
-                v-if="personalOperation.self_intro.is_editing"
-                @click="updateSelfIntro()"
-                class="btn btn-link"
-              >
                 {{ $t('Update') }}
               </button>
-              <button
+              <button v-if="personalOperation.self_intro.is_editing" @click="stopEdittingSelfintro($event)"
-                v-if="personalOperation.self_intro.is_editing"
+                class="btn btn-link">
-                @click="stopEdittingSelfintro($event)"
-                class="btn btn-link"
-              >
                 {{ $t('Cancel') }}
               </button>
             </div>
           </div>
         </div>
       </div>
-      <div
+      <div class="collapse collapse-content-container" id="collapse-personal-earning-now"
-        class="collapse collapse-content-container"
+        aria-labelledby="personal-summary" data-bs-parent="#personal-panel">
-        id="collapse-personal-earning-now"
-        aria-labelledby="personal-summary"
-        data-bs-parent="#personal-panel"
-      >
         <div class="collapse-checkbox-container">
           <div class="form-check form-switch">
-            <input
+            <input class="form-check-input" type="checkbox" role="switch" id="personal-earning-now-checkbox"
-              class="form-check-input"
+              v-model="personalOperation.accepting_request" @click="updateAcceptingRequest($event)"
-              type="checkbox"
+              :disabled="!paymentOperation.ready_to_receive_money" />
-              role="switch"
-              id="personal-earning-now-checkbox"
-              v-model="personalOperation.accepting_request"
-              @click="updateAcceptingRequest($event)"
-              :disabled="!paymentOperation.ready_to_receive_money"
-            />
             <label class="form-check-label" for="personal-earning-now-checkbox">
               <span>{{ $t('I want to be a service provider and earn money') }}</span>
-              <span v-if="personalOperation.show_stripe_status" style="color: red"
+              <span v-if="personalOperation.show_stripe_status" style="color: red">*&nbsp;{{ $t('Stripe account' +
-                >*&nbsp;{{ $t('Stripe account' + 'onboarding is not completed.') }}</span
+                'onboarding is not completed.') }}</span>
-              >
             </label>
           </div>
           <div class="flex-1" />
           <div class="collapse-item-input">
-            <input
+            <input id="personal-expected-salary" v-tooltip title="Click to edit" delay='{"show":"500", "hide":"100"}'
-              id="personal-expected-salary"
+              readonly="true" @click="edittingExpectedSalary($event)" @blur="stopedittingExpectedSalary($event)"
-              v-tooltip
+              @keyup.enter="blurInput($event)" v-model="personalOperation.expected_salary.hourly" />
-              title="Click to edit"
-              delay='{"show":"500", "hide":"100"}'
-              readonly="true"
-              @click="edittingExpectedSalary($event)"
-              @blur="stopedittingExpectedSalary($event)"
-              @keyup.enter="blurInput($event)"
-              v-model="personalOperation.expected_salary.hourly"
-            />
             <span class="collapse-item-currency">{{
               userProfile.account.provider.expected_salary.currency
             }}</span>
           </div>
         </div>
         <div class="collapse-item-container">
-          <label
+          <label v-if="Is_Wechat_QR_Code_Payment()" class="collapse-item-uploader" for="qr-uploader">
-            v-if="Is_Wechat_QR_Code_Payment()"
+            <img v-if="paymentOperation.wechat_qr_code_img.data" class="uploader-img-show"
-            class="collapse-item-uploader"
+              :src="paymentOperation.wechat_qr_code_img.data" />
-            for="qr-uploader"
+            <img v-if="!paymentOperation.wechat_qr_code_img.data" class="uploader-img-btn"
-          >
+              src="@/assets/images/qr-code.png" />
-            <img
-              v-if="paymentOperation.wechat_qr_code_img.data"
-              class="uploader-img-show"
-              :src="paymentOperation.wechat_qr_code_img.data"
-            />
-            <img
-              v-if="!paymentOperation.wechat_qr_code_img.data"
-              class="uploader-img-btn"
-              src="@/assets/images/qr-code.png"
-            />
             <span v-if="!paymentOperation.wechat_qr_code_img.data" class="upload-text-btn">{{
               $t('Upload QR code to receive payment')
             }}</span>
           </label>
-          <input
+          <input v-if="Is_Wechat_QR_Code_Payment()" ref="uploadWechatQRCodePhotoInput" type="file" id="qr-uploader"
-            v-if="Is_Wechat_QR_Code_Payment()"
+            :accept="paymentOperation.wechat_qr_code_img.acceptableType" hidden
-            ref="uploadWechatQRCodePhotoInput"
+            @change="onUploadWechatQRCodePhoto($event)" />
-            type="file"
-            id="qr-uploader"
-            :accept="paymentOperation.wechat_qr_code_img.acceptableType"
-            hidden
-            @change="onUploadWechatQRCodePhoto($event)"
-          />
         </div>
         <div v-if="Is_Stripe_Payment()" class="collapse-item-container">
-          <span>{{ $t('Have you linked your strip account?') }}</span
+          <span>{{ $t('Have you linked your strip account?') }}</span><button class="btn btn-link"
-          ><button class="btn btn-link" @click="visitStripe()">{{ $t('Visit Stripe') }}</button>
+            @click="visitStripe()">{{ $t('Visit Stripe') }}</button>
         </div>
         <div v-if="personalOperation.accepting_request" class="collapse-item-container">
           <span>{{
@@ -672,49 +445,26 @@
         </tbody>
       </table>
     </div>
-    <div
+    <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-template"
-      class="offcanvas offcanvas-end offcanvas-container"
+      aria-labelledby="offcanvas-template">
-      tabindex="-1"
-      id="offcanvas-template"
-      aria-labelledby="offcanvas-template"
-    >
       <div class="offcanvas-header">
         <h5 class="offcanvas-title" id="offcanvas-template">
           {{ $t('Apply self-intro template') }}
         </h5>
-        <button
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-          type="button"
-          class="btn-close"
-          data-bs-dismiss="offcanvas"
-          aria-label="Close"
-        ></button>
       </div>
       <div class="offcanvas-body">
         <div class="accordion" id="template-item-container">
-          <div
+          <div v-for="(template, index) in availableTemplates" :key="index" :id="'template' + index"
-            v-for="(template, index) in availableTemplates"
+            class="accordion-item">
-            :key="index"
-            :id="'template' + index"
-            class="accordion-item"
-          >
             <h2 class="accordion-header" :id="'heading' + index">
-              <button
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                class="accordion-button collapsed"
+                :data-bs-target="'#' + 'collapse' + index" aria-expanded="false" :aria-controls="'collapse' + index">
-                type="button"
-                data-bs-toggle="collapse"
-                :data-bs-target="'#' + 'collapse' + index"
-                aria-expanded="false"
-                :aria-controls="'collapse' + index"
-              >
                 {{ template.title }}
               </button>
             </h2>
-            <div
+            <div :id="'collapse' + index" class="accordion-collapse collapse" :aria-labelledby="'heading' + index"
-              :id="'collapse' + index"
+              data-bs-parent="#template-item-container">
-              class="accordion-collapse collapse"
-              :aria-labelledby="'heading' + index"
-              data-bs-parent="#template-item-container"
-            >
               <div class="accordion-body">
                 <button class="select-template-button" @click="selectTemplate(template)">
                   {{ $t('Apply') }}

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

@@ -1,74 +1,54 @@
 <template>
   <div class="message-container">
     <div class="message-hub-conainter">
-      <div v-if="conversations && conversations.length > 0" class="conversation-list-container">
+      <template v-if="!receiver_id">
-        <div
+        <div v-if="conversations && conversations.length > 0" class="conversation-list-container">
-          v-for="(conversation, index) in conversations"
+          <div v-for="(conversation, index) in conversations" :key="index" class="conversation-container" :class="{
-          :key="index"
-          class="conversation-container"
-          :class="{
             selected: selConversation?.id === conversation?.id
-          }"
+          }" @click="selectConversation(conversation)">
-          @click="selectConversation(conversation)"
+            <img class="participant-portrait" alt="user portrait" src="@/assets/profile.png" />
-        >
+            <div class="conversation-summary-container">
-          <img class="participant-portrait" alt="user portrait" src="@/assets/profile.png" />
+              <div class="conversation-summary-header-container">
-          <div class="conversation-summary-container">
+                <span class="participant-fullname">
-            <div class="conversation-summary-header-container">
+                  {{ conversation.subject }}
-              <span class="participant-fullname">
+                </span>
-                {{ conversation.subject }}
+                <span class="conversation-last-update-date">{{
-              </span>
+                  getDateFromFulltimeString(conversation.create_time)
-              <span class="conversation-last-update-date">{{
+                }}</span>
-                getDateFromFulltimeString(conversation.create_time)
+              </div>
-              }}</span>
+              <div class="conversation-summary-highlight-container">
-            </div>
+                {{ conversation.last_message?.message_body }}
-            <div class="conversation-summary-highlight-container">
+              </div>
-              {{ conversation.last_message?.message_body }}
             </div>
           </div>
         </div>
-      </div>
+        <div v-if="!conversations || conversations.length == 0" class="conversation-list-empty-container">
-      <div
+          {{ $t('Empty conversation') }}
-        v-if="!conversations || conversations.length == 0"
+        </div>
-        class="conversation-list-empty-container"
+      </template>
-      >
-        {{ $t('Empty conversation') }}
-      </div>
       <div class="message-panel-container">
         <div v-if="messages && messages.length > 0" class="message-thread-container">
-          <div
+          <div v-for="(item, index) in messages" :key="index" class="message-item-container"
-            v-for="(item, index) in messages"
+            :class="item.sender_id == userIdentityNote ? 'me' : ''">
-            :key="index"
-            class="message-item-container"
-            :class="item.sender_id == userIdentityNote ? 'me' : ''"
-          >
             <div class="message-item-header-container">
-              <img
+              <img class="message-item-sender-portrait" alt="user portrait" src="@/assets/profile.png" />
-                class="message-item-sender-portrait"
-                alt="user portrait"
-                src="@/assets/profile.png"
-              />
               <span class="message-item-sender-fullname">
                 {{ item.sender_firstname }}
                 {{ item.sender_lastname }}
               </span>
               <span class="message-item-create-time">
-                {{ getDateFromFulltimeString(item.create_time) }}</span
+                {{ getDateFromFulltimeString(item.create_time) }}</span>
-              >
             </div>
             <div class="message-item-message-body">{{ item.message_body }}</div>
           </div>
         </div>
         <div v-if="!messages || messages.length == 0" class="message-thread-empty-container">
-          {{ $t('Please choose conversation') }}
+          {{ receiver_id ? $t('Please input message') : $t('Please choose conversation') }}
         </div>
         <div class="message-writing-panel-container">
           <svg-icon icon="msg-enter" class-name="writing-message-enter" />
-          <input
+          <input class="writing-message-input" type="text" v-model="writtenMessage"
-            class="writing-message-input"
+            @keypress.enter="sendMessage(selConversation?.id)" />
-            type="text"
-            v-model="writtenMessage"
-            @keypress.enter="sendMessage(selConversation.id)"
-          />
         </div>
       </div>
     </div>
@@ -76,26 +56,27 @@
 </template>
 <script>
 import SvgIcon from '@/components/SvgIcon.vue'
-import { MessageHubApi, DateUtils } from '@/utils/index'
+import { MessageHubApi, DateUtils, requestHubUtils } from '@/utils/index'
 import { userUtils } from '@/utils/store/index'
 export default {
   components: { SvgIcon },
   name: 'MessageHub',
   props: {},
   mounted() {
-    this.$store.dispatch('basic/updateConversationsPage', {
+    const request = requestHubUtils.fetchRequestToMessage()
-      token: this.mnx_getUserAuthToken(),
+    if (request && request.user_id) {
-      cb: (error) => {
+      this.receiver_id = request.user_id
-        this.mnx_backendErrorHandler(error)
+    } else {
-      }
+      this.fetchConversations()
-    })
+    }
   },
   data() {
     return {
       userIdentityNote: this.mnx_getUserIdentity(),
       selConversation: null,
       messages: [],
-      writtenMessage: null
+      writtenMessage: null,
+      receiver_id: null
     }
   },
   computed: {
@@ -105,19 +86,28 @@ export default {
   },
   watch: {
     conversations(n_val) {
+      console.log('nval', n_val, this.selConversation, n_val[0].messages)
       if (!this.selConversation && n_val[0]) {
         this.selConversation = n_val[0]
         this.messages = n_val[0].messages || []
         this.clearUnreadMessageBy(n_val[0])
       } else {
         if (n_val?.[0] && this.selConversation?.id === n_val?.[0]?.id) {
-          this.messages = n_val[0].messages || []
+          // this.messages = n_val[0].messages || []
           this.clearUnreadMessageBy(n_val[0])
         }
       }
     }
   },
   methods: {
+    fetchConversations() {
+      this.$store.dispatch('basic/updateConversationsPage', {
+        token: this.mnx_getUserAuthToken(),
+        cb: (error) => {
+          this.mnx_backendErrorHandler(error)
+        }
+      })
+    },
     fetchMessageForConversation(conversation_id) {
       const jwt = userUtils.getJwtToken()
       MessageHubApi.fetchMessages(
@@ -145,20 +135,32 @@ export default {
     },
     sendMessage(conversation_id) {
       const jwt = userUtils.getJwtToken()
-      MessageHubApi.sendMessageToConversation(conversation_id, this.writtenMessage, jwt)
+      if (this.receiver_id) {
-        .then((response) => {
+        MessageHubApi.sendMessageToUser(this.receiver_id, this.writtenMessage, jwt)
-          let new_message = response.data
+          .then(() => {
-          this.messages.push({
+            requestHubUtils.fillRequestToMessage(null)
-            ...new_message.raw_data,
+            this.receiver_id = null
-            sender_firstname: new_message.sender_profile.first_name,
+            this.writtenMessage = null
-            sender_lastname: new_message.sender_profile.last_name,
-            sender_photo: new_message.sender_profile.photo
           })
-          this.writtenMessage = null
+          .catch((error) => {
-        })
+            this.mnx_backendErrorHandler(error)
-        .catch((error) => {
+          })
-          this.mnx_backendErrorHandler(error)
+      } else {
-        })
+        MessageHubApi.sendMessageToConversation(conversation_id, this.writtenMessage, jwt)
+          .then((response) => {
+            let new_message = response.data
+            this.messages.push({
+              ...new_message.raw_data,
+              sender_firstname: new_message.sender_profile.first_name,
+              sender_lastname: new_message.sender_profile.last_name,
+              sender_photo: new_message.sender_profile.photo
+            })
+            this.writtenMessage = null
+          })
+          .catch((error) => {
+            this.mnx_backendErrorHandler(error)
+          })
+      }
     },
     getDateFromFulltimeString(fulltime) {
       // FromJsonToHMDateString

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

@@ -76,6 +76,9 @@
                   <button class="make-proposal-button" type="button" @click="Propose(request)">
                     {{ $t('Propose') }}
                   </button>
+                  <button class="make-proposal-button" type="button" @click="messageTo(request)">
+                    {{ $t('Message') }}
+                  </button>
                   <div class="request-description-content" v-html="request.content"></div>
                   <div
                     class="pdf-actions"
@@ -251,6 +254,10 @@ export default {
       requestHubUtils.fillRequestToPropose(request)
       this.mnx_navToMakeProposal(request.id, proposingModelEnum.NO_LOADING)
     },
+    messageTo(request) {
+      requestHubUtils.fillRequestToMessage(request)
+      this.mnx_navToMessageHub()
+    },
     getDateFromFulltimeString(fulltime) {
       return DateUtils.FromJsonToDateString(fulltime)
     },

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

@@ -2,22 +2,13 @@
   <div class="workspace-container">
     <!-- <div class="workspace-header"></div> -->
     <div class="workspace-body">
-      <div
+      <div class="accordion accordion-list" v-for="(project, project_index) in projects" :key="project_index"
-        class="accordion accordion-list"
+        :id="project.id">
-        v-for="(project, project_index) in projects"
-        :key="project_index"
-        :id="project.id"
-      >
         <div class="accordion-item">
           <h2 class="accordion-header">
-            <button
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-              class="accordion-button collapsed"
+              :data-bs-target="'#collapse-' + project_index" aria-expanded="false"
-              type="button"
+              :aria-controls="'collapse-' + project_index">
-              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">
@@ -44,11 +35,7 @@
               </div>
             </button>
           </h2>
-          <div
+          <div :id="'collapse-' + project_index" class="accordion-collapse collapse" :data-bs-parent="'#' + project.id">
-            :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)">
@@ -56,30 +43,17 @@
                 </button>
               </div>
               <div class="project-request-container">
-                <div
+                <div class="project-request-content" v-html="project.request.content" @keyup="textAreaAdjust($event)"
-                  class="project-request-content"
+                  contenteditable="false"></div>
-                  v-html="project.request.content"
-                  @keyup="textAreaAdjust($event)"
-                  contenteditable="false"
-                ></div>
               </div>
               <div class="project-request-proposals-container">
-                <div
+                <div class="accordion" v-for="(proposal, proposal_index) in project.proposals" :key="proposal_index"
-                  class="accordion"
+                  :id="proposal.id">
-                  v-for="(proposal, proposal_index) in project.proposals"
-                  :key="proposal_index"
-                  :id="proposal.id"
-                >
                   <div class="accordion-item">
                     <h2 class="accordion-header">
-                      <button
+                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                        class="accordion-button collapsed"
+                        :data-bs-target="'#collapse-request-proposal' + proposal_index" aria-expanded="false"
-                        type="button"
+                        :aria-controls="'collapse-request-proposal' + proposal_index">
-                        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>
@@ -112,23 +86,16 @@
                         </div>
                       </button>
                     </h2>
-                    <div
+                    <div :id="'collapse-request-proposal' + proposal_index" class="accordion-collapse collapse"
-                      :id="'collapse-request-proposal' + proposal_index"
+                      :data-bs-parent="'#' + proposal.id">
-                      class="accordion-collapse collapse"
-                      :data-bs-parent="'#' + proposal.id"
-                    >
                       <div class="accordion-body">
                         <div class="request-proposal-action-container">
-                          <button
+                          <button class="request-proposal-action-reject"
-                            class="request-proposal-action-reject"
+                            @click="rejectProposal(project, proposal_index)">
-                            @click="rejectProposal(project, proposal_index)"
-                          >
                             {{ $t('reject') }}
                           </button>
-                          <button
+                          <button class="request-proposal-action-accept"
-                            class="request-proposal-action-accept"
+                            @click="acceptProposal(project, proposal_index)">
-                            @click="acceptProposal(project, proposal_index)"
-                          >
                             {{ $t('accept') }}
                           </button>
                         </div>
@@ -136,12 +103,9 @@
                           <div class="request-proposal-content" v-html="proposal.content" />
                         </div>
                         <div class="request-proposal-payment-plan">
-                          <div
+                          <div class="request-proposal-payment-plan-stage-container"
-                            class="request-proposal-payment-plan-stage-container"
+                            v-for="(stage, stage_index) in proposal.payment_plan.stages" :key="stage_index"
-                            v-for="(stage, stage_index) in proposal.payment_plan.stages"
+                            :id="'payment-stage-' + stage_index">
-                            :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">
@@ -176,12 +140,9 @@
                 <div class="request-proposal-content" v-html="project.proposal.content" />
               </div>
               <div class="request-proposal-payment-plan">
-                <div
+                <div class="request-proposal-payment-plan-stage-container"
-                  class="request-proposal-payment-plan-stage-container"
+                  v-for="(stage, stage_index) in project.proposal.payment_plan.stages" :key="stage_index"
-                  v-for="(stage, stage_index) in project.proposal.payment_plan.stages"
+                  :id="'payment-stage-' + stage_index">
-                  :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>
@@ -199,40 +160,24 @@
                 </div>
               </div>
               <div class="project-request-container">
-                <div
+                <div class="project-request-content" v-html="project.request.content" @keyup="textAreaAdjust($event)"
-                  class="project-request-content"
+                  contenteditable="false"></div>
-                  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
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                  class="accordion-button collapsed"
+                  data-bs-target="#collapse-project-invite-collaborator" aria-expanded="false"
-                  type="button"
+                  aria-controls="collapse-project-invite-collaborator">
-                  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
+                <div id="collapse-project-invite-collaborator" class="accordion-collapse collapse"
-                  id="collapse-project-invite-collaborator"
+                  data-bs-parent="#collapse-project-invite-collaborator">
-                  class="accordion-collapse collapse"
-                  data-bs-parent="#collapse-project-invite-collaborator"
-                >
                   <div class="project-invite-collaborator-form-container">
-                    <input
+                    <input type="text" v-model="newInviteCollaborator[project_index]"
-                      type="text"
+                      :placeholder="$t('Input E-mail to invite other')" @keydown.enter="
-                      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>
@@ -240,14 +185,9 @@
               <div class="accordion" id="workspace-project-accordion">
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                      class="accordion-button collapsed"
+                      data-bs-target="#collapse-project-milestone" aria-expanded="false"
-                      type="button"
+                      aria-controls="collapse-project-milestone">
-                      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>
@@ -283,26 +223,20 @@
                       </div>
                     </button>
                   </h2>
-                  <div
+                  <div id="collapse-project-milestone" class="accordion-collapse collapse"
-                    id="collapse-project-milestone"
+                    data-bs-parent="#collapse-project-milestone">
-                    class="accordion-collapse collapse"
-                    data-bs-parent="#collapse-project-milestone"
-                  >
                     <table class="project-milestones-table">
-                      <tbody
+                      <tbody v-for="milestone in project.project.progress.milestones" :key="milestone.index"
-                        v-for="milestone in project.project.progress.milestones"
+                        :id="'project-milestone-' + milestone.index">
-                        :key="milestone.index"
-                        :id="'project-milestone-' + milestone.index"
-                      >
                         <tr>
                           <td>
                             <div class="project-milestones-table-content">
                               <span class="project-milestones-table-label">{{
                                 $t('Milestone')
-                              }}</span>
+                                }}</span>
                               <span class="project-milestones-table-span">{{
                                 milestone.index
-                              }}</span>
+                                }}</span>
                             </div>
                           </td>
                           <td>
@@ -310,7 +244,7 @@
                               <span class="project-milestones-table-label">{{ $t('Goal') }}</span>
                               <span class="project-milestones-table-span">{{
                                 milestone.description
-                              }}</span>
+                                }}</span>
                             </div>
                           </td>
                           <td>
@@ -318,14 +252,14 @@
                               <span class="project-milestones-table-label">{{ $t('Status') }}</span>
                               <span class="project-milestones-table-span">{{
                                 fromIntToMilestoneStatus(milestone.status)
-                              }}</span>
+                                }}</span>
                             </div>
                           </td>
                           <td>
                             <div class="project-milestones-table-content">
                               <span class="project-milestones-table-label">{{
                                 $t('Payment')
-                              }}</span>
+                                }}</span>
                               <span class="project-milestones-table-span">
                                 {{ milestone.actual_paid }} / {{ milestone.expected_payment }}
                                 {{ project.project.progress.payment_currency }}
@@ -337,20 +271,15 @@
                               <span class="project-milestones-table-label">{{ $t('Update') }}</span>
                               <span class="project-milestones-table-span">{{
                                 getDateFromFulltimeString(milestone.update_time)
-                              }}</span>
+                                }}</span>
                             </div>
                           </td>
                           <td>
                             <div class="project-milestones-table-content">
                               <span class="project-milestones-table-label">{{ $t('Action') }}</span>
-                              <button
+                              <button class="project-milestones-table-btn" :disabled="isMilestoneActionButtonDisabled(project.project, milestone)
-                                class="btn btn-link"
+                                " :hidden="isMilestoneActionButtonHidden(project.project, milestone)"
-                                :disabled="
+                                @click="handleMilestoneAction(project.project, milestone)">
-                                  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> -->
@@ -361,10 +290,8 @@
                           <td colspan="6">
                             <div class="project-milestones-qrcode-content">
                               <img :src="this.qrCode.imageUrl" alt="freeleaps" />
-                              <button
+                              <button class="project-milestones-qrcode-button"
-                                class="project-milestones-qrcode-button"
+                                @click="handlePaymentAction(project.project, milestone)">
-                                @click="handlePaymentAction(project.project, milestone)"
-                              >
                                 {{ $t('Mark As Paid') }}
                               </button>
                             </div>
@@ -376,14 +303,9 @@
                 </div>
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                      class="accordion-button collapsed"
+                      data-bs-target="#collapse-project-code" aria-expanded="false"
-                      type="button"
+                      aria-controls="collapse-project-code">
-                      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>
@@ -406,22 +328,13 @@
                       </div>
                     </button>
                   </h2>
-                  <div
+                  <div id="collapse-project-code" class="accordion-collapse collapse"
-                    id="collapse-project-code"
+                    data-bs-parent="#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
+                        <button v-if="project.project.code?.git_url" class="project-code-copy-git-url"
-                          v-if="project.project.code?.git_url"
+                          @click="copyCodeGit(project)" v-tooltip title="Copied" trigger="click"
-                          class="project-code-copy-git-url"
+                          delay='{"show":"500", "hide":"100"}'>
-                          @click="copyCodeGit(project)"
-                          v-tooltip
-                          title="Copied"
-                          trigger="click"
-                          delay='{"show":"500", "hide":"100"}'
-                        >
                           {{ $t('copy git url') }}
                         </button>
                       </div>
@@ -437,14 +350,9 @@
                 </div>
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                      class="accordion-button collapsed"
+                      data-bs-target="#collapse-project-issue" aria-expanded="false"
-                      type="button"
+                      aria-controls="collapse-project-issue">
-                      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>
@@ -467,11 +375,8 @@
                       </div>
                     </button>
                   </h2>
-                  <div
+                  <div id="collapse-project-issue" class="accordion-collapse collapse"
-                    id="collapse-project-issue"
+                    data-bs-parent="#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') }}
@@ -1253,6 +1158,7 @@ export default {
   text-align: center;
   @extend .initiate-button;
 }
+
 // ...
 
 .project-milestones-table {
@@ -1569,4 +1475,19 @@ export default {
   width: 100%;
   height: 357px;
 }
+
+.project-milestones-table-btn {
+  @extend .btn;
+  @extend .btn-primary;
+  width: fit-content;
+  padding: 0 8px;
+  border-radius: 0;
+
+  &:disabled {
+    color: #000000;
+    border-color: #d9d9d9;
+    background-color: #d9d9d9;
+    opacity: 1;
+  }
+}
 </style>

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

@@ -4,14 +4,8 @@
       <div class="accordion" id="workspace-project-accordion">
         <div v-if="project.id" class="accordion-item">
           <h2 class="accordion-header">
-            <button
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-              class="accordion-button collapsed"
+              data-bs-target="#collapse-project-issue" aria-expanded="false" 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('Summary') }}</label>
@@ -38,41 +32,25 @@
               </div>
             </button>
           </h2>
-          <div
+          <div id="collapse-project-issue" class="accordion-collapse collapse" data-bs-parent="#collapse-project-issue">
-            id="collapse-project-issue"
-            class="accordion-collapse collapse"
-            data-bs-parent="#collapse-project-issue"
-          >
             <div class="project-invite-collaborator-containter">
-              <button
+              <button class="accordion-button collapsed" type="button" ref="issueAddBtn" data-bs-toggle="collapse"
-                class="accordion-button collapsed"
+                data-bs-target="#collapse-project-new-issue" aria-expanded="false"
-                type="button"
+                aria-controls="collapse-project-issue">
-                ref="issueAddBtn"
-                data-bs-toggle="collapse"
-                data-bs-target="#collapse-project-new-issue"
-                aria-expanded="false"
-                aria-controls="collapse-project-issue"
-              >
                 <div class="project-invite-collaborator">+ {{ $t('Add Issue') }}</div>
               </button>
-              <div
+              <div id="collapse-project-new-issue" class="accordion-collapse collapse"
-                id="collapse-project-new-issue"
+                data-bs-parent="#collapse-project-new-issue">
-                class="accordion-collapse collapse"
-                data-bs-parent="#collapse-project-new-issue"
-              >
                 <div class="project-issue-description-container">
                   <div class="project-issue-description">
                     <label class="project-item-label">{{ $t('New issue description') }}</label>
-                    <button
+                    <button class="project-issue-description-btn" @click="
-                      class="project-issue-description-btn"
+                      postNewIssue(
-                      @click="
+                        project.request.product_id,
-                        postNewIssue(
+                        project.project_id,
-                          project.request.product_id,
+                        newIssueDescriptions
-                          project.project_id,
+                      )
-                          newIssueDescriptions
+                      ">
-                        )
-                      "
-                    >
                       {{ $t('Submit') }}
                     </button>
                   </div>
@@ -81,22 +59,13 @@
               </div>
             </div>
             <div>
-              <div
+              <div class="project-issue-container" v-for="(issue, issue_index) in project.project.issue.open_issues"
-                class="project-issue-container"
+                :key="issue_index" :id="'project-issue-' + issue_index">
-                v-for="(issue, issue_index) in project.project.issue.open_issues"
-                :key="issue_index"
-                :id="'project-issue-' + issue_index"
-              >
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                      class="accordion-button collapsed"
+                      :data-bs-target="'#collapse-project-issue-details' + issue_index" aria-expanded="false"
-                      type="button"
+                      aria-controls="collapse-project-issue-details">
-                      data-bs-toggle="collapse"
-                      :data-bs-target="'#collapse-project-issue-details' + issue_index"
-                      aria-expanded="false"
-                      aria-controls="collapse-project-issue-details"
-                    >
                       <div class="project-issue-header dashed-container">
                         <div class="project-issue-title">
                           <label class="project-item-label">{{ $t('Issue title') }}</label>
@@ -117,33 +86,21 @@
                       </div>
                     </button>
                   </h2>
-                  <div
+                  <div :id="'collapse-project-issue-details' + issue_index" class="accordion-collapse collapse"
-                    :id="'collapse-project-issue-details' + issue_index"
+                    :data-bs-parent="'#collapse-project-issue-details' + issue_index">
-                    class="accordion-collapse collapse"
-                    :data-bs-parent="'#collapse-project-issue-details' + issue_index"
-                  >
                     <div class="project-issue-description-container">
                       <div class="project-issue-description">
                         <label class="project-item-label">{{ $t('Issue description') }}</label>
-                        <button
+                        <button :hidden="!showIssueActionButton(project.project, issue, 'Resolve')"
-                          :hidden="!showIssueActionButton(project.project, issue, 'Resolve')"
+                          class="project-issue-description-btn" @click="setProjectIssueStatus(issue.id, 1)">
-                          class="project-issue-description-btn"
-                          @click="setProjectIssueStatus(issue.id, 1)"
-                        >
                           {{ $t('Resolve') }}
                         </button>
-                        <button
+                        <button :hidden="!showIssueActionButton(project.project, issue, 'Confirm')"
-                          :hidden="!showIssueActionButton(project.project, issue, 'Confirm')"
+                          class="project-issue-description-btn" @click="setProjectIssueStatus(issue.id, 2)">
-                          class="project-issue-description-btn"
-                          @click="setProjectIssueStatus(issue.id, 2)"
-                        >
                           {{ $t('Confirm') }}
                         </button>
-                        <button
+                        <button :hidden="!showIssueActionButton(project.project, issue, 'Reopen')"
-                          :hidden="!showIssueActionButton(project.project, issue, 'Reopen')"
+                          class="project-issue-description-btn" @click="setProjectIssueStatus(issue.id, 0)">
-                          class="project-issue-description-btn"
-                          @click="setProjectIssueStatus(issue.id, 0)"
-                        >
                           {{ $t('Reopen') }}
                         </button>
                       </div>
@@ -235,17 +192,17 @@ export default {
     showIssueActionButton(project, issue, button_text) {
       switch (issue.status) {
         case projectIssueStatusEnum.OPEN:
-          if (button_text === this.$t('Resolve')) {
+          if (button_text === 'Resolve') {
             return project.providers.includes(project.current_user_id)
           }
           break
         case 1:
-          if (button_text === this.$t('Reopen') || button_text === this.$t('Confirm')) {
+          if (button_text === 'Reopen' || button_text === 'Confirm') {
             return project.issuers.includes(project.current_user_id)
           }
           break
         case projectIssueStatusEnum.CLOSED:
-          if (button_text === this.$t('Reopen')) {
+          if (button_text === 'Reopen') {
             return project.issuers.includes(project.current_user_id)
           }
           break
@@ -315,6 +272,7 @@ export default {
   margin-bottom: 0;
   font-weight: bold;
 }
+
 .project-invite-collaborator-containter {
   border-bottom: 1px solid #e1e1e1;
 
@@ -323,6 +281,7 @@ export default {
     // color: $primary;
     // background-color: #F3F6FF;
     padding: 12px !important;
+
     &::after {
       display: none;
     }
@@ -345,6 +304,7 @@ export default {
   border-radius: 3px;
   align-items: center;
   border: 1px solid #e7e8eb;
+
   &:focus-within {
     border: 1px solid #1748f8;
   }
@@ -356,6 +316,7 @@ export default {
     outline: none;
     box-shadow: none;
   }
+
   .project-invite-enter {
     width: 16px;
     height: 16px;
@@ -378,6 +339,7 @@ export default {
   @extend .initiate-button;
   @extend .float-end;
 }
+
 .project-new-issue-textarea {
   height: 100px;
   width: 100%;
@@ -406,10 +368,12 @@ export default {
     margin-bottom: 12px;
   }
 }
+
 .project-issue-description {
   display: flex;
   align-items: center;
   margin-bottom: 12px;
+
   label {
     flex: 1;
   }

frontend/src/utils/backend/messageHub.js

@@ -44,6 +44,18 @@ class MessageHubApi {
     )
     return request
   }
+
+  static sendMessageToUser(receiver_id, message, jwt) {
+    // let jwt = userUtils.getJwtToken()
+    const request = backendAxios.post(
+      '/api/messages/send-message-to-user',
+      { receiver_id, message },
+      {
+        headers: { Authorization: `Bearer ${jwt}` }
+      }
+    )
+    return request
+  }
 }
 
 export { MessageHubApi }

frontend/src/utils/store/requestHubUtils.js

@@ -13,6 +13,14 @@ class RequestHubUtils {
     return this.request_to_propose
   }
 
+  fillRequestToMessage(request) {
+    this.request_to_message = request
+  }
+
+  fetchRequestToMessage() {
+    return this.request_to_message
+  }
+
   fillExistingProposal(proposal) {
     this.existing_proposal = proposal
   }

start_frontend.sh

@@ -9,6 +9,8 @@ then
 else
     source env.sh
 fi
+export VITE_API_URL='http://127.0.0.1:8002'
+export VITE_WEBSOCKET_URL='http://127.0.0.1:8002'
 pushd frontend
 npm install
 npm update