Slot vuetify : append and prepend item - vue.js

I'm trying to do a dropdown menu and I used the slot on this page.
<v-list-item inactive :ripple="false">
<v-autocomplete
loading="true"
:menu-props="{ dark: true, maxWidth: 280 }"
v-model="valuesType"
:items="typeArray"
label="Category"
:search-input.sync="searchType"
class="settingsLstItm filtersPanel"
filled
dark
append-icon="mdi-chevron-down"
clear-icon="mdi-close-circle"
:background-color="backgroundDark3"
dense
clearable
multiple
:item-color="yellow"
item-text="color:var(--yellow)"
>
<template v-slot:prepend-item>
<v-list-item
ripple
#mousedown.prevent
#click="toggleType()"
>
<v-list-item-action>
<v-icon :color="valuesType.length > 0 ? 'var(--yellow)' : ''">
{{ iconType }}
</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
Select All
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider class="mt-2"></v-divider>
</template>
<template v-slot:selection="{ item, index }">
<div v-if="valuesType.length === 1">
<span v-if="index === 0 && valuesType[0].length > 16">{{ valuesType[0].slice(0,16) }}... </span>
<span v-if="index === 0 && valuesType[0].length <= 16">{{ valuesType[0] }} </span>
</div>
<div v-if="valuesType.length === 2 ">
<span v-if="index === 0 && valuesType[0].length <= 8">{{ valuesType[0] }}, </span>
<span v-if="index === 0 && valuesType[0].length > 8">{{ valuesType[0].slice(0,8) }}..., </span>
<span v-if="index === 1 && valuesType[1].length <= 8">{{ valuesType[1] }} </span>
<span v-if="index === 1 && valuesType[1].length > 8">{{ valuesType[1].slice(0,8) }}... </span>
</div>
<div v-if="valuesType.length > 2">
<span v-if="index === 0 && valuesType[0].length <= 10">{{ item }}, </span>
<span v-if="index === 0 && valuesType[0].length > 10">{{ valuesType[0].slice(0,10) }}..., </span>
<span
v-if="index === 1"
class="grey--text text-caption spanFilters"
>
+{{ valuesType.length - 1 }} other(s)
</span>
</div>
</template>
</v-autocomplete>
</v-list-item>
Although, on my case, around the select ALL and the rest of the items, there are borders that I can't get removed. Does anyone know how to do that ? That's why it the divider doesn't take the whole space.

Related

I am having error while trying top add a divider between my v-list items

I am getting an error on :key="index" in that said key should be placed on the tag. Can any please suggest a slution.
<template v-for="(key, index) in filteredKeys">
<v-list-item :key="index">
<v-list-item-content :class="{ 'blue--text': sortBy === key }">
{{ key }} :
</v-list-item-content>
<v-list-item-content class="align-end" :class="{ 'blue--text': sortBy === key }">
{{ item[key.toLowerCase()] }}
</v-list-item-content>
</v-list-item>
<v-divider v-if="index < filteredKeys.length - 1" :key="`${index}-divider`"></v-divider>
</template>

Scroll bar for vuetify dropdown

I have a dropdown made with vuetify with over 1000 items in it so I would like to put a scroll bar on the right of it. I've tried putting a max-height to the template but it won't work can anyone help please ?
<template>
<v-autocomplete
v-model="valuesActor"
:items="actorArray"
label="Name"
:search-input.sync="searchActor"
filled
clear-icon="mdi-close-circle"
clearable
multiple
background-color=#313131
:item-color="yellow"
item-text="color:var(--yellow)"
:menu-props="{maxWidth: 313}"
color="var(--yellow)"
>
<template v-slot:selection="{ item, index }">
<div v-if="valuesActor.length === 1">
<span v-if="index === 0 && valuesActor[0].length > 16">
{{ valuesActor[0].slice(0,16) }}...
</span>
<span v-if="index === 0 && valuesActor[0].length <= 16">
{{ valuesActor[0] }},
</span>
</div>
<div v-if="valuesActor.length === 2 ">
<span v-if="index === 0 && valuesActor[0].length <= 8">
{{ valuesActor[0] }}
</span>
<span v-if="index === 0 && valuesActor[0].length > 8">
{{ valuesActor[0].slice(0,8) }}...
</span>
<span v-if="index === 1 && valuesActor[1].length <= 8">
{{ valuesActor[1] }}
</span>
<span v-if="index === 1 && valuesActor[1].length > 8"
class="grey--text text-caption spanFilters"
>
+1 other
</span>
</div>
<div v-if="valuesActor.length > 2">
<span v-if="index === 0 && valuesActor[0].length <= 10">
{{ valuesActor[0].slice(0,10) }}
</span>
<span v-if="index === 0 && valuesActor[0].length > 10">
{{ valuesActor[0].slice(0,8) }}...
</span>
<span
v-if="index === 1"
class="grey--text text-caption spanFilters"
>
+{{ valuesActor.length - 1 }} other(s)
</span>
</div>
</template>
</v-autocomplete>
</template>
I've also tried looking at the v-scrolling component but it doesn't work either.

