Autocomplete for namespace labels

Adjust Fuze settings

frontend-vue/src/components/bounded-context/namespace/ContextureNamespace.vue

@@ -49,12 +49,12 @@
 
       <div class="mt-2">
         <div class="flex items-center" v-for="(newLabel, index) of newLabels" :key="`newLabel-${index}`">
-          <ContextureInputText
+          <NamespaceLabelAutocomplete
             v-model="newLabel.name"
             :name="`newLabelName-${index}`"
             :placeholder="t('common.name')"
             :skip-validation="true"
-          ></ContextureInputText>
+          />
 
           <NamespaceValueAutocomplete v-model="newLabel.value" :namespace-label-name="newLabel.name" />
 
@@ -107,6 +107,7 @@ import ContextureListItem from "~/components/primitives/list/ContextureListItem.
 import { useAuthStore } from "~/stores/auth";
 import { CreateNamespaceLabel, Namespace, NamespaceLabel } from "~/types/namespace";
 import NamespaceValueAutocomplete from "~/components/bounded-context/namespace/NamespaceValueAutocomplete.vue";
+import NamespaceLabelAutocomplete from "~/components/bounded-context/namespace/NamespaceLabelAutocomplete.vue";
 
 interface Props {
   namespace: Namespace;

frontend-vue/src/components/bounded-context/namespace/NamespaceLabelAutocomplete.vue

@@ -0,0 +1,62 @@
+<template>
+  <ContextureAutocomplete
+    v-model="model"
+    class="ml-2 grow"
+    :placeholder="t('common.name')"
+    :suggestions="suggestions"
+    :display-value="(l: any) => l"
+    :allow-custom-values="true"
+    :nullable="true"
+    @complete="searchKeySuggestions($event)"
+  >
+    <template #customValue>
+      <div class="flex items-center justify-items-center align-middle">
+        <Icon:material-symbols:add aria-hidden="true" class="mr-2" />
+        <span>{{ t("common.create-new", { entityName: inputText }) }}</span>
+      </div>
+    </template>
+  </ContextureAutocomplete>
+</template>
+
+<script setup lang="ts">
+import ContextureAutocomplete from "~/components/primitives/autocomplete/ContextureAutocomplete.vue";
+import { useNamespaces } from "~/stores/namespaces";
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import Fuse, { IFuseOptions } from "fuse.js";
+import { storeToRefs } from "pinia";
+
+const fuseOptions: IFuseOptions<string> = {
+  includeScore: true,
+  includeMatches: true,
+  threshold: 0.5,
+  location: 0,
+  distance: 50,
+  minMatchCharLength: 1,
+  keys: ["name"],
+};
+
+const { labelNames } = storeToRefs(useNamespaces()); 
+const { t } = useI18n();
+const suggestions = ref(labelNames.value);
+const fuse = new Fuse(labelNames.value, fuseOptions);
+const model = defineModel<string>();
+const inputText = ref("");
+
+const searchKeySuggestions = (query: string) => {
+  if (!query) {
+    suggestions.value = labelNames.value
+    model.value = undefined;
+    return;
+  }
+
+  inputText.value = query;
+  fuse.setCollection(labelNames.value);
+  const results = fuse.search(query);
+
+  suggestions.value = results.map((result: { item: string }) => {
+    return result.item;
+  });
+  
+};
+</script>

frontend-vue/src/components/bounded-context/namespace/NamespaceValueAutocomplete.vue

@@ -34,9 +34,9 @@ const props = defineProps<Props>();
 const fuseOptions: IFuseOptions<string> = {
   includeScore: true,
   includeMatches: true,
-  threshold: 0.6,
+  threshold: 0.5,
   location: 0,
-  distance: 100,
+  distance: 50,
   minMatchCharLength: 1,
   keys: ["name"],
 };

frontend-vue/src/stores/namespaces.ts

@@ -77,6 +77,15 @@ export const useNamespaces = defineStore("namespaces", () => {
 
     if (!error.value) {
       activeBoundedContext.value!.namespaces = data.value || [];
+
+      const namespace = data.value?.find(n=> n.id === namespaceId);
+      if(namespace)
+      {
+        const idx = namespaces.value.findIndex(n=> n.id == namespace.id);  
+        const updatedNamespaces = [... namespaces.value];
+        updatedNamespaces[idx] = namespace;
+        namespaces.value = updatedNamespaces;
+      }
     }
 
     return {
@@ -96,6 +105,15 @@ export const useNamespaces = defineStore("namespaces", () => {
 
     if (!error.value) {
       activeBoundedContext.value!.namespaces = data.value || [];
+
+      const namespace = data.value?.find(n=> n.id === namespaceId);
+      if(namespace)
+      {
+        const idx = namespaces.value.findIndex(n=> n.id == namespace.id);  
+        const updatedNamespaces = [... namespaces.value];
+        updatedNamespaces[idx] = namespace;
+        namespaces.value = updatedNamespaces;
+      }
     }
 
     return {
@@ -118,6 +136,10 @@ export const useNamespaces = defineStore("namespaces", () => {
     }, {});
   });
 
+  const labelNames = computed<string[]>(()=>{
+    return [... new Set(namespaces.value.map(n=> n.labels).flat().map(l=> l.name))];
+  })
+
   const namespaceLabelValuesByLabelName = computed<{
     [name: string]: string[];
   }>(() => {
@@ -149,6 +171,7 @@ export const useNamespaces = defineStore("namespaces", () => {
     createNamespaceLabel,
     deleteNamespaceLabel,
     findNamespaceLabelValuesByLabelName,
+    labelNames,
     namespaceLabelsByNamespaceName,
     namespaces,
     loading,