Added search query

server/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ifms-pti-svr",
-  "version": "3.1.3",
+  "version": "3.1.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ifms-pti-svr",
-      "version": "3.1.3",
+      "version": "3.1.4",
       "license": "ISC",
       "dependencies": {
         "@prisma/client": "^3.15.2",

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ifms-pti-svr",
-  "version": "3.1.3",
+  "version": "3.1.4",
   "description": "Servidor do Portal de TI do IFMS",
   "main": "src/index.js",
   "prisma": {

web/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ifms-pti",
-  "version": "3.1.3",
+  "version": "3.1.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ifms-pti",
-      "version": "3.1.3",
+      "version": "3.1.4",
       "dependencies": {
         "@mdi/font": "^6.6.96",
         "apollo-link-ws": "^1.0.20",

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ifms-pti",
-  "version": "3.1.3",
+  "version": "3.1.4",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

web/src/views/AccessPoints/index.vue

@@ -65,7 +65,7 @@
       :search="search"
       calculate-widths
       class="elevation-2 mb-2"
-      sort-by="name"
+      :sort-by.sync="sortBy"
       hide-default-footer
       disable-pagination
       :group-by="groupBy ? 'campus' : null"
@@ -201,6 +201,7 @@ export default {
   data: () => ({
     search: '',
     groupBy: true,
+    sortBy: 'name',
     defaultHeaders: [
       'name',
       'ip',
@@ -249,9 +250,30 @@ export default {
       }))
     }
   },
+  watch: {
+    search(newValue) {
+      if (!newValue)
+        this.$router.push({
+          query: { ...this.$route.query, search: undefined }
+        })
+      else if (this.$route.query.search != newValue)
+        this.$router.push({ query: { ...this.$route.query, search: newValue } })
+    },
+    sortBy(newValue) {
+      if (!newValue)
+        this.$router.push({
+          query: { ...this.$route.query, sortBy: undefined }
+        })
+      else if (this.$route.query.sortBy != newValue)
+        this.$router.push({ query: { ...this.$route.query, sortBy: newValue } })
+    }
+  },
   mounted() {
     this.resetDefaultHeaders()
+    this.search = this.$route.query.search || ''
+    this.sortBy = this.$route.query.sortBy || 'name'
   },
+
   methods: {
     navigateToAccessPoint(accessPoint) {
       this.$router.push({
@@ -259,14 +281,17 @@ export default {
         params: { id: accessPoint.id }
       })
     },
+
     readableUptime(uptime) {
       return Math.floor(uptime / 3600)
     },
+
     load(connectedClients) {
       const MAX_LOAD = 80
       const load = Math.floor((connectedClients / MAX_LOAD) * 100)
       return load < 100 ? load : 100
     },
+
     loadColor(clients) {
       const load = this.load(clients)
       if (load < 10) return 'teal'
@@ -278,6 +303,7 @@ export default {
       else if (load < 90) return 'deep-orange'
       else return 'red'
     },
+
     loadIcon(clients) {
       const load = this.load(clients)
       if (load < 25) return 'mdi-gauge-empty'
@@ -285,6 +311,7 @@ export default {
       else if (load < 75) return 'mdi-gauge'
       else return 'mdi-gauge-full'
     },
+
     resetDefaultHeaders() {
       this.groupBy = true
       this.allHeaders = this.allHeaders.map(header => ({
@@ -293,9 +320,11 @@ export default {
       }))
     }
   },
+
   apollo: {
     accessPoints: {
       fetchPolicy: 'cache-and-network',
+      debounce: 200,
       query: gql`
         query accessPoints {
           accessPoints {