Update vue-cli, ESLint, and electron

frontend/.eslintrc.js

@@ -6,7 +6,7 @@ module.exports = {
   },
   extends: ["plugin:vue/essential", "eslint:recommended"],
   parserOptions: {
-    parser: "babel-eslint"
+    parser: "@babel/eslint-parser"
   },
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
@@ -14,6 +14,8 @@ module.exports = {
     "vue/no-parsing-error": [
       "error",
       { "invalid-first-character-of-tag-name": false }
-    ]
+    ],
+    "vue/no-mutating-props": "off",
+    "vue/multi-word-component-names": "off"
   }
 }

frontend/package.json

@@ -54,24 +54,25 @@
     "vuex": "^3.4.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
     "@babel/plugin-proposal-optional-chaining": "^7.16.7",
-    "@vue/cli-plugin-babel": "~4.5.15",
-    "@vue/cli-plugin-eslint": "~4.5.15",
-    "@vue/cli-plugin-pwa": "~4.5.15",
-    "@vue/cli-plugin-router": "~4.5.15",
-    "@vue/cli-plugin-vuex": "~4.5.15",
-    "@vue/cli-service": "~4.5.15",
-    "babel-eslint": "^10.1.0",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-plugin-pwa": "~5.0.8",
+    "@vue/cli-plugin-router": "~5.0.8",
+    "@vue/cli-plugin-vuex": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
     "dotenv-webpack": "^7.1.0",
-    "electron": "^23.0.0",
+    "electron": "^28.0.0",
     "electron-devtools-installer": "^3.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
     "material-design-icons-iconfont": "^6.5.0",
     "sass": "~1.32.0",
     "sass-loader": "^10.0.0",
     "vue-cli-plugin-electron-builder": "^2.1.1",
-    "vue-cli-plugin-vuetify": "~2.4.7",
+    "vue-cli-plugin-vuetify": "~2.5.8",
     "vue-template-babel-compiler": "^1.1.3",
     "vue-template-compiler": "^2.6.11",
     "vuetify-loader": "^1.7.0",

frontend/src/views/Admin/AdminThemes.vue

@@ -16,10 +16,10 @@
         $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light'].card
       "
     >
-      <template v-slot:item.actions="{ item }">
+      <template v-slot:[`item.actions`]="{ item }">
         <v-btn text color="primary" @click="applyTheme(item)"> Apply </v-btn>
       </template>
-      <template v-slot:item.theme.css="{ item }">
+      <template v-slot:[`item.theme.css`]="{ item }">
         {{ item.theme.css ? "Yes" : "No" }}
       </template>
     </v-data-table>

frontend/src/views/Admin/AdminUsers.vue

@@ -46,10 +46,10 @@
         $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light'].card
       "
     >
-      <template v-slot:item.index="{ index }">
+      <template v-slot:[`item.index`]="{ index }">
         {{ index }}
       </template>
-      <template v-slot:item.actions="{ item }">
+      <template v-slot:[`item.actions`]="{ item }">
         <v-tooltip top>
           <template v-slot:activator="{ on }">
             <v-btn

frontend/src/views/Communications/CommunicationsChat.vue

@@ -1240,7 +1240,7 @@ export default {
       if (localStorage.getItem("drafts")) {
         drafts = JSON.parse(localStorage.getItem("drafts"))
       }
-      if (this.message || drafts[oldVal]) {
+      if (this.message && drafts[oldVal]) {
         drafts[oldVal] = this.message
         localStorage.setItem("drafts", JSON.stringify(drafts))
       } else if (!this.message && drafts[oldVal]) {