Added Workflows

2026-01-06 11:57:00 +01:00
parent c439396595
commit a00fd6d51f
2 changed files with 322 additions and 0 deletions
--- a/components/PublicDynamicForm.vue
+++ b/components/PublicDynamicForm.vue
@@ -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>
--- a/pages/workflows/[token].vue
+++ b/pages/workflows/[token].vue
@@ -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>