Add pagination to WifiDevices view
This commit is contained in:
parent
d0dd4d6ba1
commit
46cbfa9acc
|
@ -1,13 +1,12 @@
|
||||||
import prisma from '../../prisma'
|
import prisma from '../../prisma'
|
||||||
|
|
||||||
export async function wifiDevices(parent, { take = 100, skip = 0, search }) {
|
export async function wifiDevices(parent, { take = 50, skip = 0, search }) {
|
||||||
const mode = 'insensitive'
|
const mode = 'insensitive'
|
||||||
|
|
||||||
if (search === null)
|
if (!search)
|
||||||
search = undefined
|
search = ''
|
||||||
|
|
||||||
return prisma.wifiDevice.findMany({
|
const where = {
|
||||||
where: {
|
|
||||||
OR: [
|
OR: [
|
||||||
{ hostname: { contains: search, mode } },
|
{ hostname: { contains: search, mode } },
|
||||||
{ mac: { contains: search, mode } },
|
{ mac: { contains: search, mode } },
|
||||||
|
@ -19,10 +18,18 @@ export async function wifiDevices(parent, { take = 100, skip = 0, search }) {
|
||||||
{ user: { displayName: { contains: search, mode } } },
|
{ user: { displayName: { contains: search, mode } } },
|
||||||
{ user: { sAMAccountName: { contains: search, mode } } }
|
{ user: { sAMAccountName: { contains: search, mode } } }
|
||||||
]
|
]
|
||||||
},
|
}
|
||||||
orderBy: [{ lastSeen: 'desc' }, { hostname: 'asc' }],
|
|
||||||
|
return {
|
||||||
|
total: prisma.wifiDevice.count({
|
||||||
|
where
|
||||||
|
}),
|
||||||
|
data: prisma.wifiDevice.findMany({
|
||||||
|
where,
|
||||||
|
orderBy: [{ lastSeen: 'desc' }, { ip: 'asc' }],
|
||||||
include: { user: true, accessPoint: true },
|
include: { user: true, accessPoint: true },
|
||||||
take,
|
take,
|
||||||
skip
|
skip
|
||||||
})
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -36,7 +36,7 @@ const typeDefs = gql`
|
||||||
search: String = ""
|
search: String = ""
|
||||||
take: Int
|
take: Int
|
||||||
skip: Int
|
skip: Int
|
||||||
): [WifiDevice]! @auth(roles: ["superAdmin"])
|
): WifiDevicesResult! @auth(roles: ["superAdmin"])
|
||||||
|
|
||||||
"Users that uses the Wi-Fi"
|
"Users that uses the Wi-Fi"
|
||||||
wifiUsers(
|
wifiUsers(
|
||||||
|
@ -243,6 +243,12 @@ 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!
|
||||||
|
|
|
@ -47,11 +47,34 @@
|
||||||
no total.
|
no total.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ClientsDataTable :wifi-devices="computedWifiDevices" paginate />
|
<v-toolbar flat>
|
||||||
|
<v-pagination
|
||||||
|
v-model="page"
|
||||||
|
class="my-4"
|
||||||
|
:length="pagesTotal"
|
||||||
|
:total-visible="7"
|
||||||
|
/>
|
||||||
|
<v-spacer />
|
||||||
|
<v-select
|
||||||
|
v-model="itemsPerPage"
|
||||||
|
class="shrink"
|
||||||
|
:items="[5, 15, 30, 50, 100]"
|
||||||
|
label="Items por página"
|
||||||
|
hide-details
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
/>
|
||||||
|
</v-toolbar>
|
||||||
|
<v-progress-linear :indeterminate="$apollo.queries.wifiDevices.loading" />
|
||||||
|
|
||||||
<v-alert type="info" outlined dismissible>
|
<ClientsDataTable :wifi-devices="computedWifiDevices" />
|
||||||
São exibidos apenas os 100 primeiros resultados da pesquisa
|
|
||||||
</v-alert>
|
<v-pagination
|
||||||
|
v-model="page"
|
||||||
|
class="my-4"
|
||||||
|
:length="pagesTotal"
|
||||||
|
:total-visible="7"
|
||||||
|
/>
|
||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -64,13 +87,12 @@ export default {
|
||||||
components: { ClientsDataTable },
|
components: { ClientsDataTable },
|
||||||
data: () => ({
|
data: () => ({
|
||||||
search: '',
|
search: '',
|
||||||
itemsPerPage: 10,
|
page: 1,
|
||||||
itemsPerPageArray: [15, 30, 60, 120],
|
itemsPerPage: 15
|
||||||
page: 1
|
|
||||||
}),
|
}),
|
||||||
computed: {
|
computed: {
|
||||||
computedWifiDevices() {
|
computedWifiDevices() {
|
||||||
return this.wifiDevices?.map(device => ({
|
return this.wifiDevices?.data.map(device => ({
|
||||||
...device,
|
...device,
|
||||||
hostname: device.hostname || 'Desconhecido',
|
hostname: device.hostname || 'Desconhecido',
|
||||||
displayName: device.user?.displayName || 'Não autenticado',
|
displayName: device.user?.displayName || 'Não autenticado',
|
||||||
|
@ -79,10 +101,17 @@ export default {
|
||||||
ip: device.ip == 'Unknown' ? 'Sem endereço IP' : device.ip,
|
ip: device.ip == 'Unknown' ? 'Sem endereço IP' : device.ip,
|
||||||
essid: device.essid
|
essid: device.essid
|
||||||
}))
|
}))
|
||||||
|
},
|
||||||
|
pagesTotal() {
|
||||||
|
if (this.wifiDevices?.total)
|
||||||
|
return Math.ceil(this.wifiDevices.total / this.itemsPerPage)
|
||||||
|
else return 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
search(newValue) {
|
search(newValue) {
|
||||||
|
this.page = 1
|
||||||
|
|
||||||
if (!newValue) this.$router.push({ query: {} })
|
if (!newValue) this.$router.push({ query: {} })
|
||||||
else if (this.$route.query.search != newValue)
|
else if (this.$route.query.search != newValue)
|
||||||
this.$router.push({ query: { search: newValue } })
|
this.$router.push({ query: { search: newValue } })
|
||||||
|
@ -96,8 +125,10 @@ export default {
|
||||||
fetchPolicy: 'cache-and-network',
|
fetchPolicy: 'cache-and-network',
|
||||||
pollInterval: 10000,
|
pollInterval: 10000,
|
||||||
query: gql`
|
query: gql`
|
||||||
query wifiDevices($search: String) {
|
query wifiDevices($search: String, $skip: Int, $take: Int) {
|
||||||
wifiDevices(search: $search) {
|
wifiDevices(search: $search, skip: $skip, take: $take) {
|
||||||
|
total
|
||||||
|
data {
|
||||||
accessPoint {
|
accessPoint {
|
||||||
name
|
name
|
||||||
hostname
|
hostname
|
||||||
|
@ -122,10 +153,13 @@ 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