Bump deps and fix eslint and prettier onSave

mrleblanc101 · Jul 31, 2024 · a892a13 · a892a13
1 parent 77045ef
commit a892a13
Show file tree

Hide file tree

Showing 11 changed files with 3,405 additions and 3,065 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,37 @@
+module.exports = {
+    root: true,
+    env: {
+        browser: true,
+        node: true,
+    },
+    parserOptions: {
+        parser: '@typescript-eslint/parser',
+        sourceType: 'module',
+    },
+    extends: ['eslint:recommended', 'plugin:vue/vue3-recommended', 'plugin:prettier/recommended', 'prettier'],
+    plugins: ['vue', 'prettier'],
+    // add your custom rules here
+    rules: {
+        'no-undef': 'off',
+        'no-unused-vars': 'off',
+        'no-console': 'warn',
+        'vue/no-v-html': 'off',
+        'vue/multi-word-component-names': 'off',
+        'nuxt/no-cjs-in-config': 'off',
+        'vue/html-button-has-type': 'error',
+        'object-shorthand': ['error', 'always'],
+        'vue/no-unused-components': 'warn',
+        'vue/padding-line-between-blocks': ['error', 'always'],
+        'vue/no-multiple-template-root': 'off',
+        'vue/prop-name-casing': 'off',
+        'no-irregular-whitespace': 'off',
+        'vue/one-component-per-file': 'off',
+        'vue/define-macros-order': [
+            'error',
+            {
+                order: ['defineOptions', 'defineModel', 'defineProps', 'defineEmits', 'defineSlots'],
+                defineExposeLast: true,
+            },
+        ],
+    },
+};
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,7 @@
 {
-    "plugins": ["prettier-plugin-tailwindcss"],
+    "plugins": [
+        "./node_modules/prettier-plugin-tailwindcss/dist/index.mjs"
+    ],
     "printWidth": 120,
     "tabWidth": 4,
     "semi": true,

diff --git a/package.json b/package.json
@@ -5,7 +5,8 @@
         "dev": "nuxt dev",
         "generate": "nuxt generate",
         "preview": "nuxt preview",
-        "postinstall": "nuxt prepare"
+        "postinstall": "nuxt prepare",
+        "lint": "eslint --ext .js,.vue --ignore-path .gitignore ./src"
     },
     "devDependencies": {
         "@nuxtjs/color-mode": "^3.2.0",
@@ -17,16 +18,22 @@
         "@vueuse/components": "^10.3.0",
         "@vueuse/core": "^10.3.0",
         "@vueuse/nuxt": "^10.3.0",
+        "eslint": "^8.57.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-prettier": "^5.1.3",
+        "eslint-plugin-vue": "^9.26.0",
         "nuxt": "^3.8.0",
         "postcss-import": "^16.0.1",
-        "prettier": "^3.0.3",
-        "prettier-plugin-tailwindcss": "^0.5.5",
-        "vite-svg-loader": "^5.1.0"
+        "prettier": "^3.3.3",
+        "prettier-eslint": "^16.3.0",
+        "prettier-plugin-tailwindcss": "^0.6.5",
+        "vite-svg-loader": "^5.1.0",
+        "vue-eslint-parser": "^9.4.3"
     },
     "dependencies": {
         "@pinia/nuxt": "^0.5.1",
         "@tailwindcss/forms": "^0.5.3",
-        "@types/node": "^20.5.0",
+        "@types/node": "^22.0.0",
         "@vueform/multiselect": "^2.5.8",
         "firebase": "^10.4.0",
         "inputmask": "^5.0.7",

diff --git a/src/components/SummarySidebar.vue b/src/components/SummarySidebar.vue
@@ -7,8 +7,8 @@
     >
         <Tabs
             v-if="isXlOrGreater || menuOpened"
-            class="fixed bottom-0 right-0 top-16 z-30 flex w-full shrink-0 flex-col border-l bg-stone-50 shadow-lg dark:border-slate-800 dark:bg-slate-900 sm:w-[32rem] xl:shadow-none"
             v-on-click-outside.bubble="onClickOutside"
+            class="fixed bottom-0 right-0 top-16 z-30 flex w-full shrink-0 flex-col border-l bg-stone-50 shadow-lg dark:border-slate-800 dark:bg-slate-900 sm:w-[32rem] xl:shadow-none"
         >
             <Tab :title="$t('Résumé')">
                 <div class="mb-2 flex items-center gap-2">
@@ -21,15 +21,16 @@
                 <template v-if="summary && summary.length">
                     <div
                         v-for="[project, duration] in summary"
+                        :key="project"
                         class="flex w-full items-center justify-between gap-4 rounded border bg-stone-100 p-4 font-bold dark:border-slate-700 dark:bg-slate-800"
                     >
                         <span>{{ project }}</span>
                         <span>{{ duration }}</span>
                     </div>
                 </template>
                 <div
-                    class="absolute left-1/2 top-1/2 w-full -translate-x-1/2 -translate-y-1/2 text-center leading-tight opacity-60"
                     v-else
+                    class="absolute left-1/2 top-1/2 w-full -translate-x-1/2 -translate-y-1/2 text-center leading-tight opacity-60"
                 >
                     {{ $t("Aucune donnée pour l'instant") }}
                 </div>
@@ -76,8 +77,8 @@
                         <IClear class="h-6 w-6" />
                     </button>
                 </div>
-                <draggable item-key="name" v-model="priorities" handle=".handle" class="flex flex-col gap-2">
-                    <div v-for="(priority, index) in priorities" class="flex items-center gap-2">
+                <draggable v-model="priorities" item-key="name" handle=".handle" class="flex flex-col gap-2">
+                    <div v-for="(priority, index) in priorities" :key="priority.id" class="flex items-center gap-2">
                         <label class="relative flex w-full items-center gap-2">
                             <input
                                 type="checkbox"
@@ -86,7 +87,7 @@
                                 @change="updatePriority(priority)"
                             />
                             <div
-                                class="relative flex w-full items-center justify-between gap-4 rounded bg-stone-100 p-4 pr-16 dark:bg-slate-800 border dark:border-slate-700"
+                                class="relative flex w-full items-center justify-between gap-4 rounded border bg-stone-100 p-4 pr-16 dark:border-slate-700 dark:bg-slate-800"
                             >
                                 <span class="font-bold">{{ index + 1 }}. {{ priority.name }}</span>
                             </div>
@@ -105,7 +106,7 @@
                         </div>
                     </div>
                 </draggable>
-                <form @submit.prevent="onAddPriority" class="flex gap-2">
+                <form class="flex gap-2" @submit.prevent="onAddPriority">
                     <div class="flex w-full items-center gap-2">
                         <input
                             type="checkbox"
@@ -115,7 +116,7 @@
                         <label class="flex w-full items-center gap-2">
                             <span class="sr-only">{{ $t('Priorité') }}</span>
                             <input
-                                v-model="priority"
+                                v-model="priorityModel"
                                 type="text"
                                 placeholder="Ajouter une priorité"
                                 class="form-control form-input-bordered form-input h-10 w-full"
@@ -141,12 +142,12 @@
                 </div>
                 <draggable
                     v-if="bookmarks && bookmarks.length && !isCreating"
-                    item-key="name"
                     v-model="bookmarks"
+                    item-key="name"
                     handle=".handle"
                     class="flex flex-col gap-2"
                 >
-                    <div v-for="bookmark in bookmarks" class="flex items-center gap-2">
+                    <div v-for="bookmark in bookmarks" :key="bookmark.id" class="flex items-center gap-2">
                         <div class="relative w-full">
                             <div
                                 class="relative flex w-full items-center justify-between gap-4 rounded border bg-stone-100 pr-14 dark:border-slate-700 dark:bg-slate-800"
@@ -175,20 +176,20 @@
                     </div>
                 </draggable>
                 <div
-                    class="absolute left-1/2 top-1/2 w-full -translate-x-1/2 -translate-y-1/2 text-center leading-tight opacity-60"
                     v-else-if="!isCreating"
+                    class="absolute left-1/2 top-1/2 w-full -translate-x-1/2 -translate-y-1/2 text-center leading-tight opacity-60"
                 >
                     {{ $t("Aucune donnée pour l'instant") }}
                 </div>
                 <form
                     v-if="isCreating"
-                    @submit.prevent="onAddBookmark"
                     class="flex flex-col gap-2 rounded border bg-stone-100 p-4 dark:border-slate-700 dark:bg-slate-800"
+                    @submit.prevent="onAddBookmark"
                 >
                     <div>
                         <label class="text-xs font-medium uppercase opacity-60">{{ $t('Nom') }}</label>
                         <input
-                            v-model="bookmark.name"
+                            v-model="bookmarkModel.name"
                             type="text"
                             :placeholder="$t('EOS (TownHall, pause-café, etc.)')"
                             class="form-control form-input-bordered form-input h-10 w-full"
@@ -197,7 +198,7 @@
                     <div>
                         <label class="text-xs font-medium uppercase opacity-60">{{ $t('Url') }}</label>
                         <input
-                            v-model="bookmark.url"
+                            v-model="bookmarkModel.url"
                             type="text"
                             :placeholder="$t('https://...')"
                             class="form-control form-input-bordered form-input h-10 w-full"
@@ -225,7 +226,6 @@
 </template>
 
 <script lang="ts" setup>
-import IEdit from '@/assets/svg/edit.svg?component';
 import IDelete from '@/assets/svg/delete.svg?component';
 import IHandle from '@/assets/svg/hamburger.svg?component';
 import IClear from '@/assets/svg/clear.svg?component';
@@ -238,14 +238,30 @@ import { storeToRefs } from 'pinia';
 const breakpoints = useBreakpoints(breakpointsTailwind);
 const store = useIndexStore();
 
-const { weeklySummaryByProjects, dailySummaryByProjects, menuOpened, filter, sort, sortedProjects, priorities, bookmarks,  } =
-    storeToRefs(store);
-const { deleteProject, deletePriority, deleteCompletedPriorities, addPriority, updatePriority, deleteBookmark, addBookmark } = store;
+const {
+    weeklySummaryByProjects,
+    dailySummaryByProjects,
+    menuOpened,
+    filter,
+    sort,
+    sortedProjects,
+    priorities,
+    bookmarks,
+} = storeToRefs(store);
+const {
+    deleteProject,
+    deletePriority,
+    deleteCompletedPriorities,
+    addPriority,
+    updatePriority,
+    deleteBookmark,
+    addBookmark,
+} = store;
 const isXlOrGreater = breakpoints.greaterOrEqual('xl');
 
-const priority = ref('');
+const priorityModel = ref('');
 
-const bookmark = ref({
+const bookmarkModel = ref({
     name: '',
     url: '',
 });
@@ -256,20 +272,20 @@ const summary = computed((): [string, string][] => {
 });
 
 function onAddPriority() {
-    addPriority(priority.value);
-    priority.value = '';
+    addPriority(priorityModel.value);
+    priorityModel.value = '';
 }
 
 function onAddBookmark() {
-    addBookmark(bookmark.value);
-    bookmark.value.name = '';
-    bookmark.value.url = '';
+    addBookmark(bookmarkModel.value);
+    bookmarkModel.value.name = '';
+    bookmarkModel.value.url = '';
     isCreating.value = false;
 }
 
 function cancel() {
-    bookmark.value.name = '';
-    bookmark.value.url = '';
+    bookmarkModel.value.name = '';
+    bookmarkModel.value.url = '';
     isCreating.value = false;
 }
 

diff --git a/src/components/TimeEntriesHeader.vue b/src/components/TimeEntriesHeader.vue
@@ -14,9 +14,9 @@
             <span class="capitalize">{{ $moment(selectedDay).format('dddd') }}, </span>
             <span :key="$i18n.locale">{{ $moment(selectedDay).format('LL') }}</span>
             <input
+                v-model="selectedDay"
                 class="sr-only bottom-0 left-0"
                 type="date"
-                v-model="selectedDay"
                 tabindex="-1"
                 onfocus="this.showPicker()"
             />

diff --git a/src/components/TimeEntry.vue b/src/components/TimeEntry.vue
@@ -52,9 +52,9 @@
                 :object="true"
                 :placeholder="$t('Choisir ou créer...')"
                 :classes="classes"
-                :appendNewOption="false"
+                :append-new-option="false"
                 searchable
-                createOption
+                create-option
                 @create="addProject"
             />
         </div>
@@ -200,12 +200,6 @@ import Multiselect from '@vueform/multiselect';
 import { storeToRefs } from 'pinia';
 import { useIndexStore } from '@/stores/index';
 
-const { $moment } = useNuxtApp();
-
-const store = useIndexStore();
-const { addProject, addEntry, updateEntry, deleteEntry, toggleEntrySynced } = store;
-const { projects, selectedDay, todaysEntries } = storeToRefs(store);
-
 const props = withDefaults(defineProps<{ entry?: Entry }>(), {
     entry: () => ({
         is_creating: true,
@@ -225,6 +219,12 @@ const emit = defineEmits<{
     (e: 'add'): void;
 }>();
 
+const { $moment } = useNuxtApp();
+
+const store = useIndexStore();
+const { addProject, addEntry, updateEntry, deleteEntry, toggleEntrySynced } = store;
+const { projects, selectedDay, todaysEntries } = storeToRefs(store);
+
 const model = ref();
 
 watch(
@@ -386,7 +386,7 @@ async function stop() {
     model.value.is_live_clocking = false;
     model.value.duration = computedDuration;
 
-    if(model.value.project) {
+    if (model.value.project) {
         edit();
     } else {
         await updateEntry(model.value);

diff --git a/src/components/TimeInput.vue b/src/components/TimeInput.vue
@@ -10,11 +10,6 @@
 </template>
 
 <script lang="ts" setup>
-// TODO: Increment value using Arrow Up/Down
-// TODO: Increment by 10 using Shift + Arrow Up/Down
-const timeInput = ref<HTMLElement | null>(null);
-const { $inputmask } = useNuxtApp();
-
 const props = withDefaults(
     defineProps<{
         type?: string;
@@ -23,12 +18,17 @@ const props = withDefaults(
         placeholder?: string;
     }>(),
     {
+        mask: '',
+        modelValue: '',
         type: 'datetime',
         placeholder: 'HH:MM',
     },
 );
-
 const emit = defineEmits(['update:modelValue']);
+// TODO: Increment value using Arrow Up/Down
+// TODO: Increment by 10 using Shift + Arrow Up/Down
+const timeInput = ref<HTMLElement | null>(null);
+const { $inputmask } = useNuxtApp();
 
 const value = computed({
     get() {

diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue
@@ -9,8 +9,8 @@
     >
         <div
             v-if="is_open"
-            class="absolute right-0 top-full flex w-64 min-w-full translate-y-2 flex-col gap-6 rounded border bg-stone-50 p-4 dark:border-slate-800 dark:bg-slate-900"
             v-on-click-outside.bubble="onClickOutside"
+            class="absolute right-0 top-full flex w-64 min-w-full translate-y-2 flex-col gap-6 rounded border bg-stone-50 p-4 dark:border-slate-800 dark:bg-slate-900"
         >
             <div class="flex flex-col gap-2">
                 <div class="border-b pb-2 dark:border-slate-800">
@@ -39,14 +39,8 @@
 import ILogout from '@/assets/svg/logout.svg?component';
 
 import { useAuthStore } from '@/stores/auth';
-const auth = useAuthStore();
-const store = useIndexStore();
-const { logout } = auth;
-const { user } = storeToRefs(store);
-
-const route = useRoute();
 
-const props = withDefaults(
+withDefaults(
     defineProps<{
         is_open: boolean;
     }>(),
@@ -56,6 +50,13 @@ const props = withDefaults(
 );
 const emit = defineEmits(['update:is_open']);
 
+const auth = useAuthStore();
+const store = useIndexStore();
+const { logout } = auth;
+const { user } = storeToRefs(store);
+
+const route = useRoute();
+
 watch(
     () => route.name,
     () => {