Refactor frontend into routed views with shared triage session state

2026-04-21 12:57:31 +00:00
parent 40efec19d7
commit fea8c105ab
10 changed files with 469 additions and 317 deletions
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useTriageSession } from '../composables/useTriageSession'
+
+const router = useRouter()
+const { result, priorityClass, priorityLabel } = useTriageSession()
+
+const hasResult = computed(() => !!result.value)
+
+onMounted(() => {
+  if (!hasResult.value) {
+    router.replace('/language')
+  }
+})
+</script>
+
+<template>
+  <section v-if="hasResult" class="result" :class="priorityClass">
+    <div class="result-header">
+      <div>
+        <h2>Vorbereitung für MTS</h2>
+        <p class="result-subtitle">Automatisierte Einschätzung anhand der Antworten</p>
+      </div>
+      <p v-if="priorityLabel" class="priority-pill">
+        {{ priorityLabel }}
+      </p>
+    </div>
+
+    <div class="result-body">
+      <p class="result-line">
+        <span class="label">Sitzungs-ID</span>
+        <span class="value">{{ result!.session_id }}</span>
+      </p>
+      <p v-if="result!.proposed_presenting_flowchart" class="result-line">
+        <span class="label">Flussdiagramm</span>
+        <span class="value">{{ result!.proposed_presenting_flowchart }}</span>
+      </p>
+      <p v-if="result!.red_flag_indicators.length" class="result-line">
+        <span class="label">Red Flags</span>
+        <span class="value">{{ result!.red_flag_indicators.join(', ') }}</span>
+      </p>
+    </div>
+
+    <div class="actions">
+      <button class="primary" type="button" @click="router.push('/language')">
+        Neue Erfassung starten
+      </button>
+    </div>
+  </section>
+
+  <p v-else class="status">Kein Ergebnis vorhanden.</p>
+</template>
+
+<style scoped>
+.result {
+  padding: 1.2rem 1rem 1rem;
+  border-radius: 20px;
+  background: #f9fafb;
+  border-left: 4px solid #e5e7eb;
+}
+
+.result-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.result h2 {
+  font-size: 1.05rem;
+  margin-bottom: 0.15rem;
+}
+
+.result-subtitle {
+  font-size: 0.8rem;
+  color: #6b7280;
+}
+
+.priority-pill {
+  padding: 0.3rem 0.7rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  background: #fee2e2;
+  color: #b91c1c;
+}
+
+.result-body {
+  margin-top: 0.25rem;
+}
+
+.result-line {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-size: 0.9rem;
+  margin-top: 0.25rem;
+}
+
+.result-line .label {
+  color: #6b7280;
+}
+
+.result-line .value {
+  font-weight: 500;
+}
+
+.status {
+  margin-top: 1rem;
+  font-size: 0.9rem;
+  color: #4b5563;
+}
+
+.actions {
+  margin-top: 1.5rem;
+}
+</style>