refactor(ui): migrate Web Endpoints store to Pinia

Author: luizhf42

ui/src/components/WebEndpoints/WebEndpointCreate.vue

@@ -50,7 +50,6 @@
                 variant="outlined"
                 return-object
                 hide-details
-                @click:control="fetchDevices"
                 @update:search="fetchDevices"
                 data-test="web-endpoint-autocomplete"
               >
@@ -122,41 +121,32 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 import { useField } from "vee-validate";
 import * as yup from "yup";
 import axios, { AxiosError } from "axios";
 import DeviceIcon from "@/components/Devices/DeviceIcon.vue";
-import { useStore } from "@/store";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
 import BaseDialog from "../BaseDialog.vue";
 import useDevicesStore from "@/store/modules/devices";
-
-interface DeviceOption {
-  uid: string;
-  name: string;
-  info: {
-    id: string;
-    pretty_name: string;
-  };
-  [key: string]: unknown;
-}
+import useWebEndpointsStore from "@/store/modules/web_endpoints";
+import { IDevice } from "@/interfaces/IDevice";
 
 const props = defineProps<{
   uid?: string;
   useDevicesList: boolean;
 }>();
 
 const emit = defineEmits(["update"]);
-const store = useStore();
 const devicesStore = useDevicesStore();
+const webEndpointsStore = useWebEndpointsStore();
 const snackbar = useSnackbar();
 const showDialog = defineModel({ default: false });
 const alertText = ref();
 
