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

fixed pdf-content-viewr issue and improve the code styling

Browse Source
This commit is contained in:
Zhigang Wang 2024-06-13 19:17:50 -07:00
parent 04554ab669
commit 9d359e9af5
15 changed files with 295 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/assets/styles/main.scss
View File

@ -184,7 +184,7 @@ p {
margin-right: 28px;
padding: 8px 12px;
font-weight: bold;
border: 1px dashed #AEBFFD;
border: 1px dashed #aebffd;
border-radius: 3px;
}
&:not(.collapsed) {
@ -193,7 +193,7 @@ p {
box-shadow: none;
border-bottom: 1px solid #dee2e6;
.dashed-container {
background-color: #F3F6FF;
background-color: #f3f6ff;
}
}
}
@ -215,16 +215,16 @@ p {
justify-content: center;
font-size: 26px;
line-height: 36px;
box-shadow: 0px 0px 24px 0px #D4D3E380;
box-shadow: 0px 0px 24px 0px #d4d3e380;
img {
width: 86px;
margin-bottom: 20px
margin-bottom: 20px;
}
.btn-link {
text-decoration: underline;
padding: 0;
font-size: inherit
font-size: inherit;
}
}

35
frontend/src/components/FreeleapsEditor.vue
View File

@ -13,7 +13,10 @@
<div v-for="(item, index) in iconList" :key="index" class="editor-item">
<button
class="item-icon"
:class="{ activity: commandStates.indexOf(item.type) !== -1, last: index === iconList.length - 1 }"
:class="{
activity: commandStates.indexOf(item.type) !== -1,
last: index === iconList.length - 1
}"
:data-info="item.name"
@click="iconClick($event, item.type)"
:data-bs-toggle="item.drop ? 'dropdown' : ''"
@ -121,21 +124,21 @@ export default {
type: 'bold',
icon: 'fe-bold',
drop: false,
canChoose: true,
canChoose: true
},
{
name: 'italic',
type: 'italic',
icon: 'fe-italic',
drop: false,
canChoose: true,
canChoose: true
},
{
name: 'underline',
type: 'underline',
icon: 'fe-underline',
drop: false,
canChoose: true,
canChoose: true
},
// {
// name: 'strike',
@ -163,14 +166,14 @@ export default {
type: 'unorderedlist',
icon: 'fe-unorderedlist',
drop: false,
canChoose: true,
canChoose: true
},
{
name: 'ordered list',
type: 'orderedlist',
icon: 'fe-orderedlist',
drop: false,
canChoose: true,
canChoose: true
}
// {
// name: 'align-justify',
@ -200,18 +203,18 @@ export default {
},
queryCommandState(range, command) {
const container = document.createElement('span')
container.style.display = 'none';
container.style.display = 'none'
container.appendChild(range.cloneContents())
console.log('queryCommandState', container)
// range
document.body.appendChild(container);
const state = document.queryCommandState(command);
document.body.appendChild(container)
const state = document.queryCommandState(command)
console.log('queryCommandIndeterm ', document.queryCommandIndeterm('bold'))
console.log('queryCommandState ', document.queryCommandState('bold'))
// range.collapse(true);
container.remove();
return state;
container.remove()
return state
},
iconClick(event, type, dropType) {
event.preventDefault()
@ -227,14 +230,14 @@ export default {
if (i === -1) {
this.commandStates.push(type)
} else {
this.commandStates.splice(i,1)
this.commandStates.splice(i, 1)
}
})
},
getSelect() {
if (window.getSelection) {
let sel = window.getSelection()
console.log('this.selectedRange',sel)
console.log('this.selectedRange', sel)
if (sel.rangeCount > 0) {
return sel.getRangeAt(0)
}
@ -348,7 +351,7 @@ export default {
display: none;
width: fit-content;
height: 26px;
background-color: #F8F8F9;
background-color: #f8f8f9;
position: absolute;
}
.dropmenu {
@ -415,7 +418,7 @@ export default {
width: 50px;
height: 16px;
font-size: 16px;
color: #9EA2AF;
color: #9ea2af;
font-weight: normal;
white-space: nowrap;
vertical-align: middle;
@ -427,7 +430,7 @@ export default {
border: none;
line-height: 16px;
background: transparent;
border-right: 1px solid #E7E8EB;
border-right: 1px solid #e7e8eb;
&.last {
border-right: 0;
}

6
frontend/src/components/PDFReader.vue
View File

@ -12,9 +12,9 @@
<script>
import * as PDFJS from 'pdfjs-dist/build/pdf'
PDFJS.GlobalWorkerOptions.workerPort = new Worker(
new URL("pdfjs-dist/build/pdf.worker.mjs", import.meta.url),
{ type: "module" }
)
new URL('pdfjs-dist/build/pdf.worker.mjs', import.meta.url),
{ type: 'module' }
)
// import * as PDFJS from 'pdfjs-dist/webpack.mjs'

4
frontend/src/mixins/navigator.js
View File

@ -14,8 +14,8 @@ export default {
mnx_navToContact() {
this.$router.push('/contact')
},
mnx_navToPdfContentViewer(request_id, document_id) {
this.$router.push(`/pdf-content-viewer?request_id=${request_id}&document_id=${document_id}`)
mnx_navToPdfContentViewer(document_id) {
this.$router.push('/pdf-content-viewer/' + document_id)
},
mnx_navToLinkContentViewer(content_link_based64) {
this.$router.push('/link-content-viewer/' + content_link_based64)

22
frontend/src/pages/public/PdfContentViewer.vue
View File

@ -7,27 +7,25 @@
// import { pdfjsLib } from '../../plugins/index'
// import { ContentApi } from '../../utils/index'
// import { Buffer } from 'buffer'
import { WorksapceApi } from '@/utils/index'
import { ContentApi } from '@/utils/index'
import PDFReader from '@/components/PDFReader.vue'
export default {
name: 'PdfContentViewer',
// props: {
// content_id: {
// required: true,
// type: String
// }
// },
props: {
content_id: {
required: true,
type: String
}
},
components: { PDFReader },
computed: {},
mounted() {
if (this.$route.query?.request_id && this.$route.query?.document_id) {
this.retrieve_blog_content(this.$route.query.request_id, this.$route.query.document_id)
}
this.retrieve_blog_content(this.content_id)
},
methods: {
retrieve_blog_content(request_id, document_id) {
WorksapceApi.fetchAttachedFileAsMediaData(request_id, document_id).then(response => {
this.content_media_data = {url: response.data}
ContentApi.retrieve_blog_content(request_id, document_id).then((response) => {
this.content_media_data = { url: response.data }
})
}
},

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

@ -6,7 +6,11 @@
v-for="(conversation, index) in conversations"
:key="index"
class="conversation-container"
:class="{selected: current_thread?.conversation?.information?.conversation_id === conversation.summary.last_message.conversation_id}"
:class="{
selected:
current_thread?.conversation?.information?.conversation_id ===
conversation.summary.last_message.conversation_id
}"
@click="selectConversation(conversation)"
>
<img class="participant-portrait" alt="user portrait" src="@/assets/profile.png" />

53
frontend/src/pages/user/providers/Home.vue
View File

@ -1,8 +1,12 @@
<template>
<div class="provider-hub-container" id="provider-accordion-container">
<template v-if="recommendedProviders">
<div class="accordion accordion-list" v-for="(provider, index) in recommendedProviders" :key="index">
<div class="accordion-item my-3" >
<div
class="accordion accordion-list"
v-for="(provider, index) in recommendedProviders"
:key="index"
>
<div class="accordion-item my-3">
<h2 class="accordion-header">
<button
class="accordion-button collapsed"
@ -14,16 +18,13 @@
>
<div class="provider-summary-containter dashed-container">
<div class="provider-portrait-containter">
<img
class="provider-portrait"
alt="user portrait"
src="@/assets/profile.png"
/>
<img class="provider-portrait" alt="user portrait" src="@/assets/profile.png" />
</div>
<div class="provider-name-container">
<label class="provider-name-label" for="provider-name">Name</label>
<span class="provider-name-span" id="provider-name">
{{ provider.user_profile.first_name }} {{ provider.user_profile.last_name }}</span
{{ provider.user_profile.first_name }}
{{ provider.user_profile.last_name }}</span
>
</div>
<div class="provider-stay-on-freeleaps-container">
@ -80,9 +81,7 @@
<div class="statistics-content-container" id="statistics-content">
<div class="delivery-container">
<div class="dd-project-container">
<label
class="dd-project-label"
for="delivery-delivered-projects"
<label class="dd-project-label" for="delivery-delivered-projects"
>Delivered projects</label
>
<span class="dd-project-span" id="delivery-delivered-projects">
@ -98,9 +97,7 @@
</span>
</div>
<div class="dd-project-container">
<label
class="dd-project-label"
for="delivery-top-programming-language"
<label class="dd-project-label" for="delivery-top-programming-language"
>Top programming languages</label
>
<div
@ -118,15 +115,10 @@
</div>
</div>
<div class="dd-project-container">
<label
class="dd-project-label"
for="delivery-weekly-produced-code"
<label class="dd-project-label" for="delivery-weekly-produced-code"
>Weekly produced code</label
>
<span
class="dd-project-span"
id="delivery-weekly-produced-code"
>
<span class="dd-project-span" id="delivery-weekly-produced-code">
{{ provider.provider_deliveries.lines_of_code_per_week }} line(s)
</span>
</div>
@ -141,15 +133,10 @@
</span>
</div>
<div class="dd-project-container">
<label
class="dd-project-label"
for="activity-invitation-to-requests"
<label class="dd-project-label" for="activity-invitation-to-requests"
>Invitations to requests</label
>
<span
class="dd-project-span"
id="activity-invitation-to-requests"
>
<span class="dd-project-span" id="activity-invitation-to-requests">
{{ provider.provider_activities.invitations_to_open_requests }}
</span>
</div>
@ -228,7 +215,9 @@
>
<div class="accordion-body">
<div class="invite-to-request-container">
<label class="invite-to-request-content-label" for="invite-to-request-content"
<label
class="invite-to-request-content-label"
for="invite-to-request-content"
>Invite
<span class="invite-to-request-name-span"
>{{ provider.user_profile.first_name }}
@ -420,7 +409,7 @@ export default {
.self-intro-container {
@extend .flex-colum-container;
margin-bottom: 20px
margin-bottom: 20px;
// @extend .m-1;
// @extend .border;
}
@ -429,7 +418,7 @@ export default {
@extend .label-text-light;
@extend .w-100;
font-size: 14px;
font-weight: bold !important
font-weight: bold !important;
}
.self-intro-content-container {
@ -460,7 +449,7 @@ export default {
@extend .flex-row-container;
@extend .justify-content-around;
@extend .w-100;
background-color: rgba(32,90,239,.03);
background-color: rgba(32, 90, 239, 0.03);
margin-bottom: 12px;
padding: 12px 0;
}

40
frontend/src/pages/user/requests/Home.vue
View File

@ -7,7 +7,12 @@
:id="group.name"
>
<div v-if="group.data" id="request-invitation-container">
<div class="accordion accordion-list" v-for="(request, index) in group.data" :key="index" :id="request.id">
<div
class="accordion accordion-list"
v-for="(request, index) in group.data"
:key="index"
:id="request.id"
>
<div class="accordion-item my-3">
<h2 class="accordion-header">
<button
@ -20,7 +25,9 @@
>
<div class="dashed-container request-content-container">
<div class="request-content-issuer-container">
<label class="request-content-label" for="request-content-issuer-box">Issuer</label>
<label class="request-content-label" for="request-content-issuer-box"
>Issuer</label
>
<div class="request-content-box" id="request-content-issuer-box">
<span class="request-content-issuer-text">
{{ request.issuer_profile.first_name }}
@ -29,7 +36,9 @@
</div>
</div>
<div class="request-content-title-container">
<label class="request-content-label" for="request-content-title-box">Request</label>
<label class="request-content-label" for="request-content-title-box"
>Request</label
>
<div class="request-content-box" id="request-content-title-box">
<span class="request-content-title-text"> {{ request.title }}</span>
</div>
@ -43,7 +52,9 @@
</div>
</div>
<div class="request-content-score-container">
<label class="request-content-label" for="request-content-score-box">Score</label>
<label class="request-content-label" for="request-content-score-box"
>Score</label
>
<div class="request-content-box" id="request-content-score-box">
<span class="request-content-score-text">
{{ request.score }}
@ -105,7 +116,8 @@
id="issuer-achievement-stay-content-div"
>
<span class="issuer-achievement-stay-content-text">
{{ request.issuer_achievement.activeness.days_of_staying_on }} day(s)</span
{{ request.issuer_achievement.activeness.days_of_staying_on }}
day(s)</span
>
</div>
</div>
@ -163,7 +175,6 @@
</div>
</div>
</div>
</div>
</div>
</template>
@ -202,7 +213,8 @@ export default {
return DateUtils.FromJsonToDateString(fulltime)
},
previewAttachedFile(request_id, document_id) {
this.mnx_navToPdfContentViewer(request_id, document_id)
// !!! SHOULD NOT use PdfContentViewer which is designed for unlogged in users.
// !!! Instead, should have a dedicated pdf viewer which should follow the figma design.
// WorksapceApi.fetchAttachedFileAsMediaData(request_id, document_id)
// .then((response) => {
// let media_data = response.data
@ -304,7 +316,7 @@ export default {
}
.request-description-container {
margin-bottom: 20px
margin-bottom: 20px;
}
.make-proposal-button {
@ -319,7 +331,7 @@ export default {
.issuer-profile-container {
border-top: 1px solid #dee2e6;
padding-top: 15px
padding-top: 15px;
}
.issuer-profile-label {
@ -350,7 +362,7 @@ export default {
.issuer-achievement-issuer-text {
@extend .text-start;
font-weight: bold
font-weight: bold;
}
.issuer-achievement-stay-container {
@ -362,7 +374,7 @@ export default {
.issuer-achievement-stay-content-text {
@extend .text-start;
font-weight: bold
font-weight: bold;
}
.issuer-achievement-paid-container {
@ -380,12 +392,12 @@ export default {
.issuer-achievement-deposit-content-text {
@extend .text-start;
font-weight: bold
font-weight: bold;
}
.issuer-achievement-paid-content-text {
@extend .text-start;
font-weight: bold
font-weight: bold;
}
.issuer-achievement-credit-container {
@ -397,6 +409,6 @@ export default {
.issuer-achievement-credit-content-text {
@extend .text-start;
font-weight: bold
font-weight: bold;
}
</style>

2
frontend/src/pages/user/requests/ProposalSubmitted.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="submission-result-container">
<div class="submission-result-card">
<img src="@/assets/images/submited.png" alt="freeleaps"/>
<img src="@/assets/images/submited.png" alt="freeleaps" />
<span>Your proposal has been submitted!</span>
<span>
You can check the status of proposals in

60
frontend/src/pages/user/requests/Propose.vue
View File

@ -46,7 +46,10 @@
<button class="copy-existing-button" @click="copyProposal(existingProposal)">
Copy
</button>
<div class="existing-request-content-text" v-html="existingProposal.content"></div>
<div
class="existing-request-content-text"
v-html="existingProposal.content"
></div>
</div>
</div>
</div>
@ -95,7 +98,9 @@
data-bs-parent="#template-item-container"
>
<div class="accordion-body">
<button class="load-template-button" @click="applyTemplate(template)">Apply</button>
<button class="load-template-button" @click="applyTemplate(template)">
Apply
</button>
<div class="template-content-text" v-html="template.proposal.content"></div>
</div>
</div>
@ -166,7 +171,12 @@
<div class="form-group">
<div class="input-group-container">
<div class="form-floating">
<input class="input-email" :id="`stage-payment-content-${index}`" type="number" v-model="stage.payment" />
<input
class="input-email"
:id="`stage-payment-content-${index}`"
type="number"
v-model="stage.payment"
/>
<label :for="`stage-payment-content-${index}`">Payment</label>
</div>
<span class="btn-start">{{ stage.currency }}</span>
@ -177,7 +187,12 @@
<div class="form-group">
<div class="input-group-container">
<div class="form-floating">
<input class="input-email" :id="`stage-duration-content-${index}`" type="number" v-model="stage.duration_in_days" />
<input
class="input-email"
:id="`stage-duration-content-${index}`"
type="number"
v-model="stage.duration_in_days"
/>
<label :for="`stage-duration-content-${index}`">Duration</label>
</div>
<span class="btn-start">day(s)</span>
@ -188,7 +203,12 @@
<div class="form-group">
<div class="input-group-container">
<div class="form-floating">
<input class="input-email" :id="`stage-note-content-${index}`" type="text" v-model="stage.note" />
<input
class="input-email"
:id="`stage-note-content-${index}`"
type="text"
v-model="stage.note"
/>
<label :for="`stage-note-content-${index}`">Notes</label>
</div>
</div>
@ -410,7 +430,7 @@ export default {
}
},
addStage() {
this.proposal.stages.push({...this.emptyStage})
this.proposal.stages.push({ ...this.emptyStage })
},
removeStage(index) {
@ -458,7 +478,7 @@ export default {
.making-proposal-content {
border-radius: 12px;
box-shadow: 0px 0px 24px 0px #D4D3E380
box-shadow: 0px 0px 24px 0px #d4d3e380;
}
.request-label {
@ -471,7 +491,7 @@ export default {
padding: 0;
.accordion-list {
margin: 0;
box-shadow: none
box-shadow: none;
}
}
@ -494,7 +514,7 @@ export default {
align-items: center;
@extend .w-100;
justify-content: space-between;
border-bottom: 1px solid #E7E8EB;
border-bottom: 1px solid #e7e8eb;
}
.header-bar {
@ -511,7 +531,7 @@ export default {
.proposal-label {
font-size: 18px;
font-weight: bold;
color: #0D1637;
color: #0d1637;
}
.load-templates-button {
@ -558,7 +578,7 @@ export default {
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #E7E8EB;
border-bottom: 1px solid #e7e8eb;
}
.stage-item-content-label {
@ -636,7 +656,7 @@ export default {
.stage-more-action-container {
padding: 12px 0;
border-bottom: 1px solid #E7E8EB;
border-bottom: 1px solid #e7e8eb;
}
.stage-item-delete-button {
@ -662,13 +682,13 @@ export default {
@extend .w-100;
@extend .text-start;
padding: 12px 0;
border-bottom: 1px solid #E7E8EB;
border-bottom: 1px solid #e7e8eb;
}
.summary-content-container {
@extend .flex-row-container;
padding: 12px 0;
border-bottom: 1px solid #E7E8EB;
border-bottom: 1px solid #e7e8eb;
span {
@extend .text-start;
@ -676,7 +696,7 @@ export default {
flex: 1;
font-size: 12px;
font-weight: 600;
color: #0D1637
color: #0d1637;
}
}
@ -703,13 +723,13 @@ export default {
.cancel-button {
@extend .stop-button;
@extend .mx-3;
@extend .min-btn
@extend .min-btn;
}
.submit-button {
@extend .proceed-button;
@extend .mx-3;
@extend .min-btn
@extend .min-btn;
}
.offcanvas-parent {
@ -745,7 +765,7 @@ export default {
padding: 12px 0;
width: 100%;
text-align: left;
border-bottom: 1px solid #E7E8EB;
border-bottom: 1px solid #e7e8eb;
.btn-link {
padding: 0;
}
@ -765,10 +785,10 @@ export default {
.milestone-input-container {
width: calc(33.3% - 30px);
border: 2px dashed #9CB0F6;
border: 2px dashed #9cb0f6;
.btn-start {
background: transparent;
color: #0D1637;
color: #0d1637;
border: none;
display: flex;
align-items: center;

6
frontend/src/pages/user/workspace/Home.vue
View File

@ -941,7 +941,7 @@ export default {
.workspace-item-bar-left {
@extend .flex-row-container;
@extend .flex-grow-1;
padding: 0
padding: 0;
// @extend .border;
// @extend .me-3;
}
@ -979,7 +979,7 @@ export default {
.project-item-text {
@extend .text-start;
@extend .mx-1;
margin-bottom: 0
margin-bottom: 0;
}
.project-request-container {
@ -993,7 +993,7 @@ export default {
.request-action-withdraw {
@extend .btn;
@extend .btn-link;
padding: 0
padding: 0;
}
.project-request-content {

23
frontend/src/pages/user/workspace/requestIssue/Issue.vue
View File

@ -42,9 +42,7 @@
data-bs-parent="#existing-request-item-container"
>
<div class="accordion-body">
<button class="btn btn-link" @click="copyRequest(existingRequest)">
Copy
</button>
<button class="btn btn-link" @click="copyRequest(existingRequest)">Copy</button>
<div class="existing-request-content-text" v-html="existingRequest.content"></div>
</div>
</div>
@ -94,7 +92,10 @@
data-bs-parent="#template-item-container"
>
<div class="accordion-body">
<button class="select-template-button btn btn-link" @click="selectTemplate(template)">
<button
class="select-template-button btn btn-link"
@click="selectTemplate(template)"
>
Apply
</button>
<div class="template-content-textarea" v-html="template.content"></div>
@ -188,7 +189,7 @@ export default {
}
},
components: { FreeleapsEditor, InputSelector, SvgIcon },
mounted () {
mounted() {
this.initProducts()
this.initiateFromInput()
this.fetchTemplates()
@ -345,16 +346,16 @@ export default {
}
.request-issue-container {
@extend .flex-colum-container;
box-shadow: 0px 0px 24px 0px rgba(212,211,227,0.5);
box-shadow: 0px 0px 24px 0px rgba(212, 211, 227, 0.5);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
overflow: hidden
overflow: hidden;
}
.action-bar {
@extend .flex-row-container;
@extend .justify-content-end;
border-bottom: 1px solid #E7E8EB;
border-bottom: 1px solid #e7e8eb;
padding-top: 6px;
padding-bottom: 6px;
}
@ -377,7 +378,7 @@ export default {
.description-container {
@extend .w-100;
@extend .my-3;
flex: 1
flex: 1;
}
.input-description {
@ -513,13 +514,13 @@ export default {
.cancel-button {
@extend .stop-button;
@extend .mx-3;
@extend .min-btn
@extend .min-btn;
}
.submit-button {
@extend .proceed-button;
@extend .mx-3;
@extend .min-btn
@extend .min-btn;
}
.offcanvas-parent {

2
frontend/src/pages/user/workspace/requestIssue/Submitted.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="submission-result-container">
<div class="submission-result-card">
<img src="@/assets/images/submited.png" alt="freeleaps"/>
<img src="@/assets/images/submited.png" alt="freeleaps" />
<span>The request has been submitted!</span>
<span>
You can find it in

2
frontend/src/plugins/router/router.js
View File

@ -111,7 +111,7 @@ const router = createRouter({
{
name: 'pdf-content-viewer',
path: '/pdf-content-viewer',
path: '/pdf-content-viewer/:content_id',
meta: { requiredRoles: [userRoleEnum.NONE] },
components: { default: PdfContentViewer, footer: FooterGuest, header: HeaderGuest },
props: true