Use built-in Data Iterator search

This commit is contained in:
Douglas Barone 2020-11-27 10:48:20 -04:00
parent d2d6a3a28a
commit f8da81a895

View File

@ -5,6 +5,7 @@
:items-per-page.sync="itemsPerPage" :items-per-page.sync="itemsPerPage"
:page="page" :page="page"
:loading="$apollo.queries.wifiDevices.loading" :loading="$apollo.queries.wifiDevices.loading"
:search="search"
> >
<template #header> <template #header>
<v-toolbar flat class="mb-2"> <v-toolbar flat class="mb-2">
@ -120,14 +121,14 @@
</v-list-item> </v-list-item>
<v-list-item> <v-list-item>
<v-list-item-action> <v-list-item-action>
<Avatar :src="item.user.thumbnailPhoto" size="24px" /> <Avatar :src="item.thumbnailPhoto" size="24px" />
</v-list-item-action> </v-list-item-action>
<v-list-item-content> <v-list-item-content>
<v-list-item-title> <v-list-item-title>
{{ item.user.displayName }} {{ item.displayName }}
</v-list-item-title> </v-list-item-title>
<v-list-item-subtitle> <v-list-item-subtitle>
{{ item.user.sAMAccountName }} {{ item.sAMAccountName }}
</v-list-item-subtitle> </v-list-item-subtitle>
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
@ -149,7 +150,7 @@ export default {
components: { Avatar }, components: { Avatar },
data: () => ({ data: () => ({
search: '', search: '',
itemsPerPage: 24, itemsPerPage: 15,
itemsPerPageArray: [15, 30, 60, 120], itemsPerPageArray: [15, 30, 60, 120],
page: 1 page: 1
}), }),
@ -184,24 +185,14 @@ export default {
computedWifiDevices() { computedWifiDevices() {
const filter = this.search.toLowerCase() const filter = this.search.toLowerCase()
return this.wifiDevices return this.wifiDevices?.map(device => ({
?.map(device => ({
...device, ...device,
hostname: device.hostname || 'Desconhecido', hostname: device.hostname || 'Desconhecido',
isOnline: device.status == 'ONLINE', isOnline: device.status == 'ONLINE',
user: device.user || { displayName: device.user?.displayName || 'Não autenticado',
displayName: 'Não autenticado', sAMAccountName: device.user?.sAMAccountName,
sAMAccountName: null, thumbnailPhoto: device.user?.thumbnailPhoto
thumbnailPhoto: null
}
})) }))
.filter(
({ ip, mac, user }) =>
ip.includes(filter) ||
mac.includes(filter) ||
user.displayName.toLowerCase().includes(filter) ||
user.sAMAccountName?.includes(filter)
)
} }
} }
} }