boonkerz/printshopcreator
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases 2 Wiki Activity

working

Browse Source
This commit is contained in:
Thomas Peterson 2025-08-07 22:19:51 +02:00
parent 059c62459e
commit 3f1d28b9da
10 changed files with 98 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/preview/Preview.vue
View File

@ -1,17 +1,18 @@
<script setup lang="ts">
import { computed, watch } from 'vue'
import { useGlobalStore } from '../../../stores/Global'
import { Codemirror } from 'vue-codemirror'
import { json } from '@codemirror/lang-json'
import RenderElements from './RenderElements.vue'
<script lang="ts" setup>
import { computed } from 'vue';
import { useGlobalStore } from '../../../stores/Global';
import RenderElements from './RenderElements.vue';
import PriceDisplay from './PriceDisplay.vue';
const globalStore = useGlobalStore()
import type { PreviewResponse } from '../../../model/preview/types';
const previewData = computed(() => globalStore.getPreviewData)
const error = computed(() => globalStore.previewError)
const isLoading = computed(() => globalStore.isPreviewLoading)
const globalStore = useGlobalStore();
const items = computed(() => previewData.value?.elements || [])
const previewData = computed<PreviewResponse | null>(() => globalStore.getPreviewData);
const error = computed(() => globalStore.previewError);
const isLoading = computed(() => globalStore.isPreviewLoading);
const items = computed(() => previewData.value?.elements || []);
const price = computed(() => previewData.value);
</script>
@ -33,7 +34,7 @@ const items = computed(() => previewData.value?.elements || [])
<RenderElements :items="items"/>
</div>
<div class="w-2/5 pl-6">
<PriceDisplay :tax="previewData.tax" :brutto="previewData.brutto" :netto="previewData.netto" />
<PriceDisplay :price-data="price" />
</div>
</div>
</div>

11
src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/preview/PriceDisplay.vue
View File

@ -1,19 +1,18 @@
<script setup lang="ts">
import { computed } from 'vue';
import type { PreviewResponse } from '../../../model/preview/types';
const props = defineProps<{
netto: any;
tax: any;
brutto: any;
priceData: PreviewResponse | null;
}>();
const formatCurrency = (value: number) => {
return new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(value);
};
const netPrice = computed(() => formatCurrency(props.netto/100 || 0));
const tax = computed(() => formatCurrency(props.tax/100 || 0));
const grossPrice = computed(() => formatCurrency(props.brutto/100 || 0));
const netPrice = computed(() => formatCurrency(props.priceData?.netto / 100 || 0));
const tax = computed(() => formatCurrency(props.priceData?.tax / 100 || 0));
const grossPrice = computed(() => formatCurrency(props.priceData?.brutto / 100 || 0));
</script>

54
src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/preview/RenderElements.vue
View File

@ -1,38 +1,34 @@
<script lang="ts" setup>
import { computed } from 'vue';
import TextElement from './elements/TextElement.vue'
import InputElement from './elements/InputElement.vue'
import HiddenElement from './elements/HiddenElement.vue'
import HeadlineElement from './elements/HeadlineElement.vue'
import SelectElement from './elements/SelectElement.vue'
import { shallowRef } from 'vue';
import type { Component } from 'vue';
import type { PreviewElement } from '../../../model/preview/types';
import TextElement from './elements/TextElement.vue';
import InputElement from './elements/InputElement.vue';
import HiddenElement from './elements/HiddenElement.vue';
import HeadlineElement from './elements/HeadlineElement.vue';
import SelectElement from './elements/SelectElement.vue';
const props = defineProps<{
items: any
}>()
items: PreviewElement[]
}>();
const componentMap: Record<string, Component> = shallowRef({
headline: HeadlineElement,
text: TextElement,
input: InputElement,
hidden: HiddenElement,
select: SelectElement,
});
</script>
<template>
<div class="d-flex flex flex-col relative" v-for="item in items" v-if="items.length > 0" :key="item.uuid">
<HeadlineElement
v-if="item.valid && item.htmlType === 'headline'"
:item="item"
/>
<HiddenElement
v-if="item.valid && item.htmlType === 'hidden'"
:item="item"
/>
<InputElement
v-if="item.valid && item.htmlType === 'input'"
:item="item"
/>
<TextElement
v-if="item.valid && item.htmlType === 'text'"
:item="item"
/>
<SelectElement
v-if="item.valid && item.htmlType === 'select'"
:item="item"
/>
<div v-for="item in items" :key="item.id">
<component
v-if="item.valid && componentMap[item.htmlType]"
:is="componentMap[item.htmlType]"
:item="item"
/>
</div>
</template>

