Introduced EntityEdit.vue
Introduced EntityShow.vue Deprecated following as non standardEntity contracts, customers, vendors, projects, plants, vehicles
This commit is contained in:
280
components/EntityEdit.vue
Normal file
280
components/EntityEdit.vue
Normal file
@@ -0,0 +1,280 @@
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
item: {
|
||||
required: true,
|
||||
type: Object
|
||||
}
|
||||
})
|
||||
|
||||
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 dataStore = useDataStore()
|
||||
const profileStore = useProfileStore()
|
||||
const supabase = useSupabaseClient()
|
||||
|
||||
const dataType = dataStore.dataTypes[type]
|
||||
const openTab = ref(0)
|
||||
|
||||
const oldItem = ref(null)
|
||||
const generateOldItemData = () => {
|
||||
oldItem.value = JSON.parse(JSON.stringify(props.item))
|
||||
}
|
||||
generateOldItemData()
|
||||
|
||||
|
||||
const setupCreate = () => {
|
||||
dataType.templateColumns.forEach(datapoint => {
|
||||
if(datapoint.key.includes(".")){
|
||||
props.item[datapoint.key.split(".")[0]] = {}
|
||||
}
|
||||
|
||||
if(datapoint.inputType === "editor") {
|
||||
if(datapoint.key.includes(".")){
|
||||
props.item[datapoint.key.split(".")[0]][datapoint.key.split(".")[1]] = {}
|
||||
} else {
|
||||
props.item[datapoint.key] = {}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
setupCreate()
|
||||
|
||||
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] = (await supabase.from("countrys").select()).data
|
||||
} else {
|
||||
loadedOptions.value[option.option] = (await useSupabaseSelect(option.option))
|
||||
|
||||
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, props.item))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
loadOptions()
|
||||
|
||||
const contentChanged = (content, datapoint) => {
|
||||
if(datapoint.key.includes(".")){
|
||||
props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html = content.html
|
||||
props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].text = content.text
|
||||
props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].json = content.json
|
||||
} else {
|
||||
props.item[datapoint.key].html = content.html
|
||||
props.item[datapoint.key].text = content.text
|
||||
props.item[datapoint.key].json = content.json
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar
|
||||
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
|
||||
>
|
||||
<template #left>
|
||||
<UButton
|
||||
icon="i-heroicons-chevron-left"
|
||||
variant="outline"
|
||||
@click="router.push(`/standardEntity/${type}`)"
|
||||
>
|
||||
{{dataType.label}}
|
||||
</UButton>
|
||||
</template>
|
||||
<template #center>
|
||||
<h1
|
||||
v-if="props.item"
|
||||
:class="['text-xl','font-medium']"
|
||||
>{{props.item.id ? `${dataType.labelSingle} bearbeiten` : `${dataType.labelSingle} erstellen` }}</h1>
|
||||
</template>
|
||||
<template #right>
|
||||
<UButton
|
||||
v-if="props.item.id"
|
||||
@click="dataStore.updateItem(type,props.item, oldItem)"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<UButton
|
||||
v-else
|
||||
@click="dataStore.createNewItem(type,props.item)"
|
||||
>
|
||||
Erstellen
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="router.push(props.item.id ? `/standardEntity/${type}/show/${props.item.id}` : `/standardEntity/${type}`)"
|
||||
color="red"
|
||||
class="ml-2"
|
||||
>
|
||||
Abbrechen
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UDashboardPanelContent>
|
||||
<UForm
|
||||
class="p-5"
|
||||
>
|
||||
<UFormGroup
|
||||
v-for="datapoint in dataType.templateColumns.filter(i => i.inputType)"
|
||||
:label="datapoint.label"
|
||||
>
|
||||
<div v-if="datapoint.key.includes('.')">
|
||||
<UInput
|
||||
v-if="['text','number'].includes(datapoint.inputType)"
|
||||
v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
|
||||
:type="datapoint.inputType"
|
||||
:placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
|
||||
/>
|
||||
<UToggle
|
||||
v-else-if="datapoint.inputType === 'bool'"
|
||||
v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
|
||||
/>
|
||||
<USelectMenu
|
||||
v-else-if="datapoint.inputType === 'select'"
|
||||
v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
|
||||
: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"
|
||||
/>
|
||||
<UTextarea
|
||||
v-else-if="datapoint.inputType === 'textarea'"
|
||||
v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
|
||||
rows="4"
|
||||
/>
|
||||
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
|
||||
<UButton
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
|
||||
variant="outline"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close" />
|
||||
</template>
|
||||
</UPopover>
|
||||
<Tiptap
|
||||
v-else-if="datapoint.inputType === 'editor'"
|
||||
@updateContent="(i) => contentChanged(i,datapoint)"
|
||||
:preloadedContent="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<UInput
|
||||
v-if="['text','number'].includes(datapoint.inputType)"
|
||||
v-model="props.item[datapoint.key]"
|
||||
:type="datapoint.inputType"
|
||||
:placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
|
||||
/>
|
||||
<UToggle
|
||||
v-else-if="datapoint.inputType === 'bool'"
|
||||
v-model="props.item[datapoint.key]"
|
||||
/>
|
||||
<USelectMenu
|
||||
v-else-if="datapoint.inputType === 'select'"
|
||||
v-model="props.item[datapoint.key]"
|
||||
: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..."
|
||||
/>
|
||||
<UTextarea
|
||||
v-else-if="datapoint.inputType === 'textarea'"
|
||||
v-model="props.item[datapoint.key]"
|
||||
rows="4"
|
||||
/>
|
||||
<UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
|
||||
<UButton
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="props.item[datapoint.key] ? dayjs(props.item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
|
||||
variant="outline"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="props.item[datapoint.key]" @close="close" />
|
||||
</template>
|
||||
</UPopover>
|
||||
<Tiptap
|
||||
v-else-if="datapoint.inputType === 'editor'"
|
||||
@updateContent="(i) => contentChanged(i,datapoint)"
|
||||
:preloadedContent="props.item[datapoint.key].html"
|
||||
/>
|
||||
</div>
|
||||
<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="props.item.ownFields[field.key]"
|
||||
/>
|
||||
<USelectMenu
|
||||
v-else-if="field.type === 'select'"
|
||||
:options="field.options"
|
||||
v-model="props.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>
|
||||
Reference in New Issue
Block a user