Merge pull request #501 from AOEpeople/bugfix/vite-migration-fixes

Bugfix/vite migration fixes

README.md

@@ -148,9 +148,9 @@ You need to start the devbox before running any tests with cypress.
 
 ## Component testing
 
-To run specific component tests with JEST in isolation:
+To run specific component tests with Vitest in isolation:
 ```
-ddev exec yarn --cwd=src/Resources test -- -t "<test-filename> <testname>"
+ddev exec npm run --prefix src/Resources test:unit -- "<test-filename> <testname>"
 ```
 `<test-filename>` for a file with the name `xyz.spec.ts` would be `xyz`
 `<testname>` is optional, if no testname is specified the whole file is run
@@ -175,6 +175,12 @@ Frontend automated formatting
 make run-prettier
 ```
 
+#### Vue-Tsc
+Check TypeScript types
+```
+make run-typecheck
+```
+
 #### Php-CS-Fixer
 Backend linting
 ```

src/Resources/src/components/balance/TransactionPanel.vue

@@ -118,7 +118,6 @@ onMounted(async () => {
               }
               isLoading.value = false;
             } catch (error) {
-              console.log(`error on approving: ${error}`);
               isLoading.value = false;
             }
           }

src/Resources/src/components/dashboard/Day.vue

@@ -1,6 +1,6 @@
 <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"
+    class="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 shadow-day 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"
@@ -50,6 +50,7 @@
         <Slots
           :dayID="dayID"
           :day="day"
+          class="sm:w-64"
         />
       </div>
       <div

src/Resources/src/components/dashboard/GuestLink.vue

@@ -56,13 +56,6 @@ async function copyTextToClipboard(text: string) {
     await fallbackCopyTextToClipboard(text);
     return;
   }
-  navigator.clipboard.writeText(text).then(
-    function () {
-      console.log('Async: Copying to clipboard was successful!');
-    },
-    function (err) {
-      console.error('Async: Could not copy text: ', err);
-    }
-  );
+  navigator.clipboard.writeText(text);
 }
 </script>

src/Resources/src/components/dashboard/MealData.vue

