accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2024-12-23 03:19:01 +00:00
Code Issues Releases Activity

fix(ui): full scale printview only if it fits

Browse Source
This commit is contained in:
18alantom 2023-06-13 09:31:24 +05:30
parent 40d889ae73
commit a4729e2a6c
1 changed files with 52 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/pages/PrintView/PrintView.vue
View File

@ -1,47 +1,45 @@
<template> <template>
<div class="flex"> <div class="flex flex-col flex-1 bg-gray-25">
<div class="flex flex-col flex-1 bg-gray-25"> <PageHeader :border="true">
<PageHeader :border="true"> <template #left>
<template #left> <AutoComplete
<AutoComplete v-if="templateList.length"
v-if="templateList.length" :df="{
:df="{ fieldtype: 'AutoComplete',
fieldtype: 'AutoComplete', fieldname: 'templateName',
fieldname: 'templateName', label: t`Template Name`,
label: t`Template Name`, options: templateList.map((n) => ({ label: n, value: n })),
options: templateList.map((n) => ({ label: n, value: n })), }"
}" input-class="text-base py-0 h-8"
input-class="text-base py-0 h-8" class="w-56"
class="w-56" :border="true"
:border="true" :value="templateName ?? ''"
:value="templateName ?? ''" @change="onTemplateNameChange"
@change="onTemplateNameChange"
/>
</template>
<DropdownWithActions :actions="actions" :title="t`More`" />
<Button class="text-xs" type="primary" @click="savePDF">
{{ t`Save as PDF` }}
</Button>
</PageHeader>
<!-- Template Display Area -->
<div class="overflow-auto custom-scroll p-4">
<!-- Display Hints -->
<div v-if="helperMessage" class="text-sm text-gray-700">
{{ helperMessage }}
</div>
<!-- Template Container -->
<PrintContainer
ref="printContainer"
v-if="printProps"
:template="printProps.template"
:values="printProps.values"
:scale="scale"
:width="templateDoc?.width"
:height="templateDoc?.height"
/> />
</template>
<DropdownWithActions :actions="actions" :title="t`More`" />
<Button class="text-xs" type="primary" @click="savePDF">
{{ t`Save as PDF` }}
</Button>
</PageHeader>
<!-- Template Display Area -->
<div class="overflow-auto custom-scroll p-4">
<!-- Display Hints -->
<div v-if="helperMessage" class="text-sm text-gray-700">
{{ helperMessage }}
</div> </div>
<!-- Template Container -->
<PrintContainer
ref="printContainer"
v-if="printProps"
:template="printProps.template"
:values="printProps.values"
:scale="scale"
:width="templateDoc?.width"
:height="templateDoc?.height"
/>
</div> </div>
</div> </div>
</template> </template>
@ -61,6 +59,7 @@ import { PrintValues } from 'src/utils/types';
import { getFormRoute, openSettings, routeTo } from 'src/utils/ui'; import { getFormRoute, openSettings, routeTo } from 'src/utils/ui';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import PrintContainer from '../TemplateBuilder/PrintContainer.vue'; import PrintContainer from '../TemplateBuilder/PrintContainer.vue';
import { showSidebar } from 'src/utils/refs';
export default defineComponent({ export default defineComponent({
name: 'PrintView', name: 'PrintView',
@ -204,11 +203,22 @@ export default defineComponent({
this.values = await getPrintTemplatePropValues(this.doc as Doc); this.values = await getPrintTemplatePropValues(this.doc as Doc);
} }
}, },
setScale() {
this.scale = 1;
const width = (this.templateDoc?.width ?? 21) * 37.8;
let containerWidth = window.innerWidth - 32;
if (showSidebar.value) {
containerWidth -= 12 * 16;
}
this.scale = Math.min(containerWidth / width, 1);
},
reset() { reset() {
this.doc = null; this.doc = null;
this.values = null; this.values = null;
this.templateList = []; this.templateList = [];
this.templateDoc = null; this.templateDoc = null;
this.scale = 1;
}, },
async onTemplateNameChange(value: string | null): Promise<void> { async onTemplateNameChange(value: string | null): Promise<void> {
if (!value) { if (!value) {
@ -225,6 +235,7 @@ export default defineComponent({
} catch (error) { } catch (error) {
await handleErrorWithDialog(error); await handleErrorWithDialog(error);
} }
this.setScale();
}, },
async setTemplateList(): Promise<void> { async setTemplateList(): Promise<void> {
const list = (await this.fyo.db.getAllRaw(ModelNameEnum.PrintTemplate, { const list = (await this.fyo.db.getAllRaw(ModelNameEnum.PrintTemplate, {