Add prevention items frontend

app/Form/Actions/FormUpdateMetaAction.php

@@ -25,7 +25,7 @@ class FormUpdateMetaAction
             'sorting.0' => 'required|string',
             'sorting.1' => 'required|string|in:asc,desc',
             'active_columns' => 'array',
-            'active_columns.*' => ['string', Rule::in([...$form->getFields()->pluck('key')->toArray(), 'created_at'])]
+            'active_columns.*' => ['string', Rule::in([...$form->getFields()->pluck('key')->toArray(), 'created_at', 'prevention'])]
         ];
     }
 

app/Form/Models/Form.php

@@ -163,7 +163,7 @@ class Form extends Model implements HasMedia
             if (is_array(data_get($model->meta, 'active_columns'))) {
                 $model->setAttribute('meta', [
                     ...$model->meta,
-                    'active_columns' => array_values(array_intersect([...$model->getFields()->pluck('key')->toArray(), 'created_at'], $model->meta['active_columns'])),
+                    'active_columns' => array_values(array_intersect([...$model->getFields()->pluck('key')->toArray(), 'created_at', 'prevention'], $model->meta['active_columns'])),
                 ]);
                 return;
             }

app/Form/Resources/ParticipantResource.php

@@ -75,7 +75,11 @@ class ParticipantResource extends JsonResource
                 'name' => 'Registriert am',
                 'id' => 'created_at',
                 'display_attribute' => 'created_at_display'
-            ])
+            ])->push([
+                'name' => 'Prävention',
+                'id' => 'prevention',
+                'display_attribute' => 'prevention_display'
+            ]),
         ];
     }
 }

resources/js/components/ui/TableToggleButton.vue

@@ -9,7 +9,8 @@
         >
             <ui-sprite class="w-3 h-3" :src="active ? 'close' : 'plus'"></ui-sprite>
         </a>
-        <span v-text="text"></span>
+        <span v-if="text" v-text="text"></span>
+        <slot></slot>
     </div>
 </template>
 
@@ -24,8 +25,9 @@ const levelMap = {
 
 const props = defineProps({
     text: {
-        required: true,
+        required: false,
         type: String,
+        default: () => '',
     },
     value: {
         type: Object,

resources/js/views/form/Participants.vue

@@ -79,15 +79,14 @@
                             <button v-if="columnindex === 0 && participant.member_id === null" v-tooltip="`kein Mitglied zugewiesen. Per Klick zuweisen`" @click.prevent="assigning = participant">
                                 <ui-sprite src="warning-triangle" class="text-yellow-400 w-5 h-5"></ui-sprite>
                             </button>
-                            <ui-table-toggle-button
+                            <ui-table-toggle-button v-if="columnindex === 0 && groupParticipants" :value="participant" :level="0" :active="isOpen(participant.id)" @toggle="toggle(participant)">
-                                v-if="columnindex === 0 && groupParticipants"
+                                <prevention v-if="column.display_attribute === 'prevention_display'" :value="participant.prevention_items"></prevention>
-                                :value="participant"
+                                <span v-else v-text="participant[column.display_attribute]"></span>
-                                :text="participant[column.display_attribute]"
+                            </ui-table-toggle-button>
-                                :level="0"
+                            <div v-else>
-                                :active="isOpen(participant.id)"
+                                <prevention v-if="column.display_attribute === 'prevention_display'" :value="participant.prevention_items"></prevention>
-                                @toggle="toggle(participant)"
+                                <span v-else v-text="participant[column.display_attribute]"></span>
-                            ></ui-table-toggle-button>
+                            </div>
-                            <div v-else v-text="participant[column.display_attribute]"></div>
                         </div>
                     </td>
                     <td>
@@ -98,15 +97,16 @@
                 <template v-for="child in childrenOf(participant.id)" :key="child.id">
                     <tr>
                         <td v-for="(column, columnindex) in activeColumns" :key="column.id">
-                            <ui-table-toggle-button
+                            <div class="flex items-center space-x-2">
-                                v-if="columnindex === 0 && groupParticipants"
+                                <ui-table-toggle-button v-if="columnindex === 0 && groupParticipants" :value="child" :level="1" :active="isOpen(child.id)" @toggle="toggle(child)">
-                                :value="child"
+                                    <prevention v-if="column.display_attribute === 'prevention_display'" :value="child.prevention_items"></prevention>
-                                :text="child[column.display_attribute]"
+                                    <span v-else v-text="child[column.display_attribute]"></span>
-                                :level="1"
+                                </ui-table-toggle-button>
-                                :active="isOpen(child.id)"
+                                <div v-else>
-                                @toggle="toggle(child)"
+                                    <prevention v-if="column.display_attribute === 'prevention_display'" :value="child.prevention_items"></prevention>
-                            ></ui-table-toggle-button>
+                                    <span v-else v-text="child[column.display_attribute]"></span>
-                            <div v-else v-text="child[column.display_attribute]"></div>
+                                </div>
+                            </div>
                         </td>
                         <td>
                             <a v-tooltip="`Bearbeiten`" href="#" class="ml-2 inline-flex btn btn-warning btn-sm" @click.prevent="editReal(child)"><ui-sprite src="pencil"></ui-sprite></a>
@@ -127,6 +127,7 @@ import { watch, ref, computed } from 'vue';
 import { useApiIndex } from '../../composables/useApiIndex.js';
 import useTableToggle from '../../composables/useTableToggle.js';
 import MemberAssign from './MemberAssign.vue';
+import Prevention from './Prevention.vue';
 
 const deleting = ref(null);
 const { isOpen, toggle, childrenOf, clearToggle } = useTableToggle({});

resources/js/views/form/Prevention.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="flex rounded-lg overflow-hidden">
+        <div v-for="(prevention, index) in value" :key="index" v-tooltip="prevention.tooltip" class="py-1 px-2 text-xs" :class="classes(prevention)" v-text="prevention.letter"></div>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    value: {
+        required: true,
+        type: Object,
+    },
+});
+
+function classes(prevention) {
+    return prevention.value ? 'bg-green-800 text-green-200' : 'bg-neutral-700 text-neutral-200';
+}
+</script>