@@ -104,13 +104,15 @@ watch(
 const mealCSS = computed(() => {
   let css = 'flex content-center rounded-md h-[30px] xl:h-[20px] ';
   switch (meal.mealState) {
-    case (MealState.DISABLED, MealState.OFFERABLE):
+    case MealState.DISABLED:
+    case MealState.OFFERABLE:
       css += 'bg-[#80909F]';
       return css;
     case MealState.OPEN:
       css += 'bg-primary-4';
       return css;
-    case (MealState.TRADEABLE, MealState.OFFERING):
+    case MealState.TRADEABLE:
+    case MealState.OFFERING:
       css += 'bg-highlight';
       return css;
     default:

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

@@ -9,7 +9,7 @@
     <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"
+        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"
       >
         <span class="text-gray block truncate text-[12px] leading-5 min-[380px]:text-note">
           {{ selectedSlot.slug === 'auto' ? t('dashboard.slot.auto') : selectedSlot.title }}

src/Resources/src/components/dashboard/VariationsData.vue

@@ -100,13 +100,15 @@ const mealCSS = computed(() => {
   for (const [variationId, variation] of Object.entries(meal?.variations ?? {})) {
     let cssStr = 'flex content-center rounded-md h-[30px] xl:h-[20px] ';
     switch (variation.mealState) {
-      case (MealState.DISABLED, MealState.OFFERABLE):
+      case MealState.DISABLED:
+      case MealState.OFFERABLE:
         cssStr += 'bg-[#80909F]';
         break;
       case MealState.OPEN:
         cssStr += 'bg-primary-4';
         break;
-      case (MealState.TRADEABLE, MealState.OFFERING):
+      case MealState.TRADEABLE:
+      case MealState.OFFERING:
         cssStr += 'bg-highlight';
         break;
     }

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

@@ -1,6 +1,6 @@
 <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"
+    class="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 shadow-day 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"
@@ -27,6 +27,7 @@
         <Slots
           :dayID="undefined"
           :day="guestData"
+          class="sm:w-64"
         />
       </div>
       <div

src/Resources/src/components/guest/GuestMeal.vue

@@ -51,6 +51,7 @@ import { type Meal } from '@/api/getDashboardData';
 import useMealState from '@/services/useMealState';
 import VeggiIcon from '@/components/misc/VeggiIcon.vue';
 import { Diet } from '@/enums/Diet';
+import { MealState } from '@/enums/MealState';
 
 const props = defineProps<{
   meals: Dictionary<Meal>;
@@ -81,10 +82,11 @@ const description = computed(() => {
 const mealCSS = computed(() => {
   let css = 'grid grid-cols-2 content-center rounded-md h-[30px] xl:h-[20px] mr-[15px] ';
   switch (meal.value.mealState) {
-    case 'disabled':
+    case MealState.OFFERABLE:
+    case MealState.DISABLED:
       css += 'bg-[#80909F]';
       return css;
-    case 'open':
+    case MealState.OPEN:
       css += 'bg-primary-4';
       return css;
     default:

src/Resources/src/components/guest/GuestVariation.vue

@@ -72,7 +72,8 @@ const mealCSS = computed(() => {
   for (const [variationId, variation] of Object.entries(props.meal.variations ?? {})) {
     let cssStr = 'grid grid-cols-2 content-center rounded-md h-[30px] xl:h-[20px] mr-[15px] ';
     switch (generateMealState(variation as Meal)) {
-      case (MealState.OFFERABLE, MealState.DISABLED):
+      case MealState.OFFERABLE:
+      case MealState.DISABLED:
         cssStr += 'bg-[#80909F]';
         break;
       case MealState.OPEN:

src/Resources/src/stores/dashboardStore.ts

@@ -17,18 +17,13 @@ class DashboardStore extends Store<Dashboard> {
         if (dashboardData.value !== undefined && dashboardData.value !== null) {
             this.state = dashboardData.value;
             this.setMealStates(this.state);
-        } else {
-            console.log('could not receive DashboardData');
         }
 
         await mercureReceiver.init();
     }
 
     public getWeek(weekID: number | string): Week | undefined {
         const week = this.state.weeks[weekID as number];
-        if (week === undefined) {
-            console.log('week with ID: week: ' + weekID + ' not found');
-        }
         return week;
     }
 
@@ -40,9 +35,6 @@ class DashboardStore extends Store<Dashboard> {
         const week = this.getWeek(weekID);
         if (week !== undefined) {
             const day = week.days[dayID as number];
-            if (day === undefined) {
-                console.log('day with ID: week: ' + weekID + ' day: ' + dayID + ' not found');
-            }
             return day;
         }
         return undefined;
@@ -76,11 +68,6 @@ class DashboardStore extends Store<Dashboard> {
         const day = this.getDay(weekID, dayID);
         if (day !== undefined) {
             const slot = day.slots[slotID as number];
-            if (slot === undefined) {
-                console.log(
-                    'getSlot: slot with ID ( week: ' + weekID + ' day: ' + dayID + ' slot: ' + slotID + ' ) not found'
-                );
-            }
             return slot;
         }
 
@@ -91,11 +78,6 @@ class DashboardStore extends Store<Dashboard> {
         const day = this.getDay(weekID, dayID);
         if (day !== undefined) {
             const meal = day.meals[mealID as number];
-            if (meal === undefined) {
-                console.log(
-                    'getMeal: meal with ID ( week: ' + weekID + ' day: ' + dayID + ' meal: ' + mealID + ' ) not found'
-                );
-            }
             return meal;
         }
         return undefined;
@@ -119,19 +101,6 @@ class DashboardStore extends Store<Dashboard> {
         const parentMeal = this.getMeal(weekID, dayID, parentMealID);
         if (parentMeal !== undefined && parentMeal.variations !== null) {
             const variation = parentMeal.variations[variationID as number];
-            if (variation === undefined) {
-                console.log(
-                    'getVariation: variation with ID ( week: ' +
-                        weekID +
-                        ' day: ' +
-                        dayID +
-                        ' ParentMeal: ' +
-                        parentMealID +
-                        ' variation: ' +
-                        variationID +
-                        ' ) not found'
-                );
-            }
             return variation;
         }
         return undefined;

src/Resources/src/stores/transactionStore.ts

@@ -23,8 +23,6 @@ class TransactionStore extends Store<TransStore> {
             this.state.data = transactions.value.data;
             this.state.difference = transactions.value.difference;
             this.state.isLoading = false;
-        } else {
-            console.log('could not receive Transactions');
         }
     }
 }