refactor(ui): refactor Tags stores, typing and components

Author: luizhf42

ui/src/components/Tags/TagAutocompleteSelect.vue

@@ -32,16 +32,15 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, nextTick, onUnmounted } from "vue";
 import { useIntersectionObserver } from "@vueuse/core";
-import { ITag } from "@/interfaces/ITags";
 import useSnackbar from "@/helpers/snackbar";
 import useTagsStore from "@/store/modules/tags";
 import handleError from "@/utils/handleError";
 
 const tagsStore = useTagsStore();
 const snackbar = useSnackbar();
 
-const tags = ref<ITag[]>([]);
-const hasMoreTagsToLoad = computed(() => tagsStore.numberTags > tags.value.length);
+const tags = ref(tagsStore.tags);
+const hasMoreTagsToLoad = computed(() => tagsStore.tagCount > tags.value.length);
 const selectedTags = defineModel<string[]>("selectedTags", { required: true });
 const tagSelectorErrorMessage = defineModel<string>("tagSelectorErrorMessage", { required: true });
 const isAutocompleteMenuOpen = ref(false);
@@ -76,11 +75,10 @@ const loadTags = async () => {
   isLoading.value = true;
 
   try {
-    await tagsStore.autocomplete({
+    await tagsStore.fetchTagList({
       filter: encodeFilter(filter.value),
       perPage: itemsPerPage.value,
     });
-    tags.value = tagsStore.list;
   } catch (error) {
     snackbar.showError("Failed to load tags.");
     handleError(error);

ui/src/components/Tags/TagCreate.vue

@@ -13,20 +13,22 @@
     @cancel="close"
     @confirm="create"
   >
-    <div class="px-6 pt-4">
+    <div class="pa-6">
       <v-text-field
-        v-model="inputTags"
+        v-model="tagInput"
         label="Tag name"
-        :error-messages="tagsError"
+        :error-messages="tagError"
         required
+        hide-details="auto"
         data-test="tag-field"
+        @update:model-value="validateTagInput"
       />
     </div>
   </FormDialog>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { ref, computed } from "vue";
 import FormDialog from "@/components/Dialogs/FormDialog.vue";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
@@ -37,25 +39,19 @@ const tagsStore = useTagsStore();
 const snackbar = useSnackbar();
 const showDialog = defineModel<boolean>({ required: true });
 
-const inputTags = ref<string>("");
-const tagsError = ref("");
-const tagsHasLessThan3Characters = computed(() => inputTags.value.length < 3);
-const tenant = computed(() => localStorage.getItem("tenant"));
+const tagInput = ref<string>("");
+const tagError = ref("");
+const confirmDisabled = computed(() => !tagInput.value || !!tagError.value);
 
-watch(inputTags, () => {
-  if (inputTags.value.length > 255) {
-    tagsError.value = "Maximum of 3 tags";
-  } else if (tagsHasLessThan3Characters.value) {
-    tagsError.value = "The minimum length is 3 characters";
-  } else {
-    tagsError.value = "";
-  }
-});
-
-const confirmDisabled = computed(() => !inputTags.value || !!tagsError.value);
+const validateTagInput = () => {
+  const inputLength = tagInput.value.length;
+  if (inputLength > 255) tagError.value = "The maximum length is 255 characters";
+  else if (inputLength < 3) tagError.value = "The minimum length is 3 characters";
+  else tagError.value = "";
+};
 
 const close = () => {
-  inputTags.value = "";
+  tagInput.value = "";
   showDialog.value = false;
 };
 
@@ -65,13 +61,10 @@ const update = () => {
 };
 
 const create = async () => {
-  if (tagsError.value) return;
+  if (tagError.value) return;
 
   try {
-    await tagsStore.createTag({
-      tenant: tenant.value || "",
-      name: inputTags.value,
-    });
+    await tagsStore.createTag(tagInput.value);
 
     snackbar.showSuccess("Successfully created tag");
     update();
@@ -81,5 +74,5 @@ const create = async () => {
   }
 };
 
-defineExpose({ inputTags, showDialog });
+defineExpose({ tagInput, showDialog });
 </script>

ui/src/components/Tags/TagEdit.vue

@@ -5,11 +5,8 @@
     data-test="open-tag-edit"
     @click="open"
   >
-    <div class="d-flex align-center">
-      <div class="mr-2">
-        <v-icon> mdi-pencil </v-icon>
-      </div>
-
+    <div class="d-flex align-center ga-2">
+      <v-icon icon="mdi-pencil"> mdi-pencil </v-icon>
       <v-list-item-title data-test="mdi-information-list-item">
         Edit
       </v-list-item-title>
@@ -30,62 +27,56 @@
     @cancel="close"
     @confirm="edit"
   >
-    <div class="px-6 pt-4">
+    <div class="pa-6">
       <v-text-field
-        v-model="inputTags"
+        v-model="tagInput"
         label="Tag name"
-        :error-messages="tagsError"
+        hide-details="auto"
+        :error-messages="tagError"
         required
         data-test="tag-field"
+        @update:model-value="validateTagInput"
       />
     </div>
   </FormDialog>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { ref, computed } from "vue";
 import FormDialog from "@/components/Dialogs/FormDialog.vue";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
 import useTagsStore from "@/store/modules/tags";
 
-const props = defineProps({
-  tagName: { type: String, required: true },
-  hasAuthorization: { type: Boolean, default: false },
-});
+const props = defineProps<{
+  tagName: string;
+  hasAuthorization?: boolean;
+}>();
 
 const emit = defineEmits(["update"]);
 const tagsStore = useTagsStore();
 const snackbar = useSnackbar();
 
 const showDialog = ref(false);
-const inputTags = ref<string>("");
-const tagsError = ref("");
-
-const tenant = computed(() => localStorage.getItem("tenant"));
-
-const tagsHasLessThan3Characters = computed(() => inputTags.value.length < 3);
-
-watch(inputTags, () => {
-  if (inputTags.value.length > 255) {
-    tagsError.value = "The maximum length is 255 characters";
-  } else if (tagsHasLessThan3Characters.value) {
-    tagsError.value = "The minimum length is 3 characters";
-  } else {
-    tagsError.value = "";
-  }
-});
-
-const confirmDisabled = computed(() => !inputTags.value || !!tagsError.value);
+const tagInput = ref<string>("");
+const tagError = ref("");
+const confirmDisabled = computed(() => !tagInput.value || !!tagError.value);
+
+const validateTagInput = () => {
+  const inputLength = tagInput.value.length;
+  if (inputLength > 255) tagError.value = "The maximum length is 255 characters";
+  else if (inputLength < 3) tagError.value = "The minimum length is 3 characters";
+  else tagError.value = "";
+};
 
 const open = () => {
   showDialog.value = true;
-  inputTags.value = props.tagName;
+  tagInput.value = props.tagName;
 };
 
 const close = () => {
   showDialog.value = false;
-  inputTags.value = "";
+  tagInput.value = "";
 };
 
 const update = () => {
@@ -94,14 +85,13 @@ const update = () => {
 };
 
 const edit = async () => {
-  if (tagsError.value) return;
+  if (tagError.value) return;
 
   try {
-    await tagsStore.editTag({
-      tenant: tenant.value || "",
-      currentName: props.tagName,
-      newName: { name: inputTags.value },
-    });
+    await tagsStore.updateTag(
+      props.tagName,
+      { name: tagInput.value },
+    );
 
     snackbar.showSuccess("Tag updated successfully.");
     update();
@@ -110,6 +100,4 @@ const edit = async () => {
     handleError(error);
   }
 };
-
-defineExpose({ inputTags });
 </script>