feat: add probe details

components/ProbeDetails.vue

@@ -0,0 +1,102 @@
+<template>
+	<div id="gp-map" class="mt-3 h-44 rounded-md"/>
+	<div class="px-5 py-7 dark:text-surface-0">
+		<label for="probeName" class="text-xs">Probe name</label>
+		<InputText
+			id="probeName"
+			v-model="name"
+			class="mt-1 w-full"
+		/>
+		<label for="primary-ip" class="mt-3 block text-xs">Primary IP</label>
+		<InputText
+			id="primary-ip"
+			v-model="probe.ip"
+			class="mt-1 w-full"
+		/>
+		<label for="primary-ip" class="mt-3 block text-xs">Alternative IPs</label>
+		<AutoComplete
+			id="alternative-ips"
+			v-model="probe.altIps"
+			class="mt-1"
+			chip-icon="hidden"
+			multiple
+			:typeahead="false"
+			:pt="{ chipItem: '' }"
+		/>
+		<!-- <label for="primary-ip">Primary IP</label>
+		<InputText
+			id="primary-ip"
+			v-model="name"
+			class="mt-2 w-full"
+			@update:model-value="resetInvalid"
+		/>
+		<label for="alternative-ips" class="mt-6 block">Alternative IPs</label>
+		<p class="mt-1 text-xs">
+			A list of origins which are allowed to use the token. If empty, any origin is valid.
+			Examples of valid origins: "https://www.jsdelivr.com", "https://www.jsdelivr.com:10000".
+		</p>
+		<div class="mt-7 text-right">
+			<Button class="mr-2" label="Cancel" severity="secondary" text @click="$emit('cancel')"/>
+			<Button label="Save" :loading="updateProbeLoading" @click="updateProbe"/>
+		</div> -->
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { initGoogleMap } from '~/utils/init-google-map';
+
+	const props = defineProps({
+		probe: {
+			type: Object as () => Probe,
+			default: () => {},
+		},
+	});
+
+	const probe = computed(() => ({ ...props.probe }));
+
+	initGoogleMap(probe.value);
+
+	// import { createItem, customEndpoint, updateItem } from '@directus/sdk';
+	// import { sendErrorToast, sendToast } from '~/utils/send-toast';
+
+	// const props = defineProps({
+	// 	token: {
+	// 		type: Object as () => Probe | null,
+	// 		default: () => null,
+	// 	},
+	// });
+
+	// const emit = defineEmits([ 'generate', 'cancel', 'save', 'regenerate' ]);
+
+	// const { $directus } = useNuxtApp();
+
+	// NAME
+
+	const name = ref(props.probe.name || '');
+
+	// // ACTIONS
+
+	// const updateProbeLoading = ref(false);
+	// const updateProbe = async () => {
+	// 	if (!name.value) {
+	// 		isNameInvalid.value = true;
+	// 		return;
+	// 	}
+
+	// 	updateProbeLoading.value = true;
+
+	// 	try {
+	// 		await $directus.request(updateItem('gp_tokens', props.token!.id, {
+	// 			// name: name.value,
+	// 			// origins: origins.value,
+	// 			// expire: expire.value && expire.value.toISOString().split('T')[0],
+	// 		}));
+
+	// 		sendToast('success', 'Done', 'Probe info was successfully updated');
+
+	// 		emit('save');
+	// 	} catch (e) {
+	// 		sendErrorToast(e);
+	// 	}
+	// };
+</script>

pages/probes.vue

@@ -19,7 +19,7 @@
 				:loading="loading"
 				table-class="table-fixed"
 				:row-class="() => 'cursor-pointer hover:bg-surface-50 dark:hover:bg-dark-700'"
-				@row-click="openRow"
+				@row-click="openprobeDetails"
 			>
 				<template #header>
 					<h3>List of probes</h3>
@@ -117,6 +117,22 @@
 				<Button class="mt-6" label="Start a probe" @click="startProbeDialog = true"/>
 			</div>
 		</div>
+		<Dialog
+			v-model:visible="probeDetailsDialog"
+			position="top"
+			class="mt-8 min-w-[700px] max-md:min-w-[95%]"
+			modal
+			dismissable-mask
+			:draggable="false"
+			header="Probe details"
+			content-class="!p-0"
+		>
+			<ProbeDetails
+				:probe="probeDetails"
+				@cancel="probeDetailsDialog = false"
+				@save="handleSave"
+			/>
+		</Dialog>
 		<Dialog
 			v-model:visible="startProbeDialog"
 			position="top"
@@ -150,7 +166,6 @@
 	import type { PageState } from 'primevue/paginator';
 	import CountryFlag from 'vue-country-flag-next';
 	import { useAuth } from '~/store/auth';
-	import { initGoogleMap } from '~/utils/init-google-map';
 	import { sendErrorToast } from '~/utils/send-toast';
 
 	const config = useRuntimeConfig();
@@ -175,7 +190,6 @@
 	const credits = ref<Record<string, number>>({});
 	const first = ref(0);
 	const lazyParams = ref<Partial<DataTablePageEvent>>({});
-	const openedRow = ref<number>(0);
 	const totalCredits = ref(0);
 
 	const loadLazyData = async (event?: PageState) => {
@@ -243,15 +257,19 @@
 
 	// PROBE DETAILS
 
-	const openRow = (event: DataTableRowClickEvent) => {
-		if (event.data.id !== openedRow.value) {
-			isEditingName.value = false;
-			isEditingCity.value = false;
-			isEditingTags.value = false;
-			openedRow.value = event.data.id;
-			const probe = probes.value.find(probe => probe.id === openedRow.value);
-			probe && initGoogleMap(probe);
-		}
+	const probeDetails = ref<Probe | null>(null);
+
+	const probeDetailsDialog = ref(false);
+
+	const openprobeDetails = (event: DataTableRowClickEvent) => {
+		const probe = probes.value.find(probe => probe.id === event.data.id);
+		probeDetails.value = probe ? { ...probe } : null;
+		probeDetailsDialog.value = true;
+	};
+
+	const handleSave = async () => {
+		await loadLazyData();
+		probeDetailsDialog.value = false;
 	};
 
 	//  EDIT NAME
@@ -341,14 +359,6 @@
 		isEditingTags.value = false;
 	};
 
-	// OPEN/CLOSE DETAILS
-
-	const onKeyDown = async (event: KeyboardEvent) => {
-		if (event.key === 'Enter' || event.key === ' ') {
-			openedRow.value = 0;
-		}
-	};
-
 	// UTILS
 
 	const updateProbe = async (id: number, newData: Partial<Probe>) => {

types.ts

@@ -49,6 +49,7 @@ declare global {
     date_created: string;
     date_updated: string;
     ip: string;
+    altIps: string[];
     isCustomCity: boolean;
     lastSyncDate: string;
     latitude: number;