Necessary frontend change for template language

This commit is contained in:
jetli 2024-07-08 08:43:28 +08:00
parent bf613fdd4c
commit 793588bccd
4 changed files with 199 additions and 591 deletions

View File

@ -7,13 +7,8 @@
<span v-if="accountNeedAttention">!</span> <span v-if="accountNeedAttention">!</span>
</div> </div>
<div class="panel-content-container" id="account-summary"> <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"> <div class="profile-item-container">
<label class="profile-item-label" for="account-summary-user-id">{{ <label class="profile-item-label" for="account-summary-user-id">{{
$t('User ID') $t('User ID')
@ -23,13 +18,8 @@
</span> </span>
</div> </div>
</button> </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"> <div class="profile-item-container">
<label class="profile-item-label" for="account-summary-password">{{ <label class="profile-item-label" for="account-summary-password">{{
$t('Password') $t('Password')
@ -37,13 +27,8 @@
<span class="profile-item-span" id="account-summary-password"> ******** </span> <span class="profile-item-span" id="account-summary-password"> ******** </span>
</div> </div>
</button> </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"> <div class="profile-item-container">
<label class="profile-item-label" for="account-summary-email">{{ <label class="profile-item-label" for="account-summary-email">{{
$t('Email') $t('Email')
@ -53,13 +38,8 @@
</span> </span>
</div> </div>
</button> </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"> <div class="profile-item-container">
<label class="profile-item-label" for="account-summary-mobile">{{ <label class="profile-item-label" for="account-summary-mobile">{{
$t('Mobile') $t('Mobile')
@ -71,61 +51,29 @@
</button> </button>
</div> </div>
</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-container">
<div class="collapse-item-input"> <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> </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-container">
<div class="collapse-item-input"> <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" /> <svg-icon icon="msg-enter" class-name="enter-icon" />
</div> </div>
<div class="collapse-item-input"> <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" /> <svg-icon icon="msg-enter" class-name="enter-icon" />
<p v-if="passwordOperation.message" class="error-message"> <p v-if="passwordOperation.message" class="error-message">
{{ passwordOperation.message }} {{ passwordOperation.message }}
@ -133,104 +81,50 @@
</div> </div>
</div> </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-container">
<div class="collapse-item-input"> <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>
<div v-if="emailOperation.verifyingMode" class="collapse-item-input"> <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" /> <svg-icon icon="msg-enter" class-name="enter-icon" />
<p v-if="emailOperation.message" class="error-message">{{ emailOperation.message }}</p> <p v-if="emailOperation.message" class="error-message">{{ emailOperation.message }}</p>
</div> </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 has been verified'
: 'The email needs to be verify' : 'The email needs to be verify'
" " delay='{"show":"500", "hide":"100"}'>
delay='{"show":"500", "hide":"100"}'
>
{{ emailOperation.email.verified ? 'Verified' : 'Verify' }} {{ emailOperation.email.verified ? 'Verified' : 'Verify' }}
</button> </button>
</div> </div>
</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-container">
<div class="collapse-item-input"> <div class="collapse-item-input">
<input <input type="text" v-model="mobileOperation.mobile.number" readonly="true" v-tooltip title="Click to update"
type="text" @click="edittingMobile($event)" @blur="stopEdittingMobile($event)" @keyup.enter="blurInput($event)" />
v-model="mobileOperation.mobile.number"
readonly="true"
v-tooltip
title="Click to update"
@click="edittingMobile($event)"
@blur="stopEdittingMobile($event)"
@keyup.enter="blurInput($event)"
/>
</div> </div>
<div v-if="mobileOperation.verifyingMode" class="collapse-item-input"> <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" /> <svg-icon icon="msg-enter" class-name="enter-icon" />
<p v-if="mobileOperation.message" class="error-input">{{ mobileOperation.message }}</p> <p v-if="mobileOperation.message" class="error-input">{{ mobileOperation.message }}</p>
</div> </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 has been verified'
: 'The mobile number needs to be verify' : 'The mobile number needs to be verify'
" " delay='{"show":"500", "hide":"100"}'>
delay='{"show":"500", "hide":"100"}'
>
{{ mobileOperation.mobile.verified ? 'Verified' : 'Verify' }} {{ mobileOperation.mobile.verified ? 'Verified' : 'Verify' }}
</button> </button>
</div> </div>
@ -242,13 +136,8 @@
<label for="personal-summary">{{ $t('Personal') }}</label> <label for="personal-summary">{{ $t('Personal') }}</label>
</div> </div>
<div class="panel-content-container" id="personal-summary"> <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"> <div class="profile-item-container">
<label class="profile-item-label" for="account-summary-user-fullname">{{ <label class="profile-item-label" for="account-summary-user-fullname">{{
$t('Full name') $t('Full name')
@ -259,36 +148,20 @@
</span> </span>
</div> </div>
</button> </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"> <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"
alt="user portrait"
id="personal-photo-operation-image"
:src="
userProfile.account.basic.photo.base64
? userProfile.account.basic.photo.base64 ? userProfile.account.basic.photo.base64
: profileUrl : profileUrl
" " />
/>
<label class="profile-item-label" for="personal-photo-operation-image">{{ <label class="profile-item-label" for="personal-photo-operation-image">{{
$t('Portrait') $t('Portrait')
}}</label> }}</label>
</div> </div>
</button> </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"> <div class="profile-item-container">
<label class="profile-item-label" for="personal-summary-self-intro">{{ <label class="profile-item-label" for="personal-summary-self-intro">{{
$t('Self-intro') $t('Self-intro')
@ -298,13 +171,8 @@
</span> </span>
</div> </div>
</button> </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"> <div class="profile-item-container">
<label class="profile-item-label" for="personal-summary-earning-now">{{ <label class="profile-item-label" for="personal-summary-earning-now">{{
$t('Earning now') $t('Earning now')
@ -316,198 +184,102 @@
</button> </button>
</div> </div>
</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-container">
<div class="collapse-item-input"> <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>
<div class="collapse-item-input"> <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> </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"> <div class="collapse-item-container">
<label class="btn btn-link" for="personal-photo-operation-image"> <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"
id="personal-photo-operation-image"
alt="user portrait"
:src="
userProfile.account.basic.photo.base64
? userProfile.account.basic.photo.base64 ? userProfile.account.basic.photo.base64
: profileUrl : profileUrl
" " v-tooltip title="Click to update" @click="selectUserPhoto()" />
v-tooltip
title="Click to update"
@click="selectUserPhoto()"
/>
</label> </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>
<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-container">
<div class="collapse-item-editor"> <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"> <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') }} {{ $t('Edit') }}
</button> </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') }} {{ $t('Templates') }}
</button> </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') }} {{ $t('Update') }}
</button> </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') }} {{ $t('Cancel') }}
</button> </button>
</div> </div>
</div> </div>
</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="collapse-checkbox-container">
<div class="form-check form-switch"> <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"> <label class="form-check-label" for="personal-earning-now-checkbox">
<span>{{ $t('I want to be a service provider and earn money') }}</span> <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> </label>
</div> </div>
<div class="flex-1" /> <div class="flex-1" />
<div class="collapse-item-input"> <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">{{ <span class="collapse-item-currency">{{
userProfile.account.provider.expected_salary.currency userProfile.account.provider.expected_salary.currency
}}</span> }}</span>
</div> </div>
</div> </div>
<div class="collapse-item-container"> <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">{{ <span v-if="!paymentOperation.wechat_qr_code_img.data" class="upload-text-btn">{{
$t('Upload QR code to receive payment') $t('Upload QR code to receive payment')
}}</span> }}</span>
</label> </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>
<div v-if="Is_Stripe_Payment()" class="collapse-item-container"> <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>
<div v-if="personalOperation.accepting_request" class="collapse-item-container"> <div v-if="personalOperation.accepting_request" class="collapse-item-container">
<span>{{ <span>{{
@ -672,49 +444,26 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-template"
class="offcanvas offcanvas-end offcanvas-container" aria-labelledby="offcanvas-template">
tabindex="-1"
id="offcanvas-template"
aria-labelledby="offcanvas-template"
>
<div class="offcanvas-header"> <div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvas-template"> <h5 class="offcanvas-title" id="offcanvas-template">
{{ $t('Apply self-intro template') }} {{ $t('Apply self-intro template') }}
</h5> </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>
<div class="offcanvas-body"> <div class="offcanvas-body">
<div class="accordion" id="template-item-container"> <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"> <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 }} {{ template.title }}
</button> </button>
</h2> </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"> <div class="accordion-body">
<button class="select-template-button" @click="selectTemplate(template)"> <button class="select-template-button" @click="selectTemplate(template)">
{{ $t('Apply') }} {{ $t('Apply') }}
@ -1305,6 +1054,7 @@ export default {
margin-bottom: 12px; margin-bottom: 12px;
text-align: left; text-align: left;
} }
.panel-content-container { .panel-content-container {
display: flex; display: flex;
align-items: center; align-items: center;
@ -1325,6 +1075,7 @@ export default {
&:hover { &:hover {
background-color: #f3f6ff; background-color: #f3f6ff;
} }
// &.active { // &.active {
// background-color: #F3F6FF; // background-color: #F3F6FF;
// } // }
@ -1356,6 +1107,7 @@ export default {
color: #666666; color: #666666;
line-height: 1; line-height: 1;
} }
.profile-item-span { .profile-item-span {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
@ -1369,6 +1121,7 @@ export default {
} }
} }
} }
.collapse-content-container { .collapse-content-container {
margin: 12px -12px -12px -12px; margin: 12px -12px -12px -12px;
border-top: 1px solid #e7e8eb; border-top: 1px solid #e7e8eb;
@ -1456,6 +1209,7 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
opacity: 0.78; opacity: 0.78;
} }
@ -1465,11 +1219,13 @@ export default {
height: 50px; height: 50px;
margin-bottom: 12px; margin-bottom: 12px;
} }
.upload-text-btn { .upload-text-btn {
font-size: 14px; font-size: 14px;
color: $primary; color: $primary;
margin: 0 12px; margin: 0 12px;
} }
.uploader-img-show { .uploader-img-show {
width: 150px; width: 150px;
height: 150px; height: 150px;
@ -1502,6 +1258,7 @@ export default {
line-height: 1; line-height: 1;
margin-bottom: 3px; margin-bottom: 3px;
} }
.panel-table-span { .panel-table-span {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;

View File

@ -1,106 +1,57 @@
<template> <template>
<div class="making-proposal-container offcanvas-parent"> <div class="making-proposal-container offcanvas-parent">
<div class="making-proposal-content"> <div class="making-proposal-content">
<div <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-copy-existing"
class="offcanvas offcanvas-end offcanvas-container" aria-labelledby="offcanvas-copy-existing">
tabindex="-1"
id="offcanvas-copy-existing"
aria-labelledby="offcanvas-copy-existing"
>
<div class="offcanvas-header"> <div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvas-copy-existing"> <h5 class="offcanvas-title" id="offcanvas-copy-existing">
{{ $t('Copy from existing proposals') }} {{ $t('Copy from existing proposals') }}
</h5> </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>
<div class="offcanvas-body"> <div class="offcanvas-body">
<div class="accordion" id="existing-proposal-item-container"> <div class="accordion" id="existing-proposal-item-container">
<div <div v-for="(existingProposal, index) in existingProposals" :key="index" :id="'existing-proposal' + index"
v-for="(existingProposal, index) in existingProposals" class="accordion-item">
:key="index"
:id="'existing-proposal' + index"
class="accordion-item"
>
<h2 class="accordion-header" :id="'existing-heading' + index"> <h2 class="accordion-header" :id="'existing-heading' + index">
<button <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
class="accordion-button collapsed" :data-bs-target="'#' + 'existing-proposal-collapse' + index" aria-expanded="false"
type="button" :aria-controls="'collapse' + index">
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> <span class="dashed-container">{{ existingProposal.request.title }}</span>
</button> </button>
</h2> </h2>
<div <div :id="'existing-proposal-collapse' + index" class="accordion-collapse collapse"
:id="'existing-proposal-collapse' + index" :aria-labelledby="'existing-heading' + index" data-bs-parent="#existing-proposal-item-container">
class="accordion-collapse collapse"
:aria-labelledby="'existing-heading' + index"
data-bs-parent="#existing-proposal-item-container"
>
<div class="accordion-body"> <div class="accordion-body">
<button class="copy-existing-button" @click="copyProposal(existingProposal)"> <button class="copy-existing-button" @click="copyProposal(existingProposal)">
{{ $t('Copy') }} {{ $t('Copy') }}
</button> </button>
<div <div class="existing-request-content-text" v-html="existingProposal.content"></div>
class="existing-request-content-text"
v-html="existingProposal.content"
></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-template"
class="offcanvas offcanvas-end offcanvas-container" aria-labelledby="offcanvas-template">
tabindex="-1"
id="offcanvas-template"
aria-labelledby="offcanvas-template"
>
<div class="offcanvas-header"> <div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvas-template"> <h5 class="offcanvas-title" id="offcanvas-template">
{{ $t('Apply proposal template') }} {{ $t('Apply proposal template') }}
</h5> </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>
<div class="offcanvas-body"> <div class="offcanvas-body">
<div class="accordion" id="template-item-container"> <div class="accordion" id="template-item-container">
<div <div v-for="(template, index) in templates" :key="index" :id="'template' + index" class="accordion-item">
v-for="(template, index) in templates"
:key="index"
:id="'template' + index"
class="accordion-item"
>
<h2 class="accordion-header" :id="'heading' + index"> <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"
>
<span class="dashed-container">{{ template.title }}</span> <span class="dashed-container">{{ template.title }}</span>
</button> </button>
</h2> </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"> <div class="accordion-body">
<button class="load-template-button" @click="applyTemplate(template)"> <button class="load-template-button" @click="applyTemplate(template)">
{{ $t('Apply') }} {{ $t('Apply') }}
@ -116,22 +67,14 @@
<div class="accordion accordion-list" id="accordion-request-container"> <div class="accordion accordion-list" id="accordion-request-container">
<div class="accordion-item"> <div class="accordion-item">
<h2 class="accordion-header"> <h2 class="accordion-header">
<button <button class="accordion-button" type="button" data-bs-toggle="collapse"
class="accordion-button" data-bs-target="#collapse-request-content" aria-expanded="false"
type="button" aria-controls="collapse-request-content">
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> <span class="dashed-container">{{ request.title }}</span>
</button> </button>
</h2> </h2>
<div <div id="collapse-request-content" class="accordion-collapse collapse"
id="collapse-request-content" data-bs-parent="#accordion-request-container">
class="accordion-collapse collapse"
data-bs-parent="#accordion-request-container"
>
<div class="accordion-body"> <div class="accordion-body">
<div class="request-content" v-html="request.content"></div> <div class="request-content" v-html="request.content"></div>
</div> </div>
@ -143,23 +86,13 @@
<div class="proposal-header-container"> <div class="proposal-header-container">
<label class="proposal-label">{{ $t('Proposal') }}:</label> <label class="proposal-label">{{ $t('Proposal') }}:</label>
<div class="header-bar"> <div class="header-bar">
<button <button class="btn btn-link" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-template"
class="btn btn-link" aria-controls="offcanvas-template">
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-template"
aria-controls="offcanvas-template"
>
<svg-icon icon="btn-templates" /> <svg-icon icon="btn-templates" />
{{ $t('Templates') }} {{ $t('Templates') }}
</button> </button>
<button <button class="btn btn-link" type="button" data-bs-toggle="offcanvas"
class="btn btn-link" data-bs-target="#offcanvas-copy-existing" aria-controls="offcanvas-copy-existing">
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-copy-existing"
aria-controls="offcanvas-copy-existing"
>
<svg-icon icon="btn-history" /> <svg-icon icon="btn-history" />
{{ $t('Copy') }} {{ $t('Copy') }}
</button> </button>
@ -175,12 +108,8 @@
<div class="form-group"> <div class="form-group">
<div class="input-group-container"> <div class="input-group-container">
<div class="form-floating"> <div class="form-floating">
<input <input class="input-email" :id="`stage-payment-content-${index}`" type="number"
class="input-email" v-model="stage.payment" />
:id="`stage-payment-content-${index}`"
type="number"
v-model="stage.payment"
/>
<label :for="`stage-payment-content-${index}`">{{ $t('Payment') }}</label> <label :for="`stage-payment-content-${index}`">{{ $t('Payment') }}</label>
</div> </div>
<span class="btn-start">{{ stage.currency }}</span> <span class="btn-start">{{ stage.currency }}</span>
@ -191,12 +120,8 @@
<div class="form-group"> <div class="form-group">
<div class="input-group-container"> <div class="input-group-container">
<div class="form-floating"> <div class="form-floating">
<input <input class="input-email" :id="`stage-duration-content-${index}`" type="number"
class="input-email" v-model="stage.duration_in_days" />
:id="`stage-duration-content-${index}`"
type="number"
v-model="stage.duration_in_days"
/>
<label :for="`stage-duration-content-${index}`">{{ $t('Duration') }}</label> <label :for="`stage-duration-content-${index}`">{{ $t('Duration') }}</label>
</div> </div>
<span class="btn-start">{{ $t('day(s)') }}</span> <span class="btn-start">{{ $t('day(s)') }}</span>
@ -207,12 +132,7 @@
<div class="form-group"> <div class="form-group">
<div class="input-group-container"> <div class="input-group-container">
<div class="form-floating"> <div class="form-floating">
<input <input class="input-email" :id="`stage-note-content-${index}`" type="text" v-model="stage.note" />
class="input-email"
:id="`stage-note-content-${index}`"
type="text"
v-model="stage.note"
/>
<label :for="`stage-note-content-${index}`">{{ $t('Notes') }}</label> <label :for="`stage-note-content-${index}`">{{ $t('Notes') }}</label>
</div> </div>
</div> </div>
@ -247,12 +167,7 @@
<span v-if="uploadFile">{{ uploadFile.name }}</span> <span v-if="uploadFile">{{ uploadFile.name }}</span>
<input type="file" hidden @change="handleFileUpload" /> <input type="file" hidden @change="handleFileUpload" />
</label> </label>
<svg-icon <svg-icon v-if="uploadFile" icon="delete" class-name="delete-icon" @click.stop="clearFile" />
v-if="uploadFile"
icon="delete"
class-name="delete-icon"
@click.stop="clearFile"
/>
</div> </div>
<!-- <label for="file-upload" class="file-upload-label">Upload File:</label> <!-- <label for="file-upload" class="file-upload-label">Upload File:</label>
<input type="file" id="file-upload" class="file-upload-input" @change="handleFileUpload" /> --> <input type="file" id="file-upload" class="file-upload-input" @change="handleFileUpload" /> -->

View File

@ -1,48 +1,26 @@
<template> <template>
<div class="request-issue-container offcanvas-parent"> <div class="request-issue-container offcanvas-parent">
<div <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-copy-existing"
class="offcanvas offcanvas-end offcanvas-container" aria-labelledby="offcanvas-copy-existing">
tabindex="-1"
id="offcanvas-copy-existing"
aria-labelledby="offcanvas-copy-existing"
>
<div class="offcanvas-header"> <div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvas-copy-existing"> <h5 class="offcanvas-title" id="offcanvas-copy-existing">
{{ $t('Copy from existing request') }} {{ $t('Copy from existing request') }}
</h5> </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>
<div class="offcanvas-body"> <div class="offcanvas-body">
<div class="accordion" id="existing-request-item-container"> <div class="accordion" id="existing-request-item-container">
<div <div v-for="(existingRequest, index) in existingRequests" :key="index" :id="'existing-request' + index"
v-for="(existingRequest, index) in existingRequests" class="accordion-item">
:key="index"
:id="'existing-request' + index"
class="accordion-item"
>
<h2 class="accordion-header" :id="'existing-heading' + index"> <h2 class="accordion-header" :id="'existing-heading' + index">
<button <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
class="accordion-button collapsed" :data-bs-target="'#' + 'existing-request-collapse' + index" aria-expanded="false"
type="button" :aria-controls="'collapse' + index">
data-bs-toggle="collapse"
:data-bs-target="'#' + 'existing-request-collapse' + index"
aria-expanded="false"
:aria-controls="'collapse' + index"
>
<span class="dashed-container">{{ existingRequest.title }}</span> <span class="dashed-container">{{ existingRequest.title }}</span>
</button> </button>
</h2> </h2>
<div <div :id="'existing-request-collapse' + index" class="accordion-collapse collapse"
:id="'existing-request-collapse' + index" :aria-labelledby="'existing-heading' + index" data-bs-parent="#existing-request-item-container">
class="accordion-collapse collapse"
:aria-labelledby="'existing-heading' + index"
data-bs-parent="#existing-request-item-container"
>
<div class="accordion-body"> <div class="accordion-body">
<button class="btn btn-link" @click="copyRequest(existingRequest)"> <button class="btn btn-link" @click="copyRequest(existingRequest)">
{{ $t('Copy') }} {{ $t('Copy') }}
@ -54,52 +32,26 @@
</div> </div>
</div> </div>
</div> </div>
<div <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-template"
class="offcanvas offcanvas-end offcanvas-container" aria-labelledby="offcanvas-template">
tabindex="-1"
id="offcanvas-template"
aria-labelledby="offcanvas-template"
>
<div class="offcanvas-header"> <div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvas-template">{{ $t('Apply request template') }}</h5> <h5 class="offcanvas-title" id="offcanvas-template">{{ $t('Apply request template') }}</h5>
<button <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
type="button"
class="btn-close"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div> </div>
<div class="offcanvas-body"> <div class="offcanvas-body">
<div class="accordion" id="template-item-container"> <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"> <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"
>
<span class="dashed-container">{{ template.title }}</span> <span class="dashed-container">{{ template.title }}</span>
</button> </button>
</h2> </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"> <div class="accordion-body">
<button <button class="select-template-button btn btn-link" @click="selectTemplate(template)">
class="select-template-button btn btn-link"
@click="selectTemplate(template)"
>
{{ $t('Apply') }} {{ $t('Apply') }}
</button> </button>
<div class="template-content-textarea" v-html="template.content"></div> <div class="template-content-textarea" v-html="template.content"></div>
@ -110,42 +62,23 @@
</div> </div>
</div> </div>
<div class="action-bar"> <div class="action-bar">
<input-selector <input-selector :select-list="products" :selected="selectedProduct" @selectedChange="selectedChange" />
:select-list="products"
:selected="selectedProduct"
@selectedChange="selectedChange"
/>
<div class="upload-contianer"> <div class="upload-contianer">
<label class="btn btn-link"> <label class="btn btn-link">
<span v-if="!uploadFile">{{ $t('Upload file') }}</span> <span v-if="!uploadFile">{{ $t('Upload file') }}</span>
<span v-if="uploadFile">{{ uploadFile.name }}</span> <span v-if="uploadFile">{{ uploadFile.name }}</span>
<input type="file" hidden @change="handleFileUpload" /> <input type="file" hidden @change="handleFileUpload" />
</label> </label>
<svg-icon <svg-icon v-if="uploadFile" icon="delete" class-name="delete-icon" @click.stop="clearFile" />
v-if="uploadFile"
icon="delete"
class-name="delete-icon"
@click.stop="clearFile"
/>
</div> </div>
<div class="flex-1" /> <div class="flex-1" />
<button <button class="action-button btn btn-link" type="button" data-bs-toggle="offcanvas"
class="action-button btn btn-link" data-bs-target="#offcanvas-template" aria-controls="offcanvas-template">
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-template"
aria-controls="offcanvas-template"
>
<svg-icon icon="btn-templates" /> <svg-icon icon="btn-templates" />
{{ $t('Templates') }} {{ $t('Templates') }}
</button> </button>
<button <button class="action-button btn btn-link" type="button" data-bs-toggle="offcanvas"
class="action-button btn btn-link" data-bs-target="#offcanvas-copy-existing" aria-controls="offcanvas-copy-existing">
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-copy-existing"
aria-controls="offcanvas-copy-existing"
>
<svg-icon icon="btn-history" /> <svg-icon icon="btn-history" />
{{ $t('Copy') }} {{ $t('Copy') }}
</button> </button>
@ -233,7 +166,7 @@ export default {
}) })
}, },
fetchTemplates() { fetchTemplates() {
WorksapceApi.fetchTemplates('') WorksapceApi.fetchTemplates('', window.location.host)
.then((response) => { .then((response) => {
this.availableTemplates = response.data this.availableTemplates = response.data
}) })
@ -331,10 +264,12 @@ export default {
.delete-icon { .delete-icon {
color: $primary; color: $primary;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
opacity: 0.78; opacity: 0.78;
} }
} }
.request-issue-container { .request-issue-container {
@extend .flex-colum-container; @extend .flex-colum-container;
box-shadow: 0px 0px 24px 0px rgba(212, 211, 227, 0.5); box-shadow: 0px 0px 24px 0px rgba(212, 211, 227, 0.5);

View File

@ -192,12 +192,13 @@ class WorksapceApi {
return request return request
} }
static fetchTemplates(tags) { static fetchTemplates(tags, host) {
let jwt = userUtils.getJwtToken() let jwt = userUtils.getJwtToken()
const request = backendAxios.post( const request = backendAxios.post(
'/api/workspace/request/fetch-templates-for-request', '/api/workspace/request/fetch-templates-for-request',
{ {
tags: tags tags: tags,
host: host
}, },
{ {
headers: { Authorization: `Bearer ${jwt}` } headers: { Authorization: `Bearer ${jwt}` }