Added Support for Conditional Rendering of Inputs
This commit is contained in:
@@ -334,255 +334,261 @@ const updateItem = async () => {
|
|||||||
Die Form Group darf nur in der ersten bearbeitet werden und muss dann runterkopiert werden
|
Die Form Group darf nur in der ersten bearbeitet werden und muss dann runterkopiert werden
|
||||||
-->
|
-->
|
||||||
|
|
||||||
|
<div
|
||||||
<UFormGroup
|
|
||||||
v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && i.inputColumn === columnName)"
|
v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && i.inputColumn === columnName)"
|
||||||
:label="datapoint.label"
|
|
||||||
>
|
>
|
||||||
<template #help>
|
<UFormGroup
|
||||||
<component
|
v-if="(datapoint.showFunction ? datapoint.showFunction(item) : true)"
|
||||||
v-if="datapoint.helpComponent"
|
:label="datapoint.label"
|
||||||
:is="datapoint.helpComponent"
|
>
|
||||||
:item="item"
|
<template #help>
|
||||||
/>
|
<component
|
||||||
</template>
|
v-if="datapoint.helpComponent"
|
||||||
<InputGroup class="w-full" v-if="datapoint.key.includes('.')">
|
:is="datapoint.helpComponent"
|
||||||
<UInput
|
:item="item"
|
||||||
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
|
/>
|
||||||
class="flex-auto"
|
</template>
|
||||||
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
<InputGroup class="w-full" v-if="datapoint.key.includes('.')">
|
||||||
v-if="['text','number'].includes(datapoint.inputType)"
|
<UInput
|
||||||
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
|
|
||||||
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
|
||||||
:type="datapoint.inputType"
|
|
||||||
:placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
|
|
||||||
>
|
|
||||||
<template #trailing v-if="datapoint.inputTrailing">
|
|
||||||
<span class="text-gray-500 dark:text-gray-400 text-xs">{{datapoint.inputTrailing}}</span>
|
|
||||||
</template>
|
|
||||||
</UInput>
|
|
||||||
<UToggle
|
|
||||||
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'primary'"
|
|
||||||
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
|
||||||
v-else-if="datapoint.inputType === 'bool'"
|
|
||||||
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
|
|
||||||
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
|
||||||
/>
|
|
||||||
<USelectMenu
|
|
||||||
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
|
|
||||||
class="flex-auto"
|
|
||||||
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
|
||||||
v-else-if="datapoint.inputType === 'select'"
|
|
||||||
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
|
|
||||||
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
|
||||||
:option-attribute="datapoint.selectOptionAttribute"
|
|
||||||
:value-attribute="datapoint.selectValueAttribute || 'id'"
|
|
||||||
:options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
|
|
||||||
:searchable="datapoint.selectSearchAttributes"
|
|
||||||
:search-attributes="datapoint.selectSearchAttributes"
|
|
||||||
:multiple="datapoint.selectMultiple"
|
|
||||||
>
|
|
||||||
<template #empty>
|
|
||||||
Keine Optionen verfügbar
|
|
||||||
</template>
|
|
||||||
</USelectMenu>
|
|
||||||
<UTextarea
|
|
||||||
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
|
|
||||||
class="flex-auto"
|
|
||||||
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
|
||||||
v-else-if="datapoint.inputType === 'textarea'"
|
|
||||||
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
|
|
||||||
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
|
||||||
rows="4"
|
|
||||||
/>
|
|
||||||
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
|
|
||||||
<UButton
|
|
||||||
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
|
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
|
||||||
icon="i-heroicons-calendar-days-20-solid"
|
class="flex-auto"
|
||||||
:label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
|
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
||||||
variant="outline"
|
v-if="['text','number'].includes(datapoint.inputType)"
|
||||||
|
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
|
||||||
|
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
||||||
|
:type="datapoint.inputType"
|
||||||
|
:placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
|
||||||
|
>
|
||||||
|
<template #trailing v-if="datapoint.inputTrailing">
|
||||||
|
<span class="text-gray-500 dark:text-gray-400 text-xs">{{datapoint.inputTrailing}}</span>
|
||||||
|
</template>
|
||||||
|
</UInput>
|
||||||
|
<UToggle
|
||||||
|
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'primary'"
|
||||||
|
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
||||||
|
v-else-if="datapoint.inputType === 'bool'"
|
||||||
|
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
|
||||||
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
||||||
|
|
||||||
/>
|
/>
|
||||||
|
<USelectMenu
|
||||||
<template #panel="{ close }">
|
|
||||||
<LazyDatePicker
|
|
||||||
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
|
||||||
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
|
|
||||||
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</UPopover>
|
|
||||||
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
|
|
||||||
<UButton
|
|
||||||
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
|
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
|
||||||
icon="i-heroicons-calendar-days-20-solid"
|
class="flex-auto"
|
||||||
:label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
|
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
||||||
variant="outline"
|
v-else-if="datapoint.inputType === 'select'"
|
||||||
|
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
|
||||||
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
||||||
|
:option-attribute="datapoint.selectOptionAttribute"
|
||||||
|
:value-attribute="datapoint.selectValueAttribute || 'id'"
|
||||||
|
:options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
|
||||||
|
:searchable="datapoint.selectSearchAttributes"
|
||||||
|
:search-attributes="datapoint.selectSearchAttributes"
|
||||||
|
:multiple="datapoint.selectMultiple"
|
||||||
|
>
|
||||||
|
<template #empty>
|
||||||
|
Keine Optionen verfügbar
|
||||||
|
</template>
|
||||||
|
</USelectMenu>
|
||||||
|
<UTextarea
|
||||||
|
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
|
||||||
|
class="flex-auto"
|
||||||
|
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
||||||
|
v-else-if="datapoint.inputType === 'textarea'"
|
||||||
|
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
|
||||||
|
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
||||||
|
rows="4"
|
||||||
|
/>
|
||||||
|
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
|
||||||
|
<UButton
|
||||||
|
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
|
||||||
|
icon="i-heroicons-calendar-days-20-solid"
|
||||||
|
:label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
|
||||||
|
variant="outline"
|
||||||
|
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
||||||
|
|
||||||
|
/>
|
||||||
|
|
||||||
|
<template #panel="{ close }">
|
||||||
|
<LazyDatePicker
|
||||||
|
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
||||||
|
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
|
||||||
|
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</UPopover>
|
||||||
|
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
|
||||||
|
<UButton
|
||||||
|
:color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
|
||||||
|
icon="i-heroicons-calendar-days-20-solid"
|
||||||
|
:label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
|
||||||
|
variant="outline"
|
||||||
|
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
||||||
|
|
||||||
|
/>
|
||||||
|
|
||||||
|
<template #panel="{ close }">
|
||||||
|
<LazyDatePicker
|
||||||
|
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
||||||
|
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
|
||||||
|
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
||||||
|
mode="datetime"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</UPopover>
|
||||||
|
<!-- TODO: DISABLED FOR TIPTAP -->
|
||||||
|
<Tiptap
|
||||||
|
v-else-if="datapoint.inputType === 'editor'"
|
||||||
|
@updateContent="(i) => contentChanged(i,datapoint)"
|
||||||
|
:preloadedContent="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<template #panel="{ close }">
|
|
||||||
<LazyDatePicker
|
|
||||||
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
|
||||||
v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
|
|
||||||
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
|
||||||
mode="datetime"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</UPopover>
|
|
||||||
<!-- TODO: DISABLED FOR TIPTAP -->
|
|
||||||
<Tiptap
|
|
||||||
v-else-if="datapoint.inputType === 'editor'"
|
|
||||||
@updateContent="(i) => contentChanged(i,datapoint)"
|
|
||||||
:preloadedContent="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<UButton
|
|
||||||
v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
|
|
||||||
@click="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] = null"
|
|
||||||
variant="outline"
|
|
||||||
color="white"
|
|
||||||
icon="i-heroicons-x-mark"
|
|
||||||
/>
|
|
||||||
</InputGroup>
|
|
||||||
<InputGroup class="w-full" v-else>
|
|
||||||
<UInput
|
|
||||||
class="flex-auto"
|
|
||||||
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
|
|
||||||
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
|
||||||
v-if="['text','number'].includes(datapoint.inputType)"
|
|
||||||
v-model="item[datapoint.key]"
|
|
||||||
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
|
||||||
:type="datapoint.inputType"
|
|
||||||
:placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
|
|
||||||
>
|
|
||||||
<template #trailing v-if="datapoint.inputTrailing">
|
|
||||||
{{datapoint.inputTrailing}}
|
|
||||||
</template>
|
|
||||||
</UInput>
|
|
||||||
<UToggle
|
|
||||||
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'primary'"
|
|
||||||
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
|
||||||
v-else-if="datapoint.inputType === 'bool'"
|
|
||||||
v-model="item[datapoint.key]"
|
|
||||||
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
|
||||||
/>
|
|
||||||
<USelectMenu
|
|
||||||
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
|
|
||||||
class="flex-auto"
|
|
||||||
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
|
||||||
v-else-if="datapoint.inputType === 'select'"
|
|
||||||
v-model="item[datapoint.key]"
|
|
||||||
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
|
||||||
:option-attribute="datapoint.selectOptionAttribute"
|
|
||||||
:value-attribute="datapoint.selectValueAttribute || 'id'"
|
|
||||||
:options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
|
|
||||||
:searchable="datapoint.selectSearchAttributes"
|
|
||||||
:search-attributes="datapoint.selectSearchAttributes"
|
|
||||||
:multiple="datapoint.selectMultiple"
|
|
||||||
searchable-placeholder="Suche..."
|
|
||||||
>
|
|
||||||
<template #empty>
|
|
||||||
Keine Optionen verfügbar
|
|
||||||
</template>
|
|
||||||
</USelectMenu>
|
|
||||||
<UTextarea
|
|
||||||
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
|
|
||||||
class="flex-auto"
|
|
||||||
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
|
||||||
v-else-if="datapoint.inputType === 'textarea'"
|
|
||||||
v-model="item[datapoint.key]"
|
|
||||||
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
|
||||||
rows="4"
|
|
||||||
/>
|
|
||||||
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
|
|
||||||
<UButton
|
<UButton
|
||||||
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
|
v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
|
||||||
icon="i-heroicons-calendar-days-20-solid"
|
@click="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] = null"
|
||||||
:label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
|
|
||||||
variant="outline"
|
variant="outline"
|
||||||
|
color="white"
|
||||||
|
icon="i-heroicons-x-mark"
|
||||||
|
/>
|
||||||
|
</InputGroup>
|
||||||
|
<InputGroup class="w-full" v-else>
|
||||||
|
<UInput
|
||||||
|
class="flex-auto"
|
||||||
|
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
|
||||||
|
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
||||||
|
v-if="['text','number'].includes(datapoint.inputType)"
|
||||||
|
v-model="item[datapoint.key]"
|
||||||
|
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
||||||
|
:type="datapoint.inputType"
|
||||||
|
:placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
|
||||||
|
>
|
||||||
|
<template #trailing v-if="datapoint.inputTrailing">
|
||||||
|
{{datapoint.inputTrailing}}
|
||||||
|
</template>
|
||||||
|
</UInput>
|
||||||
|
<UToggle
|
||||||
|
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'primary'"
|
||||||
|
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
||||||
|
v-else-if="datapoint.inputType === 'bool'"
|
||||||
|
v-model="item[datapoint.key]"
|
||||||
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
||||||
/>
|
/>
|
||||||
|
<USelectMenu
|
||||||
<template #panel="{ close }">
|
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
|
||||||
<LazyDatePicker
|
class="flex-auto"
|
||||||
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
||||||
v-model="item[datapoint.key]" @close="close"
|
v-else-if="datapoint.inputType === 'select'"
|
||||||
|
v-model="item[datapoint.key]"
|
||||||
|
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
||||||
|
:option-attribute="datapoint.selectOptionAttribute"
|
||||||
|
:value-attribute="datapoint.selectValueAttribute || 'id'"
|
||||||
|
:options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
|
||||||
|
:searchable="datapoint.selectSearchAttributes"
|
||||||
|
:search-attributes="datapoint.selectSearchAttributes"
|
||||||
|
:multiple="datapoint.selectMultiple"
|
||||||
|
searchable-placeholder="Suche..."
|
||||||
|
>
|
||||||
|
<template #empty>
|
||||||
|
Keine Optionen verfügbar
|
||||||
|
</template>
|
||||||
|
</USelectMenu>
|
||||||
|
<UTextarea
|
||||||
|
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
|
||||||
|
class="flex-auto"
|
||||||
|
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
||||||
|
v-else-if="datapoint.inputType === 'textarea'"
|
||||||
|
v-model="item[datapoint.key]"
|
||||||
|
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
||||||
|
rows="4"
|
||||||
|
/>
|
||||||
|
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
|
||||||
|
<UButton
|
||||||
|
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
|
||||||
|
icon="i-heroicons-calendar-days-20-solid"
|
||||||
|
:label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
|
||||||
|
variant="outline"
|
||||||
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
||||||
/>
|
/>
|
||||||
</template>
|
|
||||||
</UPopover>
|
<template #panel="{ close }">
|
||||||
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
|
<LazyDatePicker
|
||||||
|
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
||||||
|
v-model="item[datapoint.key]" @close="close"
|
||||||
|
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</UPopover>
|
||||||
|
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
|
||||||
|
<UButton
|
||||||
|
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
|
||||||
|
icon="i-heroicons-calendar-days-20-solid"
|
||||||
|
:label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
|
||||||
|
variant="outline"
|
||||||
|
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<template #panel="{ close }">
|
||||||
|
<LazyDatePicker
|
||||||
|
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
||||||
|
v-model="item[datapoint.key]"
|
||||||
|
@close="close"
|
||||||
|
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
||||||
|
mode="datetime"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</UPopover>
|
||||||
|
<!-- TODO: Color/Required for TipTap and MaterialComposing -->
|
||||||
|
<Tiptap
|
||||||
|
v-else-if="datapoint.inputType === 'editor'"
|
||||||
|
@updateContent="(i) => contentChanged(i,datapoint)"
|
||||||
|
:preloadedContent="item[datapoint.key].html"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
<MaterialComposing
|
||||||
|
v-else-if="datapoint.inputType === 'materialComposing'"
|
||||||
|
:item="item"
|
||||||
|
/>
|
||||||
|
<PersonalComposing
|
||||||
|
v-else-if="datapoint.inputType === 'personalComposing'"
|
||||||
|
:item="item"
|
||||||
|
/>
|
||||||
|
|
||||||
<UButton
|
<UButton
|
||||||
:color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
|
v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
|
||||||
icon="i-heroicons-calendar-days-20-solid"
|
@click="item[datapoint.key] = null"
|
||||||
:label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
|
|
||||||
variant="outline"
|
variant="outline"
|
||||||
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
color="white"
|
||||||
|
icon="i-heroicons-x-mark"
|
||||||
/>
|
/>
|
||||||
|
</InputGroup>
|
||||||
<template #panel="{ close }">
|
<!-- <div
|
||||||
<LazyDatePicker
|
v-if="profileStore.ownTenant.ownFields"
|
||||||
@change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
|
|
||||||
v-model="item[datapoint.key]"
|
|
||||||
@close="close"
|
|
||||||
:disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
|
|
||||||
mode="datetime"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</UPopover>
|
|
||||||
<!-- TODO: Color/Required for TipTap and MaterialComposing -->
|
|
||||||
<Tiptap
|
|
||||||
v-else-if="datapoint.inputType === 'editor'"
|
|
||||||
@updateContent="(i) => contentChanged(i,datapoint)"
|
|
||||||
:preloadedContent="item[datapoint.key].html"
|
|
||||||
/>
|
|
||||||
|
|
||||||
|
|
||||||
<MaterialComposing
|
|
||||||
v-else-if="datapoint.inputType === 'materialComposing'"
|
|
||||||
:item="item"
|
|
||||||
/>
|
|
||||||
<PersonalComposing
|
|
||||||
v-else-if="datapoint.inputType === 'personalComposing'"
|
|
||||||
:item="item"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<UButton
|
|
||||||
v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
|
|
||||||
@click="item[datapoint.key] = null"
|
|
||||||
variant="outline"
|
|
||||||
color="white"
|
|
||||||
icon="i-heroicons-x-mark"
|
|
||||||
/>
|
|
||||||
</InputGroup>
|
|
||||||
<!-- <div
|
|
||||||
v-if="profileStore.ownTenant.ownFields"
|
|
||||||
>
|
|
||||||
<UDivider
|
|
||||||
class="mt-3"
|
|
||||||
>Eigene Felder</UDivider>
|
|
||||||
|
|
||||||
<UFormGroup
|
|
||||||
v-for="field in profileStore.ownTenant.ownFields.contracts"
|
|
||||||
:key="field.key"
|
|
||||||
:label="field.label"
|
|
||||||
>
|
>
|
||||||
<UInput
|
<UDivider
|
||||||
v-if="field.type === 'text'"
|
class="mt-3"
|
||||||
v-model="item.ownFields[field.key]"
|
>Eigene Felder</UDivider>
|
||||||
/>
|
|
||||||
<USelectMenu
|
<UFormGroup
|
||||||
v-else-if="field.type === 'select'"
|
v-for="field in profileStore.ownTenant.ownFields.contracts"
|
||||||
:options="field.options"
|
:key="field.key"
|
||||||
v-model="item.ownFields[field.key]"
|
:label="field.label"
|
||||||
/>
|
>
|
||||||
</UFormGroup>
|
<UInput
|
||||||
</div>-->
|
v-if="field.type === 'text'"
|
||||||
|
v-model="item.ownFields[field.key]"
|
||||||
|
/>
|
||||||
|
<USelectMenu
|
||||||
|
v-else-if="field.type === 'select'"
|
||||||
|
:options="field.options"
|
||||||
|
v-model="item.ownFields[field.key]"
|
||||||
|
/>
|
||||||
|
</UFormGroup>
|
||||||
|
</div>-->
|
||||||
|
|
||||||
|
</UFormGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</UFormGroup>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<UFormGroup
|
<UFormGroup
|
||||||
|
|||||||
Reference in New Issue
Block a user