fixed formatting

AOEpeople · Aug 1, 2024 · a194ec3 · a194ec3
1 parent 19630ac
commit a194ec3
Show file tree

Hide file tree

Showing 44 changed files with 289 additions and 123 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,6 +12,7 @@ node_modules
 !.dockerignore
 !.env
 !.env.test
+!.eslintrc.cjs
 !.gitlab-ci.yml
 !.gitkeep
 !.stylelintrc.json

diff --git a/src/Resources/.eslintrc.cjs b/src/Resources/.eslintrc.cjs
@@ -0,0 +1,53 @@
+module.exports = {
+    extends: [
+        // 'eslint:recommended',
+        'plugin:vue/vue3-recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:tailwindcss/recommended',
+        'prettier'
+    ],
+
+    parser: 'vue-eslint-parser',
+
+    parserOptions: {
+        parser: '@typescript-eslint/parser'
+    },
+
+    plugins: ['@typescript-eslint', 'tailwindcss'],
+
+    root: true,
+
+    rules: {
+        // override/add rules settings here, such as:
+        'vue/no-unused-vars': 'warn',
+        'vue/multi-word-component-names': 'off',
+        'vue/require-prop-types': 'off',
+        'vue/attribute-hyphenation': 'off',
+        'vue/v-on-event-hyphenation': 'off',
+        'vue/no-setup-props-destructure': 'off',
+        'vue/no-mutating-props': 'off',
+        '@typescript-eslint/no-this-alias': [
+            'error',
+            {
+                allowDestructuring: true, // Allow `const { props, state } = this`; false by default
+                allowedNames: ['vm'] // Allow `const vm= this`; `[]` by default
+            }
+        ],
+        'tailwindcss/no-custom-classname': 'off',
+        'tailwindcss/enforces-negative-arbitrary-values': 'off',
+        eqeqeq: 'error',
+        'no-regex-spaces': 'error',
+        'no-var': 'error'
+    },
+
+    ignorePatterns: ['node_modules/', 'dist/', 'src/**/*.d.ts', '*.config.js', 'js/', 'src/types/EpicSpinners.ts', 'src/types/VueTabs.ts'],
+
+    overrides: [
+        {
+            files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
+            env: {
+                jest: true
+            }
+        }
+    ]
+};
diff --git a/src/Resources/.prettierrc b/src/Resources/.prettierrc
@@ -0,0 +1,26 @@
+{
+    "plugins": ["prettier-plugin-tailwindcss"],
+    "printWidth": 120,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "bracketSpacing": true,
+    "bracketSameLine": false,
+    "arrowParens": "always",
+    "vueIndentScriptAndStyle": false,
+    "singleAttributePerLine": true,
+    "overrides": [
+      {
+        "files": ["*.js", "*.ts"],
+        "options": {
+          "tabWidth": 4
+        }
+      },
+      {
+        "files": ["*.vue"],
+        "options": {
+          "tabWidth": 2
+        }
+      }
+    ]
+  }
diff --git a/src/Resources/.stylelintrc.json b/src/Resources/.stylelintrc.json
@@ -0,0 +1,21 @@
+{
+    "extends": "stylelint-config-sass-guidelines",
+    "ignoreFiles": ["bower_components/**/*"],
+    "rules": {
+      "function-url-quotes": [
+        "always",
+        {
+          "except": ["empty"]
+        }
+      ],
+      "max-nesting-depth": 4,
+      "selector-no-qualifying-type": null,
+      "selector-max-compound-selectors": 5,
+      "selector-pseudo-element-no-unknown": [
+        true,
+        {
+          "ignorePseudoElements": ["::input-placeholder"]
+        }
+      ]
+    }
+  }
diff --git a/src/Resources/jest.config.js b/src/Resources/jest.config.js
@@ -0,0 +1,36 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+    verbose: true,
+    preset: 'ts-jest',
+    testEnvironment: 'jsdom',
+    testEnvironmentOptions: {
+        customExportConditions: ['node', 'node-addons']
+    },
+    moduleNameMapper: {
+        'tools(.*)$': '<rootDir>/src/tools/$1',
+        'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js',
+        '^@/(.*)$': '<rootDir>/src/$1'
+    },
+    transform: {
+        '^.+\\.vue$': '@vue/vue3-jest',
+        '^.+\\js$': 'babel-jest',
+        '^.+\\.tsx?$': [
+            'ts-jest',
+            {
+                tsconfig: './tsconfig.json'
+            }
+        ],
+        '^.+\\.(css|less|sass|scss|png|jpg|gif|ttf|woff|woff2|svg)$': 'jest-transform-stub'
+    },
+    transformIgnorePatterns: ['/node_modules/'],
+    moduleFileExtensions: ['vue', 'js', 'jsx', 'json', 'ts', 'tsx', 'node'],
+    globals: {
+        '@vue/vue3-jest': {
+            compilerOptions: {
+                propsDestructureTransform: true,
+                refTransform: false
+            }
+        }
+    },
+    setupFilesAfterEnv: ['<rootDir>/tests/unit/setup-jest.ts']
+};
diff --git a/src/Resources/package.json b/src/Resources/package.json
@@ -10,7 +10,8 @@
     "test:unit": "vitest",
     "build-only": "vite build",
     "type-check": "vue-tsc --build --force",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts",
