Skip to content

Commit

Permalink
#752 Print Templates bug Solved
Browse files Browse the repository at this point in the history
  • Loading branch information
@itsGKRam
itsGKRam committed Feb 29, 2024
1 parent 71c4e8a commit 28b3894
Showing 1 changed file with 165 additions and 189 deletions.
354 changes: 165 additions & 189 deletions src/pages/TemplateBuilder/TemplateBuilder.vue
View file
Original file line number Diff line number Diff line change
@@ -1,208 +1,184 @@
<template>
<div>
<PageHeader :title="doc && doc.inserted ? doc.name : ''">
<!-- Template Name -->
<template v-if="doc && !doc.inserted" #left>
<FormControl
ref="nameField"
class="w-60 flex-shrink-0"
size="small"
:input-class="['font-semibold text-xl']"
:df="fields.name"
:border="true"
:value="doc!.name"
@change="async (value) => await doc?.set('name', value)"
/>
</template>
<Button v-if="displayDoc && doc?.template" @click="savePDF">
{{ t`Save as PDF` }}
</Button>
<Button
v-if="doc && doc.isCustom && displayDoc"
:title="t`Toggle Edit Mode`"
:icon="true"
@click="toggleEditMode"
>
<feather-icon name="edit" class="w-4 h-4" />
</Button>
<DropdownWithActions v-if="actions.length" :actions="actions" />
<Button v-if="doc?.canSave" type="primary" @click="sync()">
{{ t`Save` }}
</Button>
</PageHeader>
<!-- Template Builder Body -->
<div class="flex flex-col w-full">
<div>
<PageHeader :title="doc && doc.inserted ? doc.name : ''">
<!-- Template Name -->
<template v-if="doc && !doc.inserted" #left>
<FormControl
ref="nameField"
class="flex-shrink-0 w-60"
size="small"
:input-class="['font-semibold text-xl']"
:df="fields.name"
:border="true"
:value="doc!.name"
@change="async (value) => await doc?.set('name', value)"
/>
</template>
<Button v-if="displayDoc && doc?.template" @click="savePDF">
{{ t`Save as PDF` }}
</Button>
<Button
v-if="doc && doc.isCustom && displayDoc"
:title="t`Toggle Edit Mode`"
:icon="true"
@click="toggleEditMode"
>
<feather-icon name="edit" class="w-4 h-4" />
</Button>
<DropdownWithActions v-if="actions.length" :actions="actions" />
<Button v-if="doc?.canSave" type="primary" @click="sync()">
{{ t`Save` }}
</Button>
</PageHeader>
</div>
<div
v-if="doc"
class="w-full bg-gray-50 grid"
class="grid w-full bg-gray-50"
:style="templateBuilderBodyStyles"
>
<!-- Template Display Area -->
<div
class="overflow-auto no-scrollbar flex flex-col"
style="height: calc(100vh - var(--h-row-largest) - 1px)"
>
<!-- Template Container -->
<div v-if="canDisplayPreview" class="p-4 overflow-auto custom-scroll">
<PrintContainer
ref="printContainer"
:print-schema-name="displayDoc!.schemaName"
:template="doc.template!"
:values="values!"
:scale="scale"
:height="doc.height"
:width="doc.width"
/>
</div>
<!-- Display Hints -->
<p v-else-if="helperMessage" class="text-sm text-gray-700 p-4">
{{ helperMessage }}
</p>
<!-- Bottom Bar -->
<div class="relative flex flex-col flex-1">
<div
class="
w-full
sticky
bottom-0
flex
bg-white
border-t
mt-auto
flex-shrink-0
"
class="flex items-center justify-center overflow-auto"
style="height: calc(100vh - var(--h-row-largest) - 1px)"
>
<!-- Entry Type -->
<FormControl
:title="fields.type.label"
class="w-40 border-r flex-shrink-0"
:df="fields.type"
:border="false"
:value="doc.get('type')"
:container-styles="{ 'border-radius': '0px' }"
@change="async (value) => await setType(value)"
/>
<!-- Display Doc -->
<Link
v-if="doc.type"
:title="displayDocField.label"
class="w-40 border-r flex-shrink-0"
:df="displayDocField"
:border="false"
:value="displayDoc?.name"
:container-styles="{ 'border-radius': '0px' }"
@change="(value: string) => setDisplayDoc(value)"
/>
<!-- Template Container -->
<div v-if="canDisplayPreview" class="p-4">
<PrintContainer
ref="printContainer"
:print-schema-name="displayDoc!.schemaName"
:template="doc.template!"
:values="values!"
:scale="scale"
:height="doc.height"
:width="doc.width"
/>
</div>
<!-- Display Scale -->
<!-- Display Hints -->
<p v-else-if="helperMessage" class="p-4 text-sm text-gray-700">
{{ helperMessage }}
</p>
</div>
<div class="absolute sticky bottom-0 flex w-full">
<!-- Bottom Bar -->
<div
v-if="canDisplayPreview"
class="flex ml-auto gap-2 px-2 w-36 justify-between flex-shrink-0"
class="sticky bottom-0 flex flex-shrink-0 w-full mt-auto bg-white border-t "

