Show display name in table after add

vue/dynamicforms/src/components/form/inputs/df-select.vue

@@ -21,7 +21,7 @@ import { DfSelect } from '@dynamicforms/vuetify-inputs';
 /**
  * TODO: There's no demo for AJAX loading. there is one, though in project-base (Impersonate user)
  */
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 import { DfForm } from '../namespace';
 
@@ -40,6 +40,7 @@ interface Emits extends BaseEmits {
 }
 
 const emits = defineEmits<Emits>();
+const firstQuery = ref(true);
 
 const { value, baseBinds } = useInputBase(props, emits);
 
@@ -53,8 +54,38 @@ const options = computed(() => (isAjax.value ? undefined : props.field.choices))
 const multiple = computed(() => props.field.renderParams.multiple);
 const taggable = computed(() => props.field.renderParams.allowTags);
 
+const allOptions = computed(() => {
+  const optionsTmp = [...loadedChoices.value];
+  if (options.value) optionsTmp.push(...options.value);
+  return optionsTmp;
+});
+
+const emitValueChange = (newValue: any) => {
+  if (newValue && allOptions.value) {
+    const text = multiple.value ?
+      newValue.map((i:DfForm.ChoicesJSON) => allOptions.value.find((j) => j.id === i)?.text) :
+      allOptions.value.find((i) => i.id === newValue)?.text;
+    if (text) {
+      emits('update:modelValueDisplay', text);
+      return;
+    }
+  }
+  emits('update:modelValueDisplay', '');
+};
+
 async function queryOptions(query: string, query_field: string): Promise<void> {
   if (!isAjax.value) return;
+  const wasFirst = firstQuery.value;
+  if (wasFirst) {
+    firstQuery.value = false;
+    if (query && query_field === props.field.ajax.value_field) {
+      await queryOptions('', '');
+      if (loadedChoices.value.find((i) => i.id === query)) {
+        emitValueChange(value.value);
+        return;
+      }
+    }
+  }
   /*
     @adam
     If field already defines the choices it is wasteful to query options,
@@ -74,18 +105,29 @@ async function queryOptions(query: string, query_field: string): Promise<void> {
     // Pagination was not delivered. We got a plain array
     loadedData = { results: loadedData, next: null };
   }
-  loadedChoices.value = loadedData.results.map(
+  const loadedChoicesTmp = loadedData.results.map(
     (item: { [key: string]: any }): DfForm.ChoicesJSON => ({
       id: item[props.field.ajax.value_field],
       text: item[props.field.ajax.text_field],
       icon: item[props.field.ajax.icon_field],
     }),
   );
+  if (wasFirst) {
+    loadedChoices.value.push(...loadedChoicesTmp);
+    emitValueChange(value.value);
+  } else {
+    loadedChoices.value = loadedChoicesTmp;
+  }
   limit.value = loadedData.next ? loadedChoices.value.length : 99999;
 }
 
 async function fetchChoices(queryValue?: string, idValue?: any | any[]) {
   await queryOptions(idValue || queryValue, idValue ? props.field.ajax.value_field : props.field.ajax.query_field);
   return loadedChoices.value;
 }
+
+watch(value, (newValue) => {
+  emitValueChange(newValue);
+});
+
 </script>