+    "lint-fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
     "format": "prettier --write src/",
     "format-check": "prettier --check src/"
   },

diff --git a/src/Resources/src/api/api.ts b/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 };
 }
diff --git a/src/Resources/src/api/isResponseOkay.ts b/src/Resources/src/api/isResponseOkay.ts
@@ -7,7 +7,11 @@ 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 | undefined>, 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 +27,11 @@ export function isResponseObjectOkay<T>(error: Ref<boolean>, response: Ref<T | u
  * @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[] | undefined>, 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 &&

diff --git a/src/Resources/src/api/putSlotUpdate.ts b/src/Resources/src/api/putSlotUpdate.ts
@@ -37,7 +37,10 @@ export function useUpdateSlot() {
      * @param slot The slot as it should look after updating
      */
     async function updateTimeSlot(slot: TimeSlot) {
-        return putUpdateSlot(slot.slug ?? '', JSON.stringify({ title: slot.title, limit: slot.limit, order: slot.order }));
+        return putUpdateSlot(
+            slot.slug ?? '',
+            JSON.stringify({ title: slot.title, limit: slot.limit, order: slot.order })
+        );
     }
 
     return {

diff --git a/src/Resources/src/components/balance/BalanceHeader.vue b/src/Resources/src/components/balance/BalanceHeader.vue
@@ -10,7 +10,7 @@
         :translate-x-min="'-18%'"
         class="m-auto w-fit"
       >
-        <template>
+        <template #button>
           <button
             class="hover:bg-highlight-2 btn-highlight-shadow mx-2 mb-6 mt-4 h-9 items-center rounded-btn bg-highlight px-[34px] text-center text-btn font-bold text-white shadow-btn drop-shadow-btn transition-all duration-300 ease-out active:translate-y-0.5 active:shadow-btn-active"
           >

diff --git a/src/Resources/src/components/balance/TransactionPanel.vue b/src/Resources/src/components/balance/TransactionPanel.vue
@@ -58,7 +58,8 @@ onMounted(async () => {
     });
 
     if (paypal && paypal.Buttons) {
-      paypal.Buttons({
+      paypal
+        .Buttons({
           onInit: function (_data, actions) {
             periodicFetchActive.value = true;
             if (amountFieldValue.value > 0.0) {

diff --git a/src/Resources/src/components/categories/CategoriesActions.vue b/src/Resources/src/components/categories/CategoriesActions.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-row content-center items-center justify-end justify-items-end sm:gap-4">
     <Popover :translate-x-min="'-50%'">
-      <template>
+      <template #button>
         <ActionButton
           :action="Action.EDIT"
           :btn-text="t('button.edit')"

diff --git a/src/Resources/src/components/costs/CostsTableActions.vue b/src/Resources/src/components/costs/CostsTableActions.vue
@@ -11,7 +11,7 @@
       :translate-x-min="'-5%'"
       :popup-styles="'right-0'"
     >
-      <template>
+      <template #button>
         <ActionButton
           :action="Action.CREATE"
           :btn-text="''"

diff --git a/src/Resources/src/components/dashboard/CombiButtonGroup.vue b/src/Resources/src/components/dashboard/CombiButtonGroup.vue
@@ -57,10 +57,10 @@ import { dashboardStore } from '@/stores/dashboardStore';
 import { type Meal } from '@/api/getDashboardData';
 
 interface DishInfo {
-  id: string | number,
-  title: string,
-  description: string,
-  slug: string
+  id: string | number;
+  title: string;
+  description: string;
+  slug: string;
 }
 
 const props = defineProps<{

diff --git a/src/Resources/src/components/dashboard/Day.vue b/src/Resources/src/components/dashboard/Day.vue
@@ -123,10 +123,10 @@ const props = defineProps<{
 
 const day = dashboardStore.getDay(props.weekID ?? -1, props.dayID ?? -1);
 const weekday = computed(() => {
-  if (day !== undefined)  {
-    return translateWeekday(day.date, locale)
+  if (day !== undefined) {
+    return translateWeekday(day.date, locale);
   }
-  return 'unknown'
+  return 'unknown';
 });
 const emptyDay = Object.keys(day?.meals ?? {}).length === 0;
 const isEventDay = day?.event !== null;

diff --git a/src/Resources/src/components/dashboard/MealData.vue b/src/Resources/src/components/dashboard/MealData.vue
@@ -68,6 +68,7 @@ import { type Day, type Meal } from '@/api/getDashboardData';
 import { useDishes } from '@/stores/dishesStore';
 import VeggiIcon from '@/components/misc/VeggiIcon.vue';
 import { Diet } from '@/enums/Diet';
+import { MealState } from '@/enums/MealState';
 
 const props = defineProps<{
   weekID: number | string | undefined;
@@ -84,7 +85,9 @@ const { getCombiDishes } = useDishes();
 
 const title = computed(() => (locale.value.substring(0, 2) === 'en' ? meal.title.en : meal.title.de));
 
-const description = computed(() => (locale.value.substring(0, 2) === 'en' ? meal.description?.en : meal.description?.de));
+const description = computed(() =>
+  locale.value.substring(0, 2) === 'en' ? meal.description?.en : meal.description?.de
+);
 const combiDescription = ref<string[]>([]);
 
 onMounted(async () => {
@@ -101,15 +104,13 @@ watch(
 const mealCSS = computed(() => {
   let css = 'flex content-center rounded-md h-[30px] xl:h-[20px] ';
   switch (meal.mealState) {
-    case 'disabled':
-    case 'offerable':
+    case (MealState.DISABLED, MealState.OFFERABLE):
       css += 'bg-[#80909F]';
       return css;
-    case 'open':
+    case MealState.OPEN:
       css += 'bg-primary-4';
       return css;
-    case 'tradeable':
-    case 'offering':
+    case (MealState.TRADEABLE, MealState.OFFERING):
       css += 'bg-highlight';
       return css;
     default:

diff --git a/src/Resources/src/components/dashboard/VariationsData.vue b/src/Resources/src/components/dashboard/VariationsData.vue
@@ -96,20 +96,21 @@ const meal = props.meal ? props.meal : dashboardStore.getMeal(props.weekID, prop
 const parentTitle = computed(() => (locale.value.substring(0, 2) === 'en' ? meal?.title.en : meal?.title.de));
 
 const mealCSS = computed(() => {
-  const css : Map<string, string> = new Map();
-  for (const variation of Object.values(meal?.variations ?? {})) {
+  const css: Map<string, string> = new Map();
+  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, MealState.OFFERABLE):
         cssStr += 'bg-[#80909F]';
         break;
       case MealState.OPEN:
         cssStr += 'bg-primary-4';
         break;
-      case MealState.TRADEABLE, MealState.OFFERING:
+      case (MealState.TRADEABLE, MealState.OFFERING):
         cssStr += 'bg-highlight';
         break;
     }
+    css.set(variationId, cssStr);
   }
   return css;
 });

diff --git a/src/Resources/src/components/dishes/DishActions.vue b/src/Resources/src/components/dishes/DishActions.vue
@@ -5,7 +5,7 @@
       :translate-x-min="'-5%'"
       :translate-x-max="'-5%'"
     >
-      <template>
+      <template #button>
         <ActionButton
           :action="Action.CREATE"
           :btn-text="t('dish.popover.variation.new')"
@@ -24,7 +24,7 @@
       :translate-x-min="'-5%'"
       :translate-x-max="'-5%'"
     >
-      <template>
+      <template #button>
         <ActionButton
           :action="Action.EDIT"
           :btn-text="t('button.edit')"

diff --git a/src/Resources/src/components/dishes/DishVariationActions.vue b/src/Resources/src/components/dishes/DishVariationActions.vue
@@ -5,7 +5,7 @@
       :translate-x-min="'-5%'"
       :translate-x-max="'-5%'"
     >
-      <template>
+      <template #button>
         <ActionButton
           :action="Action.EDIT"
           :btn-text="t('button.edit')"