Check warning on line 66 in src/pages/TemplateBuilder/TemplateBuilder.vue

View workflow job for this annotation

GitHub Actions / setup_and_lint 

Replace `sticky·bottom-0·flex·flex-shrink-0·w-full·mt-auto·bg-white·border-t` with `⏎··············sticky⏎··············bottom-0⏎··············flex·flex-shrink-0⏎··············w-full⏎··············mt-auto⏎··············bg-white⏎··············border-t⏎···········`
>
<p class="text-sm text-gray-600 my-auto">{{ t`Display Scale` }}</p>
<input
type="number"
class="
my-auto
w-10
text-base text-end
bg-transparent
text-gray-800
focus:text-gray-900
"
:value="scale"
min="0.1"
max="10"
step="0.1"
@change="setScale"
@input="setScale"
<!-- Entry Type -->
<FormControl
:title="fields.type.label"
class="flex-shrink-0 w-40 border-r"
:df="fields.type"
:border="false"
:value="doc.get('type')"
:container-styles="{ 'border-radius': '0px' }"
@change="async (value) => await setType(value)"
/>
<!-- Display Doc -->
<link
v-if="doc.type"
:title="displayDocField.label"
class="flex-shrink-0 w-40 border-r"
:df="displayDocField"
:border="false"
:value="displayDoc?.name"
:container-styles="{ 'border-radius': '0px' }"
@change="(value: string) => setDisplayDoc(value)"
/>
<!-- Display Scale -->
<div
v-if="canDisplayPreview"
class="flex justify-between flex-shrink-0 gap-2 px-2 ml-auto w-36"
>
<p class="my-auto text-sm text-gray-600">
{{ t`Display Scale` }}
</p>
<input
type="number"
class="w-10 my-auto text-base text-gray-800 bg-transparent text-end focus:text-gray-900"

Check warning on line 101 in src/pages/TemplateBuilder/TemplateBuilder.vue

View workflow job for this annotation

GitHub Actions / setup_and_lint 

Replace `w-10·my-auto·text-base·text-gray-800·bg-transparent··text-end·focus:text-gray-900` with `⏎··················w-10⏎··················my-auto⏎··················text-base·text-gray-800⏎··················bg-transparent⏎··················text-end⏎··················focus:text-gray-900⏎················`
:value="scale"
min="0.1"
max="10"
step="0.1"
@change="setScale"
@input="setScale"
/>
</div>
</div>
</div>
</div>
<!-- Input Panel Resizer -->
<HorizontalResizer
:initial-x="panelWidth"
:min-x="22 * 16"
:max-x="maxWidth"
:max-x="parseInt(maxWidth / 2)"
style="z-index: 5"
@resize="(x: number) => panelWidth = x"
/>
<!-- Template Panel -->
<div
class="border-l bg-white flex flex-col"
style="height: calc(100vh - var(--h-row-largest) - 1px)"
>
<!-- Template Editor -->
<div class="min-h-0">
<TemplateEditor
v-if="typeof doc.template === 'string' && hints"
ref="templateEditor"
class="overflow-auto custom-scroll h-full"
:initial-value="doc.template"
:disabled="!doc.isCustom"
:hints="hints"
@input="() => (templateChanged = true)"
@blur="(value: string) => setTemplate(value)"
/>
</div>
<div
v-if="templateChanged"
class="
flex
gap-2
p-2
text-sm text-gray-600
items-center
mt-auto
border-t
"
>
<ShortcutKeys :keys="applyChangesShortcut" :simple="true" />
{{ t` to apply changes` }}
</div>

<!-- Value Key Hints Container -->
<div
v-if="hints"
class="border-t flex-shrink-0"
:class="templateChanged ? '' : 'mt-auto'"
>
<!-- Value Key Toggle -->
<div class="relative flex flex-col flex-1">
<div class="flex flex-1 overflow-hidden">
<!-- Template Panel -->
<div
class="
flex
justify-between
items-center
cursor-pointer
select-none
p-2
"
@click="toggleShowHints"
class="flex flex-col w-full bg-white border-l"
style="height: calc(100vh - var(--h-row-largest) - 1px)"
>
<h2 class="text-base text-gray-900 font-semibold">
{{ t`Key Hints` }}
</h2>
<feather-icon
:name="showHints ? 'chevron-up' : 'chevron-down'"
class="w-4 h-4 text-gray-600 resize-none"
/>
<!-- Template Editor -->
<div class="w-full min-h-0">
<TemplateEditor
v-if="typeof doc.template === 'string' && hints"
ref="templateEditor"
class="w-full h-full overflow-auto custom-scroll"
:initial-value="doc.template"
:disabled="!doc.isCustom"
:hints="hints"
@input="() => (templateChanged = true)"
@blur="(value: string) => setTemplate(value)"
/>
</div>
<div
v-if="templateChanged"
class="flex items-center gap-2 p-2 mt-auto text-sm text-gray-600 border-t "

