Homepage, lepsi POI

src/components/inputs/ComboboxInput.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted, ref, watch} from "vue";
+import {ref, watch} from "vue";
 
 const props = defineProps({
   modelValue: {
@@ -19,6 +19,16 @@ const props = defineProps({
     type: Array,
     required: true,
   },
+  optionLabel: {
+    type: String,
+    required: false,
+    default: "name"
+  },
+  optionValue: {
+    type: String,
+    required: false,
+    default: "id"
+  }
 })
 
 const model = ref({});
@@ -32,6 +42,9 @@ watch(model, (val) => {
 
   let value = val;
   if (typeof val === 'string') value = {name: val};
+  if (value['__typename']) {
+    delete value['__typename'];
+  }
   emit("update:modelValue", value);
 })
 
@@ -72,7 +85,6 @@ const filterFn = (val, update, abort) => {
     availableOptions.value = availableOptions.value.map(i => ({id: i.id, name: i.name}))
   })
 }
-
 </script>
 
 <template>
@@ -80,23 +92,23 @@ const filterFn = (val, update, abort) => {
     v-model="model"
     use-input
     input-debounce="100"
-    :display-value="`${model?.name || ''}`"
+    :display-value="`${model ? model[optionLabel] : ''}`"
     :rules="rules"
     @filter="filterFn"
     @input-value="inputValueChanged"
     @blur="handleOnBlur"
     @clear="clearValue"
     :options="availableOptions"
-    option-label="name"
-    option-value="id"
+    :option-label="optionLabel"
+    :option-value="optionValue"
     :new-value-mode="enableNewValues ? 'add' : 'toggle'"
     clear-icon="clear"
     :v-bind="$attrs"
   >
-    <template v-slot:no-option>
+    <template v-slot:no-option v-if="enableNewValues">
       <q-item v-if="inputValue">
         <q-item-section avatar>
-          <q-avatar text-color="green" size="32px"  icon="add" />
+          <q-avatar text-color="green" size="32px" icon="add"/>
         </q-item-section>
         <q-item-section class="text-grey">
           <span>Vytvořit novou hodnotu <q-chip>{{ inputValue }}</q-chip></span>