fix: probes paging + crud

jsdelivr · Aug 27, 2024 · 0a99a36 · 0a99a36
1 parent bc97807
commit 0a99a36
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 18 deletions.
diff --git a/pages/probes.vue b/pages/probes.vue
@@ -12,7 +12,6 @@
 			<DataTable
 				:value="probes"
 				lazy
-				:first="first"
 				:rows="itemsPerPage"
 				data-key="id"
 				:total-records="probesCount"
@@ -93,7 +92,6 @@
 			<Paginator
 				v-if="probes.length !== probesCount"
 				class="mt-9"
-				:first="first"
 				:rows="itemsPerPage"
 				:total-records="probesCount"
 				template="PrevPageLink PageLinks NextPageLink"
@@ -149,7 +147,7 @@
 
 <script setup lang="ts">
 	import { aggregate, readItem, readItems } from '@directus/sdk';
-	import type { DataTablePageEvent, DataTableRowClickEvent } from 'primevue/datatable';
+	import type { DataTableRowClickEvent } from 'primevue/datatable';
 	import type { PageState } from 'primevue/paginator';
 	import CountryFlag from 'vue-country-flag-next';
 	import { useAuth } from '~/store/auth';
@@ -180,18 +178,16 @@
 	const probes = ref<Probe[]>([]);
 	const credits = ref<Record<string, number>>({});
 	const first = ref(0);
-	const lazyParams = ref<Partial<DataTablePageEvent>>({});
 	const totalCredits = ref(0);
 
 	const loadLazyData = async (event?: PageState) => {
 		loading.value = true;
-		lazyParams.value = { ...lazyParams.value, first: event?.first || first.value };
 
 		try {
 			const [ adoptedProbes, [{ count }], creditsAdditions ] = await Promise.all([
 				$directus.request(readItems('gp_adopted_probes', {
 					filter: { userId: { _eq: user.id } },
-					offset: lazyParams.value.first,
+					offset: event?.first || first.value,
 					limit: itemsPerPage,
 				})),
 				$directus.request<[{count: number}]>(aggregate('gp_adopted_probes', {
@@ -243,11 +239,6 @@
 	onMounted(async () => {
 		loading.value = true;
 
-		lazyParams.value = {
-			first: 0,
-			rows: itemsPerPage,
-		};
-
 		const probeId = route.params.id as string;
 
 		await Promise.all([
@@ -257,7 +248,7 @@
 	});
 
 	const onPage = async (event: PageState) => {
-		lazyParams.value = event;
+		first.value = event.first;
 		await loadLazyData(event);
 	};
 

diff --git a/pages/probes/[id].vue b/pages/probes/[id].vue
@@ -22,8 +22,8 @@
 					<nuxt-icon class="ml-2 text-green-500" name="coin"/>
 					<span class="ml-2 font-bold text-green-500">+{{ props.credits }}</span>
 				</div>
-				<div>Type:<span class="ml-2 font-bold">{{ props.probe.hardwareDevice || 'Container' }}</span></div>
-				<div>Version:<span class="ml-2 font-bold">{{ props.probe.version }}</span></div>
+				<div>Type:<span class="ml-2 font-bold">{{ probe.hardwareDevice || 'Container' }}</span></div>
+				<div>Version:<span class="ml-2 font-bold">{{ probe.version }}</span></div>
 			</div>
 		</div>
 		<div class="px-5 py-7 dark:text-surface-0">
@@ -188,8 +188,10 @@
 </template>
 
 <script setup lang="ts">
+	/* eslint-disable no-extra-parens */
 	import { deleteItem, updateItem } from '@directus/sdk';
 	import capitalize from 'lodash/capitalize';
+	import isEqual from 'lodash/isEqual';
 	import memoize from 'lodash/memoize';
 	import CountryFlag from 'vue-country-flag-next';
 	import { useAuth } from '~/store/auth';
@@ -290,7 +292,7 @@
 		isEditingTags.value = false;
 	};
 
-	// // ACTIONS
+	// ACTIONS
 
 	const updateProbeLoading = ref(false);
 	const updateProbe = async () => {
@@ -304,9 +306,9 @@
 
 		try {
 			await $directus.request(updateItem('gp_adopted_probes', probe.value.id, {
-				name: probe.value.name,
-				city: probe.value.city,
-				tags,
+				...(probe.value.name !== props.probe.name && { name: probe.value.name }),
+				...(probe.value.city !== props.probe.city && { city: probe.value.city }),
+				...(!isEqual(tags, props.probe.tags) && { tags }),
 			}));
 
 			sendToast('success', 'Done', 'Probe info was successfully updated');