Added Workflows
This commit is contained in:
201
components/PublicDynamicForm.vue
Normal file
201
components/PublicDynamicForm.vue
Normal file
@@ -0,0 +1,201 @@
|
|||||||
|
<script setup>
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
context: { type: Object, required: true },
|
||||||
|
token: { type: String, required: true },
|
||||||
|
pin: { type: String, default: '' }
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['success'])
|
||||||
|
const { $api } = useNuxtApp()
|
||||||
|
const toast = useToast()
|
||||||
|
|
||||||
|
const config = computed(() => props.context.config)
|
||||||
|
const data = computed(() => props.context.data)
|
||||||
|
|
||||||
|
// Initiale Werte setzen
|
||||||
|
const form = ref({
|
||||||
|
profile: props.context.meta?.defaultProfileId || null,
|
||||||
|
project: null,
|
||||||
|
service: config.value?.defaults?.serviceId || null,
|
||||||
|
// Wenn manualTime erlaubt, setze Startzeit auf jetzt, sonst null (wird im Backend gesetzt)
|
||||||
|
startDate: config.value?.features?.timeTracking?.allowManualTime ? new Date() : null,
|
||||||
|
endDate: config.value?.features?.timeTracking?.allowManualTime ? dayjs().add(1, 'hour').toDate() : null,
|
||||||
|
dieselUsage: 0,
|
||||||
|
description: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const isSubmitting = ref(false)
|
||||||
|
const errors = ref({})
|
||||||
|
|
||||||
|
// Validierung basierend auf JSON Config
|
||||||
|
const validate = () => {
|
||||||
|
errors.value = {}
|
||||||
|
let isValid = true
|
||||||
|
const validationRules = config.value.validation || {}
|
||||||
|
|
||||||
|
// Standard-Validierung
|
||||||
|
if (!form.value.project && data.value.projects?.length > 0) {
|
||||||
|
errors.value.project = 'Pflichtfeld'
|
||||||
|
isValid = false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!form.value.service && data.value.services?.length > 0) {
|
||||||
|
errors.value.service = 'Pflichtfeld'
|
||||||
|
isValid = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// Profil nur validieren, wenn Auswahl möglich ist
|
||||||
|
if (!form.value.profile && data.value.profiles?.length > 0 && !props.context.meta.defaultProfileId) {
|
||||||
|
errors.value.profile = 'Bitte Mitarbeiter wählen'
|
||||||
|
isValid = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// Feature: Agriculture
|
||||||
|
if (config.value.features?.agriculture?.showDieselUsage && validationRules.requireDiesel) {
|
||||||
|
if (!form.value.dieselUsage || form.value.dieselUsage <= 0) {
|
||||||
|
errors.value.diesel = 'Dieselverbrauch erforderlich'
|
||||||
|
isValid = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return isValid
|
||||||
|
}
|
||||||
|
|
||||||
|
const submit = async () => {
|
||||||
|
if (!validate()) return
|
||||||
|
|
||||||
|
isSubmitting.value = true
|
||||||
|
try {
|
||||||
|
const payload = { ...form.value }
|
||||||
|
|
||||||
|
// Headers vorbereiten (PIN mitsenden!)
|
||||||
|
const headers = {}
|
||||||
|
if (props.pin) headers['x-public-pin'] = props.pin
|
||||||
|
|
||||||
|
// An den Submit-Endpunkt senden (den müssen wir im Backend noch bauen!)
|
||||||
|
await $fetch(`http://localhost:3100/workflows/submit/${props.token}`, {
|
||||||
|
method: 'POST',
|
||||||
|
body: payload,
|
||||||
|
headers
|
||||||
|
})
|
||||||
|
|
||||||
|
emit('success')
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e)
|
||||||
|
toast.add({ title: 'Fehler beim Speichern', color: 'red' })
|
||||||
|
} finally {
|
||||||
|
isSubmitting.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<UCard :ui="{ body: { padding: 'p-6 sm:p-8' } }" v-if="props.context && props.token">
|
||||||
|
<template #header>
|
||||||
|
<div class="text-center">
|
||||||
|
<h1 class="text-xl font-bold text-gray-900">{{ config?.ui?.title || 'Erfassung' }}</h1>
|
||||||
|
<p v-if="config?.ui?.description" class="text-sm text-gray-500 mt-1">{{ config?.ui?.description }}</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="space-y-5">
|
||||||
|
|
||||||
|
<UFormGroup
|
||||||
|
v-if="!context?.meta?.defaultProfileId && data?.profiles?.length > 0"
|
||||||
|
label="Mitarbeiter"
|
||||||
|
:error="errors.profile"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<USelectMenu
|
||||||
|
v-model="form.profile"
|
||||||
|
:options="data.profiles"
|
||||||
|
option-attribute="fullName"
|
||||||
|
value-attribute="id"
|
||||||
|
placeholder="Name auswählen..."
|
||||||
|
searchable
|
||||||
|
searchable-placeholder="Suchen..."
|
||||||
|
/>
|
||||||
|
</UFormGroup>
|
||||||
|
|
||||||
|
<UFormGroup
|
||||||
|
v-if="data?.projects?.length > 0"
|
||||||
|
:label="config.ui?.labels?.project || 'Projekt'"
|
||||||
|
:error="errors.project"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<USelectMenu
|
||||||
|
v-model="form.project"
|
||||||
|
:options="data.projects"
|
||||||
|
option-attribute="name"
|
||||||
|
value-attribute="id"
|
||||||
|
placeholder="Wählen..."
|
||||||
|
searchable
|
||||||
|
/>
|
||||||
|
</UFormGroup>
|
||||||
|
|
||||||
|
<UFormGroup
|
||||||
|
v-if="data?.services?.length > 0"
|
||||||
|
:label="config?.ui?.labels?.service || 'Leistung'"
|
||||||
|
:error="errors.service"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<USelectMenu
|
||||||
|
v-model="form.service"
|
||||||
|
:options="data.services"
|
||||||
|
option-attribute="name"
|
||||||
|
value-attribute="id"
|
||||||
|
placeholder="Wählen..."
|
||||||
|
/>
|
||||||
|
</UFormGroup>
|
||||||
|
|
||||||
|
<div v-if="config?.features?.timeTracking?.allowManualTime" class="grid grid-cols-2 gap-3">
|
||||||
|
<UFormGroup label="Start">
|
||||||
|
<input
|
||||||
|
type="datetime-local"
|
||||||
|
class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-primary-600 sm:text-sm sm:leading-6 px-2"
|
||||||
|
:value="dayjs(form.startDate).format('YYYY-MM-DDTHH:mm')"
|
||||||
|
@input="e => form.startDate = new Date(e.target.value)"
|
||||||
|
/>
|
||||||
|
</UFormGroup>
|
||||||
|
<UFormGroup label="Ende">
|
||||||
|
<input
|
||||||
|
type="datetime-local"
|
||||||
|
class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-primary-600 sm:text-sm sm:leading-6 px-2"
|
||||||
|
:value="dayjs(form.endDate).format('YYYY-MM-DDTHH:mm')"
|
||||||
|
@input="e => form.endDate = new Date(e.target.value)"
|
||||||
|
/>
|
||||||
|
</UFormGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<UFormGroup
|
||||||
|
v-if="config?.features?.agriculture?.showDieselUsage"
|
||||||
|
label="Dieselverbrauch"
|
||||||
|
:error="errors.diesel"
|
||||||
|
:required="config?.validation?.requireDiesel"
|
||||||
|
>
|
||||||
|
<UInput v-model="form.dieselUsage" type="number" step="0.1" placeholder="0.0">
|
||||||
|
<template #trailing>
|
||||||
|
<span class="text-gray-500 text-xs">Liter</span>
|
||||||
|
</template>
|
||||||
|
</UInput>
|
||||||
|
</UFormGroup>
|
||||||
|
|
||||||
|
<UFormGroup :label="config?.ui?.labels?.description || 'Notiz'">
|
||||||
|
<UTextarea v-model="form.description" :rows="3" />
|
||||||
|
</UFormGroup>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<UButton
|
||||||
|
block
|
||||||
|
size="xl"
|
||||||
|
:loading="isSubmitting"
|
||||||
|
@click="submit"
|
||||||
|
:label="config?.ui?.submitButtonText || 'Speichern'"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</UCard>
|
||||||
|
</template>
|
||||||
121
pages/workflows/[token].vue
Normal file
121
pages/workflows/[token].vue
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
<script setup>
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'blank', // Kein Menü, keine Sidebar
|
||||||
|
middleware: [], // Keine Auth-Checks durch Nuxt
|
||||||
|
auth: false // Falls du das nuxt-auth Modul nutzt
|
||||||
|
})
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const token = route.params.token
|
||||||
|
const { $api } = useNuxtApp() // Dein Fetch-Wrapper
|
||||||
|
const toast = useToast()
|
||||||
|
|
||||||
|
// States
|
||||||
|
const status = ref('loading') // loading, pin_required, ready, error, success
|
||||||
|
const pin = ref('')
|
||||||
|
const context = ref(null)
|
||||||
|
const errorMsg = ref('')
|
||||||
|
|
||||||
|
// Daten laden
|
||||||
|
const loadContext = async () => {
|
||||||
|
status.value = 'loading'
|
||||||
|
errorMsg.value = ''
|
||||||
|
|
||||||
|
try {
|
||||||
|
const headers = {}
|
||||||
|
if (pin.value) headers['x-public-pin'] = pin.value
|
||||||
|
|
||||||
|
// Abruf an dein Fastify Backend
|
||||||
|
// Pfad evtl. anpassen, wenn du Proxy nutzt
|
||||||
|
const res = await $fetch(`http://localhost:3100/workflows/context/${token}`, { headers })
|
||||||
|
|
||||||
|
context.value = res
|
||||||
|
status.value = 'ready'
|
||||||
|
} catch (err) {
|
||||||
|
if (err.statusCode === 401) {
|
||||||
|
status.value = 'pin_required' // PIN nötig (aber noch keine eingegeben)
|
||||||
|
} else if (err.statusCode === 403) {
|
||||||
|
status.value = 'pin_required'
|
||||||
|
errorMsg.value = 'Falsche PIN'
|
||||||
|
pin.value = ''
|
||||||
|
} else {
|
||||||
|
status.value = 'error'
|
||||||
|
errorMsg.value = 'Link ungültig oder abgelaufen.'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialer Aufruf
|
||||||
|
onMounted(() => {
|
||||||
|
loadContext()
|
||||||
|
})
|
||||||
|
|
||||||
|
const handlePinSubmit = () => {
|
||||||
|
if (pin.value.length >= 4) loadContext()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleFormSuccess = () => {
|
||||||
|
status.value = 'success'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="min-h-screen bg-gray-50 flex items-center justify-center p-4 font-sans">
|
||||||
|
|
||||||
|
<div v-if="status === 'loading'" class="text-center">
|
||||||
|
<UIcon name="i-heroicons-arrow-path" class="w-10 h-10 animate-spin text-primary-500 mx-auto" />
|
||||||
|
<p class="mt-4 text-gray-500">Lade Formular...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<UCard v-else-if="status === 'error'" class="w-full max-w-md border-red-200">
|
||||||
|
<div class="text-center text-red-600 space-y-2">
|
||||||
|
<UIcon name="i-heroicons-exclamation-circle" class="w-12 h-12 mx-auto" />
|
||||||
|
<h3 class="font-bold text-lg">Fehler</h3>
|
||||||
|
<p>{{ errorMsg }}</p>
|
||||||
|
</div>
|
||||||
|
</UCard>
|
||||||
|
|
||||||
|
<UCard v-else-if="status === 'pin_required'" class="w-full max-w-sm shadow-xl">
|
||||||
|
<div class="text-center mb-6">
|
||||||
|
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
||||||
|
<UIcon name="i-heroicons-lock-closed" class="w-6 h-6 text-primary-600" />
|
||||||
|
</div>
|
||||||
|
<h2 class="text-xl font-bold text-gray-900">Geschützter Bereich</h2>
|
||||||
|
<p class="text-sm text-gray-500">Bitte PIN eingeben</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form @submit.prevent="handlePinSubmit" class="space-y-4">
|
||||||
|
<UInput
|
||||||
|
v-model="pin"
|
||||||
|
type="password"
|
||||||
|
placeholder="PIN"
|
||||||
|
input-class="text-center text-lg tracking-widest"
|
||||||
|
autofocus
|
||||||
|
icon="i-heroicons-key"
|
||||||
|
/>
|
||||||
|
<div v-if="errorMsg" class="text-red-500 text-xs text-center font-medium">{{ errorMsg }}</div>
|
||||||
|
<UButton type="submit" block label="Entsperren" size="lg" />
|
||||||
|
</form>
|
||||||
|
</UCard>
|
||||||
|
|
||||||
|
<UCard v-else-if="status === 'success'" class="w-full max-w-md text-center py-10">
|
||||||
|
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<UIcon name="i-heroicons-check" class="w-8 h-8 text-green-600" />
|
||||||
|
</div>
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 mb-2">Gespeichert!</h2>
|
||||||
|
<p class="text-gray-500 mb-6">Die Daten wurden erfolgreich übertragen.</p>
|
||||||
|
<UButton variant="outline" @click="() => window.location.reload()">Neuen Eintrag erfassen</UButton>
|
||||||
|
</UCard>
|
||||||
|
|
||||||
|
<div v-else-if="status === 'ready'" class="w-full max-w-lg">
|
||||||
|
<PublicDynamicForm
|
||||||
|
v-if="context && token"
|
||||||
|
:context="context"
|
||||||
|
:token="token"
|
||||||
|
:pin="pin"
|
||||||
|
@success="handleFormSuccess"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
Reference in New Issue
Block a user