From 368cd12539bd45c8ffee6d9b828cad6f7eaac20c Mon Sep 17 00:00:00 2001
From: Andreas <mail@devmount.de>
Date: Fri, 12 Apr 2024 06:06:18 +0200
Subject: [PATCH] Fix frontend linting problems (#359)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🔨 fix 163 linting problems

* 🔨 Switch to multiline comment

* 🔨 Switch to multiline comment
---
 frontend/.eslintrc.cjs                        |  4 +-
 frontend/package.json                         |  2 +-
 frontend/src/components/SettingsCalendar.vue  |  6 ++-
 frontend/src/composables/dayjs.js             |  2 +-
 frontend/src/elements/AppointmentListItem.vue |  2 -
 frontend/src/elements/CalendarEvent.vue       |  6 +--
 .../src/elements/GoogleCalendarButton.vue     |  8 ++--
 frontend/src/elements/PrimaryButton.vue       |  6 +--
 frontend/src/elements/SecondaryButton.vue     |  6 +--
 frontend/src/elements/TextButton.vue          |  8 ++--
 frontend/src/elements/Tooltip.vue             |  6 +--
 frontend/src/main.js                          |  2 +-
 frontend/src/stores/alert-store.js            |  2 +-
 frontend/src/stores/appointment-store.js      |  2 +-
 frontend/src/stores/user-store.js             |  5 +--
 frontend/src/views/AppointmentsView.vue       |  1 -
 .../src/views/BookingConfirmationView.vue     |  2 +-
 frontend/src/views/BookingView.vue            |  5 +--
 frontend/src/views/CalendarView.vue           |  2 +-
 frontend/src/views/ScheduleView.vue           | 37 +------------------
 .../test/stores/appointment-store.test.js     |  8 ++--
 frontend/test/stores/calendar-store.test.js   |  8 ++--
 frontend/test/stores/user-store.test.js       |  4 +-
 frontend/test/utils/with-setup.js             |  2 +-
 24 files changed, 49 insertions(+), 87 deletions(-)

diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
index b4cae272f..00b3d206a 100644
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -25,9 +25,11 @@ module.exports = {
       js: 'never',
       vue: 'off',
     }],
-    'max-len': ['error', { code: 120 }],
+    'max-len': 'off', // ['error', { code: 120 }],
     'no-param-reassign': 'off',
     'tailwindcss/no-custom-classname': 'off',
