chore(webui): Migrate to Quasar 2.x and Vue.js 3.x

webui/src/pages/tcp/Services.vue

@@ -1,10 +1,12 @@
 <template>
   <page-default>
-
     <section class="app-section">
       <div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-xl q-pb-xl">
         <div class="row no-wrap items-center q-mb-lg">
-          <tool-bar-table :status.sync="status" :filter.sync="filter"/>
+          <tool-bar-table
+            v-model:status="status"
+            v-model:filter="filter"
+          />
         </div>
         <div class="row items-center q-col-gutter-lg">
           <div class="col-12">
@@ -12,15 +14,14 @@
               ref="mainTable"
               v-bind="getTableProps({ type: 'tcp-services' })"
               :data="allServices.items"
-              :onLoadMore="handleLoadMore"
-              :endReached="allServices.endReached"
+              :on-load-more="handleLoadMore"
+              :end-reached="allServices.endReached"
               :loading="allServices.loading"
             />
           </div>
         </div>
       </div>
     </section>
-
   </page-default>
 </template>
 
@@ -28,12 +29,17 @@
 import { mapActions, mapGetters } from 'vuex'
 import GetTablePropsMixin from '../../_mixins/GetTableProps'
 import PaginationMixin from '../../_mixins/Pagination'
-import PageDefault from '../../components/_commons/PageDefault'
-import ToolBarTable from '../../components/_commons/ToolBarTable'
-import MainTable from '../../components/_commons/MainTable'
+import PageDefault from '../../components/_commons/PageDefault.vue'
+import ToolBarTable from '../../components/_commons/ToolBarTable.vue'
+import MainTable from '../../components/_commons/MainTable.vue'
 
 export default {
   name: 'PageTCPServices',
+  components: {
+    PageDefault,
+    ToolBarTable,
+    MainTable
+  },
   mixins: [
     GetTablePropsMixin,
     PaginationMixin({
@@ -42,11 +48,6 @@ export default {
       pollingIntervalTime: 5000
     })
   ],
-  components: {
-    PageDefault,
-    ToolBarTable,
-    MainTable
-  },
   data () {
     return {
       filter: '',
@@ -56,6 +57,17 @@ export default {
   computed: {
     ...mapGetters('tcp', { allServices: 'allServices' })
   },
+  watch: {
+    'status' () {
+      this.refreshAll()
+    },
+    'filter' () {
+      this.refreshAll()
+    }
+  },
+  beforeUnmount () {
+    this.$store.commit('tcp/getAllServicesClear')
+  },
   methods: {
     ...mapActions('tcp', { getAllServices: 'getAllServices' }),
     getAllServicesWithParams (params) {
@@ -75,17 +87,6 @@ export default {
     handleLoadMore ({ page = 1 } = {}) {
       return this.fetchMore({ page })
     }
-  },
-  watch: {
-    'status' () {
-      this.refreshAll()
-    },
-    'filter' () {
-      this.refreshAll()
-    }
-  },
-  beforeDestroy () {
-    this.$store.commit('tcp/getAllServicesClear')
   }
 }
 </script>