Add pagination to WifiUsers
This commit is contained in:
parent
91bb30cd54
commit
4429c84b1c
|
@ -1,46 +1,53 @@
|
||||||
import prisma from '../../prisma'
|
import prisma from '../../prisma'
|
||||||
|
|
||||||
// TODO: Add filtering
|
// TODO: Add filtering
|
||||||
export async function wifiUsers(parent, { take = 100, skip = 0, search }) {
|
export async function wifiUsers(parent, { take = 10, skip = 0, search }) {
|
||||||
const mode = 'insensitive'
|
const mode = 'insensitive'
|
||||||
|
|
||||||
if (search === null)
|
if (search === null)
|
||||||
search = undefined
|
search = undefined
|
||||||
|
|
||||||
return prisma.user.findMany({
|
const where = {
|
||||||
where: {
|
AND: [
|
||||||
AND: [
|
{ wifiDevices: { some: { id: { not: undefined } } } },
|
||||||
{ wifiDevices: { some: { id: { not: undefined } } } },
|
{
|
||||||
{
|
OR: [
|
||||||
OR: [
|
{ wifiDevices: { some: { hostname: { contains: search, mode } } } },
|
||||||
{ wifiDevices: { some: { hostname: { contains: search, mode } } } },
|
{
|
||||||
{
|
wifiDevices: {
|
||||||
wifiDevices: {
|
some: {
|
||||||
some: {
|
accessPoint: {
|
||||||
accessPoint: {
|
OR: [
|
||||||
OR: [
|
{ name: { contains: search, mode } },
|
||||||
{ name: { contains: search, mode } },
|
{ local: { contains: search, mode } },
|
||||||
{ local: { contains: search, mode } },
|
]
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
{ wifiDevices: { some: { mac: { contains: search, mode } } } },
|
},
|
||||||
{ wifiDevices: { some: { ip: { contains: search, mode } } } },
|
{ wifiDevices: { some: { mac: { contains: search, mode } } } },
|
||||||
{ displayName: { contains: search, mode } }, ,
|
{ wifiDevices: { some: { ip: { contains: search, mode } } } },
|
||||||
{ sAMAccountName: { contains: search, mode } },
|
{ displayName: { contains: search, mode } }, ,
|
||||||
]
|
{ sAMAccountName: { contains: search, mode } },
|
||||||
}
|
]
|
||||||
]
|
}
|
||||||
},
|
]
|
||||||
include: {
|
}
|
||||||
wifiDevices: true
|
|
||||||
},
|
return {
|
||||||
orderBy: [
|
data:
|
||||||
{ wifiDevices: { _count: 'desc' } },
|
prisma.user.findMany({
|
||||||
{ displayName: 'asc' }],
|
where,
|
||||||
take,
|
include: {
|
||||||
skip
|
wifiDevices: true
|
||||||
})
|
},
|
||||||
|
orderBy: [
|
||||||
|
{ wifiDevices: { _count: 'desc' } },
|
||||||
|
{ displayName: 'asc' }],
|
||||||
|
take,
|
||||||
|
skip
|
||||||
|
}),
|
||||||
|
|
||||||
|
total: prisma.user.count({ where })
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -42,7 +42,7 @@ const typeDefs = gql`
|
||||||
wifiUsers(
|
wifiUsers(
|
||||||
search: String = ""
|
search: String = ""
|
||||||
take: Int
|
take: Int
|
||||||
skip: Int): [User]! @auth(roles: ["superAdmin"])
|
skip: Int): WifiUsersResult! @auth(roles: ["superAdmin"])
|
||||||
|
|
||||||
"Application Logs"
|
"Application Logs"
|
||||||
logs(
|
logs(
|
||||||
|
@ -243,12 +243,6 @@ const typeDefs = gql`
|
||||||
usage: Int
|
usage: Int
|
||||||
}
|
}
|
||||||
|
|
||||||
"A WiFi Device Search result"
|
|
||||||
type WifiDevicesResult {
|
|
||||||
data: [WifiDevice!]!
|
|
||||||
total: Int!
|
|
||||||
}
|
|
||||||
|
|
||||||
"A user that is on the Wi-Fi network reach"
|
"A user that is on the Wi-Fi network reach"
|
||||||
type UserPresence {
|
type UserPresence {
|
||||||
id: ID!
|
id: ID!
|
||||||
|
@ -327,6 +321,18 @@ const typeDefs = gql`
|
||||||
wifiDevices: [WifiDevice]
|
wifiDevices: [WifiDevice]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
"A WiFi Device Search result"
|
||||||
|
type WifiDevicesResult {
|
||||||
|
data: [WifiDevice!]!
|
||||||
|
total: Int!
|
||||||
|
}
|
||||||
|
|
||||||
|
"A WiFi User Search result"
|
||||||
|
type WifiUsersResult {
|
||||||
|
data: [User!]!
|
||||||
|
total: Int!
|
||||||
|
}
|
||||||
|
|
||||||
"Subnet information"
|
"Subnet information"
|
||||||
type SubnetInfo {
|
type SubnetInfo {
|
||||||
shortName: String!
|
shortName: String!
|
||||||
|
|
|
@ -108,4 +108,8 @@ export default {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style></style>
|
<style>
|
||||||
|
td {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -130,4 +130,8 @@ export default {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style></style>
|
<style>
|
||||||
|
td {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -1,14 +1,25 @@
|
||||||
<template>
|
<template>
|
||||||
<v-container fluid>
|
<v-container fluid>
|
||||||
<v-toolbar flat outlined max-width="400px">
|
<v-toolbar flat outlined>
|
||||||
<v-text-field
|
<v-text-field
|
||||||
v-model="search"
|
v-model="search"
|
||||||
label="Pesquisar"
|
label="Pesquisar"
|
||||||
prepend-icon="mdi-account-search"
|
prepend-icon="mdi-devices"
|
||||||
clearable
|
clearable
|
||||||
hide-details
|
hide-details
|
||||||
:loading="$apollo.queries.wifiUsers.loading"
|
:loading="$apollo.queries.wifiUsers.loading"
|
||||||
/>
|
/>
|
||||||
|
<v-spacer />
|
||||||
|
|
||||||
|
<v-select
|
||||||
|
v-model="itemsPerPage"
|
||||||
|
class="shrink"
|
||||||
|
:items="[5, 10, 20, 30, 50, 100]"
|
||||||
|
label="Items por página"
|
||||||
|
hide-details
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
/>
|
||||||
|
|
||||||
<v-tooltip bottom>
|
<v-tooltip bottom>
|
||||||
<span>Atualizar</span>
|
<span>Atualizar</span>
|
||||||
|
@ -48,6 +59,8 @@
|
||||||
<v-data-iterator
|
<v-data-iterator
|
||||||
:loading="$apollo.queries.wifiUsers.loading"
|
:loading="$apollo.queries.wifiUsers.loading"
|
||||||
:items="sortedWifiUsers"
|
:items="sortedWifiUsers"
|
||||||
|
hide-default-footer
|
||||||
|
:items-per-page="itemsPerPage"
|
||||||
>
|
>
|
||||||
<template #loading>
|
<template #loading>
|
||||||
<v-expansion-panels disabled>
|
<v-expansion-panels disabled>
|
||||||
|
@ -58,6 +71,7 @@
|
||||||
</v-expansion-panel>
|
</v-expansion-panel>
|
||||||
</v-expansion-panels>
|
</v-expansion-panels>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #default="{ items }">
|
<template #default="{ items }">
|
||||||
<v-expansion-panels>
|
<v-expansion-panels>
|
||||||
<v-expansion-panel v-for="user in items" :key="user.sAMAccountName">
|
<v-expansion-panel v-for="user in items" :key="user.sAMAccountName">
|
||||||
|
@ -98,9 +112,12 @@
|
||||||
</v-expansion-panels>
|
</v-expansion-panels>
|
||||||
</template>
|
</template>
|
||||||
</v-data-iterator>
|
</v-data-iterator>
|
||||||
<v-alert type="info" outlined dismissible>
|
<v-pagination
|
||||||
São exibidos apenas os 100 primeiros resultados da pesquisa
|
v-model="page"
|
||||||
</v-alert>
|
class="my-4"
|
||||||
|
:length="pagesTotal"
|
||||||
|
:total-visible="7"
|
||||||
|
/>
|
||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
@ -111,15 +128,22 @@ import UserWifiDevicesDataTable from '../components/DataTables/UserWifiDevicesDa
|
||||||
export default {
|
export default {
|
||||||
components: { Avatar, UserWifiDevicesDataTable },
|
components: { Avatar, UserWifiDevicesDataTable },
|
||||||
data: () => ({
|
data: () => ({
|
||||||
search: ''
|
search: '',
|
||||||
|
page: 1,
|
||||||
|
itemsPerPage: 10
|
||||||
}),
|
}),
|
||||||
computed: {
|
computed: {
|
||||||
sortedWifiUsers() {
|
sortedWifiUsers() {
|
||||||
return this.wifiUsers?.map(user => ({
|
return this.wifiUsers?.data?.map(user => ({
|
||||||
...user,
|
...user,
|
||||||
ips: user.wifiDevices.reduce((ips, device) => ` ${device.ip}`, ''),
|
ips: user.wifiDevices.reduce((ips, device) => ` ${device.ip}`, ''),
|
||||||
wifiDevices: user.wifiDevices.sort(a => (a.status == 'ONLINE' ? -1 : 1))
|
wifiDevices: user.wifiDevices.sort(a => (a.status == 'ONLINE' ? -1 : 1))
|
||||||
}))
|
}))
|
||||||
|
},
|
||||||
|
pagesTotal() {
|
||||||
|
if (this.wifiUsers?.total)
|
||||||
|
return Math.ceil(this.wifiUsers.total / this.itemsPerPage)
|
||||||
|
else return 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
@ -136,34 +160,37 @@ export default {
|
||||||
wifiUsers: {
|
wifiUsers: {
|
||||||
fetchPolicy: 'cache-and-network',
|
fetchPolicy: 'cache-and-network',
|
||||||
query: gql`
|
query: gql`
|
||||||
query wifiUsers($search: String) {
|
query wifiUsers($search: String, $skip: Int, $take: Int) {
|
||||||
wifiUsers(search: $search) {
|
wifiUsers(search: $search, skip: $skip, take: $take) {
|
||||||
displayName
|
total
|
||||||
sAMAccountName
|
data {
|
||||||
thumbnailPhoto
|
displayName
|
||||||
wifiDevices {
|
sAMAccountName
|
||||||
mac
|
thumbnailPhoto
|
||||||
oui
|
wifiDevices {
|
||||||
controller
|
mac
|
||||||
hostname
|
oui
|
||||||
firstSeen
|
controller
|
||||||
lastSeen
|
|
||||||
status
|
|
||||||
apName
|
|
||||||
essid
|
|
||||||
ip
|
|
||||||
uptime
|
|
||||||
signalStrength
|
|
||||||
frequency
|
|
||||||
protocol
|
|
||||||
speed
|
|
||||||
usage
|
|
||||||
|
|
||||||
accessPoint {
|
|
||||||
id
|
|
||||||
name
|
|
||||||
hostname
|
hostname
|
||||||
local
|
firstSeen
|
||||||
|
lastSeen
|
||||||
|
status
|
||||||
|
apName
|
||||||
|
essid
|
||||||
|
ip
|
||||||
|
uptime
|
||||||
|
signalStrength
|
||||||
|
frequency
|
||||||
|
protocol
|
||||||
|
speed
|
||||||
|
usage
|
||||||
|
|
||||||
|
accessPoint {
|
||||||
|
id
|
||||||
|
name
|
||||||
|
hostname
|
||||||
|
local
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -171,7 +198,9 @@ export default {
|
||||||
`,
|
`,
|
||||||
variables() {
|
variables() {
|
||||||
return {
|
return {
|
||||||
search: this.search
|
search: this.search,
|
||||||
|
skip: this.page * this.itemsPerPage - this.itemsPerPage,
|
||||||
|
take: this.itemsPerPage
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue
Block a user