+    'import/prefer-default-export': 'off',
+    'radix': 'off',
   },
   settings: {
     'import/resolver': {
diff --git a/frontend/package.json b/frontend/package.json
index cc23f4b59..34753913f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@auth0/auth0-vue": "^2.0.2",
+    "@rushstack/eslint-patch": "^1.3.3",
     "@sentry/vite-plugin": "^2.10.2",
     "@sentry/vue": "^7.56.0",
     "@tabler/icons-vue": "^2.4.0",
@@ -32,7 +33,6 @@
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
-    "@rushstack/eslint-patch": "^1.3.3",
     "autoprefixer": "^10.4.12",
     "eslint": "^8.55.0",
     "eslint-config-airbnb-base": "^15.0.0",
diff --git a/frontend/src/components/SettingsCalendar.vue b/frontend/src/components/SettingsCalendar.vue
index d7fe251f2..5141b6673 100644
--- a/frontend/src/components/SettingsCalendar.vue
+++ b/frontend/src/components/SettingsCalendar.vue
@@ -44,7 +44,7 @@
     </div>
 
     <!-- CalDAV calendar discovery -->
-    <div class="flex hidden flex-col gap-6">
+    <div class="hidden flex-col gap-6">
       <div class="text-lg">Discover CalDAV Calendars</div>
       <div class="flex max-w-2xl flex-col gap-4 pl-6">
         <label class="mt-4 flex items-center pl-4">
@@ -202,7 +202,9 @@
 <script setup>
 import { calendarManagementType } from '@/definitions';
 import { IconArrowRight } from '@tabler/icons-vue';
-import { ref, reactive, inject, onMounted, computed } from 'vue';
+import {
+  ref, reactive, inject, onMounted, computed,
+} from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import AlertBox from '@/elements/AlertBox';
diff --git a/frontend/src/composables/dayjs.js b/frontend/src/composables/dayjs.js
index 951052265..79bc6606d 100644
--- a/frontend/src/composables/dayjs.js
+++ b/frontend/src/composables/dayjs.js
@@ -13,7 +13,7 @@ import timezone from 'dayjs/plugin/timezone';
 import weekday from 'dayjs/plugin/weekday';
 import 'dayjs/locale/de';
 
-export function useDayJS(app, locale) {
+export default function useDayJS(app, locale) {
   dayjs.locale(locale);
   dayjs.extend(advancedFormat);
   dayjs.extend(duration);
diff --git a/frontend/src/elements/AppointmentListItem.vue b/frontend/src/elements/AppointmentListItem.vue
index f6e181413..b88dfe697 100644
--- a/frontend/src/elements/AppointmentListItem.vue
+++ b/frontend/src/elements/AppointmentListItem.vue
@@ -25,8 +25,6 @@
 
 <script setup>
 import { inject } from 'vue';
-import { keyByValue } from '@/utils';
-import { locationTypes } from '@/definitions';
 import { useI18n } from 'vue-i18n';
 
 // icons
diff --git a/frontend/src/elements/CalendarEvent.vue b/frontend/src/elements/CalendarEvent.vue
index 8480d2cd1..ebd745c3a 100644
--- a/frontend/src/elements/CalendarEvent.vue
+++ b/frontend/src/elements/CalendarEvent.vue
@@ -119,9 +119,9 @@ const emit = defineEmits(['eventSelected']);
 const popup = ref({ ...initialEventPopupData });
 
 // formatted time range
-const formattedTimeRange = (event) => {
-  const start = dj(event.time.start);
-  const end = dj(event.time.end);
+const formattedTimeRange = (eventObj) => {
+  const start = dj(eventObj.time.start);
+  const end = dj(eventObj.time.end);
   return `${start.format(timeFormat())} - ${end.format(timeFormat())}`;
 };
 </script>
diff --git a/frontend/src/elements/GoogleCalendarButton.vue b/frontend/src/elements/GoogleCalendarButton.vue
index 09f3d25ae..b0089465d 100644
--- a/frontend/src/elements/GoogleCalendarButton.vue
+++ b/frontend/src/elements/GoogleCalendarButton.vue
@@ -2,9 +2,9 @@
   <button
     class="
       relative flex h-10 items-center justify-center gap-4 whitespace-nowrap rounded-full
-      px-4 text-base font-roboto text-gray-600 dark:text-gray-400 transition-all ease-in-out
-      border border-gray-500 bg-white dark:bg-gray-800
-      hover:scale-102 hover:shadow-md active:scale-98 disabled:scale-100 disabled:opacity-50 disabled:shadow-none
+      border border-gray-500 bg-white px-4 font-roboto text-base text-gray-600
+      transition-all ease-in-out hover:scale-102 hover:shadow-md
+      active:scale-98 disabled:scale-100 disabled:opacity-50 disabled:shadow-none dark:bg-gray-800 dark:text-gray-400
     "
   >
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 666.66669 666.66669" class="size-6">
@@ -28,7 +28,7 @@
 
 <script setup>
 // component properties
-const props = defineProps({
+defineProps({
   label: String, // button text
 });
 </script>
diff --git a/frontend/src/elements/PrimaryButton.vue b/frontend/src/elements/PrimaryButton.vue
index 0aeebf367..ec950cfc8 100644
--- a/frontend/src/elements/PrimaryButton.vue
+++ b/frontend/src/elements/PrimaryButton.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     class="
-      relative flex h-10 items-center justify-center gap-2 whitespace-nowrap rounded-full bg-gradient-to-br 
+      relative flex h-10 items-center justify-center gap-2 whitespace-nowrap rounded-full bg-gradient-to-br
       from-teal-400 to-sky-600 px-6 text-base font-semibold text-white transition-all ease-in-out
       hover:scale-102 hover:shadow-md active:scale-98 enabled:hover:from-sky-400 enabled:hover:to-teal-600
       disabled:scale-100 disabled:opacity-50 disabled:shadow-none
@@ -28,7 +28,7 @@
       <slot></slot>
     </template>
     <transition>
-      <tooltip v-show="copied" :content="t('info.copiedToClipboard')" />
+      <tool-tip v-show="copied" :content="t('info.copiedToClipboard')" />
     </transition>
   </button>
 </template>
@@ -36,7 +36,7 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import Tooltip from '@/elements/Tooltip';
+import ToolTip from '@/elements/ToolTip';
 
 // icons
 import { IconClipboardCheck, IconCopy } from '@tabler/icons-vue';
diff --git a/frontend/src/elements/SecondaryButton.vue b/frontend/src/elements/SecondaryButton.vue
index d25b74ca3..abfd3a778 100644
--- a/frontend/src/elements/SecondaryButton.vue
+++ b/frontend/src/elements/SecondaryButton.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     class="
-      relative flex h-10 items-center justify-center gap-2 whitespace-nowrap rounded-full border 
+      relative flex h-10 items-center justify-center gap-2 whitespace-nowrap rounded-full border
       border-teal-500 bg-white px-6 text-base font-semibold text-gray-600 transition-all ease-in-out
       hover:scale-102 hover:shadow-md active:scale-98 disabled:scale-100 disabled:opacity-50 disabled:shadow-none
       dark:bg-gray-700 dark:text-gray-400
@@ -28,7 +28,7 @@
       <slot></slot>
     </template>
     <transition>
-      <tooltip v-show="copied" :content="t('info.copiedToClipboard')" />
+      <tool-tip v-show="copied" :content="t('info.copiedToClipboard')" />
     </transition>
   </button>
 </template>
@@ -36,7 +36,7 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import Tooltip from '@/elements/Tooltip';
+import ToolTip from '@/elements/ToolTip';
 
 // icons
 import { IconClipboardCheck, IconCopy } from '@tabler/icons-vue';
diff --git a/frontend/src/elements/TextButton.vue b/frontend/src/elements/TextButton.vue
index 9f3fcc148..7e7692717 100644
--- a/frontend/src/elements/TextButton.vue
+++ b/frontend/src/elements/TextButton.vue
@@ -2,8 +2,8 @@
   <button
     class="
       relative flex h-7 items-center justify-center gap-1 whitespace-nowrap rounded-md border border-gray-400 px-2
-      text-sm font-semibold text-gray-500 transition-all ease-in-out hover:shadow-md
-      hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800
+      text-sm font-semibold text-gray-500 transition-all ease-in-out hover:bg-gray-50
+      hover:shadow-md dark:text-gray-400 dark:hover:bg-gray-800
     "
     @click.stop="copy ? copyToClipboard() : null"
   >
@@ -17,7 +17,7 @@
     />
     {{ label }}
     <transition>
-      <tooltip v-show="copied" :content="t('info.copiedToClipboard')" />
+      <tool-tip v-show="copied" :content="t('info.copiedToClipboard')" />
     </transition>
   </button>
 </template>
@@ -25,7 +25,7 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import Tooltip from '@/elements/Tooltip';
+import ToolTip from '@/elements/ToolTip';
 
 // icons
 import { IconCopy, IconClipboardCheck } from '@tabler/icons-vue';
diff --git a/frontend/src/elements/Tooltip.vue b/frontend/src/elements/Tooltip.vue
index 5ab888574..85ab4e9ef 100644
--- a/frontend/src/elements/Tooltip.vue
+++ b/frontend/src/elements/Tooltip.vue
@@ -1,12 +1,12 @@
 <template>
   <div
     class="
-      absolute bottom-full -translate-y-2 z-50 whitespace-nowrap rounded-lg bg-black/75 py-1.5 px-3
+      absolute bottom-full z-50 -translate-y-2 whitespace-nowrap rounded-lg bg-black/75 px-3 py-1.5
       font-sans text-sm font-normal text-white focus:outline-none
     "
   >
     {{ content }}
-    <svg viewBox="0 0 100 100" class="absolute top-full left-1/2 -translate-x-1/2 size-3 fill-black/75">
+    <svg viewBox="0 0 100 100" class="absolute left-1/2 top-full size-3 -translate-x-1/2 fill-black/75">
       <polygon points="0,0 50,60 100,0" />
     </svg>
   </div>
@@ -14,7 +14,7 @@
 
 <script setup>
 // component properties
-const props = defineProps({
+defineProps({
   content: String, // Tooltip text
 });
 </script>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 4fde8adfe..63519529b 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -9,7 +9,7 @@ import { createPinia } from 'pinia';
 import router from '@/router';
 
 // init composables
-import { useDayJS } from '@/composables/dayjs';
+import useDayJS from '@/composables/dayjs';
 import i18ninstance from '@/composables/i18n';
 
 // init basic css with tailwind imports
diff --git a/frontend/src/stores/alert-store.js b/frontend/src/stores/alert-store.js
index 69cd42571..12dd785ec 100644
--- a/frontend/src/stores/alert-store.js
+++ b/frontend/src/stores/alert-store.js
@@ -23,7 +23,7 @@ export const useSiteNotificationStore = defineStore('siteNotification', () => {
    * Lock the given id
    * @param {string} lockId notification id to lock in
    */
-  const lock = (lockId) => id.value = lockId;
+  const lock = (lockId) => { id.value = lockId; };
 
   /**
    * Make a notification with given configuration appear
diff --git a/frontend/src/stores/appointment-store.js b/frontend/src/stores/appointment-store.js
index 887a59173..d97534ca2 100644
--- a/frontend/src/stores/appointment-store.js
+++ b/frontend/src/stores/appointment-store.js
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { ref, computed, inject } from 'vue';
-import { appointmentState, bookingStatus } from '@/definitions';
+import { bookingStatus } from '@/definitions';
 import { useUserStore } from '@/stores/user-store';
 
 // eslint-disable-next-line import/prefer-default-export
diff --git a/frontend/src/stores/user-store.js b/frontend/src/stores/user-store.js
index d44152f3e..9718b0dd5 100644
--- a/frontend/src/stores/user-store.js
+++ b/frontend/src/stores/user-store.js
@@ -1,6 +1,5 @@
 import { defineStore } from 'pinia';
 import { useLocalStorage } from '@vueuse/core';
-import { useI18n } from 'vue-i18n';
 import { i18n } from '@/composables/i18n';
 
 const initialUserObject = {
@@ -74,10 +73,10 @@ export const useUserStore = defineStore('user', () => {
    * @return {boolean}
    */
   const changeSignedUrl = async (fetch) => {
-    const { error, data } = await fetch('me/signature').post().json();
+    const { error, data: sigData } = await fetch('me/signature').post().json();
 
     if (error.value) {
-      return { error: data.value?.detail ?? error.value };
+      return { error: sigData.value?.detail ?? error.value };
     }
 
     return updateSignedUrl(fetch);
diff --git a/frontend/src/views/AppointmentsView.vue b/frontend/src/views/AppointmentsView.vue
index 56b311f9c..212b40ad5 100644
--- a/frontend/src/views/AppointmentsView.vue
+++ b/frontend/src/views/AppointmentsView.vue
@@ -222,7 +222,6 @@ import {
   IconSearch,
 } from '@tabler/icons-vue';
 import { useAppointmentStore } from '@/stores/appointment-store';
-import { useCalendarStore } from '@/stores/calendar-store';
 import { storeToRefs } from 'pinia';
 
 // component constants
diff --git a/frontend/src/views/BookingConfirmationView.vue b/frontend/src/views/BookingConfirmationView.vue
index 78c9026dc..17bbb78f7 100644
--- a/frontend/src/views/BookingConfirmationView.vue
+++ b/frontend/src/views/BookingConfirmationView.vue
@@ -23,7 +23,7 @@
           {{ t('text.invitationSentToAddress', { 'address': attendee?.email }) }}
         </div>
       </template>
-      <template v-else="confirmed">
+      <template v-else>
         <div class="text-xl font-semibold text-sky-600">
           {{ t('info.bookingSuccessfullyDenied') }}
         </div>
diff --git a/frontend/src/views/BookingView.vue b/frontend/src/views/BookingView.vue
index 23031ab77..1cf37dbb4 100644
--- a/frontend/src/views/BookingView.vue
+++ b/frontend/src/views/BookingView.vue
@@ -50,10 +50,7 @@
 
 <script setup>
 import { bookingCalendarViews as views, modalStates } from '@/definitions';
-import { download } from '@/utils';
-import {
-  inject, onMounted, ref,
-} from 'vue';
+import { inject, onMounted, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 import { useBookingViewStore } from '@/stores/booking-view-store';
diff --git a/frontend/src/views/CalendarView.vue b/frontend/src/views/CalendarView.vue
index 91f8b4126..ca0be579a 100644
--- a/frontend/src/views/CalendarView.vue
+++ b/frontend/src/views/CalendarView.vue
@@ -12,7 +12,7 @@
   </div>
   <!-- page content -->
   <div
-    class="mt-8 flex flex-col flex-col-reverse items-stretch justify-between gap-4 md:flex-row lg:gap-8"
+    class="mt-8 flex flex-col-reverse items-stretch justify-between gap-4 md:flex-row lg:gap-8"
     :class="{ 'lg:mt-10': tabActive === calendarViews.month }"
   >
     <!-- main section: big calendar showing active month, week or day -->
diff --git a/frontend/src/views/ScheduleView.vue b/frontend/src/views/ScheduleView.vue
index 558c45f1e..22c9c4678 100644
--- a/frontend/src/views/ScheduleView.vue
+++ b/frontend/src/views/ScheduleView.vue
@@ -5,7 +5,7 @@
   </div>
   <!-- page content -->
   <div
-    class="mt-8 flex flex-col flex-col-reverse items-stretch justify-between gap-4 md:flex-row"
+    class="mt-8 flex flex-col-reverse items-stretch justify-between gap-4 md:flex-row"
     :class="{ 'lg:mt-10': tabActive === calendarViews.month }"
   >
     <!-- schedule creation dialog -->
@@ -63,44 +63,9 @@ const activeDateRange = ref({
   start: activeDate.value.startOf('month'),
   end: activeDate.value.endOf('month'),
 });
-const selectDate = (d) => {
-  activeDate.value = dj(d);
-};
-
-// date calculations
-const startOfActiveWeek = computed(() => activeDate.value.startOf('week'));
-const endOfActiveWeek = computed(() => activeDate.value.endOf('week'));
 
 // active menu item for tab navigation of calendar views
 const tabActive = ref(calendarViews.month);
-const updateTab = (view) => {
-  tabActive.value = calendarViews[view];
-};
-
-// calculate page title
-const pageTitle = computed(() => {
-  switch (tabActive.value) {
-    case calendarViews.day:
-      return activeDate.value.format('dddd Do');
-    case calendarViews.week:
-      return `${startOfActiveWeek.value.format('ddd Do')} - ${endOfActiveWeek.value.format('ddd Do')}`;
-    case calendarViews.month:
-    default:
-      return '';
-  }
-});
-
-// date navigation
-const dateNav = (unit = 'auto', forward = true) => {
-  if (unit === 'auto') {
-    unit = Object.keys(calendarViews).find((key) => calendarViews[key] === tabActive.value);
-  }
-  if (forward) {
-    selectDate(activeDate.value.add(1, unit));
-  } else {
-    selectDate(activeDate.value.subtract(1, unit));
-  }
-};
 
 // get remote calendar data for current year
 const calendarEvents = ref([]);
diff --git a/frontend/test/stores/appointment-store.test.js b/frontend/test/stores/appointment-store.test.js
index 060edd46c..29e1d56ad 100644
--- a/frontend/test/stores/appointment-store.test.js
+++ b/frontend/test/stores/appointment-store.test.js
@@ -18,7 +18,7 @@ import withSetup from '../utils/with-setup';
 const API_URL = 'http://localhost';
 
 const restHandlers = [
-  http.get(`${API_URL}/me/appointments`, async (request) => HttpResponse.json([
+  http.get(`${API_URL}/me/appointments`, async () => HttpResponse.json([
     {
       calendar_id: 1,
       title: 'title',
@@ -43,9 +43,9 @@ const restHandlers = [
 ];
 
 const server = setupServer(...restHandlers);
-server.events.on('request:start', ({ request }) => {
-  // console.log('Outgoing:', request.method, request.url);
-});
+/*server.events.on('request:start', ({ request }) => {
+  console.log('Outgoing:', request.method, request.url);
+});*/
 
 describe('Appointment Store', () => {
   let app = null;
diff --git a/frontend/test/stores/calendar-store.test.js b/frontend/test/stores/calendar-store.test.js
index 27122e33f..84bbafb66 100644
--- a/frontend/test/stores/calendar-store.test.js
+++ b/frontend/test/stores/calendar-store.test.js
@@ -16,7 +16,7 @@ import { createFetch } from '@vueuse/core';
 const API_URL = 'http://localhost';
 
 const restHandlers = [
-  http.get(`${API_URL}/me/calendars`, async (request) => HttpResponse.json([
+  http.get(`${API_URL}/me/calendars`, async () => HttpResponse.json([
     {
       id: 1,
       title: 'title',
@@ -33,9 +33,9 @@ const restHandlers = [
 ];
 
 const server = setupServer(...restHandlers);
-server.events.on('request:start', ({ request }) => {
-  // console.log('Outgoing:', request.method, request.url);
-});
+/*server.events.on('request:start', ({ request }) => {
+  console.log('Outgoing:', request.method, request.url);
+});*/
 
 describe('Calendar Store', () => {
   // Create a pinia instance before each test
diff --git a/frontend/test/stores/user-store.test.js b/frontend/test/stores/user-store.test.js
index cb1f4e421..cd1d95432 100644
--- a/frontend/test/stores/user-store.test.js
+++ b/frontend/test/stores/user-store.test.js
@@ -76,9 +76,9 @@ const restHandlers = [
 ];
 
 const server = setupServer(...restHandlers);
-server.events.on('request:start', ({ request }) => {
+/*server.events.on('request:start', ({ request }) => {
   console.log('Outgoing:', request.method, request.url);
-});
+});*/
 
 describe('User Store', () => {
   // Create a pinia instance before each test
diff --git a/frontend/test/utils/with-setup.js b/frontend/test/utils/with-setup.js
index 37f93707b..fd19597f0 100644
--- a/frontend/test/utils/with-setup.js
+++ b/frontend/test/utils/with-setup.js
@@ -1,5 +1,5 @@
 import { createApp } from 'vue';
-import { useDayJS } from '@/composables/dayjs';
+import useDayJS from '@/composables/dayjs';
 
 /**
  * Mount a fake VueJS app