Fix frontend linting problems (#359)

* 🔨 fix 163 linting problems * 🔨 Switch to multiline comment * 🔨 Switch to multiline comment
thunderbird · Apr 12, 2024 · 368cd12 · 368cd12
1 parent af0daaf
commit 368cd12
Show file tree

Hide file tree

Showing 24 changed files with 49 additions and 87 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,15 +28,15 @@
       <slot></slot>
     </template>
     <transition>
-      <tooltip v-show="copied" :content="t('info.copiedToClipboard')" />
+      <tool-tip v-show="copied" :content="t('info.copiedToClipboard')" />
     </transition>
   </button>
 </template>
 
 <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
@@ -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,15 +28,15 @@
       <slot></slot>
     </template>
     <transition>
-      <tooltip v-show="copied" :content="t('info.copiedToClipboard')" />
+      <tool-tip v-show="copied" :content="t('info.copiedToClipboard')" />
     </transition>
   </button>
 </template>
 
 <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
@@ -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,15 +17,15 @@
     />
     {{ label }}
     <transition>
-      <tooltip v-show="copied" :content="t('info.copiedToClipboard')" />
+      <tool-tip v-show="copied" :content="t('info.copiedToClipboard')" />
     </transition>
   </button>
 </template>
 
 <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
@@ -1,20 +1,20 @@
 <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>
 </template>
 
 <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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