freeleaps_product/freeleaps_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add some change to avoid referencing empty last message

Browse Source
This commit is contained in:
Zhigang Wang 2024-06-17 15:20:56 -07:00
parent 557ce84468
commit ec291b912e
3 changed files with 144 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/headers/HeaderUser.vue
View File

@ -42,11 +42,19 @@
Post
</button>
<div class="form-check form-switch header-switch-container">
<input class="form-check-input" type="checkbox" role="switch" id="personal-earning-now-checkbox" disabled>
<input
class="form-check-input"
type="checkbox"
role="switch"
id="personal-earning-now-checkbox"
disabled
/>
<label class="form-check-label" for="personal-earning-now-checkbox">
<span>Providing service</span>
</label>
<div class="header-switch-desc">Please go to profile page to add money receiving method</div>
<div class="header-switch-desc">
Please go to profile page to add money receiving method
</div>
</div>
</div>
<div class="profile-container">
@ -230,7 +238,7 @@ export default {
left: 0;
bottom: -20px;
font-size: 12px;
color: #3D455F;
color: #3d455f;
white-space: nowrap;
padding: 2px 5px;
}

115
frontend/src/pages/user/account/UserProfile.vue
View File

@ -265,7 +265,9 @@
id="personal-photo-operation-image"
src="@/assets/profile.png"
/>
<label class="profile-item-label" for="personal-photo-operation-image">Portrait</label>
<label class="profile-item-label" for="personal-photo-operation-image"
>Portrait</label
>
</div>
</button>
<button
@ -373,9 +375,18 @@
>
<div class="collapse-item-container">
<div class="collapse-item-editor">
<freeleaps-editor v-model:content="personalOperation.self_intro.content_html" :disabled="!personalOperation.self_intro.is_editing" />
<freeleaps-editor
v-model:content="personalOperation.self_intro.content_html"
:disabled="!personalOperation.self_intro.is_editing"
/>
<div class="btn-group-container">
<button v-if="!personalOperation.self_intro.is_editing" class="btn btn-link" @click="personalOperation.self_intro.is_editing = true">Edit</button>
<button
v-if="!personalOperation.self_intro.is_editing"
class="btn btn-link"
@click="personalOperation.self_intro.is_editing = true"
>
Edit
</button>
<button
v-if="personalOperation.self_intro.is_editing"
class="btn btn-link"
@ -386,8 +397,18 @@
>
Templates
</button>
<button v-if="personalOperation.self_intro.is_editing" @click="updateSelfIntro()" class="btn btn-link">Update</button>
<button v-if="personalOperation.self_intro.is_editing" @click="stopEdittingSelfintro($event)" class="btn btn-link">
<button
v-if="personalOperation.self_intro.is_editing"
@click="updateSelfIntro()"
class="btn btn-link"
>
Update
</button>
<button
v-if="personalOperation.self_intro.is_editing"
@click="stopEdittingSelfintro($event)"
class="btn btn-link"
>
Cancel
</button>
</div>
@ -402,10 +423,20 @@
>
<div class="collapse-checkbox-container">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="personal-earning-now-checkbox" v-model="personalOperation.accepting_request" @click="updateAcceptingRequest($event)" :disabled="!paymentOperation.ready_to_receive_money">
<input
class="form-check-input"
type="checkbox"
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>I want to be a service provider and earn money</span>
<span v-if="personalOperation.show_stripe_status" style="color: red">* Stripe account onboarding is not completed.</span>
<span v-if="personalOperation.show_stripe_status" style="color: red"
>* Stripe account onboarding is not completed.</span
>
</label>
</div>
<div class="flex-1" />
@ -427,14 +458,24 @@
</div>
</div>
<div class="collapse-item-container">
<label v-if="Is_Wechat_QR_Code_Payment()" class="collapse-item-uploader" for="qr-uploader">
<label
v-if="Is_Wechat_QR_Code_Payment()"
class="collapse-item-uploader"
for="qr-uploader"
>
<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">Upload QR code to receive payment</span>
<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"
>Upload QR code to receive payment</span
>
</label>
<input
v-if="Is_Wechat_QR_Code_Payment()"
@ -447,10 +488,14 @@
/>
</div>
<div v-if="Is_Stripe_Payment()" class="collapse-item-container">
<span>Have you linked your strip account?</span><button class="btn btn-link" @click="visitStripe()">Visit Stripe</button>
<span>Have you linked your strip account?</span
><button class="btn btn-link" @click="visitStripe()">Visit Stripe</button>
</div>
<div v-if="personalOperation.accepting_request" class="collapse-item-container">
<span>You are a service provider now. Please review your self-intro to reflect your skills to deliver projects.</span>
<span
>You are a service provider now. Please review your self-intro to reflect your skills to
deliver projects.</span
>
</div>
</div>
</div>
@ -597,7 +642,10 @@
<div class="panel-table-content">
<span class="panel-table-label">Delivering time</span>
<span class="panel-table-span">
{{ userProfile.achievemnt.provider.deliveries.delivering_time_per_project_in_day }} days
{{
userProfile.achievemnt.provider.deliveries.delivering_time_per_project_in_day
}}
days
</span>
</div>
</td>
@ -1229,7 +1277,7 @@ export default {
padding: 12px;
// overflow: hidden;
border-radius: 12px;
box-shadow: 0px 0px 24px 0px #D4D3E380;
box-shadow: 0px 0px 24px 0px #d4d3e380;
background-color: white;
margin-bottom: 20px;
@ -1247,7 +1295,7 @@ export default {
.panel-item-container {
width: calc(25% - 9px);
border: 1px dashed #1748F8;
border: 1px dashed #1748f8;
background-color: white;
padding: 0 12px;
height: 46px;
@ -1258,13 +1306,13 @@ export default {
outline: none;
&:hover {
background-color: #F3F6FF;
background-color: #f3f6ff;
}
// &.active {
// background-color: #F3F6FF;
// }
&[aria-expanded=true] {
background-color: #F3F6FF;
&[aria-expanded='true'] {
background-color: #f3f6ff;
}
.profile-item-container {
@ -1291,13 +1339,22 @@ export default {
color: #666666;
line-height: 1;
}
.profile-item-span {font-size: 14px; font-weight: bold; color: #242424; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; line-height: 1}
.profile-item-span {
font-size: 14px;
font-weight: bold;
color: #242424;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
line-height: 1;
}
}
}
}
.collapse-content-container {
margin: 12px -12px -12px -12px;
border-top: 1px solid #E7E8EB;
border-top: 1px solid #e7e8eb;
.collapse-item-container {
padding: 32px;
@ -1314,7 +1371,7 @@ export default {
width: 100%;
position: relative;
.btn-group-container{
.btn-group-container {
position: absolute;
right: 32px;
top: 10px;
@ -1325,7 +1382,7 @@ export default {
.collapse-item-input {
height: 37px;
width: 350px;
border: 1px solid #E1E1E1;
border: 1px solid #e1e1e1;
border-radius: 3px;
margin: 0 8px;
box-shadow: none;
@ -1335,7 +1392,7 @@ export default {
position: relative;
&:focus-within {
border: 1px solid #1748F8;
border: 1px solid #1748f8;
}
input {
@ -1347,7 +1404,7 @@ export default {
}
.error-message {
color: #916AD4;
color: #916ad4;
font-size: 16px;
position: absolute;
left: 0;
@ -1359,7 +1416,7 @@ export default {
width: 13px;
height: 13px;
margin-left: 12px;
background-color: #E7E9ED;
background-color: #e7e9ed;
border-radius: 3px;
padding: 2px;
}
@ -1367,7 +1424,7 @@ export default {
.collapse-item-currency {
font-size: 14px;
font-weight: bold;
color: #0D1637;
color: #0d1637;
margin-left: 12px;
}
}
@ -1382,7 +1439,9 @@ export default {
align-items: center;
justify-content: center;
cursor: pointer;
&:hover {opacity: .78;}
&:hover {
opacity: 0.78;
}
.uploader-img-btn {
width: 50px;
@ -1405,7 +1464,7 @@ export default {
padding: 12px;
display: flex;
align-items: center;
border-bottom: 1px solid #E7E8EB
border-bottom: 1px solid #e7e8eb;
}
}

8
frontend/src/pages/user/messages/Home.vue
View File

@ -8,8 +8,8 @@
class="conversation-container"
:class="{
selected:
current_thread?.conversation?.information?.conversation_id ===
conversation.summary.last_message.conversation_id
current_thread?.conversation?.information?.id ===
conversation.summary.last_message?.conversation_id
}"
@click="selectConversation(conversation)"
>
@ -21,11 +21,11 @@
{{ conversation.summary.contact.last_name }}
</span>
<span class="conversation-last-update-date">{{
getDateFromFulltimeString(conversation.summary.last_message.create_time)
getDateFromFulltimeString(conversation.summary.last_message?.create_time)
}}</span>
</div>
<div class="conversation-summary-highlight-container">
{{ conversation.summary.last_message.message_body }}
{{ conversation.summary.last_message?.message_body }}
</div>
</div>
</div>