Vuetify 3 : v-menu location property not working

i have a v-menu on toolbars right corner. The menu displays as bottom right (end) so half the card is outside the view. I want to change to bottom left (start) however i can't seem to make it work.
<v-menu
location="start"
rounded
>
<template v-slot:activator="{ props }">
<v-btn
icon
v-bind="props"
>
<v-avatar
color="brown"
size="large"
>
<span class="white--text text-h5">{{ user.initials }}</span>
</v-avatar>
</v-btn>
</template>
<v-card>
<v-card-text>
<div class="mx-auto text-center">
<v-avatar
color="brown"
>
<span class="white--text text-h5">{{ user.initials }}</span>
</v-avatar>
<h3>{{ user.fullName }}</h3>
<p class="text-caption mt-1">
{{ user.email }}
</p>
<v-divider class="my-3"></v-divider>
<v-btn
rounded
variant="text"
#click="() => goSettings() "
>
Settings
</v-btn>
<v-divider class="my-3"></v-divider>
<v-btn
#click="() => logOut()"
>
Disconnect
</v-btn>
</div>
</v-card-text>
</v-card>
</v-menu>
I'm missing somethings? im checking the example in the docs https://next.vuetifyjs.com/en/components/menus/
thanks
edit: added screenshots of current behaviour vs expected
Edit 2: I tried the v-menu on a codepen and works as intended, however for some reason, it does not work inside a v-app-bar
Try using prop "anchor" instead of "location".
<v-menu
anchor="bottom end"
rounded
>
<template v-slot:activator="{ props }">
<v-btn
icon
v-bind="props"
>
<v-avatar
color="brown"
size="large"
>
<span class="white--text text-h5">{{ user.initials }}</span>
</v-avatar>
</v-btn>
</template>
<v-card>
<v-card-text>
<div class="mx-auto text-center">
<v-avatar
color="brown"
>
<span class="white--text text-h5">{{ user.initials }}</span>
</v-avatar>
<h3>{{ user.fullName }}</h3>
<p class="text-caption mt-1">
{{ user.email }}
</p>
<v-divider class="my-3"></v-divider>
<v-btn
rounded
variant="text"
#click="() => goSettings() "
>
Settings
</v-btn>
<v-divider class="my-3"></v-divider>
<v-btn
#click="() => logOut()"
>
Disconnect
</v-btn>
</div>
</v-card-text>
</v-card>
</v-menu>
I can't even tell you why this could work, because I wasn't able to find it in the Docs or Files, but it is used like that in one of the templates I'm using.
However, this only works for large screens, on mobile the card will be outside the view again.
I had the same problem, the solution is using the activator prop or perhaps, in your case you sould use the internal-activator prop.
<v-menu
location="start"
rounded
internal-activator
>
<template v-slot:activator="{ props }">
<v-btn
icon
v-bind="props"
>
<v-avatar
color="brown"
size="large"
>
<span class="white--text text-h5">{{ user.initials }}</span>
</v-avatar>
</v-btn>
</template>
<v-card>
<v-card-text>
<div class="mx-auto text-center">
<v-avatar
color="brown"
>
<span class="white--text text-h5">{{ user.initials }}</span>
</v-avatar>
<h3>{{ user.fullName }}</h3>
<p class="text-caption mt-1">
{{ user.email }}
</p>
<v-divider class="my-3"></v-divider>
<v-btn
rounded
variant="text"
#click="() => goSettings() "
>
Settings
</v-btn>
<v-divider class="my-3"></v-divider>
<v-btn
#click="() => logOut()"
>
Disconnect
</v-btn>
</div>
</v-card-text>
</v-card>
</v-menu>

Inline Edit (how to render a vuetifiy component based on the condition)

