fixed some typing problems

Makefile

@@ -15,6 +15,7 @@ help:
 	@echo "	poweroff           - Stop all related containers and projects"
 	@echo "	run-devbox         - Run devbox"
 	@echo "	run-lint           - Run code frontend linter (eslint)"
+	@echo " run-typecheck      - Run frontend type check"
 	@echo "	run-prettier-check - Run prettier with the check option"
 	@echo "	run-prettier       - Run prettier to format frontend files"
 	@echo "	run-cs-fixer       - Run Coding Standards Fixer"
@@ -48,6 +49,9 @@ build-vite-dev:
 run-lint:
 	ddev exec npm run --prefix src/Resources lint
 
+run-typecheck:
+	ddev exec npm run --prefix src/Resources type-check
+
 run-prettier-check:
 	ddev exec npm run --prefix src/Resources format-check
 

README.md

@@ -203,6 +203,11 @@ make run-psalm
 
 ## Developer information
 
+### Vite
+
+Vite has two different modes of operation. One where a production ready build is generated and a dev mode. The dev mode is best used to quickly iterate and rebuild over changes while working.
+
+
 ### User roles
 
 The following roles are in use:
@@ -223,6 +228,10 @@ IDP_CLIENT_ID=client-id
 IDP_CLIENT_SECRET=client-secret
 ```
 
+### Dev Warning
+
+In the Vite Dev mode browsers will typically send out a Warning("Source-Map-Fehler: No sources are declared in this source map."). This can be mitigated by using the build mode.
+
 ### API Error Messages
 *MealAdminController 1xx*
   * 101: Invalid JSON was received

src/Resources/package.json

@@ -39,7 +39,7 @@
     "@tsconfig/node20": "^20.1.4",
     "@types/dom-to-image": "^2.6.7",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^20.14.5",
+    "@types/node": "^20.14.13",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
@@ -58,7 +58,7 @@
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwindcss": "^3.4.6",
-    "typescript": "~5.4.0",
+    "typescript": "^5.4.0",
     "vite": "^5.3.1",
     "vite-plugin-vue-devtools": "^7.3.1",
     "vitest": "^1.6.0",

src/Resources/src/App.vue

@@ -30,7 +30,7 @@ import SessionCheckerPopup from '@/components/misc/SessionCheckerPopup.vue';
 const route = useRoute();
 const { setNavBarHeight, windowWidth } = useComponentHeights();
 
-const navibar = ref(null);
+const navibar = ref<InstanceType<typeof NavBar> | null>(null);
 
 const showParticipations = computed(() => {
   return route.path === '/show/participations';
@@ -46,9 +46,6 @@ onMounted(() => {
   if (navibar.value !== null && navibar.value !== undefined) {
     setNavBarHeight(navibar.value.$el.offsetHeight, 'navibar');
   }
-
-  const env = process.env.NODE_ENV;
-  console.log(`ENV is ${env}`);
 });
 
 onUpdated(() => {

src/Resources/src/api/api.ts

@@ -19,23 +19,23 @@ export default function useApi<T>(method: string, url: string, contentType = 'ap
                 'content-type': contentType
             }
         })
-            .then((res) => {
-                response.value = res.data as T;
-            })
-            .catch((err) => {
-                error.value = true;
+        .then((res) => {
+            response.value = res.data as T;
+        })
+        .catch((err) => {
+            error.value = true;
 
-                if (
-                    err.response !== null &&
-                    err.response !== undefined &&
-                    err.response.data !== null &&
-                    err.response.data !== undefined
-                ) {
-                    response.value = err.response.data;
-                } else if (err.status === null || err.status === undefined) {
-                    checkActiveSession();
-                }
-            });
+            if (
+                err.response !== null &&
+                err.response !== undefined &&
+                err.response.data !== null &&
+                err.response.data !== undefined
+            ) {
+                response.value = err.response.data;
+            } else if (err.status === null || err.status === undefined) {
+                checkActiveSession();
+            }
+        });
     };
     return { response, request, error };
 }

src/Resources/src/api/isResponseOkay.ts

@@ -7,7 +7,7 @@ import { type Ref } from 'vue';
  * @param response      Ref with the response object from the API call
  * @param typeChecker   Callback function to check the type of the response object
  */
-export function isResponseObjectOkay<T>(error: Ref<boolean>, response: Ref<T>, typeChecker?: (arg: T) => boolean) {
+export function isResponseObjectOkay<T>(error: Ref<boolean>, response: Ref<T | undefined>, typeChecker?: (arg: T) => boolean) {
     return (
         error.value === false &&
         response.value !== null &&
@@ -23,7 +23,7 @@ export function isResponseObjectOkay<T>(error: Ref<boolean>, response: Ref<T>, t
  * @param response      Ref with the response array from the API call
  * @param typeChecker   Callback function to check the type of the response array
  */
-export function isResponseArrayOkay<T>(error: Ref<boolean>, response: Ref<T[]>, typeChecker?: (arg: T) => boolean) {
+export function isResponseArrayOkay<T>(error: Ref<boolean>, response: Ref<T[] | undefined>, typeChecker?: (arg: T) => boolean) {
     return (
         error.value === false &&
         response.value !== null &&
@@ -52,7 +52,7 @@ export function isResponseDictOkay<T>(
     );
 }
 
-function checkArray<T>(response: Ref<T[]>, typeChecker?: (arg: T) => boolean) {
+function checkArray<T>(response: Ref<T[] | undefined>, typeChecker?: (arg: T) => boolean) {
     return (
         Array.isArray(response.value) &&
         (response.value.length > 0
@@ -63,8 +63,8 @@ function checkArray<T>(response: Ref<T[]>, typeChecker?: (arg: T) => boolean) {
     );
 }
 
-function checkObject<T>(response: Ref<T>, typeChecker?: (arg: T) => boolean) {
-    return typeof typeChecker === 'function' && typeChecker !== null && typeChecker !== undefined
+function checkObject<T>(response: Ref<T | undefined>, typeChecker?: (arg: T) => boolean) {
+    return response.value && typeof typeChecker === 'function' && typeChecker !== null && typeChecker !== undefined
         ? typeChecker(response.value)
         : true;
 }

src/Resources/src/api/putParticipation.ts

@@ -7,8 +7,6 @@ export default async function putParticipation(mealId: number, profileId: string
 
     if (combiDishes !== undefined && combiDishes !== null && combiDishes.length === 2) {
         data = { combiDishes: combiDishes };
-    } else if (combiDishes !== undefined && combiDishes !== null && combiDishes.length !== 2) {
-        return;
     } else {
         data = {};
     }

src/Resources/src/components/NavBar.vue

@@ -173,9 +173,9 @@ const getShowParticipationsError = computed(() => loadedState.error !== '');
 
 const balanceString = computed(() => userDataStore.balanceToLocalString(locale.value));
 
-const user = computed(() => userDataStore.getState().user);
+const user = computed(() => userDataStore.getState().user ?? '');
 const isAuthenticated = computed(() => {
-  !userDataStore.getState().roles.includes('ROLE_GUEST');
+  return !userDataStore.getState().roles.includes('ROLE_GUEST');
 });
 
 const navigation = computed(() => {

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

@@ -23,7 +23,7 @@
 
 <script setup lang="ts">
 import { RadarSpinner } from 'epic-spinners';
-import { loadScript } from '@paypal/paypal-js';
+import { loadScript, type PayPalNamespace } from '@paypal/paypal-js';
 import { transactionStore } from '@/stores/transactionStore';
 import { useI18n } from 'vue-i18n';
 import { type WatchStopHandle, computed, onMounted, onUnmounted, ref, watch } from 'vue';
@@ -57,76 +57,80 @@ onMounted(async () => {
       currency: 'EUR'
     });
 
-    paypal
-      .Buttons({
-        onInit: function (data, actions) {
-          periodicFetchActive.value = true;
-          if (amountFieldValue.value > 0.0) {
-            actions.enable();
-          } else {
-            actions.disable();
-          }
-
-          actionsWatcher.value = watch(
-            () => amountFieldValue.value,
-            () => {
-              if (amountFieldValue.value > 0.0) {
-                actions.enable();
-              } else {
-                actions.disable();
-              }
+    if (paypal && paypal.Buttons) {
+      paypal.Buttons({
+          onInit: function (data, actions) {
+            periodicFetchActive.value = true;
+            if (amountFieldValue.value > 0.0) {
+              actions.enable();
+            } else {
+              actions.disable();
             }
-          );
-        },
-        createOrder: function (data, actions) {
-          checkActiveSession();
-          return actions.order.create({
-            purchase_units: [
-              {
-                amount: {
-                  value: formatCurrency(amountFieldValue.value),
-                  currency_code: 'EUR'
+
+            actionsWatcher.value = watch(
+              () => amountFieldValue.value,
+              () => {
+                if (amountFieldValue.value > 0.0) {
+                  actions.enable();
+                } else {
+                  actions.disable();
                 }
               }
-            ],
-            intent: 'CAPTURE'
-          });
-        },
-        onShippingChange: function (data, actions) {
-          return actions.resolve();
-        },
-        onApprove: async function (data, actions) {
-          isLoading.value = true;
-          try {
-            await actions.order.capture();
-
-            checkActiveSession(
-              JSON.stringify({
-                amount: amountFieldValue.value.toFixed(2),
-                orderId: data.orderID
-              })
             );
+          },
+          createOrder: function (data, actions) {
+            checkActiveSession();
+            return actions.order.create({
+              purchase_units: [
+                {
+                  amount: {
+                    value: formatCurrency(amountFieldValue.value),
+                    currency_code: 'EUR'
+                  }
+                }
+              ],
+              intent: 'CAPTURE'
+            });
+          },
+          onShippingChange: function (data, actions) {
+            return actions.resolve();
+          },
+          onApprove: async function (data, actions) {
+            isLoading.value = true;
+            try {
+              await actions.order?.capture();
 
-            const response = await postPaypalOrder(amountFieldValue.value.toFixed(2), data.orderID);
+              checkActiveSession(
+                JSON.stringify({
+                  amount: amountFieldValue.value.toFixed(2),
+                  orderId: data.orderID
+                })
+              );
 
-            if (response.ok) {
-              userDataStore.adjustBalance(parseFloat(formatCurrency(amountFieldValue.value)));
-              transactionStore.fillStore();
-              // disable gray out and show spinner
-              emit('closePanel');
+              const response = await postPaypalOrder(amountFieldValue.value.toFixed(2), data.orderID);
+
+              if (response.ok) {
+                userDataStore.adjustBalance(parseFloat(formatCurrency(amountFieldValue.value)));
+                transactionStore.fillStore();
+                // disable gray out and show spinner
+                emit('closePanel');
+              }
+              isLoading.value = false;
+            } catch (error) {
+              console.log(`error on approving: ${error}`);
+              isLoading.value = false;
             }
-            isLoading.value = false;
-          } catch (error) {
-            console.log(`error on approving: ${error}`);
-            isLoading.value = false;
           }
-        }
-      })
-      .render('#paypal-container')
-      .catch((error) => {
-        console.error('failed to render the PayPal Buttons', error);
-        isLoading.value = false;
-      });
+        })
+        .render('#paypal-container')
+        .catch((error) => {
+          console.error('failed to render the PayPal Buttons', error);
+          isLoading.value = false;
+        });
+    } else {
+      console.error('failed to load the PayPal JS SDK script');
+      isLoading.value = false;
+    }
   } catch (error) {
     console.error('failed to load the PayPal JS SDK script', error);
     isLoading.value = false;

src/Resources/src/components/menuParticipants/MenuTable.vue

@@ -20,6 +20,7 @@ import MenuTableBody from '@/components/menuParticipants/MenuTableBody.vue';
 import MenuTableHead from './MenuTableHead.vue';
 import { useProgress } from '@marcoschulte/vue3-progress';
 import LoadingSpinner from '../misc/LoadingSpinner.vue';
+import process from 'node:process';
 
 const props = defineProps<{
   weekId: number;

src/Resources/src/components/menuParticipants/MenuTableData.vue

@@ -44,7 +44,7 @@
 </template>
 
 <script setup lang="ts">
-import { SimpleMeal } from '@/stores/weeksStore';
+import { type SimpleMeal } from '@/stores/weeksStore';
 import { useMealIdToDishId } from '@/services/useMealIdToDishId';
 import { useParticipations } from '@/stores/participationsStore';
 import { useDishes } from '@/stores/dishesStore';
@@ -69,7 +69,9 @@ const { getDishById } = useDishes();
 
 const isCombi = computed(() => props.meal.dish === 'combined-dish');
 const bookedCombi = computed(() => {
-  return hasParticipantBookedCombiDish(props.dayId, props.participant, mealIdToDishIdDict.get(props.meal.id));
+  const dishId = mealIdToDishIdDict.get(props.meal.id);
+  if (dishId === undefined || dishId === null) return undefined;
+  return hasParticipantBookedCombiDish(props.dayId, props.participant, dishId);
 });
 const bookedMeal = computed(() => hasParticipantBookedMeal(props.dayId, props.participant, props.meal.id));
 
@@ -94,8 +96,8 @@ async function closeCombiModal(combiMeals: number[]) {
   if (combiMeals !== undefined && combiMeals.length === 2) {
     const dishSlugs = combiMeals.map((mealId) => {
       const dishId = mealIdToDishIdDict.get(mealId);
-      return dishId !== -1 ? getDishById(dishId).slug : null;
-    });
+      return dishId !== -1 && typeof dishId === 'number' ? getDishById(dishId)?.slug : null;
+    }).filter(slug => typeof slug === 'string');
     if (dishSlugs !== null) {
       await addParticipantToMeal(props.meal.id, props.participant, props.dayId, dishSlugs);
     }