855 lines
36 KiB
Vue
855 lines
36 KiB
Vue
<script setup>
|
|
import dayjs from "dayjs";
|
|
import MaterialComposing from "~/components/materialComposing.vue";
|
|
import PersonalComposing from "~/components/personalComposing.vue";
|
|
|
|
const props = defineProps({
|
|
type: {
|
|
required: true,
|
|
type: String
|
|
},
|
|
mode: {
|
|
required: true,
|
|
type: String
|
|
},
|
|
createQuery: {
|
|
type: Object
|
|
},
|
|
item: {
|
|
required: true,
|
|
type: Object
|
|
},
|
|
inModal: {
|
|
type: Boolean,
|
|
},
|
|
platform: {
|
|
type: String,
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(["returnData"])
|
|
|
|
|
|
const {type} = props
|
|
|
|
defineShortcuts({
|
|
'backspace': () => {
|
|
router.push(`/${type}`)
|
|
},
|
|
'arrowleft': () => {
|
|
if(openTab.value > 0){
|
|
openTab.value -= 1
|
|
}
|
|
},
|
|
'arrowright': () => {
|
|
if(openTab.value < 3) {
|
|
openTab.value += 1
|
|
}
|
|
},
|
|
})
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const dataStore = useDataStore()
|
|
const modal = useModal()
|
|
|
|
|
|
const dataType = dataStore.dataTypes[type]
|
|
const openTab = ref(0)
|
|
const item = ref(JSON.parse(props.item))
|
|
console.log(item.value)
|
|
|
|
const oldItem = ref(null)
|
|
const generateOldItemData = () => {
|
|
oldItem.value = JSON.parse(props.item)
|
|
}
|
|
generateOldItemData()
|
|
|
|
|
|
const setupCreate = () => {
|
|
dataType.templateColumns.forEach(datapoint => {
|
|
if(datapoint.key.includes(".")){
|
|
!item.value[datapoint.key.split(".")[0]] ? item.value[datapoint.key.split(".")[0]] = {} : null
|
|
}
|
|
|
|
if(datapoint.inputType === "editor") {
|
|
if(datapoint.key.includes(".")){
|
|
item.value[datapoint.key.split(".")[0]][datapoint.key.split(".")[1]] = {}
|
|
} else {
|
|
item.value[datapoint.key] = {}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
})
|
|
}
|
|
setupCreate()
|
|
|
|
const setupQuery = () => {
|
|
console.log("setupQuery")
|
|
console.log(props.mode)
|
|
if(props.mode === "create" && (route.query || props.createQuery)) {
|
|
|
|
|
|
let data = !props.inModal ? route.query : props.createQuery
|
|
|
|
Object.keys(data).forEach(key => {
|
|
if(dataType.templateColumns.find(i => i.key === key)) {
|
|
if (["customer", "contract", "plant", "contact", "project"].includes(key)) {
|
|
item.value[key] = Number(data[key])
|
|
} else {
|
|
item.value[key] = data[key]
|
|
}
|
|
} else if(key === "resources") {
|
|
/*item.value[key] = data[key]*/
|
|
JSON.parse(data[key]).forEach(async (i) => {
|
|
console.log(i)
|
|
let type = i.substring(0,1)
|
|
let id = i.substring(2,i.length)
|
|
console.log(type)
|
|
console.log(id)
|
|
let holder = ""
|
|
if(type === "P"){
|
|
holder = "profiles"
|
|
} else if(type === "F"){
|
|
holder = "vehicles"
|
|
id = Number(id)
|
|
} else if(type === "I"){
|
|
holder = "inventoryitems"
|
|
id = Number(id)
|
|
} else if(type === "G"){
|
|
holder = "inventoryitemgroups"
|
|
}
|
|
|
|
if(typeof item.value[holder] === "object") {
|
|
item.value[holder].push(id)
|
|
} else {
|
|
item.value[holder] = [id]
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
})
|
|
}
|
|
}
|
|
setupQuery()
|
|
|
|
const loadedOptions = ref({})
|
|
const loadOptions = async () => {
|
|
let optionsToLoad = dataType.templateColumns.filter(i => i.selectDataType).map(i => {
|
|
return {
|
|
option: i.selectDataType,
|
|
key: i.key
|
|
}
|
|
})
|
|
|
|
for await(const option of optionsToLoad) {
|
|
if(option.option === "countrys") {
|
|
loadedOptions.value[option.option] = useEntities("countrys").selectSpecial()
|
|
} else if(option.option === "units") {
|
|
loadedOptions.value[option.option] = useEntities("units").selectSpecial()
|
|
} else {
|
|
loadedOptions.value[option.option] = (await useEntities(option.option).select())
|
|
|
|
if(dataType.templateColumns.find(x => x.key === option.key).selectDataTypeFilter){
|
|
loadedOptions.value[option.option] = loadedOptions.value[option.option].filter(i => dataType.templateColumns.find(x => x.key === option.key).selectDataTypeFilter(i, item))
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
loadOptions()
|
|
|
|
const contentChanged = (content, datapoint) => {
|
|
if(datapoint.key.includes(".")){
|
|
item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html = content.html
|
|
item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].text = content.text
|
|
item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].json = content.json
|
|
} else {
|
|
item[datapoint.key].html = content.html
|
|
item[datapoint.key].text = content.text
|
|
item[datapoint.key].json = content.json
|
|
}
|
|
}
|
|
|
|
const saveAllowed = ref(false)
|
|
const calcSaveAllowed = (item) => {
|
|
let allowedCount = 0
|
|
|
|
dataType.templateColumns.filter(i => i.inputType).forEach(datapoint => {
|
|
if(datapoint.required) {
|
|
|
|
if(datapoint.key.includes(".")){
|
|
if(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]) allowedCount += 1
|
|
} else {
|
|
if(item[datapoint.key]) allowedCount += 1
|
|
}
|
|
} else {
|
|
allowedCount += 1
|
|
}
|
|
})
|
|
|
|
saveAllowed.value = allowedCount >= dataType.templateColumns.filter(i => i.inputType).length
|
|
}
|
|
//calcSaveAllowed()
|
|
|
|
watch(item.value, async (newItem, oldItem) => {
|
|
calcSaveAllowed(newItem)
|
|
})
|
|
|
|
const createItem = async () => {
|
|
let ret = null
|
|
|
|
if(props.inModal) {
|
|
ret = await useEntities(type).create(item.value, true)
|
|
|
|
} else {
|
|
ret = await useEntities(type).create(item.value)//dataStore.createNewItem(type,item.value)
|
|
}
|
|
|
|
emit('returnData', ret)
|
|
modal.close()
|
|
}
|
|
|
|
const updateItem = async () => {
|
|
let ret = null
|
|
|
|
if(props.inModal) {
|
|
ret = await useEntities(type).update(item.value.id, item.value, true)
|
|
emit('returnData', ret)
|
|
modal.close()
|
|
} else {
|
|
ret = await useEntities(type).update(item.value.id, item.value)
|
|
emit('returnData', ret)
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardNavbar
|
|
v-if="!props.inModal"
|
|
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
|
|
>
|
|
<template #toggle>
|
|
<div v-if="platform === 'mobile'"></div>
|
|
</template>
|
|
<template #left>
|
|
<UButton
|
|
icon="i-heroicons-chevron-left"
|
|
variant="outline"
|
|
@click="router.back()/*router.push(`/standardEntity/${type}`)*/"
|
|
>
|
|
<!-- {{dataType.label}}-->
|
|
</UButton>
|
|
</template>
|
|
<template #center>
|
|
<h1
|
|
v-if="item"
|
|
:class="['text-xl','font-medium', 'text-center']"
|
|
>{{item.id ? `${dataType.labelSingle} bearbeiten` : `${dataType.labelSingle} erstellen` }}</h1>
|
|
</template>
|
|
<template #right>
|
|
<ArchiveButton
|
|
color="rose"
|
|
v-if="platform !== 'mobile'"
|
|
variant="outline"
|
|
:type="type"
|
|
@confirmed="useEntities(type).archive(item.id)"
|
|
/>
|
|
<UButton
|
|
v-if="item.id"
|
|
@click="updateItem"
|
|
:disabled="!saveAllowed"
|
|
>
|
|
Speichern
|
|
</UButton>
|
|
<UButton
|
|
v-else
|
|
@click="createItem"
|
|
:disabled="!saveAllowed"
|
|
>
|
|
Erstellen
|
|
</UButton>
|
|
<UButton
|
|
@click="router.push(item.id ? `/standardEntity/${type}/show/${item.id}` : `/standardEntity/${type}`)"
|
|
color="red"
|
|
class="ml-1"
|
|
>
|
|
Abbrechen
|
|
</UButton>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
<UDashboardNavbar
|
|
v-else
|
|
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
|
|
>
|
|
<template #center>
|
|
<h1
|
|
v-if="item"
|
|
:class="['text-xl','font-medium']"
|
|
>{{item.id ? `${dataType.labelSingle} bearbeiten` : `${dataType.labelSingle} erstellen` }}</h1>
|
|
</template>
|
|
<template #right>
|
|
<UButton
|
|
v-if="item.id"
|
|
@click="updateItem"
|
|
:disabled="!saveAllowed"
|
|
>
|
|
Speichern
|
|
</UButton>
|
|
<UButton
|
|
v-else
|
|
@click="createItem"
|
|
:disabled="!saveAllowed"
|
|
>
|
|
Erstellen
|
|
</UButton>
|
|
<UButton
|
|
@click="modal.close()"
|
|
color="red"
|
|
class="ml-2"
|
|
icon="i-heroicons-x-mark"
|
|
variant="outline"
|
|
/>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
<UDashboardPanelContent>
|
|
<UForm
|
|
class="p-5"
|
|
>
|
|
<div :class="platform === 'mobile' ?['flex','flex-col'] : ['flex','flex-row']">
|
|
<div
|
|
v-for="(columnName,index) in dataType.inputColumns"
|
|
:class="platform === 'mobile' ? ['w-full'] : [`w-1/${dataType.inputColumns.length}`, ... index < dataType.inputColumns.length -1 ? ['mr-5'] : []]"
|
|
>
|
|
<UDivider>{{columnName}}</UDivider>
|
|
|
|
<!--
|
|
Die Form Group darf nur in der ersten bearbeitet werden und muss dann runterkopiert werden
|
|
-->
|
|
|
|
<div
|
|
v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && i.inputColumn === columnName)"
|
|
>
|
|
<UFormGroup
|
|
v-if="(datapoint.showFunction ? datapoint.showFunction(item) : true)"
|
|
:label="datapoint.label"
|
|
>
|
|
<template #help>
|
|
<component
|
|
v-if="datapoint.helpComponent"
|
|
:is="datapoint.helpComponent"
|
|
:item="item"
|
|
/>
|
|
</template>
|
|
<InputGroup class="w-full" v-if="datapoint.key.includes('.')">
|
|
<UInput
|
|
: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-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"
|
|
/>
|
|
<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'"
|
|
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"
|
|
/>
|
|
|
|
<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
|
|
: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"
|
|
/>
|
|
|
|
<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"
|
|
/>
|
|
</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
|
|
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
|
|
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>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<UFormGroup
|
|
v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && !i.inputColumn)"
|
|
:label="datapoint.label"
|
|
>
|
|
<template #help>
|
|
<component
|
|
v-if="datapoint.helpComponent"
|
|
:is="datapoint.helpComponent"
|
|
:item="item"
|
|
/>
|
|
</template>
|
|
<InputGroup class="w-full" v-if="datapoint.key.includes('.')">
|
|
<UInput
|
|
: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-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"
|
|
/>
|
|
<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'"
|
|
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"
|
|
/>
|
|
|
|
<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
|
|
: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"
|
|
/>
|
|
|
|
<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"
|
|
/>
|
|
</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
|
|
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
|
|
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>
|
|
</UForm>
|
|
</UDashboardPanelContent>
|
|
</template>
|
|
|
|
<style scoped>
|
|
td {
|
|
border-bottom: 1px solid lightgrey;
|
|
vertical-align: top;
|
|
padding-bottom: 0.15em;
|
|
padding-top: 0.15em;
|
|
}
|
|
</style> |