refactor(ui): migrate Tags store to Pinia

Author: luizhf42

ui/src/components/Devices/DeviceDelete.vue

@@ -52,7 +52,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useRouter } from "vue-router";
-import { useStore } from "@/store";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
 import BaseDialog from "../BaseDialog.vue";
@@ -68,26 +67,17 @@ const props = defineProps<{
 const emit = defineEmits(["update"]);
 const showDialog = ref(false);
 const snackbar = useSnackbar();
-const store = useStore();
 const devicesStore = useDevicesStore();
 const router = useRouter();
 
-const emitUpdate = (): void => {
-  emit("update");
-};
-
 const removeDevice = async (): Promise<void> => {
   try {
     await devicesStore.removeDevice(props.uid);
 
-    if (props.redirect) {
-      router.push("/devices");
-    } else {
-      await store.dispatch("tags/fetch");
-    }
+    if (props.redirect) router.push("/devices");
 
     snackbar.showSuccess("Successfully removed device.");
-    emitUpdate();
+    emit("update");
   } catch (error: unknown) {
     snackbar.showError("Failed to remove device.");
     handleError(error);

ui/src/components/PublicKeys/PublicKeyAdd.vue

@@ -127,7 +127,6 @@ import { computed, nextTick, ref, watch } from "vue";
 import * as yup from "yup";
 import axios, { AxiosError } from "axios";
 import { actions, authorizer } from "@/authorizer";
-import { useStore } from "@/store";
 import hasPermission from "@/utils/permission";
 import { validateKey } from "@/utils/validate";
 import handleError from "@/utils/handleError";
@@ -136,13 +135,14 @@ import BaseDialog from "../BaseDialog.vue";
 import useAuthStore from "@/store/modules/auth";
 import usePublicKeysStore from "@/store/modules/public_keys";
 import { IPublicKeyCreate } from "@/interfaces/IPublicKey";
+import useTagsStore from "@/store/modules/tags";
 
 const { size } = defineProps<{ size?: string }>();
 
 const emit = defineEmits(["update"]);
-const store = useStore();
 const authStore = useAuthStore();
 const publicKeysStore = usePublicKeysStore();
+const tagsStore = useTagsStore();
 const showDialog = ref(false);
 const snackbar = useSnackbar();
 const validateLength = ref(true);
@@ -211,7 +211,7 @@ const {
   initialValue: "",
 });
 
-const tagNames = computed(() => store.getters["tags/list"]);
+const tagNames = computed(() => tagsStore.tags);
 
 const hasAuthorization = computed(() => {
   const { role } = authStore;
@@ -234,7 +234,7 @@ watch(tagChoices, (list) => {
 
 watch(choiceFilter, async () => {
   if (choiceFilter.value === "tags") {
-    await store.dispatch("tags/fetch");
+    await tagsStore.fetchTags();
   }
 });
 

ui/src/components/PublicKeys/PublicKeyEdit.vue

@@ -134,13 +134,13 @@ import {
   onUpdated,
 } from "vue";
 import * as yup from "yup";
-import { useStore } from "@/store";
 import { IPublicKey } from "@/interfaces/IPublicKey";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
 import BaseDialog from "../BaseDialog.vue";
 import { HostnameFilter, TagsFilter } from "@/interfaces/IFilter";
 import usePublicKeysStore from "@/store/modules/public_keys";
+import useTagsStore from "@/store/modules/tags";
 
 const props = defineProps<{
   publicKey: IPublicKey;
@@ -149,8 +149,8 @@ const props = defineProps<{
 
 const emit = defineEmits(["update"]);
 const showDialog = ref(false);
-const store = useStore();
 const publicKeysStore = usePublicKeysStore();
+const tagsStore = useTagsStore();
 const snackbar = useSnackbar();
 const choiceFilter = ref("hostname");
 const validateLength = ref(true);
@@ -234,13 +234,13 @@ const hasTags = computed(() => {
 
 watch(choiceFilter, async () => {
   if (choiceFilter.value === "tags") {
-    await store.dispatch("tags/fetch");
+    await tagsStore.fetchTags();
   }
 });
 
 const tagNames = computed({
   get() {
-    return store.getters["tags/list"];
+    return tagsStore.tags;
   },
   set(val) {
     tagChoices.value = val;

ui/src/components/Tags/TagEdit.vue

@@ -54,18 +54,18 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
-import { useStore } from "@/store";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
 import BaseDialog from "../BaseDialog.vue";
+import useTagsStore from "@/store/modules/tags";
 
 const props = defineProps<{
   tag: string;
   hasAuthorization: boolean;
 }>();
 
 const emit = defineEmits(["update"]);
-const store = useStore();
+const tagsStore = useTagsStore();
 const snackbar = useSnackbar();
 const showDialog = ref(false);
 
@@ -100,7 +100,7 @@ const update = () => {
 const edit = async () => {
   if (!tagsError.value) {
     try {
-      await store.dispatch("tags/edit", {
+      await tagsStore.updateTag({
         oldTag: props.tag,
         newTag: inputTags.value,
       });

ui/src/components/Tags/TagFormUpdate.vue

@@ -64,11 +64,11 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import axios, { AxiosError } from "axios";
-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";
+import useTagsStore from "@/store/modules/tags";
 
 const props = defineProps<{
   deviceUid: string;
@@ -78,8 +78,8 @@ const props = defineProps<{
 
 const emit = defineEmits(["update"]);
 const snackbar = useSnackbar();
-const store = useStore();
 const devicesStore = useDevicesStore();
+const tagsStore = useTagsStore();
 const showDialog = ref(false);
 const hasTags = computed(() => props.tagsList.length > 0);
 const inputTags = ref<string[]>([]);
@@ -112,12 +112,7 @@ const save = async () => {
       tags: { tags: inputTags.value },
     });
 
-    await store.dispatch("tags/setTags", {
-      data: inputTags.value,
-      headers: {
-        "x-total-count": inputTags.value.length,
-      },
-    });
+    tagsStore.fetchTags();
     showDialog.value = false;
     snackbar.showSuccess("Tags updated successfully.");
 

ui/src/components/Tags/TagList.vue

@@ -66,17 +66,17 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
-import { useStore } from "@/store";
 import { actions, authorizer } from "@/authorizer";
 import hasPermission from "@/utils/permission";
 import TagRemove from "./TagRemove.vue";
 import TagEdit from "./TagEdit.vue";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
 import useAuthStore from "@/store/modules/auth";
+import useTagsStore from "@/store/modules/tags";
 
-const store = useStore();
 const authStore = useAuthStore();
+const tagsStore = useTagsStore();
 const snackbar = useSnackbar();
 const headers = ref([
   {
@@ -93,7 +93,7 @@ const headers = ref([
   },
 ]);
 
-const tags = computed(() => store.getters["tags/list"]);
+const tags = computed(() => tagsStore.tags);
 
 const hasAuthorizationEdit = () => {
   const { role } = authStore;
@@ -107,14 +107,14 @@ const hasAuthorizationRemove = () => {
 
 const getTags = async () => {
   try {
-    await store.dispatch("tags/fetch");
+    await tagsStore.fetchTags();
   } catch (error: unknown) {
     snackbar.showError("Failed to load tags.");
     handleError(error);
   }
 };
 
-onMounted(() => {
-  getTags();
+onMounted(async () => {
+  await getTags();
 });
 </script>

ui/src/components/Tags/TagRemove.vue

@@ -41,10 +41,10 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { useStore } from "@/store";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
 import BaseDialog from "../BaseDialog.vue";
+import useTagsStore from "@/store/modules/tags";
 
 defineOptions({
   inheritAttrs: false,
@@ -57,12 +57,12 @@ const props = defineProps<{
 
 const emit = defineEmits(["update"]);
 const showDialog = ref(false);
-const store = useStore();
+const tagsStore = useTagsStore();
 const snackbar = useSnackbar();
 
 const remove = async () => {
   try {
-    await store.dispatch("tags/remove", props.tag);
+    await tagsStore.removeTag(props.tag);
     snackbar.showSuccess(`Tag ${props.tag} removed successfully.`);
     emit("update");
   } catch (error: unknown) {

ui/src/components/Tags/TagSelector.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/no-v-text-v-html-on-component -->
 <template>
   <div class="mr-4">
     <v-menu location="bottom" v-bind="$attrs" scrim eager>
@@ -14,7 +13,7 @@
             data-test="tags-btn"
             color="primary"
             variant="outlined"
-            :disabled="getListTags.length == 0"
+            :disabled="tags.length === 0"
             @click="getTags"
           >
             Tags
@@ -24,7 +23,7 @@
       </template>
       <v-list shaped density="compact" class="bg-v-theme-surface">
         <div>
-          <template v-for="(item, i) in getListTags">
+          <template v-for="(item, i) in tags">
             <v-divider v-if="!item" :key="`divider-${i}`" />
 
             <v-list-item
@@ -42,8 +41,7 @@
                       color="primary"
                       hide-details
                     />
-
-                    <v-list-item-title v-text="item" />
+                    <v-list-item-title>{{ item }}</v-list-item-title>
                   </v-list-item-action>
                 </div>
               </template>
@@ -58,25 +56,24 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
 import axios, { AxiosError } from "axios";
-import { useStore } from "@/store";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
 import useContainersStore from "@/store/modules/containers";
 import useDevicesStore from "@/store/modules/devices";
+import useTagsStore from "@/store/modules/tags";
 
 const props = defineProps<{ variant: "device" | "container" }>();
 
-const store = useStore();
 const containersStore = useContainersStore();
 const devicesStore = useDevicesStore();
+const tagsStore = useTagsStore();
 const snackbar = useSnackbar();
-const prevSelectedLength = ref(0);
-const getListTags = computed(() => store.getters["tags/list"]);
-const selectedTags = computed<Array<string>>(() => store.getters["tags/selected"]);
+const tags = computed(() => tagsStore.tags);
+const selectedTags = ref<Array<string>>([]);
 const tagIsSelected = (tag: string) => selectedTags.value.includes(tag);
 
 const getTags = async () => {
-  await store.dispatch("tags/fetch");
+  await tagsStore.fetchTags();
 };
 
 const fetchDevices = async (filter?: string) => {
@@ -113,18 +110,11 @@ const getItems = async (item: Array<string>) => {
 };
 
 const selectTag = async (item: string) => {
-  store.dispatch("tags/setSelected", item);
-  if (selectedTags.value.length > 0) {
-    await getItems(selectedTags.value);
-    prevSelectedLength.value = selectedTags.value.length;
-  } else if (prevSelectedLength.value === 1 && selectedTags.value.length === 0) {
-    await fetchDevices();
-  }
+  if (tagIsSelected(item)) selectedTags.value = selectedTags.value.filter((tag) => tag !== item);
+  else selectedTags.value.push(item);
 
-  if (selectedTags.value.length === 0) {
-    await store.dispatch("tags/clearSelectedTags");
-    await fetchDevices();
-  }
+  if (selectedTags.value.length) await getItems(selectedTags.value);
+  else await fetchDevices();
 };
 
 onMounted(async () => {

ui/src/components/firewall/FirewallRuleAdd.vue

@@ -175,19 +175,21 @@ import { FormFilterOptions } from "@/interfaces/IFilter";
 import BaseDialog from "../BaseDialog.vue";
 import useAuthStore from "@/store/modules/auth";
 import useFirewallRulesStore from "@/store/modules/firewall_rules";
+import useTagsStore from "@/store/modules/tags";
 
 const snackbar = useSnackbar();
 const store = useStore();
 const authStore = useAuthStore();
 const firewallRulesStore = useFirewallRulesStore();
+const tagsStore = useTagsStore();
 const emit = defineEmits(["update"]);
 const showDialog = ref(false);
 const active = ref(true);
 const action = ref<IFirewallRule["action"]>("allow");
 const selectedIPOption = ref("all");
 const selectedUsernameOption = ref("all");
 const selectedFilterOption = ref(FormFilterOptions.All);
-const availableTags = computed(() => store.getters["tags/list"]);
+const availableTags = computed(() => tagsStore.tags);
 const {
   value: priority,
   errorMessage: priorityError,
@@ -284,7 +286,7 @@ const handleFilterUpdate = async () => {
   if (selectedFilterOption.value === FormFilterOptions.Hostname) setHostnameError("This field is required");
   if (selectedFilterOption.value === FormFilterOptions.Tags) {
     setSelectedTagsError();
-    await store.dispatch("tags/fetch");
+    await tagsStore.fetchTags();
   }
 };