4
src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/preview/elements/HeadlineElement.vue
View File

@ -1,8 +1,8 @@
<script lang="ts" setup>
import { computed } from 'vue';
import type { PreviewElement } from '../../../../model/preview/types';
const props = defineProps<{
item: any
item: PreviewElement
}>()
</script>

6
src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/preview/elements/HiddenElement.vue
View File

@ -1,9 +1,9 @@
<script lang="ts" setup>
import { computed } from 'vue';
import { Input } from '../../../../components/ui/input'
import type { PreviewElement } from '../../../../model/preview/types';
import { Input } from '../../../../components/ui/input';
const props = defineProps<{
item: any
item: PreviewElement
}>()

8
src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/preview/elements/InputElement.vue
View File

@ -1,13 +1,11 @@
<script lang="ts" setup>
import { computed } from 'vue';
import { Input } from '../../../../components/ui/input'
import { useGlobalStore } from '../../../../stores/Global'
import type { PreviewElement } from '../../../../model/preview/types';
import { Input } from '../../../../components/ui/input';
const props = defineProps<{
item: any
item: PreviewElement
}>()
const globalStore = useGlobalStore()
</script>

6
src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/preview/elements/SelectElement.vue
View File

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { computed } from 'vue'
import type { PreviewElement } from '../../../../model/preview/types';
import {
Select,
SelectContent,
@ -7,10 +7,10 @@ import {
SelectItem,
SelectTrigger,
SelectValue,
} from '../../../../components/ui/select'
} from '../../../../components/ui/select';
const props = defineProps<{
item: any
item: PreviewElement
}>()
</script>

4
src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/preview/elements/TextElement.vue
View File

@ -1,8 +1,8 @@
<script lang="ts" setup>
import { computed } from 'vue';
import type { PreviewElement } from '../../../../model/preview/types';
const props = defineProps<{
item: any
item: PreviewElement
}>()
</script>

38
src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/preview/types.ts Normal file
View File

@ -0,0 +1,38 @@
export interface PreviewOption {
id: string;
name: string;
valid: boolean;
selected: boolean;
}
export interface PreviewElement {
id: string;
name: string;
pattern: string;
colorSystem: string;
placeHolder: string;
displayGroup: string;
defaultValue: string;
value: string;
help: string | null;
helpLink: string | null;
valid: boolean;
required: boolean;
rawValue: string;
rawValues: any[];
options: PreviewOption[];
htmlType: 'headline' | 'text' | 'input' | 'hidden' | 'select';
validationErrors: any[];
variant?: string; // For headline
minValue?: number; // For input
maxValue?: number; // For input
}
export interface PreviewResponse {
success: boolean;
netto: number;
tax: number;
brutto: number;
colorDb: any[];
elements: PreviewElement[];
}

5
src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/stores/Global.ts
View File

@ -1,6 +1,7 @@
import { defineStore } from 'pinia'
import BaseElement from '../model/BaseElement'
import Mode from '../model/Mode'
import type { PreviewResponse } from '../model/preview/types';
import { saveProductToApi, saveFomulasAndParameterToApi, loadJsonFromApi, loadPriceFromApi, savePaperContainerToApi, saveDesignToApi, saveXmlToApi, fetchPreview } from '../lib/api'
import { useItemStore } from './Items'
@ -29,7 +30,7 @@ export const useGlobalStore = defineStore('global', {
saving: false,
syncing: false,
currentTab: 'designer' as string | number,
previewData: {} as object,
previewData: null as PreviewResponse | null,
isPreviewLoading: false,
previewError: '',
}),
@ -44,7 +45,7 @@ export const useGlobalStore = defineStore('global', {
getDragMode: (state) => state.dragMode,
getFormulaData: (state) => state.formulaData,
getFormulaError: (state) => state.formulaError,
getPreviewData: (state) => state.previewData,
getPreviewData: (state) => state.previewData as PreviewResponse | null,
},
actions: {
setXml(value: string) {