Updated frontend eslint config and addressed all errors.

backend/README.md

@@ -17,6 +17,20 @@ This project was built using the EDUC-CCOF project as a template.
 
 **`Step 6`** Open http://localhost:8080/api/health to verify that the app is running.
 
+### Lint with [ESLint](https://eslint.org/)
+
+With NPM:
+
+```sh
+npm run lint
+```
+
+To fix issues:
+
+```sh
+npm run lint:fix
+```
+
 ### Unit Tests
 
 Run `npm run test` in command line from backend folder, to execute unit tests.

frontend/README.md

@@ -42,6 +42,12 @@ With NPM:
 npm run lint
 ```
 
+To fix issues:
+
+```sh
+npm run lint:fix
+```
+
 ### Docker
 
 #### Build

frontend/eslint.config.mjs

@@ -7,11 +7,23 @@ export default [
   js.configs.recommended,
   eslintPluginPrettier,
   {
-    ignores: ['dist/', 'test/'],
+    // ignores: ['dist/', 'test/'],
+    ignores: ['dist/'],
   },
   {
     rules: {
       semi: 'off',
+      'eol-last': ['error', 'always'],
+      indent: ['error', 2, { SwitchCase: 1 }],
+      quotes: ['error', 'single', { avoidEscape: true }],
+      'no-unused-vars': ['error', { args: 'after-used', argsIgnorePattern: '^_', caughtErrors: 'all', caughtErrorsIgnorePattern: '^ignore' }],
+      'vue/no-v-text-v-html-on-component': ['error', { allow: ['v-card-text'] }],
+      'vue/valid-v-slot': [
+        'error',
+        {
+          allowModifiers: true,
+        },
+      ],
     },
   },
 ]

frontend/package.json

@@ -6,7 +6,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "node_modules/.bin/eslint .",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
     "format": "prettier --write src/",
     "test": "vitest",
     "test-update": "vitest -u",

frontend/src/common/staticConfig.js

@@ -1,3 +1,3 @@
 // eslint-disable-next-line
 const StaticConfig = config
-export default StaticConfig
+export default StaticConfig

frontend/src/components/TheSnackBar.vue

@@ -1,23 +1,10 @@
 <template>
   <div @mouseover="pause = true" @mouseleave="pause = false">
-    <v-snackbar
-      v-model="showSnackBar"
-      :timeout="timeout"
-      elevation="24"
-      location="top"
-      centered
-      :color="colour"
-      transition="slide-y-transition"
-      class="snackbar"
-    >
+    <v-snackbar v-model="showSnackBar" :timeout="timeout" elevation="24" location="top" centered :color="colour" transition="slide-y-transition" class="snackbar">
       <div v-html="alertNotificationText" />
       <template #action="{ attrs }">
         <v-btn text color="white" v-bind="attrs" @click="showSnackBar = false">
-          {{
-            alertNotificationQueue.length > 0
-              ? 'Next (' + alertNotificationQueue.length + ')'
-              : 'Close'
-          }}
+          {{ alertNotificationQueue.length > 0 ? 'Next (' + alertNotificationQueue.length + ')' : 'Close' }}
         </v-btn>
       </template>
     </v-snackbar>
@@ -40,11 +27,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(useAppStore, [
-      'alertNotificationText',
-      'alertNotificationQueue',
-      'alertNotification',
-    ]),
+    ...mapState(useAppStore, ['alertNotificationText', 'alertNotificationQueue', 'alertNotification']),
     hasNotificationsPending() {
       return this.alertNotificationQueue.length > 0
     },

frontend/src/components/account-mgmt/DuplicateUserDialog.vue

@@ -51,7 +51,7 @@ export default {
     },
     closeDialog() {
       this.$emit('close')
-    }
+    },
   },
 }
 </script>

frontend/src/components/applications/CancelApplicationDialog.vue

@@ -77,9 +77,9 @@ export default {
           await ApplicationService.updateSupplementaryApplication(this.applicationId, payload)
         }
         this.$emit('cancel')
-        this.setSuccessAlert(`Application cancelled successfully`)
+        this.setSuccessAlert('Application cancelled successfully')
       } catch (error) {
-        this.setFailureAlert(`Failed to cancel your application`, error)
+        this.setFailureAlert('Failed to cancel your application', error)
       } finally {
         this.isLoading = false
         this.closeDialog()

frontend/src/components/licences/LicenceDetails.vue

@@ -345,12 +345,14 @@ export default {
   methods: {
     getDayNames(days) {
       const dayNames = DAYS_OF_WEEK.map((day) => day.title)
+      /* eslint-disable indent */
       return typeof days === 'string'
         ? days
             ?.split(',')
             ?.map((day) => dayNames[Number(day) - 1])
             ?.join(', ')
         : days
+      /* eslint-enable indent */
     },
 
     convertStringDaysToArray(days) {
@@ -369,7 +371,7 @@ export default {
       this.$emit('update', licenceDetail)
 
       //XXX this code needs to be validated twice in order to work properly. It's a mystery as to why that is required but it works for now
-      const done = await this.$refs.form?.validate()
+      await this.$refs.form?.validate()
 
       this.$emit('setDetailsComplete', this.licence?.licenceId, await this.$refs.form?.validate())
     },

frontend/src/components/reports/DeleteSurveyResponseDialog.vue

@@ -62,9 +62,9 @@ export default {
       try {
         this.loading = true
         await ReportsService.deleteSurveyResponse(this.surveyResponseId)
-        this.setSuccessAlert(`Report response deleted successfully`)
+        this.setSuccessAlert('Report response deleted successfully')
       } catch (error) {
-        this.setFailureAlert(`Failed to delete your report response`, error)
+        this.setFailureAlert('Failed to delete your report response', error)
       } finally {
         this.loading = false
         this.closeDialog()

frontend/src/utils/constants/AlertNotificationTypes.js

@@ -1,21 +1,18 @@
-export const ALERT_NOTIFICATION_TYPES = Object.freeze(
-  {
-    /**
-     * ERROR value type.
-     */
-    ERROR: 'error',
-    /**
-     * WARN value type.
-     */
-    WARN: 'warning',
-    /**
-     * SUCCESS value type.
-     */
-    SUCCESS: 'success',
-    /**
-     * INFO value type.
-     */
-    INFO: 'primary'
-  }
-);
-
+export const ALERT_NOTIFICATION_TYPES = Object.freeze({
+  /**
+   * ERROR value type.
+   */
+  ERROR: 'error',
+  /**
+   * WARN value type.
+   */
+  WARN: 'warning',
+  /**
+   * SUCCESS value type.
+   */
+  SUCCESS: 'success',
+  /**
+   * INFO value type.
+   */
+  INFO: 'primary',
+})