refactor: fixing all types coming from library

src/components/controller/units/BatchUnitImageUpdate.vue

@@ -4,7 +4,6 @@ import {
   NeButton,
   NeCombobox,
   type NeComboboxOption,
-  type NeDropdownItem,
   NeFormItemLabel,
   NeInlineNotification,
   NeRadioSelection,
@@ -60,11 +59,11 @@ function updateUnits() {
   Promise.allSettled(
     selectedUnits.value.map((unit) => {
       if (updateMode.value === 'now') {
-        return upgradeUnitImage(unit).then(() => {
+        return upgradeUnitImage(unit.id).then(() => {
           unitsStore.addUnitUpgradingImage(unit.id)
         })
       } else {
-        return scheduleUpgradeUnitImage(scheduledUpdate.value, unit)
+        return scheduleUpgradeUnitImage(scheduledUpdate.value, unit.id)
       }
     })
   )
@@ -99,7 +98,7 @@ function updateUnits() {
     })
 }
 
-const unitsAvailableForUpdate = computed((): NeDropdownItem[] => {
+const unitsAvailableForUpdate = computed((): NeComboboxOption[] => {
   return unitsStore.units
     .filter(
       // if a unit is connected, and does not have a scheduled update and have a new image available

src/components/controller/units/CancelUpdateModal.vue

@@ -47,7 +47,7 @@ async function abortUpdate() {
   }
   loading.value = true
   try {
-    await abortScheduledUpgradeUnitImage(_unit.value)
+    await abortScheduledUpgradeUnitImage(_unit.value.id)
     await unitsStore.getUnitInfo(_unit.value.id)
     await unitsStore.getUnits()
     notificationStore.createNotification({

src/components/controller/units/ScheduleUpdateDrawer.vue

@@ -54,7 +54,7 @@ watch(
       _unit.value = unit
       fetchError.value = undefined
       loading.value = true
-      checkUnitImageUpdate(_unit.value)
+      checkUnitImageUpdate(_unit.value.id)
         .then(async (response) => {
           versionToUpdate.value = response.data.lastVersion
           if (versionToUpdate.value == '') {
@@ -91,26 +91,28 @@ async function updateUnit() {
     sendingSchedule.value = true
     sendingError.value = undefined
     if (updateMode.value == 'now') {
-      await upgradeUnitImage(_unit.value)
+      await upgradeUnitImage(_unit.value!.id)
       unitsStore.addUnitUpgradingImage(_unit.value!.id)
     } else {
-      await scheduleUpgradeUnitImage(scheduledUpdate.value, _unit.value)
+      await scheduleUpgradeUnitImage(scheduledUpdate.value, _unit.value!.id)
     }
     await unitsStore.getUnitInfo(_unit.value!.id)
     await unitsStore.getUnits()
 
-    let notification: NeNotification = {
-      kind: 'success'
-    }
     if (updateMode.value == 'now') {
-      notification.id = 'unit-update'
-      notification.title = t('controller.units.image_update_success')
-      notification.description = t('controller.units.image_update_description')
+      notificationsStore.createNotification({
+        id: 'unit-update',
+        title: t('controller.units.image_update_success'),
+        description: t('controller.units.image_update_description'),
+        kind: 'success'
+      } as NeNotification)
     } else {
-      notification.id = 'schedule-unit-update'
-      notification.title = t('controller.units.scheduled_image_update_success')
+      notificationsStore.createNotification({
+        id: 'schedule-unit-update',
+        title: t('controller.units.scheduled_image_update_success'),
+        kind: 'success'
+      } as NeNotification)
     }
-    notificationsStore.createNotification(notification)
     emit('close')
   } catch (error: any) {
     sendingError.value = error

src/components/controller/units/UnitsTable.vue

@@ -305,7 +305,7 @@ function showRemoveUnitModal(unit: Unit) {
         </NeTableHeadCell>
       </NeTableHead>
       <NeTableBody>
-        <NeTableRow v-for="item in paginatedItems" :key="item.name">
+        <NeTableRow v-for="item in paginatedItems" :key="item.id">
           <!-- unit name -->
           <NeTableCell :data-label="t('controller.units.unit_name')">
             <div class="space-y-1">
@@ -367,7 +367,7 @@ function showRemoveUnitModal(unit: Unit) {
                           {{ t('controller.units.data_received') }}:
                         </span>
                         <span class="text-gray-300 dark:text-gray-600">
-                          {{ byteFormat1024(item.vpn.bytes_rcvd) }}
+                          {{ byteFormat1024(Number(item.vpn.bytes_rcvd)) }}
                         </span>
                       </div>
                       <!-- data sent -->
@@ -376,7 +376,7 @@ function showRemoveUnitModal(unit: Unit) {
                           {{ t('controller.units.data_sent') }}:
                         </span>
                         <span class="text-gray-300 dark:text-gray-600">
-                          {{ byteFormat1024(item.vpn.bytes_sent) }}
+                          {{ byteFormat1024(Number(item.vpn.bytes_sent)) }}
                         </span>
                       </div>
                       <!-- connected since -->

src/components/controller/units/UpdateUnitsPackagesModal.vue

@@ -8,7 +8,8 @@ import {
   getAxiosErrorMessage,
   NeInlineNotification,
   NeModal,
-  NeSkeleton
+  NeSkeleton,
+  type ModalKind
 } from '@nethesis/vue-components'
 
 const { t } = useI18n()
@@ -38,7 +39,7 @@ watch(
       fetchingData.value = true
       _unit.value = unit
       try {
-        const response = await updatePackageIndex(_unit.value)
+        const response = await updatePackageIndex(_unit.value.id)
         availableUpdates.value = response.data.updates
         fetchingData.value = false
       } catch (exception: any) {
@@ -59,7 +60,7 @@ const primaryButtonLabel = computed((): string => {
   }
 })
 
-const modalKind = computed((): string => {
+const modalKind = computed((): ModalKind => {
   if (fetchingData.value) {
     return 'neutral'
   } else if (availableUpdates.value.length > 0) {
@@ -87,7 +88,7 @@ async function updateUnitPackages() {
   }
   try {
     loading.value = true
-    await upgradePackages(_unit.value)
+    await upgradePackages(_unit.value.id)
     await unitsStore.getUnitInfo(_unit.value.id)
     await unitsStore.getUnits()
     notificationStore.createNotification({

src/components/standalone/NeMultiTextInput.vue

@@ -37,7 +37,7 @@ const props = withDefaults(
     keyInputPlaceholder?: string
     placeholder?: string
   }>(),
-  { useKeyInput: false, required: false }
+  { useKeyInput: false, required: false, keyOptions: () => [] }
 )
 
 defineExpose({

src/components/standalone/backup_and_restore/BackupContent.vue

@@ -178,7 +178,7 @@ function getDropdownItems(item: Backup) {
           item.id,
           formatDateLoc(new Date(Number(item.created) * 1000), 'PPpp') +
             ' (' +
-            byteFormat1024(item.size) +
+            byteFormat1024(Number(item.size)) +
             ')'
         )
       }
@@ -308,7 +308,7 @@ function successDeleteBackup() {
             </NeTableCell>
             <NeTableCell :data-label="t('standalone.backup_and_restore.backup.size')">
               <div>
-                {{ byteFormat1024(item.size) }}
+                {{ byteFormat1024(Number(item.size)) }}
               </div>
             </NeTableCell>
             <NeTableCell :data-label="t('common.actions')">

src/components/standalone/certificates/CertificatesTable.vue

@@ -30,21 +30,21 @@ const props = defineProps<{
   certificates: Certificate[]
 }>()
 
-const sortKey = ref('name')
+const sortKey = ref<keyof Certificate>('name')
 const sortDescending = ref(false)
 
 const sortFunctions = {
   // custom sorting function for domains attribute
-  domains: (a: Certificate, b: Certificate) => {
-    if (a.type === 'acme' && b.type === 'acme') {
+  domain: (a: Certificate, b: Certificate) => {
+    if (a.type == 'acme' && b.type == 'acme') {
       if (a.requested_domains?.length && b.requested_domains?.length) {
         return a.requested_domains[0].localeCompare(b.requested_domains[0])
       } else {
         return 0
       }
-    } else if (a.type === 'self-signed' && b.type === 'self-signed') {
+    } else if (a.type == 'self-signed' && b.type == 'self-signed') {
       return a.domain.localeCompare(b.domain)
-    } else if (a.type === 'self-signed') {
+    } else if (a.type == 'self-signed') {
       return -1
     } else {
       return 1

src/components/standalone/dns_dhcp/LeasesTable.vue

@@ -5,16 +5,17 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { NeDropdown } from '@nethesis/vue-components'
 import {
   NeButton,
+  NeDropdown,
+  type NeDropdownItem,
+  NePaginator,
   NeTable,
+  NeTableBody,
+  NeTableCell,
   NeTableHead,
   NeTableHeadCell,
-  NeTableBody,
   NeTableRow,
-  NeTableCell,
-  NePaginator,
   useItemPagination
 } from '@nethesis/vue-components'
 import type { StaticLease } from './StaticLeases.vue'
@@ -24,7 +25,7 @@ import { ref } from 'vue'
 const { t } = useI18n()
 
 const props = defineProps<{
-  leases: StaticLease[] | DynamicLease[]
+  leases: Array<StaticLease | DynamicLease>
   showDynamicLeases: boolean
 }>()
 
@@ -35,7 +36,7 @@ const { currentPage, paginatedItems } = useItemPagination(() => props.leases, {
   itemsPerPage: pageSize
 })
 
-function getDropdownItems(item: StaticLease) {
+function getDropdownItems(item: StaticLease | DynamicLease) {
   return !props.showDynamicLeases
     ? [
         {
@@ -89,7 +90,7 @@ function getDropdownItems(item: StaticLease) {
           v-if="!showDynamicLeases"
           :data-label="t('standalone.dns_dhcp.reservation_name')"
         >
-          {{ item.description ? item.description : '-' }}
+          {{ 'description' in item ? item.description : '-' }}
         </NeTableCell>
         <NeTableCell :data-label="t('standalone.dns_dhcp.interface')">
           <p v-if="!item.interface && !item.device">-</p>
@@ -105,8 +106,10 @@ function getDropdownItems(item: StaticLease) {
           v-if="showDynamicLeases"
           :data-label="t('standalone.dns_dhcp.lease_expiration')"
         >
-          {{ new Date(Number.parseInt(item.timestamp) * 1000).toLocaleDateString() }}
-          {{ new Date(Number.parseInt(item.timestamp) * 1000).toLocaleTimeString() }}
+          <template v-if="'timestamp' in item">
+            {{ new Date(Number.parseInt(item.timestamp) * 1000).toLocaleDateString() }}
+            {{ new Date(Number.parseInt(item.timestamp) * 1000).toLocaleTimeString() }}
+          </template>
         </NeTableCell>
         <NeTableCell :data-label="t('common.actions')">
           <div class="align-center -ml-2.5 flex gap-2 xl:ml-0 xl:justify-end">

src/components/standalone/firewall/conntrack/ConntrackRecordsTable.vue

@@ -72,8 +72,8 @@ const { currentPage, paginatedItems } = useItemPagination(() => props.conntrackR
             'standalone.conntrack.upload'
           )}`"
         >
-          {{ byteFormat1024(item.source_stats.bytes) }} /
-          {{ byteFormat1024(item.destination_stats.bytes) }}
+          {{ byteFormat1024(Number(item.source_stats.bytes)) }} /
+          {{ byteFormat1024(Number(item.destination_stats.bytes)) }}
         </NeTableCell>
         <NeTableCell :data-label="t('standalone.conntrack.state')">
           {{ item.state || '-' }}

src/components/standalone/firewall/nat/CreateOrEditNetmapRuleDrawer.vue

@@ -153,14 +153,14 @@ async function listDevices() {
       // editing rule
       if (props.currentRule.device_in?.length) {
         inboundDevices.value = props.currentRule.device_in.map((deviceId) => {
-          return devicesOptions.value.find((dev) => dev.id === deviceId)
+          return devicesOptions.value.find((dev) => dev.id === deviceId)!
         })
         isExpandedAdvancedSettings.value = true
       }
 
       if (props.currentRule.device_out) {
         outboundDevices.value = props.currentRule.device_out.map((deviceId) => {
-          return devicesOptions.value.find((dev) => dev.id === deviceId)
+          return devicesOptions.value.find((dev) => dev.id === deviceId)!
         })
         isExpandedAdvancedSettings.value = true
       }

src/components/standalone/hotspot/SettingsContent.vue

@@ -13,7 +13,9 @@ import {
   NeTooltip,
   NeTextInput,
   focusElement,
-  getAxiosErrorMessage
+  getAxiosErrorMessage,
+  type NeDropdownItem,
+  type NeComboboxOption
 } from '@nethesis/vue-components'
 import { type NeNotification, NeModal } from '@nethesis/vue-components'
 import { faSave, faRightToBracket } from '@fortawesome/free-solid-svg-icons'
@@ -56,16 +58,12 @@ interface Configuration {
   maxClientsAllowed: string
 }
 
-interface ParentHotspot {
-  id: string
-  label: string
+interface ParentHotspot extends NeComboboxOption {
   name: string
 }
 
-interface NetworkDevice {
-  id: string
+interface NetworkDevice extends NeComboboxOption {
   name: string
-  label: string
 }
 
 const configurationForm = ref<Configuration>({
@@ -99,8 +97,8 @@ let unitDescriptionRef = ref()
 let networkDeviceRef = ref()
 let networkAddressRef = ref()
 let dhcpLimitRef = ref()
-let parentHotspotList = ref<Array<ParentHotspot>>()
-let networkDeviceList = ref<Array<NetworkDevice>>()
+let parentHotspotList = ref<Array<ParentHotspot>>([])
+let networkDeviceList = ref<Array<NetworkDevice>>([])
 
 let objError = {
   notificationTitle: '',

src/components/standalone/openvpn_rw/RWAccountsTable.vue

@@ -139,7 +139,7 @@ function getCellClasses(item: RWAccount) {
       </NeTableHeadCell>
     </NeTableHead>
     <NeTableBody>
-      <NeTableRow v-for="item in paginatedItems" :key="item.username">
+      <NeTableRow v-for="item in paginatedItems" :key="item.id">
         <!-- username -->
         <NeTableCell :data-label="t('standalone.openvpn_rw.username')">
           <div class="flex flex-row gap-x-3">

src/components/standalone/routes/CreateOrEditRouteDrawer.vue

@@ -13,7 +13,8 @@ import {
   NeTooltip,
   NeTextInput,
   getAxiosErrorMessage,
-  focusElement
+  focusElement,
+  type NeComboboxOption
 } from '@nethesis/vue-components'
 import { NeToggle } from '@nethesis/vue-components'
 import { useI18n } from 'vue-i18n'
@@ -66,15 +67,9 @@ interface Form {
   onlink: boolean
 }
 
-interface RouteInterface {
-  id: string
-  label: string
-}
+interface RouteInterface extends NeComboboxOption {}
 
-interface RouteType {
-  id: string
-  label: string
-}
+interface RouteType extends NeComboboxOption {}
 
 const originalForm = {
   id: '',
@@ -91,8 +86,8 @@ const originalForm = {
 
 const form = ref<Form>({ ...originalForm })
 
-let routeInterfaces = ref<Array<RouteInterface>>()
-let routeTypes = ref<Array<RouteType>>()
+let routeInterfaces = ref<Array<RouteInterface>>([])
+let routeTypes = ref<Array<RouteType>>([])
 let loading = ref(false)
 let saving = ref(false)
 let isExpandedAdvancedSettings = ref(false)