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

2
frontend/src/assets/styles/buttons.scss
View File

@ -55,4 +55,4 @@
.min-btn { .min-btn {
min-width: 115px; min-width: 115px;
} }

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

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

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

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

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

@ -12,10 +12,10 @@
<script> <script>
import * as PDFJS from 'pdfjs-dist/build/pdf' import * as PDFJS from 'pdfjs-dist/build/pdf'
PDFJS.GlobalWorkerOptions.workerPort = new Worker( PDFJS.GlobalWorkerOptions.workerPort = new Worker(
new URL("pdfjs-dist/build/pdf.worker.mjs", import.meta.url), new URL('pdfjs-dist/build/pdf.worker.mjs', import.meta.url),
{ type: "module" } { type: 'module' }
) )
// import * as PDFJS from 'pdfjs-dist/webpack.mjs' // import * as PDFJS from 'pdfjs-dist/webpack.mjs'
export default { export default {
@ -36,7 +36,7 @@ export default {
if (this.doc.url || this.doc.data) { if (this.doc.url || this.doc.data) {
this.renderPDF() this.renderPDF()
} }
} }
}, },
methods: { methods: {
renderPage(num) { renderPage(num) {

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

@ -14,8 +14,8 @@ export default {
mnx_navToContact() { mnx_navToContact() {
this.$router.push('/contact') this.$router.push('/contact')
}, },
mnx_navToPdfContentViewer(request_id, document_id) { mnx_navToPdfContentViewer(document_id) {
this.$router.push(`/pdf-content-viewer?request_id=${request_id}&document_id=${document_id}`) this.$router.push('/pdf-content-viewer/' + document_id)
}, },
mnx_navToLinkContentViewer(content_link_based64) { mnx_navToLinkContentViewer(content_link_based64) {
this.$router.push('/link-content-viewer/' + 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 { pdfjsLib } from '../../plugins/index'
// import { ContentApi } from '../../utils/index' // import { ContentApi } from '../../utils/index'
// import { Buffer } from 'buffer' // import { Buffer } from 'buffer'
import { WorksapceApi } from '@/utils/index' import { ContentApi } from '@/utils/index'
import PDFReader from '@/components/PDFReader.vue' import PDFReader from '@/components/PDFReader.vue'
export default { export default {
name: 'PdfContentViewer', name: 'PdfContentViewer',
// props: { props: {
// content_id: { content_id: {
// required: true, required: true,
// type: String type: String
// } }
// }, },
components: { PDFReader }, components: { PDFReader },
computed: {}, computed: {},
mounted() { mounted() {
if (this.$route.query?.request_id && this.$route.query?.document_id) { this.retrieve_blog_content(this.content_id)
this.retrieve_blog_content(this.$route.query.request_id, this.$route.query.document_id)
}
}, },
methods: { methods: {
retrieve_blog_content(request_id, document_id) { retrieve_blog_content(request_id, document_id) {
WorksapceApi.fetchAttachedFileAsMediaData(request_id, document_id).then(response => { ContentApi.retrieve_blog_content(request_id, document_id).then((response) => {
this.content_media_data = {url: response.data} 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" v-for="(conversation, index) in conversations"
:key="index" :key="index"
class="conversation-container" 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)" @click="selectConversation(conversation)"
> >
<img class="participant-portrait" alt="user portrait" src="@/assets/profile.png" /> <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> <template>
<div class="provider-hub-container" id="provider-accordion-container"> <div class="provider-hub-container" id="provider-accordion-container">
<template v-if="recommendedProviders"> <template v-if="recommendedProviders">
<div class="accordion accordion-list" v-for="(provider, index) in recommendedProviders" :key="index"> <div
<div class="accordion-item my-3" > class="accordion accordion-list"
v-for="(provider, index) in recommendedProviders"
:key="index"
>
<div class="accordion-item my-3">
<h2 class="accordion-header"> <h2 class="accordion-header">
<button <button
class="accordion-button collapsed" class="accordion-button collapsed"
@ -14,16 +18,13 @@
> >
<div class="provider-summary-containter dashed-container"> <div class="provider-summary-containter dashed-container">
<div class="provider-portrait-containter"> <div class="provider-portrait-containter">
<img <img class="provider-portrait" alt="user portrait" src="@/assets/profile.png" />
class="provider-portrait"
alt="user portrait"
src="@/assets/profile.png"
/>
</div> </div>
<div class="provider-name-container"> <div class="provider-name-container">
<label class="provider-name-label" for="provider-name">Name</label> <label class="provider-name-label" for="provider-name">Name</label>
<span class="provider-name-span" id="provider-name"> <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>
<div class="provider-stay-on-freeleaps-container"> <div class="provider-stay-on-freeleaps-container">
@ -80,9 +81,7 @@
<div class="statistics-content-container" id="statistics-content"> <div class="statistics-content-container" id="statistics-content">
<div class="delivery-container"> <div class="delivery-container">
<div class="dd-project-container"> <div class="dd-project-container">
<label <label class="dd-project-label" for="delivery-delivered-projects"
class="dd-project-label"
for="delivery-delivered-projects"
>Delivered projects</label >Delivered projects</label
> >
<span class="dd-project-span" id="delivery-delivered-projects"> <span class="dd-project-span" id="delivery-delivered-projects">
@ -98,9 +97,7 @@
</span> </span>
</div> </div>
<div class="dd-project-container"> <div class="dd-project-container">
<label <label class="dd-project-label" for="delivery-top-programming-language"
class="dd-project-label"
for="delivery-top-programming-language"
>Top programming languages</label >Top programming languages</label
> >
<div <div
@ -118,15 +115,10 @@
</div> </div>
</div> </div>
<div class="dd-project-container"> <div class="dd-project-container">
<label <label class="dd-project-label" for="delivery-weekly-produced-code"
class="dd-project-label"
for="delivery-weekly-produced-code"
>Weekly produced code</label >Weekly produced code</label
> >
<span <span class="dd-project-span" id="delivery-weekly-produced-code">
class="dd-project-span"
id="delivery-weekly-produced-code"
>
{{ provider.provider_deliveries.lines_of_code_per_week }} line(s) {{ provider.provider_deliveries.lines_of_code_per_week }} line(s)
</span> </span>
</div> </div>
@ -141,15 +133,10 @@
</span> </span>
</div> </div>
<div class="dd-project-container"> <div class="dd-project-container">
<label <label class="dd-project-label" for="activity-invitation-to-requests"
class="dd-project-label"
for="activity-invitation-to-requests"
>Invitations to requests</label >Invitations to requests</label
> >
<span <span class="dd-project-span" id="activity-invitation-to-requests">
class="dd-project-span"
id="activity-invitation-to-requests"
>
{{ provider.provider_activities.invitations_to_open_requests }} {{ provider.provider_activities.invitations_to_open_requests }}
</span> </span>
</div> </div>
@ -228,7 +215,9 @@
> >
<div class="accordion-body"> <div class="accordion-body">
<div class="invite-to-request-container"> <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 >Invite
<span class="invite-to-request-name-span" <span class="invite-to-request-name-span"
>{{ provider.user_profile.first_name }} >{{ provider.user_profile.first_name }}
@ -420,7 +409,7 @@ export default {
.self-intro-container { .self-intro-container {
@extend .flex-colum-container; @extend .flex-colum-container;
margin-bottom: 20px margin-bottom: 20px;
// @extend .m-1; // @extend .m-1;
// @extend .border; // @extend .border;
} }
@ -429,7 +418,7 @@ export default {
@extend .label-text-light; @extend .label-text-light;
@extend .w-100; @extend .w-100;
font-size: 14px; font-size: 14px;
font-weight: bold !important font-weight: bold !important;
} }
.self-intro-content-container { .self-intro-content-container {
@ -460,7 +449,7 @@ export default {
@extend .flex-row-container; @extend .flex-row-container;
@extend .justify-content-around; @extend .justify-content-around;
@extend .w-100; @extend .w-100;
background-color: rgba(32,90,239,.03); background-color: rgba(32, 90, 239, 0.03);
margin-bottom: 12px; margin-bottom: 12px;
padding: 12px 0; padding: 12px 0;
} }

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

@ -6,154 +6,167 @@
class="request-invitations" class="request-invitations"
:id="group.name" :id="group.name"
> >
<div v-if="group.data" id="request-invitation-container"> <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
<div class="accordion-item my-3"> class="accordion accordion-list"
<h2 class="accordion-header"> v-for="(request, index) in group.data"
<button :key="index"
class="accordion-button collapsed" :id="request.id"
type="button" >
data-bs-toggle="collapse" <div class="accordion-item my-3">
:data-bs-target="'#collapse' + index" <h2 class="accordion-header">
aria-expanded="false" <button
:aria-controls="'collapse' + index" class="accordion-button collapsed"
> type="button"
<div class="dashed-container request-content-container"> data-bs-toggle="collapse"
<div class="request-content-issuer-container"> :data-bs-target="'#collapse' + index"
<label class="request-content-label" for="request-content-issuer-box">Issuer</label> aria-expanded="false"
<div class="request-content-box" id="request-content-issuer-box"> :aria-controls="'collapse' + index"
<span class="request-content-issuer-text"> >
{{ request.issuer_profile.first_name }} <div class="dashed-container request-content-container">
{{ request.issuer_profile.last_name }}</span <div class="request-content-issuer-container">
<label class="request-content-label" for="request-content-issuer-box"
>Issuer</label
> >
</div> <div class="request-content-box" id="request-content-issuer-box">
</div> <span class="request-content-issuer-text">
<div class="request-content-title-container">
<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>
</div>
<div class="request-content-date-container">
<label class="request-content-label" for="request-content-date-box">Date</label>
<div class="request-content-box" id="request-content-date-box">
<span class="request-content-date-text">
{{ getDateFromFulltimeString(request.update_time) }}
</span>
</div>
</div>
<div class="request-content-score-container">
<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 }}
</span>
</div>
</div>
</div>
</button>
</h2>
<div
:id="'collapse' + index"
class="accordion-collapse collapse"
data-bs-parent="#request-invitation-container"
>
<div class="accordion-body">
<div class="request-description-container">
<button class="make-proposal-button" type="button" @click="Propose(request)">
Propose
</button>
<div class="request-description-content" v-html="request.content"></div>
<div v-for="(file, index) in request.attached_files" :key="index">
<button @click="previewAttachedFile(request.id, file.document_id)">
Preview{{ file.file_name }}
</button>
<button @click="downloadAttachedFile(request.id, file.document_id)">
Download{{ file.file_name }}
</button>
</div>
</div>
<div class="issuer-profile-container">
<!-- <label class="issuer-profile-label" for="issuer-achievement-container"
>Issuer profile</label
> -->
<div class="issuer-achievement-container" id="issuer-achievement-container">
<div class="issuer-achievement-isssuer-container">
<label
class="issuer-achievement-label"
for="issuer-achievement-isssuer-content-div"
>Name</label
>
<div
class="issuer-achievement-content-container"
id="issuer-achievement-isssuer-content-div"
>
<span class="issuer-achievement-issuer-text">
{{ request.issuer_profile.first_name }} {{ request.issuer_profile.first_name }}
{{ request.issuer_profile.last_name }}</span {{ request.issuer_profile.last_name }}</span
> >
</div> </div>
</div> </div>
<div class="issuer-achievement-stay-container"> <div class="request-content-title-container">
<label <label class="request-content-label" for="request-content-title-box"
class="issuer-achievement-label" >Request</label
for="issuer-achievement-stay-content-div"
>Stay on Freeleaps</label
> >
<div <div class="request-content-box" id="request-content-title-box">
class="issuer-achievement-content-container" <span class="request-content-title-text"> {{ request.title }}</span>
id="issuer-achievement-stay-content-div"
>
<span class="issuer-achievement-stay-content-text">
{{ request.issuer_achievement.activeness.days_of_staying_on }} day(s)</span
>
</div> </div>
</div> </div>
<div class="issuer-achievement-paid-container"> <div class="request-content-date-container">
<label <label class="request-content-label" for="request-content-date-box">Date</label>
class="issuer-achievement-label" <div class="request-content-box" id="request-content-date-box">
for="issuer-achievement-paid-content-div" <span class="request-content-date-text">
>Total payment</label {{ getDateFromFulltimeString(request.update_time) }}
> </span>
<div
class="issuer-achievement-content-container"
id="issuer-achievement-stay-content-div"
>
<span class="issuer-achievement-paid-content-text">
{{ request.issuer_achievement.issuer.spending.total }}
{{ request.issuer_achievement.issuer.spending.currency }}</span
>
</div> </div>
</div> </div>
<div class="issuer-achievement-deposit-container"> <div class="request-content-score-container">
<label <label class="request-content-label" for="request-content-score-box"
class="issuer-achievement-label" >Score</label
for="issuer-achievement-deposit-content-div"
>Deposit</label
> >
<div <div class="request-content-box" id="request-content-score-box">
class="issuer-achievement-content-container" <span class="request-content-score-text">
id="issuer-achievement-deposit-content-div" {{ request.score }}
> </span>
<span class="issuer-achievement-deposit-content-text">
{{ request.issuer_achievement.issuer.deposit.available }}
{{ request.issuer_achievement.issuer.deposit.currency }}</span
>
</div> </div>
</div> </div>
<div class="issuer-achievement-credit-container"> </div>
<label </button>
class="issuer-achievement-label" </h2>
for="issuer-achievement-credit-content-div" <div
>Credit</label :id="'collapse' + index"
> class="accordion-collapse collapse"
<div data-bs-parent="#request-invitation-container"
class="issuer-achievement-content-container" >
id="issuer-achievement-credit-content-div" <div class="accordion-body">
> <div class="request-description-container">
<span class="issuer-achievement-credit-content-text"> <button class="make-proposal-button" type="button" @click="Propose(request)">
{{ request.issuer_achievement.activeness.credit }}</span Propose
</button>
<div class="request-description-content" v-html="request.content"></div>
<div v-for="(file, index) in request.attached_files" :key="index">
<button @click="previewAttachedFile(request.id, file.document_id)">
Preview{{ file.file_name }}
</button>
<button @click="downloadAttachedFile(request.id, file.document_id)">
Download{{ file.file_name }}
</button>
</div>
</div>
<div class="issuer-profile-container">
<!-- <label class="issuer-profile-label" for="issuer-achievement-container"
>Issuer profile</label
> -->
<div class="issuer-achievement-container" id="issuer-achievement-container">
<div class="issuer-achievement-isssuer-container">
<label
class="issuer-achievement-label"
for="issuer-achievement-isssuer-content-div"
>Name</label
> >
<div
class="issuer-achievement-content-container"
id="issuer-achievement-isssuer-content-div"
>
<span class="issuer-achievement-issuer-text">
{{ request.issuer_profile.first_name }}
{{ request.issuer_profile.last_name }}</span
>
</div>
</div>
<div class="issuer-achievement-stay-container">
<label
class="issuer-achievement-label"
for="issuer-achievement-stay-content-div"
>Stay on Freeleaps</label
>
<div
class="issuer-achievement-content-container"
id="issuer-achievement-stay-content-div"
>
<span class="issuer-achievement-stay-content-text">
{{ request.issuer_achievement.activeness.days_of_staying_on }}
day(s)</span
>
</div>
</div>
<div class="issuer-achievement-paid-container">
<label
class="issuer-achievement-label"
for="issuer-achievement-paid-content-div"
>Total payment</label
>
<div
class="issuer-achievement-content-container"
id="issuer-achievement-stay-content-div"
>
<span class="issuer-achievement-paid-content-text">
{{ request.issuer_achievement.issuer.spending.total }}
{{ request.issuer_achievement.issuer.spending.currency }}</span
>
</div>
</div>
<div class="issuer-achievement-deposit-container">
<label
class="issuer-achievement-label"
for="issuer-achievement-deposit-content-div"
>Deposit</label
>
<div
class="issuer-achievement-content-container"
id="issuer-achievement-deposit-content-div"
>
<span class="issuer-achievement-deposit-content-text">
{{ request.issuer_achievement.issuer.deposit.available }}
{{ request.issuer_achievement.issuer.deposit.currency }}</span
>
</div>
</div>
<div class="issuer-achievement-credit-container">
<label
class="issuer-achievement-label"
for="issuer-achievement-credit-content-div"
>Credit</label
>
<div
class="issuer-achievement-content-container"
id="issuer-achievement-credit-content-div"
>
<span class="issuer-achievement-credit-content-text">
{{ request.issuer_achievement.activeness.credit }}</span
>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -163,8 +176,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</template> </template>
@ -202,7 +213,8 @@ export default {
return DateUtils.FromJsonToDateString(fulltime) return DateUtils.FromJsonToDateString(fulltime)
}, },
previewAttachedFile(request_id, document_id) { 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) // WorksapceApi.fetchAttachedFileAsMediaData(request_id, document_id)
// .then((response) => { // .then((response) => {
// let media_data = response.data // let media_data = response.data
@ -304,7 +316,7 @@ export default {
} }
.request-description-container { .request-description-container {
margin-bottom: 20px margin-bottom: 20px;
} }
.make-proposal-button { .make-proposal-button {
@ -319,7 +331,7 @@ export default {
.issuer-profile-container { .issuer-profile-container {
border-top: 1px solid #dee2e6; border-top: 1px solid #dee2e6;
padding-top: 15px padding-top: 15px;
} }
.issuer-profile-label { .issuer-profile-label {
@ -350,7 +362,7 @@ export default {
.issuer-achievement-issuer-text { .issuer-achievement-issuer-text {
@extend .text-start; @extend .text-start;
font-weight: bold font-weight: bold;
} }
.issuer-achievement-stay-container { .issuer-achievement-stay-container {
@ -362,7 +374,7 @@ export default {
.issuer-achievement-stay-content-text { .issuer-achievement-stay-content-text {
@extend .text-start; @extend .text-start;
font-weight: bold font-weight: bold;
} }
.issuer-achievement-paid-container { .issuer-achievement-paid-container {
@ -380,12 +392,12 @@ export default {
.issuer-achievement-deposit-content-text { .issuer-achievement-deposit-content-text {
@extend .text-start; @extend .text-start;
font-weight: bold font-weight: bold;
} }
.issuer-achievement-paid-content-text { .issuer-achievement-paid-content-text {
@extend .text-start; @extend .text-start;
font-weight: bold font-weight: bold;
} }
.issuer-achievement-credit-container { .issuer-achievement-credit-container {
@ -397,6 +409,6 @@ export default {
.issuer-achievement-credit-content-text { .issuer-achievement-credit-content-text {
@extend .text-start; @extend .text-start;
font-weight: bold font-weight: bold;
} }
</style> </style>

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

@ -1,7 +1,7 @@
<template> <template>
<div class="submission-result-container"> <div class="submission-result-container">
<div class="submission-result-card"> <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>Your proposal has been submitted!</span>
<span> <span>
You can check the status of proposals in You can check the status of proposals in

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

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

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

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

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

@ -42,9 +42,7 @@
data-bs-parent="#existing-request-item-container" data-bs-parent="#existing-request-item-container"
> >
<div class="accordion-body"> <div class="accordion-body">
<button class="btn btn-link" @click="copyRequest(existingRequest)"> <button class="btn btn-link" @click="copyRequest(existingRequest)">Copy</button>
Copy
</button>
<div class="existing-request-content-text" v-html="existingRequest.content"></div> <div class="existing-request-content-text" v-html="existingRequest.content"></div>
</div> </div>
</div> </div>
@ -94,7 +92,10 @@
data-bs-parent="#template-item-container" data-bs-parent="#template-item-container"
> >
<div class="accordion-body"> <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 Apply
</button> </button>
<div class="template-content-textarea" v-html="template.content"></div> <div class="template-content-textarea" v-html="template.content"></div>
@ -131,7 +132,7 @@
data-bs-target="#offcanvas-template" data-bs-target="#offcanvas-template"
aria-controls="offcanvas-template" aria-controls="offcanvas-template"
> >
<svg-icon icon="btn-templates" /> <svg-icon icon="btn-templates" />
Templates Templates
</button> </button>
<button <button
@ -141,7 +142,7 @@
data-bs-target="#offcanvas-copy-existing" data-bs-target="#offcanvas-copy-existing"
aria-controls="offcanvas-copy-existing" aria-controls="offcanvas-copy-existing"
> >
<svg-icon icon="btn-history" /> <svg-icon icon="btn-history" />
Copy Copy
</button> </button>
</div> </div>
@ -188,7 +189,7 @@ export default {
} }
}, },
components: { FreeleapsEditor, InputSelector, SvgIcon }, components: { FreeleapsEditor, InputSelector, SvgIcon },
mounted () { mounted() {
this.initProducts() this.initProducts()
this.initiateFromInput() this.initiateFromInput()
this.fetchTemplates() this.fetchTemplates()
@ -345,16 +346,16 @@ export default {
} }
.request-issue-container { .request-issue-container {
@extend .flex-colum-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-left-radius: 12px;
border-top-right-radius: 12px; border-top-right-radius: 12px;
overflow: hidden overflow: hidden;
} }
.action-bar { .action-bar {
@extend .flex-row-container; @extend .flex-row-container;
@extend .justify-content-end; @extend .justify-content-end;
border-bottom: 1px solid #E7E8EB; border-bottom: 1px solid #e7e8eb;
padding-top: 6px; padding-top: 6px;
padding-bottom: 6px; padding-bottom: 6px;
} }
@ -377,7 +378,7 @@ export default {
.description-container { .description-container {
@extend .w-100; @extend .w-100;
@extend .my-3; @extend .my-3;
flex: 1 flex: 1;
} }
.input-description { .input-description {
@ -513,13 +514,13 @@ export default {
.cancel-button { .cancel-button {
@extend .stop-button; @extend .stop-button;
@extend .mx-3; @extend .mx-3;
@extend .min-btn @extend .min-btn;
} }
.submit-button { .submit-button {
@extend .proceed-button; @extend .proceed-button;
@extend .mx-3; @extend .mx-3;
@extend .min-btn @extend .min-btn;
} }
.offcanvas-parent { .offcanvas-parent {

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

@ -1,7 +1,7 @@
<template> <template>
<div class="submission-result-container"> <div class="submission-result-container">
<div class="submission-result-card"> <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>The request has been submitted!</span>
<span> <span>
You can find it in 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', name: 'pdf-content-viewer',
path: '/pdf-content-viewer', path: '/pdf-content-viewer/:content_id',
meta: { requiredRoles: [userRoleEnum.NONE] }, meta: { requiredRoles: [userRoleEnum.NONE] },
components: { default: PdfContentViewer, footer: FooterGuest, header: HeaderGuest }, components: { default: PdfContentViewer, footer: FooterGuest, header: HeaderGuest },
props: true props: true