Frontend code for letting supplier attach files when making proposal

This commit is contained in:
jetli 2024-07-30 22:15:52 -07:00
parent 5cd25c769d
commit 235e8378b9
2 changed files with 80 additions and 238 deletions

View File

@ -1,106 +1,57 @@
<template>
<div class="making-proposal-container offcanvas-parent">
<div class="making-proposal-content">
<div
class="offcanvas offcanvas-end offcanvas-container"
tabindex="-1"
id="offcanvas-copy-existing"
aria-labelledby="offcanvas-copy-existing"
>
<div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-copy-existing"
aria-labelledby="offcanvas-copy-existing">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvas-copy-existing">
{{ $t('Copy from existing proposals') }}
</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="existing-proposal-item-container">
<div
v-for="(existingProposal, index) in existingProposals"
:key="index"
:id="'existing-proposal' + index"
class="accordion-item"
>
<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"
>
<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">
<span class="dashed-container">{{ existingProposal.request.title }}</span>
</button>
</h2>
<div
:id="'existing-proposal-collapse' + index"
class="accordion-collapse collapse"
:aria-labelledby="'existing-heading' + index"
data-bs-parent="#existing-proposal-item-container"
>
<div :id="'existing-proposal-collapse' + index" class="accordion-collapse collapse"
:aria-labelledby="'existing-heading' + index" data-bs-parent="#existing-proposal-item-container">
<div class="accordion-body">
<button class="copy-existing-button" @click="copyProposal(existingProposal)">
{{ $t('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>
</div>
</div>
</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 proposal 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 templates"
:key="index"
:id="'template' + index"
class="accordion-item"
>
<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"
>
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
:data-bs-target="'#' + 'collapse' + index" aria-expanded="false" :aria-controls="'collapse' + index">
<span class="dashed-container">{{ template.title }}</span>
</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="load-template-button" @click="applyTemplate(template)">
{{ $t('Apply') }}
@ -116,22 +67,14 @@
<div class="accordion accordion-list" id="accordion-request-container">
<div class="accordion-item">
<h2 class="accordion-header">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapse-request-content"
aria-expanded="false"
aria-controls="collapse-request-content"
>
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse-request-content" aria-expanded="false"
aria-controls="collapse-request-content">
<span class="dashed-container">{{ request.title }}</span>
</button>
</h2>
<div
id="collapse-request-content"
class="accordion-collapse collapse"
data-bs-parent="#accordion-request-container"
>
<div id="collapse-request-content" class="accordion-collapse collapse"
data-bs-parent="#accordion-request-container">
<div class="accordion-body">
<div class="request-content" v-html="request.content"></div>
</div>
@ -143,23 +86,13 @@
<div class="proposal-header-container">
<label class="proposal-label">{{ $t('Proposal') }}:</label>
<div class="header-bar">
<button
class="btn btn-link"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-template"
aria-controls="offcanvas-template"
>
<button class="btn btn-link" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-template"
aria-controls="offcanvas-template">
<svg-icon icon="btn-templates" />
{{ $t('Templates') }}
</button>
<button
class="btn btn-link"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-copy-existing"
aria-controls="offcanvas-copy-existing"
>
<button class="btn btn-link" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-copy-existing" aria-controls="offcanvas-copy-existing">
<svg-icon icon="btn-history" />
{{ $t('Copy') }}
</button>
@ -175,12 +108,8 @@
<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}`">{{ $t('Payment') }}</label>
</div>
<span class="btn-start">{{ stage.currency }}</span>
@ -191,12 +120,8 @@
<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}`">{{ $t('Duration') }}</label>
</div>
<span class="btn-start">{{ $t('day(s)') }}</span>
@ -207,12 +132,7 @@
<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}`">{{ $t('Notes') }}</label>
</div>
</div>
@ -247,12 +167,7 @@
<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"
/>
<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" /> -->
@ -279,6 +194,7 @@ import {
} from '@/types/index'
import SvgIcon from '@/components/SvgIcon.vue'
import FreeleapsEditor from '@/components/FreeleapsEditor.vue'
import { WorksapceApi } from '../../../utils';
export default {
name: 'MakeProposal',
components: { SvgIcon, FreeleapsEditor },
@ -335,40 +251,33 @@ export default {
coverLetterDone(event) {
this.proposal.content = event.target.innerHTML
},
submit() {
attachFile() {
if (this.uploadFile) {
DocumentApi.upload(this.uploadFile)
WorksapceApi.attachFileToRequest(this.requestId, this.uploadFile)
.then((response) => {
return RequestHubApi.makeProposalForRequest(
this.requestId,
this.proposal.content,
this.proposal.stages,
response.data.document_id
)
})
.then((response) => {
this.proposal_id = response.data.proposal_id
this.mnx_navToRequestSubmitted(this.proposal_id)
})
.catch((error) => {
this.mnx_backendErrorHandler(error)
})
} else {
RequestHubApi.makeProposalForRequest(
this.requestId,
this.proposal.content,
this.proposal.stages,
null
)
.then((response) => {
let proposal_id = response.data
this.mnx_navToProposalSubmitted(proposal_id)
this.mnx_navToProposalSubmitted(this.requestId)
})
.catch((error) => {
this.mnx_backendErrorHandler(error)
})
}
},
submit() {
RequestHubApi.makeProposalForRequest(
this.requestId,
this.proposal.content,
this.proposal.stages,
null
).then((response) => {
if (this.uploadFile) {
this.attachFile()
} else {
this.mnx_navToRequestSubmitted(this.requestId)
}
}).catch((error) => {
this.mnx_backendErrorHandler(error)
})
},
loadFrom() {
switch (Number.parseInt(this.loadingMode, 10)) {
case proposingModelEnum.NO_LOADING: {

View File

@ -1,48 +1,26 @@
<template>
<div class="request-issue-container offcanvas-parent">
<div
class="offcanvas offcanvas-end offcanvas-container"
tabindex="-1"
id="offcanvas-copy-existing"
aria-labelledby="offcanvas-copy-existing"
>
<div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-copy-existing"
aria-labelledby="offcanvas-copy-existing">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvas-copy-existing">
{{ $t('Copy from existing request') }}
</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="existing-request-item-container">
<div
v-for="(existingRequest, index) in existingRequests"
:key="index"
:id="'existing-request' + index"
class="accordion-item"
>
<div v-for="(existingRequest, index) in existingRequests" :key="index" :id="'existing-request' + 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-request-collapse' + index"
aria-expanded="false"
:aria-controls="'collapse' + index"
>
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
:data-bs-target="'#' + 'existing-request-collapse' + index" aria-expanded="false"
:aria-controls="'collapse' + index">
<span class="dashed-container">{{ existingRequest.title }}</span>
</button>
</h2>
<div
:id="'existing-request-collapse' + index"
class="accordion-collapse collapse"
:aria-labelledby="'existing-heading' + index"
data-bs-parent="#existing-request-item-container"
>
<div :id="'existing-request-collapse' + index" class="accordion-collapse collapse"
:aria-labelledby="'existing-heading' + index" data-bs-parent="#existing-request-item-container">
<div class="accordion-body">
<button class="btn btn-link" @click="copyRequest(existingRequest)">
{{ $t('Copy') }}
@ -54,52 +32,26 @@
</div>
</div>
</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 request 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">
<span class="dashed-container">{{ template.title }}</span>
</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 btn btn-link"
@click="selectTemplate(template)"
>
<button class="select-template-button btn btn-link" @click="selectTemplate(template)">
{{ $t('Apply') }}
</button>
<div class="template-content-textarea" v-html="template.content"></div>
@ -110,42 +62,23 @@
</div>
</div>
<div class="action-bar">
<input-selector
:select-list="products"
:selected="selectedProduct"
@selectedChange="selectedChange"
/>
<input-selector :select-list="products" :selected="selectedProduct" @selectedChange="selectedChange" />
<div class="upload-contianer">
<label class="btn btn-link">
<span v-if="!uploadFile">{{ $t('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"
/>
<svg-icon v-if="uploadFile" icon="delete" class-name="delete-icon" @click.stop="clearFile" />
</div>
<div class="flex-1" />
<button
class="action-button btn btn-link"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-template"
aria-controls="offcanvas-template"
>
<button class="action-button btn btn-link" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-template" aria-controls="offcanvas-template">
<svg-icon icon="btn-templates" />
{{ $t('Templates') }}
</button>
<button
class="action-button btn btn-link"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-copy-existing"
aria-controls="offcanvas-copy-existing"
>
<button class="action-button btn btn-link" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-copy-existing" aria-controls="offcanvas-copy-existing">
<svg-icon icon="btn-history" />
{{ $t('Copy') }}
</button>