Updating vite config and get the right URL for GraphQL

This commit is contained in:
jetli 2024-07-26 01:13:47 -07:00
parent 7a0abee3e4
commit 2f20a118a3
8 changed files with 694 additions and 239 deletions

View File

@ -2,38 +2,61 @@
<template>
<div class="header-container">
<div class="header-content">
<div class="information-bar" @click="gotoMessages"
:class="{ active: activePath == 'message', unread: unreadConversationCount > 0 }">
<div
class="information-bar"
@click="gotoMessages"
:class="{ active: activePath == 'message', unread: unreadConversationCount > 0 }"
>
<img alt="freeleaps logo" src="@/assets/message.png" />
</div>
<div class="navigation-container" role="navigation">
<button class="navigation-item" @click="gotoWorkspace"
:class="{ active: activePath == 'Workspace', badge: unreadWorkspace }">
<button
class="navigation-item"
@click="gotoWorkspace"
:class="{ active: activePath == 'Workspace', badge: unreadWorkspace }"
>
<svg-icon icon="workspace" class-name="icon" />
{{ $t('My Work') }}
<div v-if="unreadWorkspace" class="navigation-item-tip">
{{ $t('Some update in your work') }}
</div>
</button>
<button class="navigation-item" @click="gotoRequests"
:class="{ active: activePath == 'Requests', badge: unreadRequest }">
<button
class="navigation-item"
@click="gotoRequests"
:class="{ active: activePath == 'Requests', badge: unreadRequest }"
>
<svg-icon icon="requests" class-name="icon" />
{{ $t('Jobs') }}
<div v-if="unreadRequest" class="navigation-item-tip">
{{ $t('Some update in your request') }}
</div>
</button>
<button class="navigation-item" @click="gotoProviders" :class="activePath == 'Providers' ? 'active' : ''">
<button
class="navigation-item"
@click="gotoProviders"
:class="activePath == 'Providers' ? 'active' : ''"
>
<svg-icon icon="providers" class-name="icon" />
{{ $t('Workers') }}
</button>
<button class="navigation-item" @click="gotoIssueRequest" :class="activePath == 'Post' ? 'active' : ''">
<button
class="navigation-item"
@click="gotoIssueRequest"
:class="activePath == 'Post' ? 'active' : ''"
>
<svg-icon icon="post" class-name="icon" />
{{ $t('Post a Job') }}
</button>
<div class="form-check form-switch header-switch-container" @click="gotoProfile">
<input class="form-check-input" type="checkbox" role="switch"
:checked="userProfile?.account?.provider?.accepting_request" id="personal-earning-now-checkbox" disabled />
<input
class="form-check-input"
type="checkbox"
role="switch"
:checked="userProfile?.account?.provider?.accepting_request"
id="personal-earning-now-checkbox"
disabled
/>
<label class="form-check-label" for="personal-earning-now-checkbox">
<span>{{ $t('Providing service') }}</span>
</label>
@ -44,10 +67,17 @@
<laguage-switch class="laguage-switch" />
</div>
<div class="profile-container">
<img alt="freeleaps logo" data-bs-toggle="dropdown" aria-expanded="false" id="accountButton" :src="userProfile?.account?.basic?.photo?.base64
<img
alt="freeleaps logo"
data-bs-toggle="dropdown"
aria-expanded="false"
id="accountButton"
:src="
userProfile?.account?.basic?.photo?.base64
? userProfile?.account?.basic?.photo?.base64
: profileUrl
" />
"
/>
<ul class="dropdown-menu" aria-labelledby="accountButton">
<li>
<button class="account-menu-button" @click="gotoProfile">{{ $t('Profile') }}</button>

View File

