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

webui/src/pages/tcp/Middlewares.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,28 +14,33 @@
               ref="mainTable"
               v-bind="getTableProps({ type: 'tcp-middlewares' })"
               :data="allMiddlewares.items"
-              :onLoadMore="handleLoadMore"
-              :endReached="allMiddlewares.endReached"
+              :on-load-more="handleLoadMore"
+              :end-reached="allMiddlewares.endReached"
               :loading="allMiddlewares.loading"
             />
           </div>
         </div>
       </div>
     </section>
-
   </page-default>
 </template>
 
 <script>
+import { defineComponent } from 'vue'
 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 {
+export default defineComponent({
   name: 'PageTCPMiddlewares',
+  components: {
+    PageDefault,
+    ToolBarTable,
+    MainTable
+  },
   mixins: [
     GetTablePropsMixin,
     PaginationMixin({
@@ -42,11 +49,6 @@ export default {
       pollingIntervalTime: 5000
     })
   ],
-  components: {
-    PageDefault,
-    ToolBarTable,
-    MainTable
-  },
   data () {
     return {
       filter: '',
@@ -56,6 +58,17 @@ export default {
   computed: {
     ...mapGetters('tcp', { allMiddlewares: 'allMiddlewares' })
   },
+  watch: {
+    'status' () {
+      this.refreshAll()
+    },
+    'filter' () {
+      this.refreshAll()
+    }
+  },
+  beforeUnmount () {
+    this.$store.commit('tcp/getAllMiddlewaresClear')
+  },
   methods: {
     ...mapActions('tcp', { getAllMiddlewares: 'getAllMiddlewares' }),
     getAllMiddlewaresWithParams (params) {
@@ -75,19 +88,8 @@ export default {
     handleLoadMore ({ page = 1 } = {}) {
       return this.fetchMore({ page })
     }
-  },
-  watch: {
-    'status' () {
-      this.refreshAll()
-    },
-    'filter' () {
-      this.refreshAll()
-    }
-  },
-  beforeDestroy () {
-    this.$store.commit('tcp/getAllMiddlewaresClear')
   }
-}
+})
 </script>
 
 <style scoped lang="scss">