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 Post
</button> </button>
<div class="form-check form-switch header-switch-container"> <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"> <label class="form-check-label" for="personal-earning-now-checkbox">
<span>Providing service</span> <span>Providing service</span>
</label> </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> </div>
<div class="profile-container"> <div class="profile-container">
@ -230,7 +238,7 @@ export default {
left: 0; left: 0;
bottom: -20px; bottom: -20px;
font-size: 12px; font-size: 12px;
color: #3D455F; color: #3d455f;
white-space: nowrap; white-space: nowrap;
padding: 2px 5px; padding: 2px 5px;
} }

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

@ -265,7 +265,9 @@
id="personal-photo-operation-image" id="personal-photo-operation-image"
src="@/assets/profile.png" 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> </div>
</button> </button>
<button <button
@ -373,9 +375,18 @@
> >
<div class="collapse-item-container"> <div class="collapse-item-container">
<div class="collapse-item-editor"> <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"> <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 <button
v-if="personalOperation.self_intro.is_editing" v-if="personalOperation.self_intro.is_editing"
class="btn btn-link" class="btn btn-link"
@ -386,8 +397,18 @@
> >
Templates Templates
</button> </button>
<button v-if="personalOperation.self_intro.is_editing" @click="updateSelfIntro()" class="btn btn-link">Update</button> <button
<button v-if="personalOperation.self_intro.is_editing" @click="stopEdittingSelfintro($event)" class="btn btn-link"> 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 Cancel
</button> </button>
</div> </div>
@ -402,10 +423,20 @@
> >
<div class="collapse-checkbox-container"> <div class="collapse-checkbox-container">
<div class="form-check form-switch"> <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"> <label class="form-check-label" for="personal-earning-now-checkbox">
<span>I want to be a service provider and earn money</span> <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> </label>
</div> </div>
<div class="flex-1" /> <div class="flex-1" />
@ -427,14 +458,24 @@
</div> </div>
</div> </div>
<div class="collapse-item-container"> <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 <img
v-if="paymentOperation.wechat_qr_code_img.data" v-if="paymentOperation.wechat_qr_code_img.data"
class="uploader-img-show" class="uploader-img-show"
:src="paymentOperation.wechat_qr_code_img.data" :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" /> <img
<span v-if="!paymentOperation.wechat_qr_code_img.data" class="upload-text-btn">Upload QR code to receive payment</span> 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> </label>
<input <input
v-if="Is_Wechat_QR_Code_Payment()" v-if="Is_Wechat_QR_Code_Payment()"
@ -447,10 +488,14 @@
/> />
</div> </div>
<div v-if="Is_Stripe_Payment()" class="collapse-item-container"> <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>
<div v-if="personalOperation.accepting_request" class="collapse-item-container"> <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> </div>
</div> </div>
@ -597,7 +642,10 @@
<div class="panel-table-content"> <div class="panel-table-content">
<span class="panel-table-label">Delivering time</span> <span class="panel-table-label">Delivering time</span>
<span class="panel-table-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> </span>
</div> </div>
</td> </td>
@ -1229,7 +1277,7 @@ export default {
padding: 12px; padding: 12px;
// overflow: hidden; // overflow: hidden;
border-radius: 12px; border-radius: 12px;
box-shadow: 0px 0px 24px 0px #D4D3E380; box-shadow: 0px 0px 24px 0px #d4d3e380;
background-color: white; background-color: white;
margin-bottom: 20px; margin-bottom: 20px;
@ -1247,7 +1295,7 @@ export default {
.panel-item-container { .panel-item-container {
width: calc(25% - 9px); width: calc(25% - 9px);
border: 1px dashed #1748F8; border: 1px dashed #1748f8;
background-color: white; background-color: white;
padding: 0 12px; padding: 0 12px;
height: 46px; height: 46px;
@ -1258,13 +1306,13 @@ export default {
outline: none; outline: none;
&:hover { &:hover {
background-color: #F3F6FF; background-color: #f3f6ff;
} }
// &.active { // &.active {
// background-color: #F3F6FF; // background-color: #F3F6FF;
// } // }
&[aria-expanded=true] { &[aria-expanded='true'] {
background-color: #F3F6FF; background-color: #f3f6ff;
} }
.profile-item-container { .profile-item-container {
@ -1291,13 +1339,22 @@ export default {
color: #666666; color: #666666;
line-height: 1; 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 { .collapse-content-container {
margin: 12px -12px -12px -12px; margin: 12px -12px -12px -12px;
border-top: 1px solid #E7E8EB; border-top: 1px solid #e7e8eb;
.collapse-item-container { .collapse-item-container {
padding: 32px; padding: 32px;
@ -1314,7 +1371,7 @@ export default {
width: 100%; width: 100%;
position: relative; position: relative;
.btn-group-container{ .btn-group-container {
position: absolute; position: absolute;
right: 32px; right: 32px;
top: 10px; top: 10px;
@ -1325,7 +1382,7 @@ export default {
.collapse-item-input { .collapse-item-input {
height: 37px; height: 37px;
width: 350px; width: 350px;
border: 1px solid #E1E1E1; border: 1px solid #e1e1e1;
border-radius: 3px; border-radius: 3px;
margin: 0 8px; margin: 0 8px;
box-shadow: none; box-shadow: none;
@ -1335,7 +1392,7 @@ export default {
position: relative; position: relative;
&:focus-within { &:focus-within {
border: 1px solid #1748F8; border: 1px solid #1748f8;
} }
input { input {
@ -1347,7 +1404,7 @@ export default {
} }
.error-message { .error-message {
color: #916AD4; color: #916ad4;
font-size: 16px; font-size: 16px;
position: absolute; position: absolute;
left: 0; left: 0;
@ -1359,7 +1416,7 @@ export default {
width: 13px; width: 13px;
height: 13px; height: 13px;
margin-left: 12px; margin-left: 12px;
background-color: #E7E9ED; background-color: #e7e9ed;
border-radius: 3px; border-radius: 3px;
padding: 2px; padding: 2px;
} }
@ -1367,7 +1424,7 @@ export default {
.collapse-item-currency { .collapse-item-currency {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
color: #0D1637; color: #0d1637;
margin-left: 12px; margin-left: 12px;
} }
} }
@ -1382,7 +1439,9 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
&:hover {opacity: .78;} &:hover {
opacity: 0.78;
}
.uploader-img-btn { .uploader-img-btn {
width: 50px; width: 50px;
@ -1405,7 +1464,7 @@ export default {
padding: 12px; padding: 12px;
display: flex; display: flex;
align-items: center; 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="conversation-container"
:class="{ :class="{
selected: selected:
current_thread?.conversation?.information?.conversation_id === current_thread?.conversation?.information?.id ===
conversation.summary.last_message.conversation_id conversation.summary.last_message?.conversation_id
}" }"
@click="selectConversation(conversation)" @click="selectConversation(conversation)"
> >
@ -21,11 +21,11 @@
{{ conversation.summary.contact.last_name }} {{ conversation.summary.contact.last_name }}
</span> </span>
<span class="conversation-last-update-date">{{ <span class="conversation-last-update-date">{{
getDateFromFulltimeString(conversation.summary.last_message.create_time) getDateFromFulltimeString(conversation.summary.last_message?.create_time)
}}</span> }}</span>
</div> </div>
<div class="conversation-summary-highlight-container"> <div class="conversation-summary-highlight-container">
{{ conversation.summary.last_message.message_body }} {{ conversation.summary.last_message?.message_body }}
</div> </div>
</div> </div>
</div> </div>