Adjust myep booking edit form

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CollapsiblePanel.vue

@@ -1,14 +1,14 @@
 <template>
     <div class="panel">
-        <div class="panel-heading" role="tab" :id="'heading-' + id">
+        <div class="panel-heading">
             <h3 class="panel-title">
-              <a role="button" data-toggle="collapse" :data-parent="parent" :href="'#collapse-' + id"
+              <a role="button" href="#" class="flex items-center justify-between" @click.prevent="expanded = !expanded">
-                 aria-expanded="false" :aria-controls="'collapse-' + id">
+                <span>{{ title }}</span>
-                {{ title }}
+                <i class="fa fa-chevron-right transform" :class="{ 'rotate-90': expanded }"></i>
               </a>
             </h3>
         </div>
-        <div :id="'collapse-' + id" class="panel-collapse collapse" role="tabpanel" :aria-labelledby="'headine-' + id">
+        <div :class="{ 'hidden': !expanded }">
           <div class="panel-body">
             <slot></slot>
           </div>
@@ -22,6 +22,7 @@
         data () {
           return {
             id: null,
+            expanded: false,
           }
         },
         props: {

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ContingentsOverview.vue

@@ -8,7 +8,7 @@
             <tbody>
                 <tr v-for="contingent in contingents" :key="contingent.id">
                     <th>{{ contingent.name }}</th>
-                    <td><span class="label" :class="contingent.available > 0 ? 'label-success' : 'label-danger'">{{ contingent.available }}</span></td>
+                    <td><span class="label" :class="contingent.available > 0 ? 'label-success' : 'label-danger'">{{ contingent.available >= 0 ? contingent.available : 0 }}</span></td>
                 </tr>
             </tbody>
         </table>

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ServicesOverview.vue

@@ -2,7 +2,7 @@
     <panel title="Gebuchte Zusatzleistungen">
         <ul class="list-group">
             <li class="list-group-item" v-for="(assignment, serviceId) in serviceAssignments">
-                {{ services[serviceId].name }}: {{ assignment.join(', ')}}
+                {{ services[serviceId].name }}: {{ assignment.length }}
             </li>
         </ul>
     </panel>