fixed vanished meal checkbox on guestpage

src/Resources/src/components/dashboard/Slots.vue

@@ -3,8 +3,10 @@
     v-slot="{ open }"
     v-model="selectedSlot"
     :disabled="disabled"
+    class="relative w-full"
+    as="span"
   >
-    <div class="relative w-full">
+    <div class="relative">
       <ListboxButton
         :class="[open ? 'rounded-t-2xl border-x border-t' : 'rounded-3xl border', disabled ? '' : 'cursor-pointer']"
         class="focus-visible:ring-offset-orange-300 relative flex h-8 w-full items-center border-[#B4C1CE] bg-white pl-4 pr-2 text-left focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 min-[380px]:pr-10 sm:w-64"
@@ -23,31 +25,36 @@
           />
         </span>
       </ListboxButton>
-      <ListboxOptions
-        class="absolute -mt-px max-h-60 w-full overflow-auto rounded-b-2xl border-x border-b border-[#B4C1CE] bg-white text-[12px] leading-5 shadow-lg focus:outline-none min-[380px]:text-note sm:text-sm"
+      <div
+        v-if="open"
+        class="absolute z-10 w-full"
       >
-        <template v-for="slot in day.slots">
-          <ListboxOption
-            v-if="slot.id !== 0 || !isParticipating"
-            v-slot="{ active, selected }"
-            :key="slot.slug"
-            :value="slot"
-            as="template"
-          >
-            <li
-              :class="selected ? 'bg-[#F4F4F4]' : 'hover:bg-[#FAFAFA]'"
-              class="cursor-pointer pl-4"
+        <ListboxOptions
+          class="-mt-px max-h-60 w-full overflow-hidden rounded-b-2xl border-x border-b border-[#B4C1CE] bg-white text-[12px] leading-5 shadow-lg focus:outline-none min-[380px]:text-note sm:text-sm"
+        >
+          <template v-for="slot in day.slots">
+            <ListboxOption
+              v-if="slot.id !== 0 || !isParticipating"
+              v-slot="{ active, selected }"
+              :key="slot.slug"
+              :value="slot"
+              as="template"
             >
-              <span :class="[selected ? 'font-medium' : 'font-normal', 'block truncate py-2 text-note']">
-                {{ slot.slug === 'auto' ? t('dashboard.slot.auto') : slot.title }}
-                <span v-if="slot.limit !== 0">
-                  {{ '( ' + slot.count + ' / ' + slot.limit + ' )' }}
+              <li
+                :class="selected ? 'bg-[#F4F4F4]' : 'hover:bg-[#FAFAFA]'"
+                class="cursor-pointer pl-4"
+              >
+                <span :class="[selected ? 'font-medium' : 'font-normal', 'block truncate py-2 text-note']">
+                  {{ slot.slug === 'auto' ? t('dashboard.slot.auto') : slot.title }}
+                  <span v-if="slot.limit !== 0">
+                    {{ '( ' + slot.count + ' / ' + slot.limit + ' )' }}
+                  </span>
                 </span>
-              </span>
-            </li>
-          </ListboxOption>
-        </template>
-      </ListboxOptions>
+              </li>
+            </ListboxOption>
+          </template>
+        </ListboxOptions>
+      </div>
     </div>
   </Listbox>
 </template>

src/Resources/src/components/guest/GuestCheckbox.vue

@@ -2,7 +2,7 @@
   <span
     :class="[
       enabled ? 'bg-primary-3' : '',
-      'size-[30px] cursor-pointer rounded-md border-[0.5px] border-gray-200 xl:size-[20px]'
+      'size-[30px] cursor-pointer rounded-md border-[0.5px] border-[#ABABAB] xl:size-[20px]'
     ]"
     @click="handle"
   >
@@ -24,7 +24,7 @@ import { CheckIcon } from '@heroicons/vue/solid';
 import { ref } from 'vue';
 import useEventsBus from 'tools/eventBus';
 import CombiModal from '@/components/dashboard/CombiModal.vue';
