Add prevention items frontend

.docker/base.Dockerfile

@@ -2,12 +2,12 @@ FROM php:8.1.6-fpm as php
 WORKDIR /app
 RUN ls /app
 RUN apt-get update
-RUN apt-get install -y rsync libcurl3-dev apt-utils zlib1g-dev libpng-dev libicu-dev libonig-dev unzip poppler-utils libpng-dev libjpeg-dev default-mysql-client
+RUN apt-get install -y rsync libcurl3-dev apt-utils zlib1g-dev libpng-dev libicu-dev libonig-dev unzip poppler-utils libpng-dev libjpeg-dev default-mysql-client libzip-dev
 RUN apt-get install -y --no-install-recommends texlive-base texlive-latex-base texlive-pictures texlive-latex-extra texlive-lang-german texlive-plain-generic texlive-fonts-recommended texlive-fonts-extra texlive-extra-utils
-RUN docker-php-ext-install pdo_mysql curl gd exif intl mbstring pcntl
+RUN docker-php-ext-install pdo_mysql curl exif intl mbstring pcntl zip
 RUN pecl install redis && docker-php-ext-enable redis
 RUN docker-php-ext-configure gd --with-jpeg
-RUN docker-php-ext-enable gd
+RUN docker-php-ext-install gd
 RUN usermod -s /bin/bash www-data
 RUN echo 'memory_limit = 2G' >> /usr/local/etc/php/conf.d/99-custom-php-memlimit.ini
 

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
-                                v-if="columnindex === 0 && groupParticipants"
-                                :value="participant"
-                                :text="participant[column.display_attribute]"
-                                :level="0"
-                                :active="isOpen(participant.id)"
-                                @toggle="toggle(participant)"
-                            ></ui-table-toggle-button>
-                            <div v-else v-text="participant[column.display_attribute]"></div>
+                            <ui-table-toggle-button v-if="columnindex === 0 && groupParticipants" :value="participant" :level="0" :active="isOpen(participant.id)" @toggle="toggle(participant)">
+                                <prevention v-if="column.display_attribute === 'prevention_display'" :value="participant.prevention_items"></prevention>
+                                <span v-else v-text="participant[column.display_attribute]"></span>
+                            </ui-table-toggle-button>
+                            <div v-else>
+                                <prevention v-if="column.display_attribute === 'prevention_display'" :value="participant.prevention_items"></prevention>
+                                <span v-else v-text="participant[column.display_attribute]"></span>
+                            </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
-                                v-if="columnindex === 0 && groupParticipants"
-                                :value="child"
-                                :text="child[column.display_attribute]"
-                                :level="1"
-                                :active="isOpen(child.id)"
-                                @toggle="toggle(child)"
-                            ></ui-table-toggle-button>
-                            <div v-else v-text="child[column.display_attribute]"></div>
+                            <div class="flex items-center space-x-2">
+                                <ui-table-toggle-button v-if="columnindex === 0 && groupParticipants" :value="child" :level="1" :active="isOpen(child.id)" @toggle="toggle(child)">
+                                    <prevention v-if="column.display_attribute === 'prevention_display'" :value="child.prevention_items"></prevention>
+                                    <span v-else v-text="child[column.display_attribute]"></span>
+                                </ui-table-toggle-button>
+                                <div v-else>
+                                    <prevention v-if="column.display_attribute === 'prevention_display'" :value="child.prevention_items"></prevention>
+                                    <span v-else v-text="child[column.display_attribute]"></span>
+                                </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>