added support for self intro template
This commit is contained in:
Zhigang Wang
parent
9c37af9477
commit
1947c242db
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div v-if="userProfile" class="user-profile-container">
|
||||
<div v-if="userProfile" class="user-profile-container offcanvas-parent">
|
||||
<div class="account-panel-container" id="account-panel">
|
||||
<div class="account-summary-bar-container">
|
||||
<div class="account-summary-header-container">
|
||||
@ -7,8 +7,13 @@
|
||||
<span v-if="accountNeedAttention" class="account-summary-header-attention-span">!</span>
|
||||
</div>
|
||||
<div class="account-summary-content-container" id="account-summary">
|
||||
<button class="profile-item-container-button" data-bs-toggle="collapse" data-bs-target="#collapse-user-id"
|
||||
aria-expanded="false" aria-controls="collapse-user-id">
|
||||
<button
|
||||
class="profile-item-container-button"
|
||||
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">User ID</label>
|
||||
<span class="profile-item-span" id="account-summary-user-id">
|
||||
@ -16,15 +21,25 @@
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<button class="profile-item-container-button-1" data-bs-toggle="collapse" data-bs-target="#collapse-password"
|
||||
aria-expanded="false" aria-controls="collapse-password">
|
||||
<button
|
||||
class="profile-item-container-button-1"
|
||||
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">Password</label>
|
||||
<span class="profile-item-span" id="account-summary-password"> ******** </span>
|
||||
</div>
|
||||
</button>
|
||||
<button class="profile-item-container-button-4" data-bs-toggle="collapse" data-bs-target="#collapse-user-email"
|
||||
aria-expanded="false" aria-controls="collapse-user-email">
|
||||
<button
|
||||
class="profile-item-container-button-4"
|
||||
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">Email</label>
|
||||
<span class="profile-item-span" id="account-summary-email">
|
||||
@ -32,8 +47,13 @@
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<button class="profile-item-container-button" data-bs-toggle="collapse" data-bs-target="#collapse-user-mobile"
|
||||
aria-expanded="false" aria-controls="collapse-user-mobile">
|
||||
<button
|
||||
class="profile-item-container-button"
|
||||
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">Mobile</label>
|
||||
<span class="profile-item-span" id="account-summary-mobile">
|
||||
@ -43,33 +63,71 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse" id="collapse-user-id" aria-labelledby="account-summary" data-bs-parent="#account-panel">
|
||||
<div
|
||||
class="collapse"
|
||||
id="collapse-user-id"
|
||||
aria-labelledby="account-summary"
|
||||
data-bs-parent="#account-panel"
|
||||
>
|
||||
<div class="user-id-password-operation-pannel-container">
|
||||
<div class="user-id-password-operation-container">
|
||||
<div class="user-id-operation-content-container">
|
||||
<label class="profile-item-label" for="user-id-operation-input">User ID(FILD)</label>
|
||||
<input class="user-id-operation-input" type="text" v-model="userProfile.account.basic.FLID.identity"
|
||||
readonly="true" v-tooltip title="Generated automatically" delay='{"show":"500", "hide":"100"}' />
|
||||
<input
|
||||
class="user-id-operation-input"
|
||||
type="text"
|
||||
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" id="collapse-password" aria-labelledby="account-summary" data-bs-parent="#account-panel">
|
||||
<div
|
||||
class="collapse"
|
||||
id="collapse-password"
|
||||
aria-labelledby="account-summary"
|
||||
data-bs-parent="#account-panel"
|
||||
>
|
||||
<div class="user-id-password-operation-pannel-container">
|
||||
<div class="user-id-password-operation-container">
|
||||
<div class="user-password-operation-content-container">
|
||||
<label class="profile-item-label" for="user-password-operation-input">Password</label>
|
||||
<input class="user-password-operation-input" type="password" v-model="passwordOperation.password"
|
||||
: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)" />
|
||||
<input
|
||||
class="user-password-operation-input"
|
||||
type="password"
|
||||
v-model="passwordOperation.password"
|
||||
: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)"
|
||||
/>
|
||||
</div>
|
||||
<div class="user-password-operation-content-container">
|
||||
<label class="profile-item-label" for="user-id-operation-input">Repeat password</label>
|
||||
<input class="user-password-operation-input" type="password" v-model="passwordOperation.password2"
|
||||
:placeholder="passwordOperation.placeholder2" 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" />
|
||||
<label class="profile-item-label" for="user-id-operation-input"
|
||||
>Repeat password</label
|
||||
>
|
||||
<input
|
||||
class="user-password-operation-input"
|
||||
type="password"
|
||||
v-model="passwordOperation.password2"
|
||||
:placeholder="passwordOperation.placeholder2"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="passwordOperation.message" class="error-input">
|
||||
@ -77,29 +135,67 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse" id="collapse-user-email" aria-labelledby="account-summary" data-bs-parent="#account-panel">
|
||||
<div
|
||||
class="collapse"
|
||||
id="collapse-user-email"
|
||||
aria-labelledby="account-summary"
|
||||
data-bs-parent="#account-panel"
|
||||
>
|
||||
<div class="user-email-operation-container">
|
||||
<div class="user-email-operation-content-container">
|
||||
<div class="user-email-operation-content-email-container">
|
||||
<label class="profile-item-label" for="user-email-operation-input">Email</label>
|
||||
<input class="user-email-operation-input" type="text" v-model="emailOperation.email.address" readonly="true"
|
||||
v-tooltip title="Click to update" delay='{"show":"500", "hide":"100"}' @click="edittingEmail($event)"
|
||||
@blur="stopEdittingEmail($event)" @keyup.enter="blurInput($event)" />
|
||||
<input
|
||||
class="user-email-operation-input"
|
||||
type="text"
|
||||
v-model="emailOperation.email.address"
|
||||
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="user-email-operation-content-code-container">
|
||||
<label class="profile-item-label" for="user-email-verification-code-operation-input">Code</label>
|
||||
<input class="user-email-operation-input" type="text" v-model="emailOperation.verificationCode"
|
||||
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)" />
|
||||
<div
|
||||
v-if="emailOperation.verifyingMode"
|
||||
class="user-email-operation-content-code-container"
|
||||
>
|
||||
<label class="profile-item-label" for="user-email-verification-code-operation-input"
|
||||
>Code</label
|
||||
>
|
||||
<input
|
||||
class="user-email-operation-input"
|
||||
type="text"
|
||||
v-model="emailOperation.verificationCode"
|
||||
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)"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="!emailOperation.verifyingMode" class="user-email-operation-content-verify-container">
|
||||
<label class="profile-item-label" for="user-email-operation-input">Verification</label>
|
||||
<button class="user-email-operation-verified-button" :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"}'>
|
||||
<div
|
||||
v-if="!emailOperation.verifyingMode"
|
||||
class="user-email-operation-content-verify-container"
|
||||
>
|
||||
<label class="profile-item-label" for="user-email-operation-input"
|
||||
>Verification</label
|
||||
>
|
||||
<button
|
||||
class="user-email-operation-verified-button"
|
||||
: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"}'
|
||||
>
|
||||
{{ emailOperation.email.verified ? 'Verified' : 'Verify' }}
|
||||
</button>
|
||||
</div>
|
||||
@ -107,29 +203,68 @@
|
||||
<p v-if="emailOperation.message" class="error-input">{{ emailOperation.message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse" id="collapse-user-mobile" aria-labelledby="account-summary" data-bs-parent="#account-panel">
|
||||
<div
|
||||
class="collapse"
|
||||
id="collapse-user-mobile"
|
||||
aria-labelledby="account-summary"
|
||||
data-bs-parent="#account-panel"
|
||||
>
|
||||
<div class="user-mobile-operation-pannel-container">
|
||||
<div class="user-mobile-operation-content-container">
|
||||
<div class="user-mobile-operation-content-number-container">
|
||||
<label class="profile-item-label" for="user-email-operation-number-input">Mobile</label>
|
||||
<input class="user-mobile-operation-number-input" type="text" v-model="mobileOperation.mobile.number"
|
||||
readonly="true" v-tooltip title="Click to update" @click="edittingMobile($event)"
|
||||
@blur="stopEdittingMobile($event)" @keyup.enter="blurInput($event)" />
|
||||
<label class="profile-item-label" for="user-email-operation-number-input"
|
||||
>Mobile</label
|
||||
>
|
||||
<input
|
||||
class="user-mobile-operation-number-input"
|
||||
type="text"
|
||||
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 v-if="mobileOperation.verifyingMode" class="user-mobile-operation-content-code-container">
|
||||
<label class="profile-item-label" for="user-mobile-verification-code-operation-input">Code</label>
|
||||
<input class="user-mobile-operation-code-input" type="text" v-model="mobileOperation.verificationCode"
|
||||
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)" />
|
||||
<div
|
||||
v-if="mobileOperation.verifyingMode"
|
||||
class="user-mobile-operation-content-code-container"
|
||||
>
|
||||
<label class="profile-item-label" for="user-mobile-verification-code-operation-input"
|
||||
>Code</label
|
||||
>
|
||||
<input
|
||||
class="user-mobile-operation-code-input"
|
||||
type="text"
|
||||
v-model="mobileOperation.verificationCode"
|
||||
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)"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="!mobileOperation.verifyingMode" class="user-mobile-operation-content-verify-container">
|
||||
<label class="profile-item-label" for="user-mobile-operation-input">Verification</label>
|
||||
<button class="user-mobile-operation-verified-button" :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"}'>
|
||||
<div
|
||||
v-if="!mobileOperation.verifyingMode"
|
||||
class="user-mobile-operation-content-verify-container"
|
||||
>
|
||||
<label class="profile-item-label" for="user-mobile-operation-input"
|
||||
>Verification</label
|
||||
>
|
||||
<button
|
||||
class="user-mobile-operation-verified-button"
|
||||
: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"}'
|
||||
>
|
||||
{{ mobileOperation.mobile.verified ? 'Verified' : 'Verify' }}
|
||||
</button>
|
||||
</div>
|
||||
@ -144,10 +279,17 @@
|
||||
<label class="personal-summary-header-label" for="personal-summary">Personal</label>
|
||||
</div>
|
||||
<div class="personal-summary-content-container" id="personal-summary">
|
||||
<button class="profile-item-container-button" data-bs-toggle="collapse" data-bs-target="#collapse-user-identity"
|
||||
aria-expanded="false" aria-controls="collapse-user-identity">
|
||||
<button
|
||||
class="profile-item-container-button"
|
||||
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">Full name</label>
|
||||
<label class="profile-item-label" for="account-summary-user-fullname"
|
||||
>Full name</label
|
||||
>
|
||||
<span class="profile-item-span" id="account-summary-user-fullname">
|
||||
{{ userProfile.account.basic.first_name }}
|
||||
{{ userProfile.account.basic.last_name }}
|
||||
@ -155,18 +297,30 @@
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button class="profile-item-container-button-1" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapse-personal-user-photo" aria-expanded="false"
|
||||
aria-controls="collapse-personal-user-photo">
|
||||
<button
|
||||
class="profile-item-container-button-1"
|
||||
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">
|
||||
<label class="profile-item-label" for="personal-photo-operation-image">Photo</label>
|
||||
<img class="personal-summary-user-portrait-img" alt="user portrait" id="personal-photo-operation-image"
|
||||
src="@/assets/images/default-user-portrait.png" />
|
||||
<img
|
||||
class="personal-summary-user-portrait-img"
|
||||
alt="user portrait"
|
||||
id="personal-photo-operation-image"
|
||||
src="@/assets/images/default-user-portrait.png"
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
<button class="profile-item-container-button-4" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapse-personal-user-intro" aria-expanded="false"
|
||||
aria-controls="collapse-personal-user-intro">
|
||||
<button
|
||||
class="profile-item-container-button-4"
|
||||
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">Self-intro</label>
|
||||
<span class="profile-item-span" id="personal-summary-self-intro">
|
||||
@ -174,11 +328,17 @@
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<button class="profile-item-container-button" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapse-personal-earning-now" aria-expanded="false"
|
||||
aria-controls="collapse-personal-earning-now">
|
||||
<button
|
||||
class="profile-item-container-button"
|
||||
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">Earning now</label>
|
||||
<label class="profile-item-label" for="personal-summary-earning-now"
|
||||
>Earning now</label
|
||||
>
|
||||
<span class="profile-item-span" id="personal-summary-earning-now">
|
||||
{{ userProfile.account.provider.accepting_request ? 'Yes' : 'No' }}
|
||||
</span>
|
||||
@ -186,77 +346,169 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse" id="collapse-user-identity" aria-labelledby="personal-summary"
|
||||
data-bs-parent="#personal-panel">
|
||||
<div
|
||||
class="collapse"
|
||||
id="collapse-user-identity"
|
||||
aria-labelledby="personal-summary"
|
||||
data-bs-parent="#personal-panel"
|
||||
>
|
||||
<div class="user-identity-operation-container">
|
||||
<div class="user-identity-operation-content-container">
|
||||
<div class="user-first-name-operation-container">
|
||||
<label class="profile-item-label" for="user-first-name-operation-input">First name</label>
|
||||
<input class="user-first-name-operation-input" type="text" v-model="identityOperation.first_name" v-tooltip
|
||||
title="Click to edit" delay='{"show":"500", "hide":"100"}' readonly="true"
|
||||
@click="edittingFirstname($event)" @blur="stopEdittingFirstname($event)"
|
||||
@keyup.enter="blurInput($event)" />
|
||||
<label class="profile-item-label" for="user-first-name-operation-input"
|
||||
>First name</label
|
||||
>
|
||||
<input
|
||||
class="user-first-name-operation-input"
|
||||
type="text"
|
||||
v-model="identityOperation.first_name"
|
||||
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="user-last-name-operation-container">
|
||||
<label class="profile-item-label" for="user-last-name-operation-input">Last name</label>
|
||||
<input class="user-last-name-operation-input" type="text" v-model="identityOperation.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"}' />
|
||||
<label class="profile-item-label" for="user-last-name-operation-input"
|
||||
>Last name</label
|
||||
>
|
||||
<input
|
||||
class="user-last-name-operation-input"
|
||||
type="text"
|
||||
v-model="identityOperation.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" id="collapse-personal-user-photo" aria-labelledby="personal-summary"
|
||||
data-bs-parent="#personal-panel">
|
||||
<div
|
||||
class="collapse"
|
||||
id="collapse-personal-user-photo"
|
||||
aria-labelledby="personal-summary"
|
||||
data-bs-parent="#personal-panel"
|
||||
>
|
||||
<div class="personal-photo-operation-container">
|
||||
<label class="profile-item-label" for="personal-photo-operation-image">Photo</label>
|
||||
<img class="personal-operation-user-portrait-img" id="personal-photo-operation-image" alt="user portrait"
|
||||
src="@/assets/images/default-user-portrait.png" v-tooltip title="Click to update"
|
||||
@click="selectUserPhoto()" />
|
||||
<input ref="uploadUserPhotoInput" type="file" :accept="identityOperation.photo.acceptableType"
|
||||
style="display: none" @change="onUserPhotoChange($event)" />
|
||||
<img
|
||||
class="personal-operation-user-portrait-img"
|
||||
id="personal-photo-operation-image"
|
||||
alt="user portrait"
|
||||
src="@/assets/images/default-user-portrait.png"
|
||||
v-tooltip
|
||||
title="Click to update"
|
||||
@click="selectUserPhoto()"
|
||||
/>
|
||||
<input
|
||||
ref="uploadUserPhotoInput"
|
||||
type="file"
|
||||
:accept="identityOperation.photo.acceptableType"
|
||||
style="display: none"
|
||||
@change="onUserPhotoChange($event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse" id="collapse-personal-user-intro" aria-labelledby="personal-summary"
|
||||
data-bs-parent="#personal-panel">
|
||||
<div
|
||||
class="collapse"
|
||||
id="collapse-personal-user-intro"
|
||||
aria-labelledby="personal-summary"
|
||||
data-bs-parent="#personal-panel"
|
||||
>
|
||||
<div class="personal-self-intro-operation-container">
|
||||
<div class="personal-self-intro-operation-header-container">
|
||||
<label class="personal-self-intro-content-label" for="personal-self-intro-editor">Self-intro</label>
|
||||
<div v-if="personalOperation.self_intro.is_editing" class="self-intro-in-header-editing-action-container">
|
||||
<button class="personal-self-intro-template-button">templates</button>
|
||||
<label class="personal-self-intro-content-label" for="personal-self-intro-editor"
|
||||
>Self-intro</label
|
||||
>
|
||||
<div
|
||||
v-if="personalOperation.self_intro.is_editing"
|
||||
class="self-intro-in-header-editing-action-container"
|
||||
>
|
||||
<button
|
||||
class="personal-self-intro-template-button"
|
||||
type="button"
|
||||
data-bs-toggle="offcanvas"
|
||||
data-bs-target="#offcanvas-template"
|
||||
aria-controls="offcanvas-template"
|
||||
>
|
||||
templates
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="personalOperation.self_intro.is_editing" class="self-intro-in-content-editing-action-container">
|
||||
<div
|
||||
v-if="personalOperation.self_intro.is_editing"
|
||||
class="self-intro-in-content-editing-action-container"
|
||||
>
|
||||
<button @click="updateSelfIntro()" class="in-context-foward-button">Update</button>
|
||||
<button @click="stopEdittingSelfintro($event)" class="in-context-back-button">Cancel</button>
|
||||
<button @click="stopEdittingSelfintro($event)" class="in-context-back-button">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<div class="personal-self-intro-content-editor" id="personal-self-intro-editor" ref="personal_self_intro_editor_div"
|
||||
v-html="personalOperation.self_intro.content_html" contenteditable="false" v-tooltip title="Click to edit"
|
||||
delay='{"show":"500", "hide":"100"}' @click="edittingSelfintro($event)" @keyup="keyUpOnSelfIntroEditor($event)"></div>
|
||||
<div
|
||||
class="personal-self-intro-content-editor"
|
||||
id="personal-self-intro-editor"
|
||||
ref="personal_self_intro_editor_div"
|
||||
v-html="personalOperation.self_intro.content_html"
|
||||
contenteditable="false"
|
||||
v-tooltip
|
||||
title="Click to edit"
|
||||
delay='{"show":"500", "hide":"100"}'
|
||||
@click="edittingSelfintro($event)"
|
||||
@keyup="keyUpOnSelfIntroEditor($event)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse" id="collapse-personal-earning-now" aria-labelledby="personal-summary"
|
||||
data-bs-parent="#personal-panel">
|
||||
<div
|
||||
class="collapse"
|
||||
id="collapse-personal-earning-now"
|
||||
aria-labelledby="personal-summary"
|
||||
data-bs-parent="#personal-panel"
|
||||
>
|
||||
<div class="personal-earning-now-operation-container">
|
||||
<div class="personal-earning-now-content-container">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" 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">I want to be a service provider and earn
|
||||
money</label>
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
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"
|
||||
>I want to be a service provider and earn money</label
|
||||
>
|
||||
<br />
|
||||
<label v-if="personalOperation.show_stripe_status" style="color: red">
|
||||
* Stripe account onboarding is not completed.</label>
|
||||
* Stripe account onboarding is not completed.</label
|
||||
>
|
||||
</div>
|
||||
<div class="personal-expected-salary-content-container">
|
||||
<label class="profile-item-label" for="personal-expected-salary">Expected hourly salary</label>
|
||||
<label class="profile-item-label" for="personal-expected-salary"
|
||||
>Expected hourly salary</label
|
||||
>
|
||||
<div class="input-group">
|
||||
<input class="personal-expected-salary-input" id="personal-expected-salary" v-tooltip
|
||||
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" />
|
||||
<input
|
||||
class="personal-expected-salary-input"
|
||||
id="personal-expected-salary"
|
||||
v-tooltip
|
||||
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="input-group-text">{{
|
||||
userProfile.account.provider.expected_salary.currency
|
||||
}}</span>
|
||||
@ -264,128 +516,182 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="personal-payment-container">
|
||||
<img v-if="Is_Wechat_QR_Code_Payment()" class="personal-payment-wechat-qr-code-image"
|
||||
:src="paymentOperation.wechat_qr_code_img.data" @click="selectWechatQRCodePhoto()" />
|
||||
<input v-if="Is_Wechat_QR_Code_Payment()" ref="uploadWechatQRCodePhotoInput" type="file"
|
||||
:accept="paymentOperation.wechat_qr_code_img.acceptableType" style="display: none"
|
||||
@change="onUploadWechatQRCodePhoto($event)" />
|
||||
<img
|
||||
v-if="Is_Wechat_QR_Code_Payment()"
|
||||
class="personal-payment-wechat-qr-code-image"
|
||||
:src="paymentOperation.wechat_qr_code_img.data"
|
||||
@click="selectWechatQRCodePhoto()"
|
||||
/>
|
||||
<input
|
||||
v-if="Is_Wechat_QR_Code_Payment()"
|
||||
ref="uploadWechatQRCodePhotoInput"
|
||||
type="file"
|
||||
:accept="paymentOperation.wechat_qr_code_img.acceptableType"
|
||||
style="display: none"
|
||||
@change="onUploadWechatQRCodePhoto($event)"
|
||||
/>
|
||||
|
||||
<span>Have you linked your strip account?</span><button v-if="Is_Stripe_Payment()"
|
||||
@click="visitStripe()">Visit Stripe</button>
|
||||
<span>Have you linked your strip account?</span
|
||||
><button v-if="Is_Stripe_Payment()" @click="visitStripe()">Visit Stripe</button>
|
||||
</div>
|
||||
<span v-if="personalOperation.accepting_request" class="operation-note-text">You are a service provider now.
|
||||
Please review your self-intro to reflect your skills to
|
||||
deliver projects.</span>
|
||||
<span v-if="personalOperation.accepting_request" class="operation-note-text"
|
||||
>You are a service provider now. Please review your self-intro to reflect your skills to
|
||||
deliver projects.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion" id="accordion-achievement-panel">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-achievement"
|
||||
aria-expanded="true" aria-controls="collapse-achievement">
|
||||
<button
|
||||
class="accordion-button"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#collapse-achievement"
|
||||
aria-expanded="true"
|
||||
aria-controls="collapse-achievement"
|
||||
>
|
||||
<div class="achievement-bar-container">
|
||||
<div class="achievement-summary-item-container">
|
||||
<label class="profile-item-label" for="achievement-stay-on-operation">On Freeleaps</label>
|
||||
<label class="profile-item-label" for="achievement-stay-on-operation"
|
||||
>On Freeleaps</label
|
||||
>
|
||||
<span class="profile-item-span" id="achievement-stay-on-operation">
|
||||
{{ userProfile.achievemnt.activeness.days_of_staying_on }} day(s)
|
||||
</span>
|
||||
</div>
|
||||
<div class="achievement-summary-item-container">
|
||||
<label class="profile-item-label" for="achievement-connections-content">Connections</label>
|
||||
<label class="profile-item-label" for="achievement-connections-content"
|
||||
>Connections</label
|
||||
>
|
||||
<span class="profile-item-span" id="achievement-connections-content">
|
||||
{{ userProfile.achievemnt.activeness.connections }}</span>
|
||||
{{ userProfile.achievemnt.activeness.connections }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="achievement-summary-item-container">
|
||||
<label class="profile-item-label" for="achievement-connections-content">Messages</label>
|
||||
<label class="profile-item-label" for="achievement-connections-content"
|
||||
>Messages</label
|
||||
>
|
||||
<span class="profile-item-span" id="achievement-connections-content">
|
||||
{{ userProfile.achievemnt.activeness.messages }}</span>
|
||||
{{ userProfile.achievemnt.activeness.messages }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="achievement-summary-item-container">
|
||||
<label class="profile-item-label" for="achievement-credit-content">Credit</label>
|
||||
<span class="profile-item-span" id="achievement-credit-content">
|
||||
{{ userProfile.achievemnt.activeness.credit }}</span>
|
||||
{{ userProfile.achievemnt.activeness.credit }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapse-achievement" class="accordion-collapse collapse show" data-bs-parent="#collapse-achievement">
|
||||
<div
|
||||
id="collapse-achievement"
|
||||
class="accordion-collapse collapse show"
|
||||
data-bs-parent="#collapse-achievement"
|
||||
>
|
||||
<div class="accordion-body">
|
||||
<div class="achievement-panel-container">
|
||||
<div class="achievement-item-container">
|
||||
<label class="profile-item-label" for="achievement-spending-operation">Total spending</label>
|
||||
<label class="profile-item-label" for="achievement-spending-operation"
|
||||
>Total spending</label
|
||||
>
|
||||
<span class="achievement-summary-spending-span" id="achievement-spending-operation">
|
||||
{{ userProfile.achievemnt.issuer.spending.total }}
|
||||
{{ userProfile.achievemnt.issuer.spending.currency }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="achievement-item-container">
|
||||
<label class="profile-item-label" for="achievement-twelve-month-spending-content">12-month
|
||||
spending</label>
|
||||
<label class="profile-item-label" for="achievement-twelve-month-spending-content"
|
||||
>12-month spending</label
|
||||
>
|
||||
<span class="profile-item-span" id="achievement-twelve-month-spending-content">
|
||||
{{ userProfile.achievemnt.issuer.spending.twelve_month }}
|
||||
{{ userProfile.achievemnt.issuer.spending.currency }}</span>
|
||||
{{ userProfile.achievemnt.issuer.spending.currency }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="achievement-item-container">
|
||||
<label class="profile-item-label" for="achievement-thirty-day-spending-content">3-month spending</label>
|
||||
<label class="profile-item-label" for="achievement-thirty-day-spending-content"
|
||||
>3-month spending</label
|
||||
>
|
||||
<span class="profile-item-span" id="achievement-thirty-day-spending-content">
|
||||
{{ userProfile.achievemnt.issuer.spending.three_month }}
|
||||
{{ userProfile.achievemnt.issuer.spending.currency }}</span>
|
||||
{{ userProfile.achievemnt.issuer.spending.currency }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="achievement-item-container">
|
||||
<label class="profile-item-label" for="achievement-deposit-content">Deposit</label>
|
||||
<span class="profile-item-span" id="achievement-deposit-content">
|
||||
{{ userProfile.achievemnt.issuer.deposit.available }}
|
||||
{{ userProfile.achievemnt.issuer.deposit.currency }}</span>
|
||||
{{ userProfile.achievemnt.issuer.deposit.currency }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="achievement-panel-container">
|
||||
<div class="achievement-item-container">
|
||||
<label class="profile-item-label" for="achievement-spending-operation">Posted</label>
|
||||
<label class="profile-item-label" for="achievement-spending-operation"
|
||||
>Posted</label
|
||||
>
|
||||
<span class="profile-item-span" id="achievement-spending-operation">
|
||||
{{ userProfile.achievemnt.issuer.request.issued }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="achievement-item-container">
|
||||
<label class="profile-item-label" for="achievement-twelve-month-spending-content">Accomplished</label>
|
||||
<label class="profile-item-label" for="achievement-twelve-month-spending-content"
|
||||
>Accomplished</label
|
||||
>
|
||||
<span class="profile-item-span" id="achievement-twelve-month-spending-content">
|
||||
{{ userProfile.achievemnt.issuer.request.accomplished }}</span>
|
||||
{{ userProfile.achievemnt.issuer.request.accomplished }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="achievement-item-container">
|
||||
<label class="profile-item-label" for="achievement-thirty-day-spending-content">Active</label>
|
||||
<label class="profile-item-label" for="achievement-thirty-day-spending-content"
|
||||
>Active</label
|
||||
>
|
||||
<span class="profile-item-span" id="achievement-thirty-day-spending-content">
|
||||
{{ userProfile.achievemnt.issuer.request.active }}</span>
|
||||
{{ userProfile.achievemnt.issuer.request.active }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="achievement-item-container">
|
||||
<label class="profile-item-label" for="achievement-deposit-content">Ongoing</label>
|
||||
<span class="profile-item-span" id="achievement-deposit-content">
|
||||
{{ userProfile.achievemnt.issuer.request.ongoing }}</span>
|
||||
{{ userProfile.achievemnt.issuer.request.ongoing }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="achievement-panel-container">
|
||||
<div class="achievement-item-container">
|
||||
<label class="profile-item-label" for="achievement-total-earning-content">Total earning</label>
|
||||
<label class="profile-item-label" for="achievement-total-earning-content"
|
||||
>Total earning</label
|
||||
>
|
||||
<span class="profile-item-span" id="achievement-total-earning-content">
|
||||
{{ userProfile.achievemnt.provider.earnings.total }}
|
||||
{{ userProfile.achievemnt.provider.earnings.currency }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="achievement-item-container">
|
||||
<label class="profile-item-label" for="achievement-twelve-month-earning-content">12-month earning</label>
|
||||
<label class="profile-item-label" for="achievement-twelve-month-earning-content"
|
||||
>12-month earning</label
|
||||
>
|
||||
<span class="profile-item-span" id="achievement-twelve-month-earning-content">
|
||||
{{ userProfile.achievemnt.provider.earnings.twelve_month }}
|
||||
{{ userProfile.achievemnt.provider.earnings.currency }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="achievement-item-container">
|
||||
<label class="profile-item-label" for="achievement-thirty-day-earning-content">Delivered</label>
|
||||
<label class="profile-item-label" for="achievement-thirty-day-earning-content"
|
||||
>Delivered</label
|
||||
>
|
||||
<span class="profile-item-span" id="achievement-thirty-day-earning-content">
|
||||
{{ userProfile.achievemnt.provider.deliveries.delivered_projects }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="achievement-item-container">
|
||||
<label class="profile-item-label" for="achievement-delivering-time">Delivering time</label>
|
||||
<label class="profile-item-label" for="achievement-delivering-time"
|
||||
>Delivering time</label
|
||||
>
|
||||
<span class="profile-item-span" id="achievement-delivering-time">
|
||||
{{
|
||||
userProfile.achievemnt.provider.deliveries.delivering_time_per_project_in_day
|
||||
@ -398,19 +704,72 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="offcanvas offcanvas-end offcanvas-container"
|
||||
tabindex="-1"
|
||||
id="offcanvas-template"
|
||||
aria-labelledby="offcanvas-template"
|
||||
>
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvas-template">Apply self-intro template</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<div class="accordion" id="template-item-container">
|
||||
<div
|
||||
v-for="(template, index) in availableTemplates"
|
||||
:key="index"
|
||||
:id="'template' + index"
|
||||
class="accordion-item"
|
||||
>
|
||||
<h2 class="accordion-header" :id="'heading' + index">
|
||||
<button
|
||||
class="accordion-button collapsed"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
:data-bs-target="'#' + 'collapse' + index"
|
||||
aria-expanded="false"
|
||||
:aria-controls="'collapse' + index"
|
||||
>
|
||||
{{ template.title }}
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
:id="'collapse' + index"
|
||||
class="accordion-collapse collapse"
|
||||
:aria-labelledby="'heading' + index"
|
||||
data-bs-parent="#template-item-container"
|
||||
>
|
||||
<div class="accordion-body">
|
||||
<button class="select-template-button" @click="selectTemplate(template)">
|
||||
Apply
|
||||
</button>
|
||||
<div class="template-content-textarea" v-html="template.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { moneyCollectionTypeEnum } from '../../../types/index'
|
||||
|
||||
import { UserProfileApi, elementHandler,textAreaAujuster } from '../../../utils/index'
|
||||
import { UserProfileApi, elementHandler, textAreaAujuster } from '../../../utils/index'
|
||||
|
||||
export default {
|
||||
name: 'UserProfile',
|
||||
props: {},
|
||||
mounted() {
|
||||
this.fetchProfile()
|
||||
this.fetchTemplates()
|
||||
},
|
||||
watch: {
|
||||
'userProfile.account.basic.first_name': {
|
||||
@ -443,6 +802,7 @@ export default {
|
||||
userProfile: null,
|
||||
message: null,
|
||||
accountNeedAttention: false,
|
||||
availableTemplates: null,
|
||||
identityOperation: {
|
||||
first_name: null,
|
||||
last_name: null,
|
||||
@ -485,7 +845,7 @@ export default {
|
||||
personalOperation: {
|
||||
self_intro: {
|
||||
summary: null,
|
||||
content_html: "",
|
||||
content_html: '',
|
||||
is_editing: false
|
||||
},
|
||||
expected_salary: {
|
||||
@ -791,26 +1151,41 @@ export default {
|
||||
stopEdittingSelfintro($event) {
|
||||
elementHandler.stopEdittingContent($event.target)
|
||||
this.personalOperation.self_intro.is_editing = false
|
||||
this.personalOperation.self_intro.content_html = this.userProfile.account.basic.self_intro.content_html
|
||||
this.personalOperation.self_intro.content_html =
|
||||
this.userProfile.account.basic.self_intro.content_html
|
||||
},
|
||||
keyUpOnSelfIntroEditor($event){
|
||||
keyUpOnSelfIntroEditor($event) {
|
||||
let element = $event.target
|
||||
textAreaAujuster.adjustHight(element)
|
||||
},
|
||||
updateSelfIntro() {
|
||||
this.personalOperation.self_intro.content_html = this.$refs.personal_self_intro_editor_div.innerHTML;
|
||||
this.personalOperation.self_intro.content_html =
|
||||
this.$refs.personal_self_intro_editor_div.innerHTML
|
||||
if (!this.personalOperation.self_intro.content_html) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
UserProfileApi.updateSelfIntro(this.personalOperation.self_intro.content_html)
|
||||
.then((response) => {
|
||||
this.userProfile.account.basic.self_intro = response.data.self_intro
|
||||
this.personalOperation.self_intro = response.data.self_intro
|
||||
this.personalOperation.self_intro = response.data.self_intro // makes a reference instead of a copy
|
||||
})
|
||||
.catch((error) => {
|
||||
this.mnx_backendErrorHandler(error)
|
||||
})
|
||||
},
|
||||
fetchTemplates() {
|
||||
UserProfileApi.fetchSelfIntroTemplates('')
|
||||
.then((response) => {
|
||||
this.availableTemplates = response.data
|
||||
})
|
||||
.catch((error) => {
|
||||
this.mnx_backendErrorHandler(error)
|
||||
})
|
||||
},
|
||||
selectTemplate(template) {
|
||||
this.personalOperation.self_intro.content_html = template.content
|
||||
},
|
||||
|
||||
//payment
|
||||
updateLocalPaymentData() {
|
||||
this.paymentOperation.ready_to_receive_money =
|
||||
@ -1291,14 +1666,17 @@ export default {
|
||||
@extend .initiate-button;
|
||||
width: fit-content;
|
||||
}
|
||||
.in-context-foward-button{
|
||||
|
||||
.in-context-foward-button {
|
||||
@extend .proceed-button;
|
||||
width: fit-content;
|
||||
}
|
||||
.in-context-back-button{
|
||||
|
||||
.in-context-back-button {
|
||||
@extend .back-button;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.personal-self-intro-content-editor {
|
||||
@extend .container;
|
||||
@extend .border;
|
||||
@ -1557,4 +1935,8 @@ export default {
|
||||
@extend .m-auto;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.offcanvas-parent {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -208,5 +208,18 @@ class UserProfileApi {
|
||||
)
|
||||
return request
|
||||
}
|
||||
static fetchSelfIntroTemplates(tags) {
|
||||
let jwt = userUtils.getJwtToken()
|
||||
const request = backendAxios.post(
|
||||
'/api/user/profile/fetch-templates-for-self-intro',
|
||||
{
|
||||
tags: tags
|
||||
},
|
||||
{
|
||||
headers: { Authorization: `Bearer ${jwt}` }
|
||||
}
|
||||
)
|
||||
return request
|
||||
}
|
||||
}
|
||||
export { UserProfileApi }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user