-import { Meal } from '@/api/getDashboardData';
+import { type Meal } from '@/api/getDashboardData';
 import { Dictionary } from 'types/types';
 
 const props = defineProps<{
@@ -36,10 +36,10 @@ const enabled = ref(false);
 const open = ref(false);
 const { emit } = useEventsBus();
 
-const isCombiBox = props.meals[props.mealId].dishSlug === 'combined-dish';
+const isCombiBox = (props.meals[props.mealId] as Meal).dishSlug === 'combined-dish';
 let hasVariations = false;
 
-Object.values(props.meals).forEach((meal) => (meal.variations ? (hasVariations = true) : ''));
+Object.values(props.meals).forEach((meal) => ((meal as Meal).variations ? (hasVariations = true) : ''));
 
 function handle() {
   // Is a combi meal
@@ -49,8 +49,8 @@ function handle() {
       open.value = true;
     } else {
       let combiDishes = Object.values(props.meals)
-        .filter((meal) => meal.dishSlug !== 'combined-dish')
-        .map((meal) => meal.dishSlug);
+        .filter((meal) => (meal as Meal).dishSlug !== 'combined-dish')
+        .map((meal) => (meal as Meal).dishSlug);
 
       emit('guestChosenCombi', combiDishes);
       emit('guestChosenMeals', props.mealId);

src/Resources/src/components/guest/GuestDay.vue

@@ -0,0 +1,70 @@
+<template>
+  <div
+    class="day-shadow mx-auto grid h-auto min-h-[153px] max-w-[414px] grid-cols-[auto_minmax(0,1fr)] grid-rows-[minmax(0,1fr)_auto] rounded bg-white sm:max-w-none"
+  >
+    <div
+      class="relative col-span-1 col-start-1 row-span-2 row-start-1 grid w-[24px] grid-rows-[24px_minmax(0,1fr)_24px] justify-center gap-2 rounded-l-[5px] py-[2px] print:bg-primary-2"
+      :class="[guestData.isLocked || !guestData.isEnabled || emptyDay ? 'bg-[#80909F]' : 'bg-primary-2']"
+    >
+      <span
+        class="row-start-2 rotate-180 place-self-center text-center text-[11px] font-bold uppercase leading-4 tracking-[3px] text-white [writing-mode:vertical-lr]"
+        :class="guestData.isLocked || emptyDay ? '' : 'pb-[0px]'"
+      >
+        {{ weekday }}
+      </span>
+    </div>
+    <div
+      v-if="!emptyDay && guestData.isEnabled"
+      class="z-[1] col-start-2 row-start-1 flex min-w-[290px] flex-1 flex-col"
+    >
+      <div
+        v-if="guestData.slotsEnabled"
+        class="flex h-[54px] items-center border-b-2 px-[15px] print:hidden"
+      >
+        <span class="mr-2 inline-block text-[11px] font-bold uppercase leading-4 tracking-[1.5px] text-primary">
+          {{ t('dashboard.slot.timeslot') }}
+        </span>
+        <Slots
+          :dayID="undefined"
+          :day="guestData"
+        />
+      </div>
+      <div
+        v-for="(meal, mealID) in guestData.meals"
+        :key="mealID"
+        class="mx-[15px] border-b-[0.7px] py-[13px] last:border-b-0 print:py-2"
+      >
+        <GuestMeal
+          :meals="guestData.meals"
+          :mealId="mealID"
+        />
+      </div>
+    </div>
+    <div
+      v-if="emptyDay || !guestData.isEnabled"
+      class="z-[1] col-start-2 row-start-1 grid h-full min-w-[290px] items-center"
+    >
+      <span class="description relative ml-[15px] text-primary-1">
+        {{ t('dashboard.no_service') }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type GuestDay } from '@/api/getInvitationData';
+import { useI18n } from 'vue-i18n';
+import { translateWeekday } from 'tools/localeHelper';
+import { computed } from 'vue';
+import Slots from '@/components/dashboard/Slots.vue';
+import GuestMeal from '@/components/guest/GuestMeal.vue';
+
+const { t, locale } = useI18n();
+
+const props = defineProps<{
+  guestData: GuestDay;
+}>();
+
+const weekday = computed(() => translateWeekday(props.guestData.date, locale));
+const emptyDay = Object.keys(props.guestData.meals).length === 0;
+</script>

src/Resources/src/views/Guest.vue

@@ -13,7 +13,7 @@
         {{ t('guest.description') }}
       </p>
     </div>
-    <Day
+    <GuestDay
       :class="{ 'ring-2 ring-red': mealsMissing }"
       :guestData="invitation"
     />
@@ -40,7 +40,7 @@ import { useJoinMealGuest } from '@/api/postJoinMealGuest';
 import { useI18n } from 'vue-i18n';
 import GuestCompletion from '@/components/guest/GuestCompletion.vue';
 import GuestForm from '@/components/guest/GuestForm.vue';
-import Day from '@/components/dashboard/Day.vue';
+import GuestDay from '@/components/guest/GuestDay.vue';
 
 const progress = useProgress().start();
 const route = useRoute();