Publish current project state

frontend/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, watch, onMounted, ref } from 'vue';
+import { computed, watch, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
 
@@ -25,9 +25,26 @@ const hoveredLabel = ref(null);
 
 const allLabels = useMapGetter('labels/getLabels');
 const contactLabels = useMapGetter('contactLabels/getContactLabels');
+const hasContactLabels = useMapGetter('contactLabels/hasContactLabels');
+const contactLabelsUIFlags = useMapGetter('contactLabels/getUIFlags');
+const currentContactId = computed(
+  () => props.contactId || route.params.contactId
+);
+
+const labelsLoaded = computed(
+  () =>
+    Boolean(currentContactId.value) &&
+    hasContactLabels.value(currentContactId.value)
+);
+const isBusy = computed(
+  () =>
+    !labelsLoaded.value ||
+    contactLabelsUIFlags.value.isFetching ||
+    contactLabelsUIFlags.value.isUpdating
+);
 
 const savedLabels = computed(() => {
-  const availableContactLabels = contactLabels.value(props.contactId);
+  const availableContactLabels = contactLabels.value(currentContactId.value);
   return allLabels.value.filter(({ title }) =>
     availableContactLabels.includes(title)
   );
@@ -55,6 +72,9 @@ const fetchLabels = async contactId => {
 };
 
 const handleLabelAction = async ({ value }) => {
+  if (isBusy.value) {
+    return;
+  }
   try {
     // Get current label titles
     const currentLabels = savedLabels.value.map(label => label.title);
@@ -76,7 +96,7 @@ const handleLabelAction = async ({ value }) => {
     }
 
     await store.dispatch('contactLabels/update', {
-      contactId: props.contactId,
+      contactId: currentContactId.value,
       labels: updatedLabels,
     });
 
@@ -91,18 +111,14 @@ const handleRemoveLabel = label => {
 };
 
 watch(
-  () => props.contactId,
+  () => currentContactId.value,
   (newVal, oldVal) => {
-    if (newVal !== oldVal) {
+    if (newVal && newVal !== oldVal) {
       fetchLabels(newVal);
     }
-  }
+  },
+  { immediate: true }
 );
-onMounted(() => {
-  if (route.params.contactId) {
-    fetchLabels(route.params.contactId);
-  }
-});
 
 const handleMouseLeave = () => {
   // Reset hover state when mouse leaves the container