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

update

Browse Source
This commit is contained in:
min.jiang 2024-06-14 06:07:51 +08:00
parent b38f62799a
commit 04554ab669
6 changed files with 375 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -197,3 +197,38 @@ p {
} }
} }
} }
.submission-result-container {
@extend .flex-row-container;
align-items: center;
justify-content: center;
min-height: $body-height;
}
.submission-result-card {
width: fit-content;
min-width: 641px;
padding: 45px 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 26px;
line-height: 36px;
box-shadow: 0px 0px 24px 0px #D4D3E380;
img {
width: 86px;
margin-bottom: 20px
}
.btn-link {
text-decoration: underline;
padding: 0;
font-size: inherit
}
}
.upload-contianer {
display: flex;
align-items: center;
}

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

@ -1,10 +1,13 @@
<template> <template>
<div> <div class="submission-result-container">
<p class="result-text">Your proposal has been submitted!</p> <div class="submission-result-card">
<p class="result-text"> <img src="@/assets/images/submited.png" alt="freeleaps"/>
You can check the status of proposals in <span>Your proposal has been submitted!</span>
<button class="goto-workspace-button" @click="gotoWorkspace">workspace</button> <span>
</p> You can check the status of proposals in
<button class="btn btn-link" @click="gotoWorkspace()">My work.</button>
</span>
</div>
</div> </div>
</template> </template>
@ -36,12 +39,3 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped>
.result-text {
@extend .fs-2;
}
.goto-workspace-button {
@extend .proceed-button;
}
</style>

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