-const selectedDevice = ref<DeviceOption | null>(null);
-const deviceOptions = ref<DeviceOption[]>([]);
+const selectedDevice = ref<IDevice | null>(null);
+const deviceOptions = ref<IDevice[]>([]);
 const loadingDevices = ref(false);
 
 const predefinedTimeouts = ref([
@@ -223,21 +213,19 @@ const close = () => { resetFields(); showDialog.value = false; };
 const update = () => { emit("update"); close(); };
 
 const fetchDevices = async (searchQuery?: string) => {
-  if (!searchQuery && deviceOptions.value.length > 0) return;
-
   loadingDevices.value = true;
 
   const filter = searchQuery
     ? btoa(JSON.stringify([
       { type: "property", params: { name: "name", operator: "contains", value: searchQuery } },
     ]))
-    : "";
-
+    : undefined;
   try {
     await devicesStore.fetchDeviceList({ filter });
     deviceOptions.value = devicesStore.devices;
-  } catch {
+  } catch (error) {
     snackbar.showError("Failed to load devices.");
+    handleError(error);
   }
 
   loadingDevices.value = false;
@@ -251,8 +239,8 @@ const addWebEndpoint = async () => {
     : props.uid;
 
   try {
-    await store.dispatch("webEndpoints/create", {
-      uid: deviceUid,
+    await webEndpointsStore.createWebEndpoint({
+      uid: deviceUid as string,
       host: host.value,
       port: port.value,
       ttl: timeout.value,
@@ -271,4 +259,6 @@ const addWebEndpoint = async () => {
     }
   }
 };
+
+onMounted(async () => { if (props.useDevicesList) await fetchDevices(); });
 </script>

ui/src/components/WebEndpoints/WebEndpointDelete.vue

@@ -36,29 +36,24 @@
 </template>
 
 <script setup lang="ts">
-import { useStore } from "@/store";
 import hasPermission from "@/utils/permission";
 import { actions, authorizer } from "@/authorizer";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
 import BaseDialog from "../BaseDialog.vue";
 import useAuthStore from "@/store/modules/auth";
+import useWebEndpointsStore from "@/store/modules/web_endpoints";
 
 defineOptions({
   inheritAttrs: false,
 });
 
-const props = defineProps({
-  address: {
-    type: String,
-    required: true,
-  },
-});
+const props = defineProps<{ address: string }>();
 
 const emit = defineEmits(["update"]);
 const showDialog = defineModel({ default: false });
-const store = useStore();
 const authStore = useAuthStore();
+const webEndpointsStore = useWebEndpointsStore();
 const snackbar = useSnackbar();
 
 const update = () => {
@@ -73,9 +68,7 @@ const hasAuthorizationDeleteWebEndpoint = () => {
 
 const remove = async () => {
   try {
-    await store.dispatch("webEndpoints/delete", {
-      address: props.address,
-    });
+    await webEndpointsStore.deleteWebEndpoint(props.address);
     update();
     snackbar.showSuccess("Web Endpoint deleted successfully.");
   } catch (error: unknown) {

ui/src/components/WebEndpoints/WebEndpointList.vue

@@ -3,7 +3,7 @@
     v-model:page="page"
     v-model:itemsPerPage="itemsPerPage"
     :headers="headers"
-    :items="items"
+    :items="webEndpoints"
     :totalCount="totalCount"
     :loading="loading"
     :itemsPerPageOptions="[10, 20, 50]"
@@ -12,7 +12,7 @@
   >
     <template #rows>
       <tr
-        v-for="endpoint in items"
+        v-for="endpoint in webEndpoints"
         :key="endpoint.address"
         :class="isExpired(endpoint.expires_in) ? 'text-warning' : ''"
       >
@@ -33,12 +33,12 @@
 
         <td data-test="web-endpoint-url">
           <a
-            :href="`${urlProtocol}//${endpoint.full_address}`"
+            :href="`${protocol}//${endpoint.full_address}`"
             target="_blank"
             rel="noopener noreferrer"
             @click="handleClick"
           >
-            {{ `${urlProtocol}//${endpoint.full_address}` }}
+            {{ `${protocol}//${endpoint.full_address}` }}
           </a>
         </td>
 
@@ -61,26 +61,27 @@
 import { ref, watch, computed, onMounted } from "vue";
 import moment from "moment";
 import { useRouter } from "vue-router";
-import { useStore } from "@/store";
 import DataTable from "@/components/DataTable.vue";
 import WebEndpointDelete from "@/components/WebEndpoints/WebEndpointDelete.vue";
 import DeviceIcon from "@/components/Devices/DeviceIcon.vue";
-import { IWebEndpoints } from "@/interfaces/IWebEndpoints";
+import { IWebEndpoint } from "@/interfaces/IWebEndpoints";
+import useWebEndpointsStore from "@/store/modules/web_endpoints";
+import handleError from "@/utils/handleError";
 
 type SortField = "created_at" | "updated_at" | "address" | "uid";
 
-const store = useStore();
+const webEndpointsStore = useWebEndpointsStore();
 const router = useRouter();
 
-const items = computed<IWebEndpoints[]>(() => store.getters["webEndpoints/listWebEndpoints"]);
-const totalCount = computed(() => store.getters["webEndpoints/getTotalCount"]);
+const webEndpoints = computed<IWebEndpoint[]>(() => webEndpointsStore.webEndpoints);
+const totalCount = computed(() => webEndpointsStore.webEndpointCount);
 
-const page = ref(store.getters["webEndpoints/getPage"]);
-const itemsPerPage = ref(store.getters["webEndpoints/getPerPage"]);
+const page = ref(1);
+const itemsPerPage = ref(10);
 const loading = ref(false);
-
-const sortBy = ref<SortField>(store.getters["webEndpoints/getSortBy"]);
-const sortDesc = ref<boolean>(store.getters["webEndpoints/getOrderBy"] === "desc");
+const sortField = ref<SortField>();
+const sortOrder = ref<"asc" | "desc">();
+const { protocol } = window.location;
 
 const headers = [
   { text: "Device", value: "device", sortable: false },
@@ -94,50 +95,35 @@ const headers = [
 const fetchWebEndpoints = async () => {
   loading.value = true;
   try {
-    await store.dispatch("webEndpoints/get", {
-      page: page.value,
-      perPage: itemsPerPage.value,
-      filter: store.getters["webEndpoints/getFilter"],
-      sortBy: sortBy.value,
-      orderBy: sortDesc.value ? "desc" : "asc",
-    });
-
-    store.commit("webEndpoints/setPagePerPage", {
+    await webEndpointsStore.fetchWebEndpointsList({
       page: page.value,
       perPage: itemsPerPage.value,
-      filter: store.getters["webEndpoints/getFilter"],
-      sortBy: sortBy.value,
-      orderBy: sortDesc.value ? "desc" : "asc",
+      sortField: sortField.value,
+      sortOrder: sortOrder.value,
     });
-  } finally {
-    loading.value = false;
+  } catch (error) {
+    handleError(error);
   }
-};
 
-const sortByItem = (field: string) => {
-  const validFields: SortField[] = ["created_at", "updated_at", "address", "uid"];
-  if (!validFields.includes(field as SortField)) return;
+  loading.value = false;
+};
 
-  if (sortBy.value === field) {
-    sortDesc.value = !sortDesc.value;
-  } else {
-    sortBy.value = field as SortField;
-    sortDesc.value = false;
-  }
+const getSortOrder = () => sortOrder.value === "asc" ? "desc" : "asc";
 
-  fetchWebEndpoints();
+const sortByItem = async (field: SortField) => {
+  sortField.value = field;
+  sortOrder.value = getSortOrder();
+  await fetchWebEndpoints();
 };
 
-watch([page, itemsPerPage], () => {
-  fetchWebEndpoints();
+watch([page, itemsPerPage], async () => {
+  await fetchWebEndpoints();
 });
 
-const refresh = () => {
-  fetchWebEndpoints();
+const refresh = async () => {
+  await fetchWebEndpoints();
 };
 
-const urlProtocol = ref(window.location.protocol);
-
 const isExpired = (date: string) => date !== "0001-01-01T00:00:00Z" && moment().utc().isAfter(moment(date));
 
 const formatDate = (expiresIn: string) => {

ui/src/interfaces/IWebEndpoints.ts

@@ -1,6 +1,6 @@
 import { IDevice } from "./IDevice";
 
-export interface IWebEndpoints {
+export interface IWebEndpoint {
   address: string,
   full_address: string,
   device: IDevice
@@ -17,6 +17,10 @@ export interface IWebEndpointsCreate {
   ttl: number
 }
 
-export interface IWebEndpointsDelete {
-  address: string,
+export interface FetchWebEndpointsParams {
+  perPage?: number;
+  page?: number;
+  filter?: string;
+  sortField?: "created_at" | "updated_at" | "address" | "uid";
+  sortOrder?: "asc" | "desc";
 }

ui/src/router/index.ts

@@ -1,13 +1,13 @@
 import { RouteRecordRaw, createRouter, createWebHistory, RouteLocationNormalized, NavigationGuardNext } from "vue-router";
 import { envVariables } from "../envVariables";
-import { store } from "@/store";
 import { plugin as snackbar } from "@/plugins/snackbar"; // using direct plugin because inject() doesn't work outside components
 import useAuthStore from "@/store/modules/auth";
 import useContainersStore from "@/store/modules/containers";
 import useDevicesStore from "@/store/modules/devices";
 import useLayoutStore, { Layout } from "@/store/modules/layout";
 import useNamespacesStore from "@/store/modules/namespaces";
 import useUsersStore from "@/store/modules/users";
+import useWebEndpointsStore from "@/store/modules/web_endpoints";
 
 export const handleAcceptInvite = async (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
   const namespacesStore = useNamespacesStore();
@@ -293,13 +293,7 @@ export const routes: Array<RouteRecordRaw> = [
     name: "WebEndpoints",
     component: WebEndpoints,
     beforeEnter: async (to, from, next) => {
-      await store.dispatch("webEndpoints/get", {
-        page: store.getters["webEndpoints/getPage"],
-        perPage: store.getters["webEndpoints/getPerPage"],
-        filter: store.getters["webEndpoints/getFilter"],
-        sortBy: store.getters["webEndpoints/getSortBy"],
-        orderBy: store.getters["webEndpoints/getOrderBy"],
-      });
+      await useWebEndpointsStore().fetchWebEndpointsList();
       next();
     },
   },

ui/src/store/api/web_endpoints.ts

@@ -1,20 +1,20 @@
 import { webEndpointsApi } from "@/api/http";
 
-const getWebEndpoints = (
-  filter: string | undefined,
+export const getWebEndpoints = (
   page: number,
   perPage: number,
-  sortBy?: "created_at" | "updated_at" | "address" | "uid",
-  orderBy?: "asc" | "desc",
+  filter?: string,
+  sortField?: "created_at" | "updated_at" | "address" | "uid",
+  sortOrder?: "asc" | "desc",
 ) => webEndpointsApi.listWebEndpoints(
   filter,
   page,
   perPage,
-  sortBy,
-  orderBy,
+  sortField,
+  sortOrder,
 );
 
-const createWebEndpoints = (uid: string, host: string, port: number, ttl: number) => webEndpointsApi.createWebEndpoint(
+export const createWebEndpoint = (uid: string, host: string, port: number, ttl: number) => webEndpointsApi.createWebEndpoint(
   {
     uid,
     host,
@@ -23,6 +23,4 @@ const createWebEndpoints = (uid: string, host: string, port: number, ttl: number
   },
 );
 
-const deleteWebEndpoints = (address: string) => webEndpointsApi.deleteWebEndpoint(address);
-
-export { getWebEndpoints, createWebEndpoints, deleteWebEndpoints };
+export const deleteWebEndpoint = (address: string) => webEndpointsApi.deleteWebEndpoint(address);

ui/src/store/index.ts

@@ -1,20 +1,12 @@
-import { InjectionKey } from "vue";
-import { createStore, Store, useStore as vuexUseStore } from "vuex";
+import { createStore, useStore as vuexUseStore } from "vuex";
 
-import { webEndpoints, WebEndpointsState } from "./modules/web_endpoints";
+export const key = Symbol("store");
 
-export interface State {
-  webEndpoints: WebEndpointsState;
-}
-
-export const key: InjectionKey<Store<State>> = Symbol("store");
-
-export const store = createStore<State>({
+export const store = createStore({
   modules: {
-    webEndpoints,
   },
 });
 
-export function useStore(): Store<State> {
+export function useStore() {
   return vuexUseStore(key);
 }