Haii can anyone help me. I'm looping a array I want to render a field based on the condition. which I loop in simple table.my problem is that I'm directly
comparing the index value (which is index === 0 and secondIndex === 0 ) like that it seems to be a hardcode. It could be dynamic. I couldn't able to get as a dynamic.Could Anyone help me.
<v-row v-for="(item, index) in list" :key="index" no-gutters>
<v-col cols="12" sm="12" lg="12" xl="12">
<v-card class="mt-2 rounded-xl" hover>
<v-card-title v-if="index === 0" #mouseover="mouseOver = true" #mouseleave="mouseOver = false">
</v-card-title>
<v-card-subtitle class="pb-5 mt-3">
<v-row class="ml-1 mt-1 text--primary">
<v-icon color="primary">{{item.icon}}</v-icon>
<div class="ml-1 text-button">{{item.name}}</div>
</v-row>
<v-file-input style="display: none" ref="file" accept="image/*" v-model="systemAndTenantConfig.systemconfiguration.logo" #change="uploadProfile()"></v-file-input>
</v-card-subtitle>
<v-card-text>
<v-form ref="configReference">
<div class="ml-9">
<tr>
<v-simple-table align="justify" style="text-align:justify" v-for="(record, secondIndex) in item.tableValue" :key="secondIndex">
<v-hover v-slot:default="{ hover }">
<tr>
<th style="width:160px">{{record.label}}</th>
<td>
<p v-if="indexValue === index && secondIndexValue === secondIndex ? showText: true">{{record.value}}</p>
<v-col cols="12" md="12" lg="12" xl="12" v-if=" index === 0 && secondIndex === 0 && indexValue === index && secondIndexValue === secondIndex ? show : false">
<v-text-field dense hide-details outlined :rules="systemAndTenantConfig.systemconfiguration.email ? $_emailValidation : []" :label="$t('email')" v-model="systemAndTenantConfig.systemconfiguration.email"></v-text-field>
</v-col>
<v-col cols="12" lg="12" v-if="index === 0 && secondIndex === 1 && indexValue === index && secondIndexValue === secondIndex ? show : false">
<v-autocomplete dense hide-details outlined :label="$t('timezone')" v-model="systemAndTenantConfig.systemconfiguration.timezone" :items="listOfTimeZones" item-text="displayname" item-value="standardname"></v-autocomplete>
</v-col>
</v-col>
<v-col cols="12" lg="12" v-if="index === 0 && secondIndex === 2 && indexValue === index && secondIndexValue === secondIndex ? show : false">
<v-textarea dense hide-details outlined :label="$t('companyAddress')" v-model="systemAndTenantConfig.systemconfiguration.companyaddress"></v-textarea>
</v-col></td><td>
<v-expand-transition>
<v-layout justify-end v-if="hover">
<v-fade-transition>
<td>
<v-btn text x-small icon color="info" v-if="showEdit">
<v-icon style="float:right" small #click="getSingleRecord(index, secondIndex)" color="primary">{{record.icon}}</v-icon>
</v-btn>
</td>
</v-fade-transition>
</v-layout>
</v-expand-transition>
</td>
</tr>
</v-row>
list: [
{
name: this.$t('general'),
icon: 'mdi-folder-multiple-outline',
tableValue: [
{
label: 'Email',
value: this.systemAndTenantConfig.systemconfiguration.email,
icon: 'mdi-pencil',
name: 'email'
},
{
label: 'Phone',
value: this.systemAndTenantConfig.systemconfiguration.phone,
icon: 'mdi-pencil',
name: 'phone'
},
{
label: 'Company Address',
value: this.systemAndTenantConfig.systemconfiguration.companyaddress,
icon: 'mdi-pencil',
name: 'address'
}
]
}]
indexValue: ''
secondIndexValue: ''
getSingleRecord (firstIndex, secondIndex) {
this.indexValue = firstIndex
this.secondIndexValue = secondIndex
}

Puppeter: Generating a PDF of a Vue page using Vuex store/state leads to blank pages

