mirror of
https://github.com/frappe/books.git
synced 2025-01-03 15:17:30 +00:00
incr: convert Minimal.vue to a template.html file
This commit is contained in:
18alantom
parent
b0c23a6295
commit
f398e190e6
170
fixtures/printTemplates/Minimal.template.html
Normal file
170
fixtures/printTemplates/Minimal.template.html
Normal file
@ -0,0 +1,170 @@
|
||||
<main class="h-full">
|
||||
<!-- Invoice Header -->
|
||||
<header class="flex items-center justify-between w-full border-b px-12 py-10">
|
||||
<!-- Left Section -->
|
||||
<section class="flex items-center">
|
||||
<img
|
||||
v-if="print.displayLogo"
|
||||
class="h-12 max-w-32 object-contain me-4"
|
||||
:src="print.logo"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<p class="font-semibold text-xl" :style="{ color: print.color }">
|
||||
{{ print.companyName }}
|
||||
</p>
|
||||
<p>{{ doc.date }}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Right Section -->
|
||||
<section class="text-end">
|
||||
<p class="font-semibold text-xl" :style="{ color: print.color }">
|
||||
{{ doc.entryType }}
|
||||
</p>
|
||||
<p>{{ doc.name }}</p>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<!-- Party && Company Details -->
|
||||
<section class="flex px-12 py-10 border-b">
|
||||
<!-- Party Details -->
|
||||
<section class="w-1/2">
|
||||
<h3 class="uppercase text-sm font-semibold tracking-widest text-gray-800">
|
||||
{{ doc.entryType === 'SalesInvoice' ? 'To' : 'From' }}
|
||||
</h3>
|
||||
<p class="mt-4 text-black leading-relaxed text-lg">{{ doc.party }}</p>
|
||||
<p
|
||||
v-if="doc.links.party.address"
|
||||
class="mt-2 text-black leading-relaxed text-lg"
|
||||
>
|
||||
{{ doc.links.party.links.address.addressDisplay ?? '' }}
|
||||
</p>
|
||||
<p
|
||||
v-if="doc.links.party.gstin"
|
||||
class="mt-2 text-black leading-relaxed text-lg"
|
||||
>
|
||||
GSTIN: {{ doc.links.party.gstin }}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Company Details -->
|
||||
<section class="w-1/2">
|
||||
<h3
|
||||
class="
|
||||
uppercase
|
||||
text-sm
|
||||
font-semibold
|
||||
tracking-widest
|
||||
text-gray-800
|
||||
ms-8
|
||||
"
|
||||
>
|
||||
{{ doc.entryType === 'SalesInvoice' ? 'From' : 'To' }}
|
||||
</h3>
|
||||
<p class="mt-4 ms-8 text-black leading-relaxed text-lg">
|
||||
{{ print.companyName }}
|
||||
</p>
|
||||
<p
|
||||
v-if="print.address"
|
||||
class="mt-2 ms-8 text-black leading-relaxed text-lg"
|
||||
>
|
||||
{{ print.links.address.addressDisplay }}
|
||||
</p>
|
||||
<p
|
||||
v-if="print.gstin"
|
||||
class="mt-2 ms-8 text-black leading-relaxed text-lg"
|
||||
>
|
||||
GSTIN: {{ print.gstin }}
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Items Table -->
|
||||
<section class="px-12 py-10 border-b">
|
||||
<!-- Heading Row -->
|
||||
<section
|
||||
class="
|
||||
mb-4
|
||||
flex
|
||||
uppercase
|
||||
text-sm
|
||||
tracking-widest
|
||||
font-semibold
|
||||
text-gray-800
|
||||
"
|
||||
>
|
||||
<div class="w-4/12 text-start">Item</div>
|
||||
<div class="w-2/12 text-end" v-if="doc.showHSN">HSN/SAC</div>
|
||||
<div class="w-2/12 text-end">Quantity</div>
|
||||
<div class="w-3/12 text-end">Rate</div>
|
||||
<div class="w-3/12 text-end">Amount</div>
|
||||
</section>
|
||||
|
||||
<!-- Body Rows -->
|
||||
<section class="flex py-1 text-lg" v-for="row in doc.items" :key="row.name">
|
||||
<div class="w-4/12 text-start">{{ row.item }}</div>
|
||||
<div class="w-2/12 text-end" v-if="doc.showHSN">{{ row.hsnCode }}</div>
|
||||
<div class="w-2/12 text-end">{{ row.quantity }}</div>
|
||||
<div class="w-3/12 text-end">{{ row.rate }}</div>
|
||||
<div class="w-3/12 text-end">{{ row.amount }}</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="flex px-12 py-10">
|
||||
<!-- Invoice Terms -->
|
||||
<section class="w-1/2" v-if="doc.terms">
|
||||
<h3 class="uppercase text-sm tracking-widest font-semibold text-gray-800">
|
||||
Notes
|
||||
</h3>
|
||||
<p class="mt-4 text-lg whitespace-pre-line">{{ doc.terms }}</p>
|
||||
</section>
|
||||
|
||||
<!-- Totaled Amounts -->
|
||||
<section class="w-1/2 text-lg ml-auto">
|
||||
<!-- Subtotal -->
|
||||
<div class="flex ps-2 justify-between py-1">
|
||||
<h3>{{ t`Subtotal` }}</h3>
|
||||
<p>{{ doc.netTotal }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Discount (if applied before tax) -->
|
||||
<div
|
||||
class="flex ps-2 justify-between py-1"
|
||||
v-if="doc.totalDiscount && !doc.discountAfterTax"
|
||||
>
|
||||
<h3>{{ t`Discount` }}</h3>
|
||||
<p>{{ doc.totalDiscount }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Tax Breakdown -->
|
||||
<div
|
||||
class="flex ps-2 justify-between py-1"
|
||||
v-for="tax in doc.taxes"
|
||||
:key="tax.name"
|
||||
>
|
||||
<h3>{{ tax.account }}</h3>
|
||||
<p>{{ tax.amount }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Discount (if applied after tax) -->
|
||||
<div
|
||||
class="flex ps-2 justify-between py-1"
|
||||
v-if="doc.totalDiscount && doc.discountAfterTax"
|
||||
>
|
||||
<h3>{{ t`Discount` }}</h3>
|
||||
<p>{{ doc.totalDiscount }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Grand Total -->
|
||||
<div
|
||||
class="flex ps-2 justify-between py-1 font-semibold"
|
||||
:style="{ color: print.color }"
|
||||
>
|
||||
<h3>{{ t`Grand Total` }}</h3>
|
||||
<p>{{ doc.grandTotal }}</p>
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
</main>
|
||||
@ -42,6 +42,7 @@ export class PrintTemplate extends Doc {
|
||||
const models = [
|
||||
ModelNameEnum.SalesInvoice,
|
||||
ModelNameEnum.PurchaseInvoice,
|
||||
ModelNameEnum.JournalEntry,
|
||||
ModelNameEnum.Payment,
|
||||
];
|
||||
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
|
||||
<script>
|
||||
import Basic from './Templates/Basic';
|
||||
import Minimal from './Templates/Minimal';
|
||||
import Business from './Templates/Business';
|
||||
|
||||
export default {
|
||||
@ -15,14 +14,13 @@ export default {
|
||||
let type = this.printSettings.template;
|
||||
let templates = {
|
||||
Basic,
|
||||
Minimal,
|
||||
Business
|
||||
Business,
|
||||
};
|
||||
if (!(type in templates)) {
|
||||
type = 'Basic';
|
||||
}
|
||||
return templates[type];
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,194 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="bg-white border h-full"
|
||||
:style="{ 'font-family': printObject.font }"
|
||||
>
|
||||
<div class="flex flex-col w-full px-12 py-10 border-b">
|
||||
<h2
|
||||
v-if="printObject.displayTaxInvoice"
|
||||
class="
|
||||
font-semibold
|
||||
text-gray-800 text-sm
|
||||
tracking-widest
|
||||
uppercase
|
||||
mb-4
|
||||
"
|
||||
>
|
||||
{{ t`Tax Invoice` }}
|
||||
</h2>
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center rounded h-16">
|
||||
<div class="me-4" v-if="printObject.displayLogo">
|
||||
<img
|
||||
class="h-12 max-w-32 object-contain"
|
||||
:src="printObject.logo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="font-semibold text-xl"
|
||||
:style="{ color: printObject.color }"
|
||||
>
|
||||
{{ printObject.companyName }}
|
||||
</div>
|
||||
<div>
|
||||
{{ printObject.date }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<div
|
||||
class="font-semibold text-xl"
|
||||
:style="{ color: printObject.color }"
|
||||
>
|
||||
{{
|
||||
printObject.isSalesInvoice
|
||||
? t`Sales Invoice`
|
||||
: t`Purchase Invoice`
|
||||
}}
|
||||
</div>
|
||||
<div>
|
||||
{{ printObject.invoiceName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex px-12 py-10 border-b">
|
||||
<div class="w-1/2" v-if="printObject.partyName">
|
||||
<div
|
||||
class="uppercase text-sm font-semibold tracking-widest text-gray-800"
|
||||
>
|
||||
{{ printObject.isSalesInvoice ? 'To' : 'From' }}
|
||||
</div>
|
||||
<div class="mt-4 text-black leading-relaxed text-lg">
|
||||
{{ printObject.partyName }} <br />
|
||||
{{ printObject.partyAddress ?? '' }}
|
||||
</div>
|
||||
<div
|
||||
class="mt-4 text-black leading-relaxed text-lg"
|
||||
v-if="printObject.partyGSTIN"
|
||||
>
|
||||
GSTIN: {{ printObject.partyGSTIN }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/2" v-if="printObject.address">
|
||||
<div
|
||||
class="
|
||||
uppercase
|
||||
text-sm
|
||||
font-semibold
|
||||
tracking-widest
|
||||
text-gray-800
|
||||
ms-8
|
||||
"
|
||||
>
|
||||
{{ printObject.isSalesInvoice ? 'From' : 'To' }}
|
||||
</div>
|
||||
<div class="mt-4 ms-8 text-black leading-relaxed text-lg">
|
||||
{{ printObject.address }}
|
||||
</div>
|
||||
<div
|
||||
class="mt-4 ms-8 text-black leading-relaxed text-lg"
|
||||
v-if="printObject.gstin"
|
||||
>
|
||||
GSTIN: {{ printObject.gstin }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-12 py-10 border-b">
|
||||
<div
|
||||
class="
|
||||
mb-4
|
||||
flex
|
||||
uppercase
|
||||
text-sm
|
||||
tracking-widest
|
||||
font-semibold
|
||||
text-gray-800
|
||||
"
|
||||
>
|
||||
<div class="w-4/12">Item</div>
|
||||
<div class="w-2/12 text-end" v-if="printObject.showHSN">HSN/SAC</div>
|
||||
<div class="w-2/12 text-end">Quantity</div>
|
||||
<div class="w-3/12 text-end" v-if="printObject.displayBatch">
|
||||
Batch
|
||||
</div>
|
||||
<div class="w-3/12 text-end">Rate</div>
|
||||
<div class="w-3/12 text-end">Amount</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex py-1 text-lg"
|
||||
v-for="row in printObject.items"
|
||||
:key="row.name"
|
||||
>
|
||||
<div class="w-4/12">{{ row.item }}</div>
|
||||
<div class="w-2/12 text-end" v-if="printObject.showHSN">
|
||||
{{ row.hsnCode }}
|
||||
</div>
|
||||
<div class="w-2/12 text-end">{{ row.quantity }}</div>
|
||||
<div class="w-3/12 text-end" v-if="printObject.displayBatch">
|
||||
{{ row.batch }}
|
||||
</div>
|
||||
<div class="w-3/12 text-end">{{ row.rate }}</div>
|
||||
<div class="w-3/12 text-end">{{ row.amount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex px-12 py-10">
|
||||
<div class="w-1/2" v-if="printObject.terms">
|
||||
<div
|
||||
class="uppercase text-sm tracking-widest font-semibold text-gray-800"
|
||||
>
|
||||
Notes
|
||||
</div>
|
||||
<div class="mt-4 text-lg whitespace-pre-line">
|
||||
{{ printObject.terms }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/2 text-lg">
|
||||
<div class="flex ps-2 justify-between py-1">
|
||||
<div>{{ t`Subtotal` }}</div>
|
||||
<div>{{ printObject.netTotal }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex ps-2 justify-between py-1"
|
||||
v-if="printObject.totalDiscount && !printObject.discountAfterTax"
|
||||
>
|
||||
<div>{{ t`Discount` }}</div>
|
||||
<div>{{ printObject.totalDiscount }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex ps-2 justify-between py-1"
|
||||
v-for="tax in printObject.taxes"
|
||||
:key="tax.name"
|
||||
>
|
||||
<div>{{ tax.account }}</div>
|
||||
<div>{{ tax.amount }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex ps-2 justify-between py-1"
|
||||
v-if="printObject.totalDiscount && printObject.discountAfterTax"
|
||||
>
|
||||
<div>{{ t`Discount` }}</div>
|
||||
<div>{{ printObject.totalDiscount }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex ps-2 justify-between py-1 font-semibold"
|
||||
:style="{ color: printObject.color }"
|
||||
>
|
||||
<div>{{ t`Grand Total` }}</div>
|
||||
<div>{{ printObject.grandTotal }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import BaseTemplate from './BaseTemplate.vue';
|
||||
|
||||
export default {
|
||||
name: 'Minimal',
|
||||
extends: BaseTemplate,
|
||||
};
|
||||
</script>
|
||||
@ -140,9 +140,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Template Editor -->
|
||||
<div class="mt-4 relative">
|
||||
<div class="mt-4 relative" v-if="!templateCollapsed">
|
||||
<textarea
|
||||
v-if="!templateCollapsed"
|
||||
style="
|
||||
font-family: monospace;
|
||||
white-space: pre;
|
||||
|
||||
@ -23,6 +23,8 @@ export async function getPrintTemplatePropValues(doc: Doc) {
|
||||
const fyo = doc.fyo;
|
||||
const values: PrintTemplateData = {};
|
||||
values.doc = await getPrintTemplateDocValues(doc);
|
||||
(values.doc as PrintTemplateData).entryType = doc.schema.name;
|
||||
(values.doc as PrintTemplateData).entryLabel = doc.schema.label;
|
||||
|
||||
const printSettings = await fyo.doc.getDoc(ModelNameEnum.PrintSettings);
|
||||
const printValues = await getPrintTemplateDocValues(
|
||||
@ -56,6 +58,8 @@ export function getPrintTemplatePropHints(doc: Doc) {
|
||||
const hints: PrintTemplateData = {};
|
||||
const fyo = doc.fyo;
|
||||
hints.doc = getPrintTemplateDocHints(doc.schema, doc.fyo);
|
||||
(hints.doc as PrintTemplateData).entryType = doc.fyo.t`Entry Type`;
|
||||
(hints.doc as PrintTemplateData).entryLabel = doc.fyo.t`Entry Label`;
|
||||
|
||||
const printSettingsHints = getPrintTemplateDocHints(
|
||||
fyo.schemaMap[ModelNameEnum.PrintSettings]!,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user