@ -1,111 +1,110 @@
<template> <template>
<div class="making-proposal-container offcanvas-parent"> <div class="making-proposal-container offcanvas-parent">
<div <div class="making-proposal-content">
<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>
<button <button
type="button" type="button"
class="btn-close" class="btn-close"
data-bs-dismiss="offcanvas" data-bs-dismiss="offcanvas"
aria-label="Close" aria-label="Close"
></button> ></button>
</div> </div>
<div class="offcanvas-body"> <div class="offcanvas-body">
<div class="accordion" id="existing-proposal-item-container"> <div class="accordion" id="existing-proposal-item-container">
<div
v-for="(existingProposal, index) in existingProposals"
:key="index"
:id="'existing-proposal' + index"
class="accordion-item"
>
<h2 class="accordion-header" :id="'existing-heading' + index">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
:data-bs-target="'#' + 'existing-proposal-collapse' + index"
aria-expanded="false"
:aria-controls="'collapse' + index"
>
{{ existingProposal.request.title }}
</button>
</h2>
<div <div
:id="'existing-proposal-collapse' + index" v-for="(existingProposal, index) in existingProposals"
class="accordion-collapse collapse" :key="index"
:aria-labelledby="'existing-heading' + index" :id="'existing-proposal' + index"
data-bs-parent="#existing-proposal-item-container" class="accordion-item"
> >
<div class="accordion-body"> <h2 class="accordion-header" :id="'existing-heading' + index">
<button class="copy-existing-button" @click="copyProposal(existingProposal)"> <button
Copy class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
:data-bs-target="'#' + 'existing-proposal-collapse' + index"
aria-expanded="false"
:aria-controls="'collapse' + index"
>
{{ existingProposal.request.title }}
</button> </button>
<div class="existing-request-content-text" v-html="existingProposal.content"></div> </h2>
</div> <div
</div> :id="'existing-proposal-collapse' + index"
</div> class="accordion-collapse collapse"
</div> :aria-labelledby="'existing-heading' + index"
</div> data-bs-parent="#existing-proposal-item-container"
</div>
<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">Apply proposal template</h5>
<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 templates"
: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"
> >
{{ template.title }} <div class="accordion-body">
</button> <button class="copy-existing-button" @click="copyProposal(existingProposal)">
</h2> Copy
<div </button>
:id="'collapse' + index" <div class="existing-request-content-text" v-html="existingProposal.content"></div>
class="accordion-collapse collapse" </div>
:aria-labelledby="'heading' + index"
data-bs-parent="#template-item-container"
>
<div class="accordion-body">
<button class="load-template-button" @click="applyTemplate(template)">Apply</button>
<div class="template-content-text" v-html="template.proposal.content"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div
<div v-if="request" class="request-container"> class="offcanvas offcanvas-end offcanvas-container"
<label class="request-label" for="request-content-container">For request:</label> tabindex="-1"
<div class="request-content-container" id="request-content-container"> id="offcanvas-template"
<div class="accordion" id="accordion-request-container"> aria-labelledby="offcanvas-template"
>
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvas-template">Apply proposal template</h5>
<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 templates"
: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"
>
{{ template.title }}
</button>
</h2>
<div
:id="'collapse' + index"
class="accordion-collapse collapse"
:aria-labelledby="'heading' + index"
data-bs-parent="#template-item-container"
>
<div class="accordion-body">
<button class="load-template-button" @click="applyTemplate(template)">Apply</button>
<div class="template-content-text" v-html="template.proposal.content"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-if="request" class="request-container" id="request-content-container">
<div class="accordion accordion-list" id="accordion-request-container">
<div class="accordion-item"> <div class="accordion-item">
<h2 class="accordion-header"> <h2 class="accordion-header">
<button <button
@ -116,7 +115,7 @@
aria-expanded="false" aria-expanded="false"
aria-controls="collapse-request-content" aria-controls="collapse-request-content"
> >
{{ request.title }} <span class="dashed-container">{{ request.title }}</span>
</button> </button>
</h2> </h2>
<div <div
@ -131,95 +130,143 @@
</div> </div>
</div> </div>
</div> </div>
</div> <div v-if="proposal" class="proposal-container">
<div v-if="proposal" class="proposal-container"> <div class="proposal-header-container">
<label class="proposal-label">Proposal:</label> <label class="proposal-label">Proposal:</label>
<div class="header-bar"> <div class="header-bar">
<button <button
class="load-templates-button" class="btn btn-link"
type="button" type="button"
data-bs-toggle="offcanvas" data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-template" data-bs-target="#offcanvas-template"
aria-controls="offcanvas-template" aria-controls="offcanvas-template"
> >
Templates... <svg-icon icon="btn-templates" />
</button> Templates
<button </button>
class="copy-proposal-button" <button
type="button" class="btn btn-link"
data-bs-toggle="offcanvas" type="button"
data-bs-target="#offcanvas-copy-existing" data-bs-toggle="offcanvas"
aria-controls="offcanvas-copy-existing" data-bs-target="#offcanvas-copy-existing"
> aria-controls="offcanvas-copy-existing"
Copy... >
</button> <svg-icon icon="btn-history" />
</div> Copy
<div </button>
class="cover-letter-content-container"
id="cover-letter-content"
contenteditable="true"
v-html="proposal.content"
@blur="coverLetterDone($event)"
></div>
<label class="summary-content-label" for="stage-content"> Milestones</label>
<div class="stage-content-container" id="stage-content">
<div v-for="(stage, index) in proposal.stages" :key="index" class="stage-item-container">
<div class="stage-item-content-container" id="stage-item-content">
<div class="stage-payment-container">
<label class="stage-content-label" for="stage-payment-content">Payment</label>
<div class="stage-payment-content-container" id="stage-payment-content">
<input
type="text"
class="stage-payment-content-text"
id="stage-payment-content-text"
v-model="stage.payment"
/>
<span class="stage-payment-content-span"> {{ stage.currency }}</span>
</div>
</div>
<div class="stage-duration-container">
<label class="stage-content-label" for="stage-duration-content">Duration</label>
<div class="stage-duration-content-container" id="stage-duration-content">
<input
type="text"
class="stage-duration-content-text"
v-model="stage.duration_in_days"
/>
<span class="stage-duration-content-span"> day(s)</span>
</div>
</div>
<div class="stage-note-container">
<label class="stage-content-label" for="stage-note-content">Notes</label>
<input class="stage-note-content-text" id="stage-note-content" v-model="stage.note" />
</div>
<button class="stage-item-delete-button" @click="removeStage(index)"></button>
</div> </div>
</div> </div>
<div class="stage-more-action-container"> <div class="cover-letter-content-container" id="cover-letter-content">
<button class="stage-add-more-button" @click="addStage()">+ Add Milestones</button> <freeleaps-editor v-model:content="proposal.content" />
</div> </div>
<div class="summary-content-container" id="summary-content"> <label class="summary-content-label" for="stage-content"> Milestones</label>
<span class="summary-total-stages-content-span" id="summary-total-stages-content"> <div class="stage-content-container" id="stage-content">
Total milestones: <div v-for="(stage, index) in proposal.stages" :key="index" class="stage-item-container">
{{ summary.total_stages }} <div class="input-container milestone-input-container">
</span> <div class="form-group">
<span class="summary-total-payment-content-span" id="summary-total-payment-content"> <div class="input-group-container">
Total payment:{{ summary.total_payment }} {{ summary.currency }} <div class="form-floating">
</span> <input class="input-email" :id="`stage-payment-content-${index}`" type="number" v-model="stage.payment" />
<span class="summary-total-duration-content-span" id="summary-total-duration-content"> <label :for="`stage-payment-content-${index}`">Payment</label>
Total duration:{{ summary.total_duration_in_days }} day(s) </div>
</span> <span class="btn-start">{{ stage.currency }}</span>
</div>
</div>
</div>
<div class="input-container milestone-input-container">
<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" />
<label :for="`stage-duration-content-${index}`">Duration</label>
</div>
<span class="btn-start">day(s)</span>
</div>
</div>
</div>
<div class="input-container milestone-input-container">
<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" />
<label :for="`stage-note-content-${index}`">Notes</label>
</div>
</div>
</div>
</div>
<button class="stage-item-delete-button">
<svg-icon v-if="index != 0" icon="delete" @click="removeStage(index)" />
</button>
<!-- <div class="stage-item-content-container" id="stage-item-content">
<div class="stage-payment-container">
<label class="stage-content-label" for="stage-payment-content">Payment</label>
<div class="stage-payment-content-container" id="stage-payment-content">
<input
type="text"
class="stage-payment-content-text"
id="stage-payment-content-text"
v-model="stage.payment"
/>
<span class="stage-payment-content-span"> {{ stage.currency }}</span>
</div>
</div>
<div class="stage-duration-container">
<label class="stage-content-label" for="stage-duration-content">Duration</label>
<div class="stage-duration-content-container" id="stage-duration-content">
<input
type="text"
class="stage-duration-content-text"
v-model="stage.duration_in_days"
/>
<span class="stage-duration-content-span"> day(s)</span>
</div>
</div>
<div class="stage-note-container">
<label class="stage-content-label" for="stage-note-content">Notes</label>
<input class="stage-note-content-text" id="stage-note-content" v-model="stage.note" />
</div>
</div> -->
</div>
<div class="stage-more-action-container">
<button class="stage-add-more-button" @click="addStage()">+ Add Milestones</button>
</div>
<div class="summary-content-container" id="summary-content">
<span id="summary-total-stages-content">
Total milestones:
{{ summary.total_stages }}
</span>
<span id="summary-total-payment-content">
Total payment:{{ summary.total_payment }} {{ summary.currency }}
</span>
<span id="summary-total-duration-content">
Total duration:{{ summary.total_duration_in_days }} day(s)
</span>
</div>
</div>
<div class="file-upload-container">
<div class="upload-contianer">
<label class="btn btn-link">
<span v-if="!uploadFile">Upload file</span>
<span v-if="uploadFile">{{ uploadFile.name }}</span>
<input type="file" hidden @change="handleFileUpload" />
</label>
<svg-icon
v-if="uploadFile"
icon="delete"
class-name="delete-icon"
@click.stop="clearFile"
/>
</div>
<!-- <label for="file-upload" class="file-upload-label">Upload File:</label>
<input type="file" id="file-upload" class="file-upload-input" @change="handleFileUpload" /> -->
</div> </div>
</div> </div>
<div class="file-upload-container"> <div class="action-footer">
<label for="file-upload" class="file-upload-label">Upload File:</label> <button class="cancel-button" @click="back">Back</button>
<input type="file" id="file-upload" class="file-upload-input" @change="handleFileUpload" /> <button class="submit-button" @click="submit">Submit</button>
</div> </div>
</div> </div>
<div class="action-footer">
<button class="cancel-button" @click="back">Back</button>
<button class="submit-button" @click="submit">Submit</button>
</div>
</div> </div>
</template> </template>
@ -232,8 +279,11 @@ import {
preparedProposalSummary, preparedProposalSummary,
proposalUtils proposalUtils
} from '../../../types/index' } from '../../../types/index'
import SvgIcon from '@/components/SvgIcon.vue'
import FreeleapsEditor from '@/components/FreeleapsEditor.vue'
export default { export default {
name: 'MakeProposal', name: 'MakeProposal',
components: { SvgIcon, FreeleapsEditor },
props: { props: {
requestId: { requestId: {
required: true, required: true,
@ -252,7 +302,7 @@ export default {
}, },
watch: { watch: {
'proposal.stages': { 'proposal.stages': {
handler(val, oldVal) { handler() {
this.caculateSummary() this.caculateSummary()
}, },
deep: true deep: true
@ -281,6 +331,9 @@ export default {
handleFileUpload(event) { handleFileUpload(event) {
this.uploadFile = event.target.files[0] this.uploadFile = event.target.files[0]
}, },
clearFile() {
this.uploadFile = null
},
back() { back() {
this.mnx_goBack() this.mnx_goBack()
}, },
@ -357,7 +410,7 @@ export default {
} }
}, },
addStage() { addStage() {
this.proposal.stages.push(this.emptyStage) this.proposal.stages.push({...this.emptyStage})
}, },
removeStage(index) { removeStage(index) {
@ -399,6 +452,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.making-proposal-container { .making-proposal-container {
@extend .container; @extend .container;
padding-top: 24px;
padding-bottom: 24px;
}
.making-proposal-content {
border-radius: 12px;
box-shadow: 0px 0px 24px 0px #D4D3E380
} }
.request-label { .request-label {
@ -408,8 +468,11 @@ export default {
.request-container { .request-container {
@extend .container; @extend .container;
@extend .my-3; padding: 0;
@extend .border; .accordion-list {
margin: 0;
box-shadow: none
}
} }
.request-content-container { .request-content-container {
@ -423,17 +486,32 @@ export default {
.proposal-container { .proposal-container {
@extend .flex-colum-container; @extend .flex-colum-container;
@extend .border; }
.proposal-header-container {
display: flex;
padding: 15px 24px;
align-items: center;
@extend .w-100;
justify-content: space-between;
border-bottom: 1px solid #E7E8EB;
} }
.header-bar { .header-bar {
@extend .flex-row-container; @extend .flex-row-container;
@extend .justify-content-end; @extend .justify-content-end;
align-items: center;
.btn {
white-space: nowrap;
padding: 0;
margin-left: 15px;
}
} }
.proposal-label { .proposal-label {
@extend .label-text; font-size: 18px;
@extend .w-100; font-weight: bold;
color: #0D1637;
} }
.load-templates-button { .load-templates-button {
@ -459,9 +537,8 @@ export default {
.cover-letter-content-container { .cover-letter-content-container {
@extend .container; @extend .container;
min-height: 40vh; min-height: 40vh;
overflow: hidden; padding: 0;
@extend .text-start; margin-bottom: 20px;
@extend .border;
} }
.stage-content-label { .stage-content-label {
@ -471,13 +548,17 @@ export default {
.stage-content-container { .stage-content-container {
@extend .container; @extend .container;
min-height: 10vh; padding: 0;
@extend .border;
} }
.stage-item-container { .stage-item-container {
@extend .flex-colum-container; // @extend .flex-colum-container;
@extend .m-1; // @extend .m-1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #E7E8EB;
} }
.stage-item-content-label { .stage-item-content-label {
@ -554,18 +635,20 @@ export default {
} }
.stage-more-action-container { .stage-more-action-container {
@extend .flex-row-container; padding: 12px 0;
@extend .justify-content-around; border-bottom: 1px solid #E7E8EB;
@extend .my-1;
} }
.stage-item-delete-button { .stage-item-delete-button {
@extend .close-button; width: 42px;
@extend .btn;
@extend .btn-link;
} }
.stage-add-more-button { .stage-add-more-button {
@extend .proceed-button; @extend .btn;
@extend .w-70; @extend .btn-outline-primary;
@extend .w-100;
} }
.summary-container { .summary-container {
@ -575,14 +658,26 @@ export default {
} }
.summary-content-label { .summary-content-label {
@extend .label-text; @extend .proposal-label;
@extend .w-100; @extend .w-100;
@extend .text-start;
padding: 12px 0;
border-bottom: 1px solid #E7E8EB;
} }
.summary-content-container { .summary-content-container {
@extend .flex-row-container; @extend .flex-row-container;
@extend .justify-content-around; padding: 12px 0;
@extend .my-1; border-bottom: 1px solid #E7E8EB;
span {
@extend .text-start;
display: block;
flex: 1;
font-size: 12px;
font-weight: 600;
color: #0D1637
}
} }
.summary-total-stages-content-span { .summary-total-stages-content-span {
@ -601,16 +696,20 @@ export default {
} }
.action-footer { .action-footer {
@extend .flex-row-container; padding: 12px 0;
@extend .justify-content-around; text-align: left;
} }
.cancel-button { .cancel-button {
@extend .stop-button; @extend .stop-button;
@extend .mx-3;
@extend .min-btn
} }
.submit-button { .submit-button {
@extend .proceed-button; @extend .proceed-button;
@extend .mx-3;
@extend .min-btn
} }
.offcanvas-parent { .offcanvas-parent {
@ -643,9 +742,13 @@ export default {
} }
.file-upload-container { .file-upload-container {
@extend .flex-row-container; padding: 12px 0;
@extend .justify-content-start; width: 100%;
@extend .my-3; text-align: left;
border-bottom: 1px solid #E7E8EB;
.btn-link {
padding: 0;
}
} }
.file-upload-label { .file-upload-label {
@ -659,4 +762,25 @@ export default {
@extend .form-control; @extend .form-control;
@extend .w-30; @extend .w-30;
} }
.milestone-input-container {
width: calc(33.3% - 30px);
border: 2px dashed #9CB0F6;
.btn-start {
background: transparent;
color: #0D1637;
border: none;
display: flex;
align-items: center;
pointer-events: none;
}
}
.delete-icon {
color: $primary;
cursor: pointer;
&:hover {
opacity: 0.78;
}
}
</style> </style>

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

@ -336,10 +336,6 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.upload-contianer {
display: flex;
align-items: center;
}
.delete-icon { .delete-icon {
color: $primary; color: $primary;
cursor: pointer; cursor: pointer;

41
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
@ -39,42 +39,3 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped>
.submission-result-container {
@extend .flex-row-container;
align-items: center;
justify-content: center;
min-height: $body-height;
}
.submission-result-card {
width: fit-content;
min-width: 641px;
padding: 45px 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 26px;
line-height: 36px;
box-shadow: 0px 0px 24px 0px #D4D3E380;
img {
width: 86px;
margin-bottom: 20px
}
.btn-link {
text-decoration: underline;
padding: 0;
font-size: inherit
}
}
.submission-result-text {
@extend .fs-2;
}
.workspace-button {
@extend .inplace-proceed-button;
}
</style>

4
frontend/src/types/proposalUtils.js
View File

@ -35,8 +35,8 @@ class ProposalUtils {
if (stages) if (stages)
stages.forEach((element) => { stages.forEach((element) => {
summary.total_stages++ summary.total_stages++
summary.total_payment += element.payment summary.total_payment += Number(element.payment)
summary.total_duration_in_days += element.duration_in_days summary.total_duration_in_days += Number(element.duration_in_days)
summary.currency = element.currency summary.currency = element.currency
}) })
} }