Steps to reproduce
Tell us about your environment:
Puppeteer version: 2.0.0
Platform / OS version: local machine Windows 10
URLs (if applicable): N/A
Node.js version: v10.16.0
What steps will reproduce the problem?
N/A
Please include code that reproduces the issue.
for example this some code to generate the header in the invoice
<v-col cols="9" class="d-flex flex-column pt-3">
<div>
<span class="header-title">{{ Office__title }}</span>
<span class="header-subtitle font-weight-bold" style="vertical-align: top">{{ '(' + Office__companyno + ')' }}</span>
</div>
<span class="header-subtitle pt-1 pb-0">{{ Office__address1 }}</span>
<span class="header-subtitle pt-1 pb-0">{{ [Office__address2, Office__city, Office__state, Office__country].join(', ') }}</span>
<span class="header-subtitle pt-1 pb-0">{{ $t('message.tel') + ': ' + Office__contracttel }}</span>
<span class="header-subtitle pt-1 pb-0">{{ $t('message.email') + ': ' + Office__contractemail + ' ' + $t('message.website') + ': ' + Office__website }}</span>
</v-col>
The variables are obtained using this:
data() {
return {
appLogo: AppConfig.appSessionLogo,
deliveryAddresses: [],
loaded: false,
};
},
computed: {
...mapFields('contract', {
Contract__id: 'print.Contract.id',
Contract__Bank_id: 'print.Contract.Bank.id',
Contract__Bank_title: 'print.Contract.Bank.title',
Contract__Bank_account: 'print.Contract.Bank.account',
Contract__Bank_swiftcode: 'print.Contract.Bank.swiftcode',
Contract__Bank_beneficiary: 'print.Contract.Bank.beneficiary',
Contract__Deliveryaddress_address: 'print.Contract.Deliveryaddress.address',
etc, etc....
Note: ...mapFields id from this package "maoberlehner/vuex-map-fields". Using standard ...mapGetters also replicates the issue.
What is the expected result?
PDF of the sales invoice should appear
What happens instead?
I get two blank pages. When I pdf.goto to another page in my site where no Vuex is used I get a render of the page.
If I pull directly from the API into the page without using Vuex the page is rendered. I would very much like to use the Vuex actions, state, mutations in the print page so I don't have to rewrite some of the code 2x. Does anyone have any experience doing this? I googled high and low and only found 1 or 2 postings but with no solution mentioned.
EDIT 2020-05-15 1:25PM
Entire Code:
<template>
<div class="d-flex flex-column fill-height">
<v-col class="pa-0 ma-0 mb-auto">
<v-row no-gutters>
<v-col cols="9" class="d-flex flex-column pt-3">
<div>
<span class="header-title">{{ Office__title }}</span>
<span class="header-subtitle font-weight-bold" style="vertical-align: top">{{ '(' + Office__companyno + ')' }}</span>
</div>
<span class="header-subtitle pt-1 pb-0">{{ Office__address1 }}</span>
<span class="header-subtitle pt-1 pb-0">{{ [Office__address2, Office__city, Office__state, Office__country].join(', ') }}</span>
<span class="header-subtitle pt-1 pb-0">{{ $t('message.tel') + ': ' + Office__contracttel }}</span>
<span class="header-subtitle pt-1 pb-0">{{ $t('message.email') + ': ' + Office__contractemail + ' ' + $t('message.website') + ': ' + Office__website }}</span>
</v-col>
<v-col cols="3" class="text-right">
<img
:src="appLogo"
class="mb-3 mr-3"
width="130px"
/>
</v-col>
</v-row>
<v-row no-gutters>
<v-col cols="12" class="text-center text-uppercase border-top-2 border-bottom-2 pa-1 font-weight-bold document-caption">{{ $t('message.contract') }}</v-col>
</v-row>
<v-row no-gutters>
<v-col cols="6" class="d-flex flex-column py-0">
<span class="font-weight-bold">{{ Contract__sellertitle }}</span>
<span v-if="[1,5].includes(Contract__salestype_id)">{{ Contract__office_id != null ? offices.filter((d) => d.Office.id == Contract__office_id)[0].Office.title : null }}</span>
<div v-else-if="[2].includes(Contract__salestype_id)" class="d-flex flex-column">
<span>{{ findSupplierById(Contract__supplier_id).Supplier.title }}</span>
<span>{{ findSupplierById(Contract__supplier_id).Company.address1 }}</span>
<span>{{ findSupplierById(Contract__supplier_id).Company.address2 }}</span>
<span>{{ findSupplierById(Contract__supplier_id).Company.address3 }}</span>
<span>{{ findSupplierById(Contract__supplier_id).Company.city + ' ' + findSupplierById(Contract__supplier_id).Company.postcode }}</span>
<span>{{ findSupplierById(Contract__supplier_id).Country.state }}</span>
<span>{{ findSupplierById(Contract__supplier_id).Country.name }}</span>
</div>
</v-col>
<v-col cols="2" class="d-flex flex-column py-0">
<span class="font-weight-bold">{{ $t('message.marketing') }}</span>
<span>{{ findSalesColleagueById(Contract__salescontact_id).Salesperson.name }}</span>
</v-col>
<v-col cols="2" class="d-flex flex-column py-0">
<span class="font-weight-bold">{{ $t('message.date') }}</span>
<span>{{ Contract__contractdate ? formatDate(Contract__contractdate) : '' }}</span>
</v-col>
<v-col cols="2" class="d-flex flex-column py-0">
<span class="font-weight-bold text-right">{{ $t('message.number') }}</span>
<span class="text-right">{{ Contract__title }}</span>
</v-col>
</v-row>
<v-row no-gutters class="pt-1">
<v-col cols="6" class="d-flex flex-column py-0">
<span class="font-weight-bold">{{ $t(buyerCaption) }}</span>
<span>{{ findBuyerById(Contract__customer_id).Customer.title }}</span>
<span>{{ findBuyerById(Contract__customer_id).Company.address1 }}</span>
<span>{{ findBuyerById(Contract__customer_id).Company.address2 }}</span>
<span>{{ findBuyerById(Contract__customer_id).Company.address3 }}</span>
<span>{{ findBuyerById(Contract__customer_id).Company.city + ' ' + findBuyerById(Contract__customer_id).Company.postcode}}</span>
<span>{{ findBuyerById(Contract__customer_id).Company.state }}</span>
<span>{{ findBuyerById(Contract__customer_id).Country.name }}</span>
</v-col>
<v-col cols="6" class="d-flex flex-column py-0">
<span class="font-weight-bold">{{ $t(deliveryCaption) }}</span>
<span>{{ Deliveryaddress__address }}</span>
</v-col>
</v-row>
<v-row no-gutters class="pt-1">
<v-col cols="8" class="d-flex flex-column py-0">
<span class="font-weight-bold">{{ $t('message.termsOfPayment') }}</span>
<span>{{ findBuyerPaymentTermById(Contract__paymentstatement_id).Paymentterm.title }}</span>
</v-col>
<v-col cols="4" class="d-flex flex-column py-0">
<span class="font-weight-bold text-right">{{ $t('message.shipment') }}</span>
<span class="text-right">{{ Contract__shippingweekstatement }}</span>
</v-col>
</v-row>
<v-row no-gutters class="pt-1">
<v-col cols="6" class="d-flex flex-column py-0">
<span class="font-weight-bold">{{ $t('message.paidTo') }}</span>
<span :class="Contract__Bank_id ? '' : 'red--text'">
<span style="white-space: pre">{{ Contract__Bank_id ? contractBank : '' }}</span>
</span>
</v-col>
<v-col cols="6" class="d-flex flex-column py-0">
<span class="font-weight-bold text-right">{{ $t('message.countryOriginDestination') }}</span>
<span class="text-right">
{{ Contract__productorigin_id != null ? findCountryById(Contract__productorigin_id).Country.name : '' }} /
{{ Contract__destinatione_id != null ? findCountryById(Contract__destinatione_id).Country.name : '' }}
</span>
<span class="font-weight-bold text-right">{{ $t('message.termsOfDelivery') }}</span>
<span class="text-right">{{ contractIncoterm }}</span>
</v-col>
</v-row>
</v-col>
<v-col class="px-0 pb-0 pt-3 ma-0 mb-auto">
<v-simple-table
class="specification-table"
dense
>
<template v-slot:default>
<tr class="table-header">
<td class="px-0 font-weight-bold border-bottom-1">{{ $t('message.specification') }}</td>
<td class="px-0 font-weight-bold border-bottom-1">{{ $t('message.size') }}</td>
<td class="px-0 font-weight-bold border-bottom-1">{{ $t('message.grade') }}</td>
<td class="px-0 font-weight-bold text-right width-10-pct border-bottom-1">{{ $t('message.quantity') }}</td>
<td class="px-0 font-weight-bold text-right width-10-pct border-bottom-1">{{ $t('message.unitPrice') }}</td>
<td class="px-0 font-weight-bold text-right width-10-pct border-bottom-1">{{ $t('message.amount') }}</td>
</tr>
<template v-for="(item,index) in Salesitems">
<tr class="table-row-main" v-if="index == 0 ">
<td colspan="6">{{ item.Salesdescription.title }}</td>
</tr>
<tr class="table-row" v-else-if="index > 0 && Salesitems[index - 1].Salesdescription.title != item.Salesdescription.title">
<td colspan="6">{{ item.Salesdescription.title }}</td>
</tr>
<tr class="table-row-sub">
<td></td>
<td class="px-0">{{ item.Size.title }}</td>
<td class="px-0">{{ item.Grade.title }}</td>
<td class="px-0 text-right">{{ item.type != 'credit' ? formatThisNumber(item.Salesitem.itemqty,uofmPrecision(item.Measurement.title)) + ' ' + uofmQty.find((uofm)=>uofm.Measurement.id == item.Salesitem.measurement_id).Measurement.title : '' }}</td>
<td class="px-0 text-right">{{ item.type != 'credit' ? formatThisNumber(item.Salesitem.unitprice,currencyFormatPrecision) : '' }}</td>
<td class="px-0 text-right">{{ item.type != 'credit' ? formatThisNumber(item.Salesitem.amount,currencyFormatPrecision) : '(' + formatThisNumber(item.Salesitem.amount,currencyFormatPrecision) + ')' }}</td>
</tr>
</template>
</template>
</v-simple-table>
</v-col>
<v-col class="px-0 pb-0 pt-3 ma-0 mt-auto">
<v-simple-table
class="specification-table"
dense
>
<template v-slot:default>
<tr>
<td colspan="4" class="px-0">
<span style="white-space: pre-line">
{{ Contract__note != null ? Contract__note.trim() : '' }}
</span>
</td>
</tr>
<tr>
<td class="px-0 font-weight-bold border-bottom-1">
<div class="d-flex flex-column">
<span>{{ Contract__fsc != 0 ? $t('message.certCode') + ' : ' + certifications.find((certification)=>certification.Certification.id == Contract__fsc).Certification.cert_no : '' }}</span>
<span>{{ Contract__fsc != 0 ? $t('message.expiryDate') + ' : ' + certifications.find((certification)=>certification.Certification.id == Contract__fsc).Certification.cert_expiry_date : '' }}</span>
</div>
</td>
<td class="px-0 font-weight-bold text-right width-10-pct border-bottom-1">
<span class="text-uppercase pr-3">{{ $t('message.total') }}</span>
<span v-if=" [1,2,5].includes(Contract__containersize_id) ">{{ Contract__containercount }}</span>
<span v-if=" [1,2,5].includes(Contract__containersize_id) "> X </span>
<span>{{ containerSizes.find(containerSize => containerSize.Containersize.id == Contract__containersize_id).Containersize.title }}</span>
</td>
<td class="px-0 font-weight-bold text-right width-10-pct border-bottom-1">
<span v-for="(total,index) in itemsTotalQty">
{{ formatThisNumber(total.Total.qty, uofmPrecision(total.Total.uofm)) + ' '+ total.Total.uofm }}
</span>
</td>
<td class="px-0 font-weight-bold text-right width-10-pct border-bottom-1">{{ currencies.find((currency) => currency.Currency.id == Contract__currency_id).Currency.code }}</td>
<td class="px-0 font-weight-bold text-right width-10-pct border-bottom-1">{{ formatThisNumber(itemsTotalAmount,currencyFormatPrecision) }}</td>
</tr>
</template>
</v-simple-table>
</v-col>
<div class="mt-auto">
<v-row no-gutters class="pt-2">
<v-col cols="12">{{ $t('message.notes') + ':' }}</v-col>
<v-col cols="12" v-for="footerNote in contractFooterNotes" v-if="Contract__footernotes.includes(footerNote.id)" :key="footerNote.id">
<div class="d-flex flex-row align-stretch">
<span class="px-1">-</span>
<span class="footer-note text-wrap">{{ footerNote.text }}</span>
</div>
</v-col>
<v-col cols="12" v-else-if="Contract__destinatione_id == 1 && footerNote.id == 10">
<div class="d-flex flex-row align-stretch">
<span class="px-1">-</span>
<span class="footer-note text-wrap">{{ footerNote.text }}</span>
</div>
</v-col>
</v-row>
<v-row no-gutters class="align-end">
<v-col cols="7" class="d-flex flex-column py-0">
<span class="font-weight-bold">{{ $t('message.confirmedBySeller') }}</span>
<span class="stamp-area text-center pt-2">
<img
:src="'/static/img/appic/stamps/' + (Contract__stampsignatured == 1 ? Office__stamp_ws : Office__stamp)"
height="80px"
v-if="Contract__showsignature != 'N'"
>
</span>
<span class="font-weight-bold border-top-1">{{ $t('message.companyStamp') }}</span>
</v-col>
<v-col cols="5" class="d-flex flex-column py-0">
<span class="font-weight-bold ml-3">{{ $t('message.confirmedByBuyer') }}</span>
<span class="stamp-area"></span>
<span class="font-weight-bold border-top-1 ml-3">{{ '(' + $t('message.pleaseSign') + ')' }}</span>
</v-col>
</v-row>
</div>
<div id="loaded" v-if="loaded"></div>
</div>
</template>
<script>
import AppConfig from "Constants/AppConfig";
import {mapFields, mapMultiRowFields} from "vuex-map-fields";
import {mapActions, mapGetters} from "vuex";
import {formatDate, numberFormat} from "../../../helpers/helpers";
import {api} from "../../../api";
export default {
name: "PrintContract",
props: ['contractId'],
data() {
return {
appLogo: AppConfig.appSessionLogo,
deliveryAddresses: [],
loaded: false,
};
},
computed: {
...mapFields('contract', {
Contract__id: 'print.Contract.id',
Contract__Bank_id: 'print.Contract.Bank.id',
Contract__Bank_title: 'print.Contract.Bank.title',
Contract__Bank_account: 'print.Contract.Bank.account',
Contract__Bank_swiftcode: 'print.Contract.Bank.swiftcode',
Contract__Bank_beneficiary: 'print.Contract.Bank.beneficiary',
Contract__Deliveryaddress_address: 'print.Contract.Deliveryaddress.address',
Contract__buyeraddresstype: 'print.Contract.buyeraddresstype',
Contract__contractdate: 'print.Contract.contractdate',
Contract__commission_per_line: 'print.Contract.commission_per_line',
Contract__containercount: 'print.Contract.containercount',
Contract__containersize_id: 'print.Contract.containersize_id',
Contract__currency_id: 'print.Contract.currency_id',
Contract__customer_id: 'print.Contract.customer_id',
Contract__destinatione_id: 'print.Contract.destinatione_id',
Contract__deliveryaddress_id: 'print.Contract.deliveryaddress_id',
Contract__incoterm_id: 'print.Contract.incoterm_id',
Contract__incotermport: 'print.Contract.incotermport',
Contract__fsc: 'print.Contract.fsc',
Contract__footernotes: 'print.Contract.footernotes',
Contract__loadingport_id: 'print.Contract.loadingport_id',
Contract__margin: 'print.Contract.margin',
Contract__note: 'print.Contract.note',
Contract__office_id: 'print.Contract.office_id',
Contract__paymentstatement_id: 'print.Contract.paymentstatement_id',
Contract__productorigin_id: 'print.Contract.productorigin_id',
Contract__salescontact_id: 'print.Contract.salescontact_id',
Contract__salestype_id: 'print.Contract.salestype_id',
Contract__sellertitle: 'print.Contract.sellertitle',
Contract__shippingport_id: 'print.Contract.shippingport_id',
Contract__shipweekdate: 'print.Contract.shipweekdate',
Contract__shippingweekstatement: 'print.Contract.shippingweekstatement',
Contract__showbank: 'print.Contract.showbank',
Contract__showsignature: 'print.Contract.showsignature',
Contract__stampsignatured: 'print.Contract.stampsignatured',
Contract__supplier_id: 'print.Contract.supplier_id',
Contract__title: 'print.Contract.title',
Deliveryaddress__address: 'print.Contract.Deliveryaddress.address',
Office__title: 'print.Contract.Office.title',
Office__address1: 'print.Contract.Office.address1',
Office__address2: 'print.Contract.Office.address2',
Office__city: 'print.Contract.Office.city',
Office__companyno: 'print.Contract.Office.companyno',
Office__contractemail: 'print.Contract.Office.contractemail',
Office__contracttel: 'print.Contract.Office.contracttel',
Office__country: 'print.Contract.Office.country',
Office__postcode: 'print.Contract.Office.postcode',
Office__state: 'print.Contract.Office.state',
Office__stamp: 'print.Contract.Office.stamp',
Office__stamp_ws: 'print.Contract.Office.stamp_ws',
Office__website: 'print.Contract.Office.website'
}),
...mapFields('salesitem',{
itemsTotalAmount: 'print.itemsTotalAmount',
itemsTotalQty: 'print.itemsTotalQty'
}),
...mapGetters('bankaccount', {
allBankAccounts: 'allBankAccounts',
findBankAccountById: 'findBankAccountById',
findBankAccountsByOfficeAndCurrency: 'findBankAccountsByOfficeAndCurrency',
}),
...mapGetters('buyer', {
allBuyers: 'allBuyers',
findBuyerById: 'findBuyerById'
}),
...mapGetters('country',{
allCountries: 'allCountries',
findCountryById: 'findCountryById'
}),
...mapGetters('paymentterm', {
allBuyerPaymentTerms: 'allBuyerPaymentTerms',
findBuyerPaymentTermById: 'findBuyerPaymentTermById'
}),
...mapGetters('salescolleague',{
allSalesColleagues: 'allSalesColleagues',
findSalesColleagueById: 'findSalesColleagueById'
}),
...mapMultiRowFields('salesitem', {
Salesitems: 'print.Salesitems',
}),
...mapGetters('shippingport', {
allShippingLoadingPorts: 'allShippingLoadingPorts',
allShippingDischargePorts: 'allShippingDischargePorts',
findShippingPortById: 'findShippingPortById'
}),
...mapGetters('supplier', {
allSuppliers: 'allSuppliers',
findSupplierById: 'findSupplierById'
}),
...mapGetters([
'buyerCaptionTypes',
'certifications',
'containerSizes',
'contractFooterNotes',
'currencies',
'deliveryAddressTypes',
'incoterms',
'offices',
'uofmQty'
]),
buyerCaption() {
return this.buyerCaptionTypes.find((caption)=>caption.id == this.Contract__buyeraddresstype).title_first
},
contractIncoterm() {
let incoterm = this.incoterms.find((incoterm)=>incoterm.Incoterm.id == this.Contract__incoterm_id)?.Incoterm?.title;
let incotermport = null;
switch(this.Contract__incotermport){
case 0: //POD
if(this.Contract__shippingport_id != null) {
incotermport = ' ' + this.findShippingPortById(this.Contract__shippingport_id).Shippingport.title
}
break;
case 1: //POL
if(this.Contract__loadingport_id != null) {
incotermport = ' ' + this.findShippingPortById(this.Contract__loadingport_id).Shippingport.title
}
break;
case 2:
return null
break
}
return incoterm + incotermport;
},
contractBank(){
let bank = '';
if(this.Contract__Bank_id != null){
if(this.Contract__Bank_title){ bank += this.$t('message.banker') + ': ' + this.Contract__Bank_title.trim()}
if(this.Contract__Bank_swiftcode){ bank += "\n" + this.$t('message.swiftCode') + ': ' + this.Contract__Bank_swiftcode.trim()}
if(this.Contract__Bank_account){ bank += "\n" + this.$t('message.accountNo') + ': ' + this.Contract__Bank_account.trim()}
if(this.Contract__Bank_beneficiary){ bank += "\n" + this.$t('message.beneficiary') + ': ' + this.Contract__Bank_beneficiary.trim()}
}
return bank
},
currencyFormatPrecision () {
return this.currencies.find((currency) => currency.Currency.id === this.Contract__currency_id)?.Currency?.formatPrecision
},
deliveryCaption() {
return this.buyerCaptionTypes.find((caption)=>caption.id == this.Contract__buyeraddresstype).title_last
}
},
methods: {
...mapActions('contract',{
getContractToPrintById: 'getContractToPrintById'
}),
...mapActions('bankaccount', {
getAllBankAccounts: 'getAllBankAccounts'
}),
...mapActions('buyer', {
getAllActiveBuyers: 'getAllActiveBuyers',
// resetAllBuyers: 'resetAllBuyers'
}),
...mapActions('contract',{
getContractToPrintById: 'getContractToPrintById',
}),
...mapActions('supplier', {
getAllSuppliers: 'getAllSuppliers',
resetAllSuppliers: 'resetAllSuppliers'
}),
...mapActions('shippingport', {
getAllShippingPorts: 'getAllShippingPorts',
}),
...mapActions('salescolleague', {
getAllSalesColleagues: 'getAllSalesColleagues',
}),
...mapActions('salesitem',{
getSalesItemsToPrintByContract: 'getSalesItemsToPrintByContract'
}),
...mapActions('paymentterm', {
getAllPaymentTerms: 'getAllPaymentTerms',
getAllBuyerContractPaymentTerms: 'getAllBuyerContractPaymentTerms'
}),
formatDate,
formatThisNumber(value,format){
return numberFormat(value,format)
},
loadContractById (val) {
this.getContractToPrintById(val)
.then((contract_id)=>{
this.getSalesItemsToPrintByContract(contract_id)
})
.then(()=>{
})
},
uofmPrecision (uofm) {
return this.uofmQty.find((u) => u.Measurement.title == uofm.trim()).Measurement.formatPrecision
},
},
created() {
// Testing
// this.$store.dispatch('resetConstantsState')
// this.resetAllBuyers() //to reset the buyer list
// this.resetAllSuppliers() //to reset the supplier list
if(!this.allBankAccounts.length) this.getAllBankAccounts()
if(!this.allBuyers.length) this.getAllActiveBuyers()
if(!this.allBuyerPaymentTerms.length) this.getAllPaymentTerms()
if(!this.allSalesColleagues.length) this.getAllSalesColleagues()
if(!this.allSuppliers.length) this.getAllSuppliers()
if(!this.allShippingLoadingPorts.length) this.getAllShippingPorts()
if(this.$route.matched.some(({name}) => name === 'print_contract')){
this.loadContractById(this.contractId)
}
},
mounted() {
this.loaded = true;
}
}
</script>
<style>
... removed CSS styles for brevity
</style>