@ -35,7 +35,7 @@ const cache = new InMemoryCache()
const apolloClient = new ApolloClient({
cache,
uri: 'http://localhost:8001/graphql',
uri: '/graphql'
})
const app = createApp({

View File

@ -8,7 +8,13 @@
<div class="form-group">
<div class="input-group-container">
<div class="form-floating">
<input class="input-email" id="inputEmail" type="text" placeholder="name@example.com" v-model="email" />
<input
class="input-email"
id="inputEmail"
type="text"
placeholder="name@example.com"
v-model="email"
/>
<label for="inputEmail">{{ $t('Email address') }}</label>
</div>
<button class="btn-start" ref="submitButton" @click="trySigninWithEmail()">
@ -45,7 +51,7 @@ const GET_USERS = gql`
lastName
}
}
`;
`
export default {
name: 'FrontDoor',

View File

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

View File

@ -3,9 +3,15 @@
<div class="message-hub-conainter">
<template v-if="!receiver_id">
<div v-if="conversations && conversations.length > 0" class="conversation-list-container">
<div v-for="(conversation, index) in conversations" :key="index" class="conversation-container" :class="{
<div
v-for="(conversation, index) in conversations"
:key="index"
class="conversation-container"
:class="{
selected: selConversation?.id === conversation?.id
}" @click="selectConversation(conversation)">
}"
@click="selectConversation(conversation)"
>
<img class="participant-portrait" alt="user portrait" src="@/assets/profile.png" />
<div class="conversation-summary-container">
<div class="conversation-summary-header-container">
@ -22,22 +28,34 @@
</div>
</div>
</div>
<div v-if="!conversations || conversations.length == 0" class="conversation-list-empty-container">
<div
v-if="!conversations || conversations.length == 0"
class="conversation-list-empty-container"
>
{{ $t('Empty conversation') }}
</div>
</template>
<div class="message-panel-container">
<div v-if="messages && messages.length > 0" class="message-thread-container">
<div v-for="(item, index) in messages" :key="index" class="message-item-container"
:class="item.sender_id == userIdentityNote ? 'me' : ''">
<div
v-for="(item, index) in messages"
:key="index"
class="message-item-container"
:class="item.sender_id == userIdentityNote ? 'me' : ''"
>
<div class="message-item-header-container">
<img class="message-item-sender-portrait" alt="user portrait" src="@/assets/profile.png" />
<img
class="message-item-sender-portrait"
alt="user portrait"
src="@/assets/profile.png"
/>
<span class="message-item-sender-fullname">
{{ item.sender_firstname }}
{{ item.sender_lastname }}
</span>
<span class="message-item-create-time">
{{ getDateFromFulltimeString(item.create_time) }}</span>
{{ getDateFromFulltimeString(item.create_time) }}</span
>
</div>
<div class="message-item-message-body">{{ item.message_body }}</div>
</div>
@ -47,8 +65,12 @@
</div>
<div class="message-writing-panel-container">
<svg-icon icon="msg-enter" class-name="writing-message-enter" />
<input class="writing-message-input" type="text" v-model="writtenMessage"
@keypress.enter="sendMessage(selConversation?.id)" />
<input
class="writing-message-input"
type="text"
v-model="writtenMessage"
@keypress.enter="sendMessage(selConversation?.id)"
/>
</div>
</div>
</div>

View File

@ -2,13 +2,22 @@
<div class="workspace-container">
<!-- <div class="workspace-header"></div> -->
<div class="workspace-body">
<div class="accordion accordion-list" v-for="(project, project_index) in projects" :key="project_index"
:id="project.id">
<div
class="accordion accordion-list"
v-for="(project, project_index) in projects"
:key="project_index"
:id="project.id"
>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
:data-bs-target="'#collapse-' + project_index" aria-expanded="false"
:aria-controls="'collapse-' + project_index">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
:data-bs-target="'#collapse-' + project_index"
aria-expanded="false"
:aria-controls="'collapse-' + project_index"
>
<div class="workspace-item-bar dashed-container">
<div class="workspace-item-bar-left">
<div class="project-item-title-container">
@ -35,7 +44,11 @@
</div>
</button>
</h2>
<div :id="'collapse-' + project_index" class="accordion-collapse collapse" :data-bs-parent="'#' + project.id">
<div
:id="'collapse-' + project_index"
class="accordion-collapse collapse"
:data-bs-parent="'#' + project.id"
>
<div class="accordion-body" v-if="isOpenRequest(project)">
<div class="float-action-container">
<button class="request-action-withdraw" @click="withdrawAndEditRequest(project)">
@ -43,17 +56,30 @@
</button>
</div>
<div class="project-request-container">
<div class="project-request-content" v-html="project.request.content" @keyup="textAreaAdjust($event)"
contenteditable="false"></div>
<div
class="project-request-content"
v-html="project.request.content"
@keyup="textAreaAdjust($event)"
contenteditable="false"
></div>
</div>
<div class="project-request-proposals-container">
<div class="accordion" v-for="(proposal, proposal_index) in project.proposals" :key="proposal_index"
:id="proposal.id">
<div
class="accordion"
v-for="(proposal, proposal_index) in project.proposals"
:key="proposal_index"
:id="proposal.id"
>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
:data-bs-target="'#collapse-request-proposal' + proposal_index" aria-expanded="false"
:aria-controls="'collapse-request-proposal' + proposal_index">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
:data-bs-target="'#collapse-request-proposal' + proposal_index"
aria-expanded="false"
:aria-controls="'collapse-request-proposal' + proposal_index"
>
<div class="project-request-proposal-bar-container">
<div class="project-request-proposal-quote-container">
<label class="project-item-label">{{ $t('Quote') }}</label>
@ -86,16 +112,23 @@
</div>
</button>
</h2>
<div :id="'collapse-request-proposal' + proposal_index" class="accordion-collapse collapse"
:data-bs-parent="'#' + proposal.id">
<div
:id="'collapse-request-proposal' + proposal_index"
class="accordion-collapse collapse"
:data-bs-parent="'#' + proposal.id"
>
<div class="accordion-body">
<div class="request-proposal-action-container">
<button class="request-proposal-action-reject"
@click="rejectProposal(project, proposal_index)">
<button
class="request-proposal-action-reject"
@click="rejectProposal(project, proposal_index)"
>
{{ $t('reject') }}
</button>
<button class="request-proposal-action-accept"
@click="acceptProposal(project, proposal_index)">
<button
class="request-proposal-action-accept"
@click="acceptProposal(project, proposal_index)"
>
{{ $t('accept') }}
</button>
</div>
@ -103,9 +136,12 @@
<div class="request-proposal-content" v-html="proposal.content" />
</div>
<div class="request-proposal-payment-plan">
<div class="request-proposal-payment-plan-stage-container"
v-for="(stage, stage_index) in proposal.payment_plan.stages" :key="stage_index"
:id="'payment-stage-' + stage_index">
<div
class="request-proposal-payment-plan-stage-container"
v-for="(stage, stage_index) in proposal.payment_plan.stages"
:key="stage_index"
:id="'payment-stage-' + stage_index"
>
<div class="project-request-proposal-stage-payment-container">
<label class="project-item-label">{{ $t('Payment') }}</label>
<p class="project-item-text">
@ -140,9 +176,12 @@
<div class="request-proposal-content" v-html="project.proposal.content" />
</div>
<div class="request-proposal-payment-plan">
<div class="request-proposal-payment-plan-stage-container"
v-for="(stage, stage_index) in project.proposal.payment_plan.stages" :key="stage_index"
:id="'payment-stage-' + stage_index">
<div
class="request-proposal-payment-plan-stage-container"
v-for="(stage, stage_index) in project.proposal.payment_plan.stages"
:key="stage_index"
:id="'payment-stage-' + stage_index"
>
<div class="project-request-proposal-stage-payment-container">
<label class="project-item-label">{{ $t('Payment') }}</label>
<p class="project-item-text">{{ stage.amount }} {{ stage.currency }}</p>
@ -160,24 +199,40 @@
</div>
</div>
<div class="project-request-container">
<div class="project-request-content" v-html="project.request.content" @keyup="textAreaAdjust($event)"
contenteditable="false"></div>
<div
class="project-request-content"
v-html="project.request.content"
@keyup="textAreaAdjust($event)"
contenteditable="false"
></div>
</div>
</div>
<div class="accordion-body inline-accordion-body" v-if="isOngoingProject(project)">
<div class="project-invite-collaborator-containter">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse-project-invite-collaborator" aria-expanded="false"
aria-controls="collapse-project-invite-collaborator">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapse-project-invite-collaborator"
aria-expanded="false"
aria-controls="collapse-project-invite-collaborator"
>
<div class="project-invite-collaborator">+ {{ $t('Invite') }}</div>
</button>
<div id="collapse-project-invite-collaborator" class="accordion-collapse collapse"
data-bs-parent="#collapse-project-invite-collaborator">
<div
id="collapse-project-invite-collaborator"
class="accordion-collapse collapse"
data-bs-parent="#collapse-project-invite-collaborator"
>
<div class="project-invite-collaborator-form-container">
<input type="text" v-model="newInviteCollaborator[project_index]"
:placeholder="$t('Input E-mail to invite other')" @keydown.enter="
<input
type="text"
v-model="newInviteCollaborator[project_index]"
:placeholder="$t('Input E-mail to invite other')"
@keydown.enter="
inviteCollaborator(project.project_id, newInviteCollaborator[project_index])
" />
"
/>
<svg-icon icon="msg-enter" class-name="project-invite-enter" />
</div>
</div>
@ -185,9 +240,14 @@
<div class="accordion" id="workspace-project-accordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse-project-milestone" aria-expanded="false"
aria-controls="collapse-project-milestone">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapse-project-milestone"
aria-expanded="false"
aria-controls="collapse-project-milestone"
>
<div class="project-milestone-bar-container dashed-container">
<div class="project-milestone-bar-progress">
<label class="project-item-label">{{ $t('Progress') }}</label>
@ -223,11 +283,17 @@
</div>
</button>
</h2>
<div id="collapse-project-milestone" class="accordion-collapse collapse"
data-bs-parent="#collapse-project-milestone">
<div
id="collapse-project-milestone"
class="accordion-collapse collapse"
data-bs-parent="#collapse-project-milestone"
>
<table class="project-milestones-table">
<tbody v-for="milestone in project.project.progress.milestones" :key="milestone.index"
:id="'project-milestone-' + milestone.index">
<tbody
v-for="milestone in project.project.progress.milestones"
:key="milestone.index"
:id="'project-milestone-' + milestone.index"
>
<tr>
<td>
<div class="project-milestones-table-content">
@ -277,9 +343,14 @@
<td>
<div class="project-milestones-table-content">
<span class="project-milestones-table-label">{{ $t('Action') }}</span>
<button class="project-milestones-table-btn" :disabled="isMilestoneActionButtonDisabled(project.project, milestone)
" :hidden="isMilestoneActionButtonHidden(project.project, milestone)"
@click="handleMilestoneAction(project.project, milestone)">
<button
class="project-milestones-table-btn"
:disabled="
isMilestoneActionButtonDisabled(project.project, milestone)
"
:hidden="isMilestoneActionButtonHidden(project.project, milestone)"
@click="handleMilestoneAction(project.project, milestone)"
>
{{ fetchMilestoneActionButtonText(project.project, milestone) }}
</button>
<!-- <span class="project-milestones-table-span">{{ getDateFromFulltimeString(milestone.update_time) }}</span> -->
@ -290,8 +361,10 @@
<td colspan="6">
<div class="project-milestones-qrcode-content">
<img :src="this.qrCode.imageUrl" alt="freeleaps" />
<button class="project-milestones-qrcode-button"
@click="handlePaymentAction(project.project, milestone)">
<button
class="project-milestones-qrcode-button"
@click="handlePaymentAction(project.project, milestone)"
>
{{ $t('Mark As Paid') }}
</button>
</div>
@ -303,9 +376,14 @@
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse-project-code" aria-expanded="false"
aria-controls="collapse-project-code">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapse-project-code"
aria-expanded="false"
aria-controls="collapse-project-code"
>
<div class="project-code-bar-container dashed-container">
<div class="project-code-git-status">
<label class="project-item-label">{{ $t('Code Depot') }}</label>
@ -328,13 +406,22 @@
</div>
</button>
</h2>
<div id="collapse-project-code" class="accordion-collapse collapse"
data-bs-parent="#collapse-project-code">
<div
id="collapse-project-code"
class="accordion-collapse collapse"
data-bs-parent="#collapse-project-code"
>
<div class="project-code-details-container">
<div class="project-code-git-url-container">
<button v-if="project.project.code?.git_url" class="project-code-copy-git-url"
@click="copyCodeGit(project)" v-tooltip title="Copied" trigger="click"
delay='{"show":"500", "hide":"100"}'>
<button
v-if="project.project.code?.git_url"
class="project-code-copy-git-url"
@click="copyCodeGit(project)"
v-tooltip
title="Copied"
trigger="click"
delay='{"show":"500", "hide":"100"}'
>
{{ $t('copy git url') }}
</button>
</div>
@ -350,9 +437,14 @@
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse-project-issue" aria-expanded="false"
aria-controls="collapse-project-issue">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapse-project-issue"
aria-expanded="false"
aria-controls="collapse-project-issue"
>
<div class="project-issue-bar-container dashed-container">
<div class="project-issue-open-issues">
<label class="project-item-label">{{ $t('Open issues') }}</label>
@ -375,8 +467,11 @@
</div>
</button>
</h2>
<div id="collapse-project-issue" class="accordion-collapse collapse"
data-bs-parent="#collapse-project-issue">
<div
id="collapse-project-issue"
class="accordion-collapse collapse"
data-bs-parent="#collapse-project-issue"
>
<div class="project-code-git-url-container">
<button class="project-code-copy-git-url" @click="gotoIssueManage(project)">
{{ $t('Issues management') }}

View File

@ -4,8 +4,14 @@
<div class="accordion" id="workspace-project-accordion">
<div v-if="project.id" class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse-project-issue" aria-expanded="false" aria-controls="collapse-project-issue">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapse-project-issue"
aria-expanded="false"
aria-controls="collapse-project-issue"
>
<div class="project-issue-bar-container dashed-container">
<div class="project-issue-open-issues">
<label class="project-item-label">{{ $t('Summary') }}</label>
@ -32,25 +38,41 @@
</div>
</button>
</h2>
<div id="collapse-project-issue" class="accordion-collapse collapse" data-bs-parent="#collapse-project-issue">
<div
id="collapse-project-issue"
class="accordion-collapse collapse"
data-bs-parent="#collapse-project-issue"
>
<div class="project-invite-collaborator-containter">
<button class="accordion-button collapsed" type="button" ref="issueAddBtn" data-bs-toggle="collapse"
data-bs-target="#collapse-project-new-issue" aria-expanded="false"
aria-controls="collapse-project-issue">
<button
class="accordion-button collapsed"
type="button"
ref="issueAddBtn"
data-bs-toggle="collapse"
data-bs-target="#collapse-project-new-issue"
aria-expanded="false"
aria-controls="collapse-project-issue"
>
<div class="project-invite-collaborator">+ {{ $t('Add Issue') }}</div>
</button>
<div id="collapse-project-new-issue" class="accordion-collapse collapse"
data-bs-parent="#collapse-project-new-issue">
<div
id="collapse-project-new-issue"
class="accordion-collapse collapse"
data-bs-parent="#collapse-project-new-issue"
>
<div class="project-issue-description-container">
<div class="project-issue-description">
<label class="project-item-label">{{ $t('New issue description') }}</label>
<button class="project-issue-description-btn" @click="
<button
class="project-issue-description-btn"
@click="
postNewIssue(
project.request.product_id,
project.project_id,
newIssueDescriptions
)
">
"
>
{{ $t('Submit') }}
</button>
</div>
@ -59,13 +81,22 @@
</div>
</div>
<div>
<div class="project-issue-container" v-for="(issue, issue_index) in project.project.issue.open_issues"
:key="issue_index" :id="'project-issue-' + issue_index">
<div
class="project-issue-container"
v-for="(issue, issue_index) in project.project.issue.open_issues"
:key="issue_index"
:id="'project-issue-' + issue_index"
>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
:data-bs-target="'#collapse-project-issue-details' + issue_index" aria-expanded="false"
aria-controls="collapse-project-issue-details">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
:data-bs-target="'#collapse-project-issue-details' + issue_index"
aria-expanded="false"
aria-controls="collapse-project-issue-details"
>
<div class="project-issue-header dashed-container">
<div class="project-issue-title">
<label class="project-item-label">{{ $t('Issue title') }}</label>
@ -86,21 +117,33 @@
</div>
</button>
</h2>
<div :id="'collapse-project-issue-details' + issue_index" class="accordion-collapse collapse"
:data-bs-parent="'#collapse-project-issue-details' + issue_index">
<div
:id="'collapse-project-issue-details' + issue_index"
class="accordion-collapse collapse"
:data-bs-parent="'#collapse-project-issue-details' + issue_index"
>
<div class="project-issue-description-container">
<div class="project-issue-description">
<label class="project-item-label">{{ $t('Issue description') }}</label>
<button :hidden="!showIssueActionButton(project.project, issue, 'Resolve')"
class="project-issue-description-btn" @click="setProjectIssueStatus(issue.id, 1)">
<button
:hidden="!showIssueActionButton(project.project, issue, 'Resolve')"
class="project-issue-description-btn"
@click="setProjectIssueStatus(issue.id, 1)"
>
{{ $t('Resolve') }}
</button>
<button :hidden="!showIssueActionButton(project.project, issue, 'Confirm')"
class="project-issue-description-btn" @click="setProjectIssueStatus(issue.id, 2)">
<button
:hidden="!showIssueActionButton(project.project, issue, 'Confirm')"
class="project-issue-description-btn"
@click="setProjectIssueStatus(issue.id, 2)"
>
{{ $t('Confirm') }}
</button>
<button :hidden="!showIssueActionButton(project.project, issue, 'Reopen')"
class="project-issue-description-btn" @click="setProjectIssueStatus(issue.id, 0)">
<button
:hidden="!showIssueActionButton(project.project, issue, 'Reopen')"
class="project-issue-description-btn"
@click="setProjectIssueStatus(issue.id, 0)"
>
{{ $t('Reopen') }}
</button>
</div>

View File

@ -13,6 +13,7 @@ export default defineConfig(({ command, mode }) => {
let API_URL = 'http://127.0.0.1:8001'
let WEBSOCKET_URL = 'ws://127.0.0.1:8001'
let PORT = '5173'
let GRAPHQL_PORT = '8001'
if (command === 'serve') {
// dev specific config
@ -21,6 +22,7 @@ export default defineConfig(({ command, mode }) => {
API_URL = `${env.VITE_API_URL ?? 'http://127.0.0.1:8001'}`;
WEBSOCKET_URL = `${env.VITE_WEBSOCKET_URL ?? 'ws://127.0.0.1:8001'}`;
PORT = `${env.VITE_PORT ?? '5173'}`;
GRAPHQL_PORT = `${env.VITE_GRAPHQL_PORT ?? '8001'}`;
} else {
// command === 'build'
// build specific config
@ -59,15 +61,22 @@ export default defineConfig(({ command, mode }) => {
'^/api/': {
target: API_URL,
ws: true,
changeOrigin: true
changeOrigin: true,
port: PORT,
},
'^/ws/': {
target: WEBSOCKET_URL,
ws: true,
changeOrigin: true
changeOrigin: true,
port: PORT,
},
'^/graphql': {
target: API_URL,
ws: true,
changeOrigin: true,
port: GRAPHQL_PORT,
}
},
port: PORT,
},
optimizeDeps: {
esbuildOptions: {