feat(ui): Implemented prettier

bahattincinic · May 27, 2024 · 1cea61e · 1cea61e
1 parent 689c7fb
commit 1cea61e
Show file tree

Hide file tree

Showing 22 changed files with 203 additions and 149 deletions.
diff --git a/ui/.prettierignore b/ui/.prettierignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/ui/.prettierrc b/ui/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "es5"
+}
diff --git a/ui/README.md b/ui/README.md
@@ -20,5 +20,10 @@ npm run build
 npm run lint
 ```
 
+### Formats files
+```
+npm run format
+```
+
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -5,10 +5,11 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,vue,html,css,scss}\""
   },
   "dependencies": {
-    "@vueuse/head": "^2.0.0",
+    "@unhead/vue": "^1.9.11",
     "core-js": "^3.8.3",
     "js-cookie": "^3.0.5",
     "pinia": "^2.1.7",
@@ -25,7 +26,8 @@
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3"
+    "eslint-plugin-vue": "^8.0.3",
+    "prettier": "^3.2.5"
   },
   "eslintConfig": {
     "root": true,

diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -10,7 +10,7 @@ import AppHeader from './components/AppHeader.vue';
 
 export default {
   components: {
-    AppHeader
-  }
-}
+    AppHeader,
+  },
+};
 </script>
diff --git a/ui/src/components/AppHeader.vue b/ui/src/components/AppHeader.vue
@@ -6,19 +6,19 @@
 
 <script>
 import Menubar from 'primevue/menubar';
-import { useRouter } from "vue-router";
-import { useUserStore } from "@/store/user";
+import { useRouter } from 'vue-router';
+import { useUserStore } from '@/store/user';
 
 export default {
   name: 'AppHeader',
   components: {
-    Menubar
+    Menubar,
   },
   setup() {
     const router = useRouter();
     const user = useUserStore();
 
-    return { router, user }
+    return { router, user };
   },
   computed: {
     items() {
@@ -29,50 +29,63 @@ export default {
         {
           label: 'Dashboard',
           icon: 'pi pi-fw pi-home',
-          command: () => this.router.push('/') },
+          command: () => this.router.push('/'),
+        },
         {
           label: 'Settings',
           icon: 'pi pi-fw pi-cog',
-          command: () => this.router.push('/settings')
+          command: () => this.router.push('/settings'),
         },
         {
           label: 'Data',
           icon: 'pi pi-fw pi-server',
           items: [
-            { label: 'Activities', icon: 'pi pi-fw pi-calendar', command: () => this.router.push('/activities') },
-            { label: 'Gears', icon: 'pi pi-fw pi-sitemap', command: () => this.router.push('/gears') },
-            { label: 'Athletes', icon: 'pi pi-fw pi-user', command: () => this.router.push('/athletes') }
-          ]
+            {
+              label: 'Activities',
+              icon: 'pi pi-fw pi-calendar',
+              command: () => this.router.push('/activities'),
+            },
+            {
+              label: 'Gears',
+              icon: 'pi pi-fw pi-sitemap',
+              command: () => this.router.push('/gears'),
+            },
+            {
+              label: 'Athletes',
+              icon: 'pi pi-fw pi-user',
+              command: () => this.router.push('/athletes'),
+            },
+          ],
         },
         {
           label: accessToken ? user.firstname : 'Anonymous',
           icon: 'pi pi-fw pi-user',
           items: [
             ...(accessToken
-                ? [
+              ? [
                   {
                     label: 'Logout',
                     icon: 'pi pi-fw pi-sign-out',
-                    command: () => this.logout()
-                  }
+                    command: () => this.logout(),
+                  },
                 ]
-                : [
+              : [
                   {
                     label: 'Login',
                     icon: 'pi pi-fw pi-sign-in',
-                    command: () => this.router.push('/login')
-                  }
+                    command: () => this.router.push('/login'),
+                  },
                 ]),
-          ]
-        }
+          ],
+        },
       ];
     },
   },
   methods: {
     logout() {
       const user = useUserStore();
       user.logout();
-    }
-  }
-}
+    },
+  },
+};
 </script>
diff --git a/ui/src/main.js b/ui/src/main.js
@@ -4,6 +4,7 @@ import router from './router';
 import { createPinia } from 'pinia';
 import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
+import { createHead } from '@unhead/vue';
 import 'primevue/resources/themes/saga-blue/theme.css';
 import 'primevue/resources/primevue.min.css';
 import 'primeicons/primeicons.css';
@@ -15,5 +16,6 @@ app.use(createPinia());
 app.use(router);
 app.use(PrimeVue);
 app.use(ToastService);
+app.use(createHead());
 
 app.mount('#app');
diff --git a/ui/src/pages/ActivitiesPage.vue b/ui/src/pages/ActivitiesPage.vue
@@ -9,12 +9,14 @@
       <Column field="name" header="Name"></Column>
       <Column :field="athleteName" header="Athlete"></Column>
       <Column field="gear.name" header="Gear"></Column>
-      <template #empty>
-        No records found
-      </template>
+      <template #empty> No records found </template>
     </DataTable>
 
-    <Paginator :rows="20" :totalRecords="count" @page="handlePageChange"></Paginator>
+    <Paginator
+      :rows="20"
+      :totalRecords="count"
+      @page="handlePageChange"
+    ></Paginator>
   </div>
 </template>
 
@@ -26,16 +28,19 @@ import { useToast } from 'primevue/usetoast';
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
 import Paginator from 'primevue/paginator';
+import { useHead } from '@unhead/vue';
 
 export default {
   name: 'ActivitiesPage',
   components: {
     DataTable,
     Column,
     Paginator,
-    Toast
+    Toast,
   },
   setup() {
+    useHead({ title: 'Activities' });
+
     const activities = ref([]);
     const count = ref(0);
     let currentPage = 1;
@@ -73,13 +78,13 @@ export default {
       activities,
       count,
       loading,
-      handlePageChange
+      handlePageChange,
     };
   },
   methods: {
     athleteName(row) {
       return `${row.athlete.firstname} ${row.athlete.lastname}`;
-    }
-  }
-}
+    },
+  },
+};
 </script>
diff --git a/ui/src/pages/AthletesPage.vue b/ui/src/pages/AthletesPage.vue
@@ -9,12 +9,14 @@
       <Column field="lastname" header="Last Name"></Column>
       <Column field="country" header="Country"></Column>
       <Column field="city" header="City"></Column>
-      <template #empty>
-        No records found
-      </template>
+      <template #empty> No records found </template>
     </DataTable>
 
-    <Paginator :rows="20" :totalRecords="count" @page="handlePageChange"></Paginator>
+    <Paginator
+      :rows="20"
+      :totalRecords="count"
+      @page="handlePageChange"
+    ></Paginator>
   </div>
 </template>
 
@@ -26,6 +28,7 @@ import { useToast } from 'primevue/usetoast';
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
 import Paginator from 'primevue/paginator';
+import { useHead } from '@unhead/vue';
 
 export default {
   name: 'AthletesPage',
@@ -36,6 +39,8 @@ export default {
     Toast,
   },
   setup() {
+    useHead({ title: 'Athletes' });
+
     const athletes = ref([]);
     const count = ref(0);
     let currentPage = 1;
@@ -73,8 +78,8 @@ export default {
       athletes,
       count,
       loading,
-      handlePageChange
+      handlePageChange,
     };
-  }
-}
+  },
+};
 </script>