Check warning on line 143 in src/pages/TemplateBuilder/TemplateBuilder.vue

View workflow job for this annotation

GitHub Actions / setup_and_lint 

Replace `flex·items-center·gap-2·p-2·mt-auto·text-sm·text-gray-600·border-t` with `⏎················flex⏎················items-center⏎················gap-2⏎················p-2⏎················mt-auto⏎················text-sm·text-gray-600⏎················border-t⏎·············`
>
<ShortcutKeys :keys="applyChangesShortcut" :simple="true" />
{{ t` to apply changes` }}
</div>
</div>

<!-- Value Key Hints -->
<Transition name="hints">
</div>
<div class="absolute sticky bottom-0 flex w-full">
<!-- Value Key Hints Container -->
<div
v-if="hints"
class="flex-shrink-0 w-full bg-white border-t"
:class="templateChanged ? '' : 'mt-auto'"
>
<!-- Value Key Toggle -->
<div
v-if="showHints"
class="overflow-auto custom-scroll p-2 border-t"
style="max-height: 30vh"
class="flex items-center justify-between p-2 cursor-pointer select-none "

Check warning on line 159 in src/pages/TemplateBuilder/TemplateBuilder.vue

View workflow job for this annotation

GitHub Actions / setup_and_lint 

Replace `flex·items-center·justify-between·p-2·cursor-pointer·select-none` with `⏎················flex⏎················items-center⏎················justify-between⏎················p-2⏎················cursor-pointer⏎················select-none⏎·············`
@click="toggleShowHints"
>
<TemplateBuilderHint :hints="hints" />
<h2 class="text-base font-semibold text-gray-900">
{{ t`Key Hints` }}
</h2>
<feather-icon
:name="showHints ? 'chevron-up' : 'chevron-down'"
class="w-4 h-4 text-gray-600 resize-none"
/>
</div>
</Transition>

<!-- Value Key Hints -->
<Transition name="hints">
<div
v-if="showHints"
class="p-2 overflow-auto border-t custom-scroll"
style="max-height: 30vh"
>
<TemplateBuilderHint :hints="hints" />
</div>
</Transition>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -242,21 +218,21 @@ import { shortcutsKey } from 'src/utils/injectionKeys';
import { showDialog, showToast } from 'src/utils/interactive';
import { docsPathMap } from 'src/utils/misc';
import {
PrintTemplateHint,
baseTemplate,
getPrintTemplatePropHints,
getPrintTemplatePropValues,
PrintTemplateHint,

Check warning on line 221 in src/pages/TemplateBuilder/TemplateBuilder.vue

View workflow job for this annotation

GitHub Actions / setup_and_lint 

Insert `··`
baseTemplate,

Check warning on line 222 in src/pages/TemplateBuilder/TemplateBuilder.vue

View workflow job for this annotation

GitHub Actions / setup_and_lint 

Insert `··`
getPrintTemplatePropHints,

Check warning on line 223 in src/pages/TemplateBuilder/TemplateBuilder.vue

View workflow job for this annotation

GitHub Actions / setup_and_lint 

Insert `··`
getPrintTemplatePropValues,

Check warning on line 224 in src/pages/TemplateBuilder/TemplateBuilder.vue

View workflow job for this annotation

GitHub Actions / setup_and_lint 

Insert `··`
} from 'src/utils/printTemplates';
import { docsPathRef, showSidebar } from 'src/utils/refs';
import { DocRef, PrintValues } from 'src/utils/types';
import {
ShortcutKey,
focusOrSelectFormControl,
getActionsForDoc,
getDocFromNameIfExistsElseNew,
getSavePath,
openSettings,
selectTextFile,
ShortcutKey,

Check warning on line 229 in src/pages/TemplateBuilder/TemplateBuilder.vue

View workflow job for this annotation

GitHub Actions / setup_and_lint 

Insert `··`
focusOrSelectFormControl,

Check warning on line 230 in src/pages/TemplateBuilder/TemplateBuilder.vue

View workflow job for this annotation

GitHub Actions / setup_and_lint 

Insert `··`
getActionsForDoc,
getDocFromNameIfExistsElseNew,
getSavePath,
openSettings,
selectTextFile,
} from 'src/utils/ui';
import { useDocShortcuts } from 'src/utils/vueUtils';
import { getMapFromList } from 'utils/index';
Expand Down

0 comments on commit 28b3894

Please sign in to comment.